1. 概述
- 在
css技术
出现之前,网页通常使用表格布局
。 - 由于表格的
渲染速度过慢
,嵌套太深
,布局较为复杂
,所以在出现css之后网页布局一般都不用表格了。 - 但是
后台还在使用
,因为后台是面向管理员的,对界面要求不高,对功能性要求高
2. 表格的主要作用
- 表格主要用于显示数据、展示数据,因为它可以让数据显示的非常规整,可读性非常好。
- 特别是后台展示数据的时候,能够熟练运用表格就显得很重要。
- 一个清爽简约的表格能够把很复杂的数据表现的很有条理
- 总结:表格不是用来布局页面的,而是用来
展示数据
的
3. 表格元素
table
整个表格caption
表格标题thead
表头tbody
表格主体tfoot
表尾tr
表格行th
表头单元格(或称标题单元格)td
普通单元格
4. 表格的属性
- 表格标签这部分属性我们实际开发中不常用,后面通过CSS来设置
- 这些属性写在
table
标签的行内,数值都不需要单位,用字符串的形式书写
5. 表格边框空隙处理
border-collapse:
边框的折叠方式,默认值separate
分离,collapse
折叠。此属性写在table
元素里cellPadding="0"
cellSpacing="0"
也可以去掉表格空隙,此属性写在table
元素里
6. 合并单元格(难点)
6.1 单元格列合并(横向合并
)
- 把一行合并成一个单元格
长度只有一个单元格的长度:
此行里面只写一个单元格长度为此行原先长度:
此行只写一个单元格,并且在此单元格中添加一个属性colspan="5"
,合并几个单元格就写几
6.2 单元格行合并(纵向合并
)
- 把某个单元格纵向合并,在此单元格里面添加
rowspan属性
rowspan="2"
表示从自己开始往后数,合并2个单元格- 把后面被合并的单元格去掉
7. 表格在网页中的对齐方式
align:
设置表格在网页中的水平对齐方式left
、center
、right
,写在table
元素中
8. 总结表格
- 表格提供了HTML 中定义表格式数据的方法。
- 表格中由行中的单元格组成。
- 表格中没有列元素,列的个数取决于行的单元格个数。
- 表格不要纠结于外观,那是CSS 的作用。
9. 设置单元格的宽度
- 给
table
元素添加table-layout: fixed;
- 或者给
td
添加word-break: break-all
,都可以达到表格安装我们设置的宽度显示: