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）不利于浏览器的顺序渲染。

转载于:https://www.cnblogs.com/liuxuhtml/p/6561454.html