HTML5-表格table

很多人说,表格已经过时了,当然比起很流行的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>

效果图

HTML5-表格table

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

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

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

更改引号里面的数字并删除或添加对应的td就可以实现更多行和列的跨越啦

我们来看看代码和效果吧

代码

<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>

效果图

HTML5-表格table

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

上一篇:网页规划与设计HTML5+CSS大作业——响应式个人简历介绍(5页)-模板下载


下一篇:HTML5学习(一)