首页 > Web开发 > 详细

HTML中的table布局

时间:2017-03-16 21:24:58      阅读:213      评论:0      收藏:0      [点我收藏+]
<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布局

原文:http://www.cnblogs.com/liuxuhtml/p/6561454.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!