首页 > 代码库 > HTML中的table布局

HTML中的table布局

<table width="100" height="50" border="1" bgcolor="blue">
        <caption>我是表头</caption>
        <tr>
            <th>哈哈1</th>
            <th>哈哈2</th>
            <th>哈哈3</th>
        </tr>
        <tr>
            
            <td bgcolor="red">4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            
            <td colspan="3">2</td>
            <!-- <td>2</td>
            <td>3</td> -->
        </tr>
    </table>

 

我是表头
哈哈1哈哈2哈哈3
4 5 6
2

 

 

table 中可以直接设置表格的宽 高 背景色 边框长度

caption标签为表头,不占用表格空间。

tr代表行,th/td代表单元格,单元格内可设置colspan=“x”实现跨多列,rowspan实现跨多行  也可以设置此单元格的背景色。

表格内文字对齐   通过设置align=“left、right、center” 实现。

以前接触前端的时候就是从table学起,当时感觉很有意思,短短几行代码就可以实现一个表格的功能,现在感觉table太low了,都懒得写。

当然table布局还是有一定缺点的:

  (1)table布局会占用更多的字节,影响加载速度。

  (2)table布局编写起来麻烦耗时,既不利于设计思维,影响开发者阅读体验。

  (3)不利于浏览器的顺序渲染。

HTML中的table布局