0
点赞
收藏
分享

微信扫一扫

HTML5-表格table

高子歌 2022-01-06 阅读 80

很多人说,表格已经过时了,当然比起很流行的div布局相比,table的使用频率确实很少,但是在一些特定的场景下,用表格来进行装填,是很方便的,会极大减少我们的代码量

table标签和我们div,p,h等标签一样,自定义是看不见边框的

如果我们想要看见它可以利用css样式来给它定义

我们来看一看我们的表格吧

语法

<table>
            <tr>
                <td>姓名</td>
                <td>联系方式</td>
                <td>地址</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>123456788</td>
                <td>地球</td>
            </tr>
            <tr>
                <td>小明</td>
                <td>123456788</td>
                <td>地球</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>123456788</td>
                <td>地球</td>
            </tr>
      </table>

效果图

当然,我们很多时候需要取消其中的一些线那就需要两个辅助的代码来实现这些效果啦

cospan属性跨列,实现左右的列表格的合并

rowspan属性跨行,实现上下格的合并

我们来看看代码和效果吧

代码

<table>
            <tr>
                <td colspan="2"></td>
                <td rowspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>

效果图

 

边框效果是通过css定义来实现的,如果不加边框只会存在空间而不会看见,不能说没有实现效果哦,在后面会有css的基础讲解

举报

相关推荐

0 条评论