首页 > 代码库 > 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布局
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。