一、表格的基本结构
表格由行、列、单元格三部分组成,单元格是行与列交叉的部分,可以拆分和合并。
表格<table>
,行<tr>
,单元格<td>
单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
1、标准化的表格结构
*<table>
定义表格
*<caption>
定义表格标题<caption>
必须紧随<table>
后,且唯一
*<th>
定义表头单元格(文本粗体、居中)
*<tr>
定义表格中的一行
*<td>
定义表格中的一个单元格
*<thead>
定义表头结构
*<tbody>
定义表格主体结构
*<tfoot>
定义表格的页脚结构
*<col>
在表格中定义针对一个或多个列的属性值。只能在<table>
或<colgroup>
标签中使用
*<colgroup>
定义表格列的分组,可以对列组进行格式化。只能在<table>
标签中使用
2、创建表格
HTML有两种类型的单元格
表头单元格(居中、粗体)和标准单元格(普通,左对齐)
3、结构化的表格
thead、tbody和tfoot元素可以对表格中的行进行分组。
<tfoot>
中有个colspan属性可以横向合并单元格
4、列分类
<col>
和<colgroup>
可以对表格中的列进行分组
span是<colgroup>
和<col>
标签的专用属性,规定列组应该横跨的列数
5、<table>
的属性
border(可以定义边框粗细),Cellpadding,cellspacing,width,frame,rules,summary
值 | 说明 |
---|---|
void | 不显示外侧边框 |
above | 显示上部的外侧边框 |
below | 显示下部的外侧边框 |
hsides | 显示上部和下部的外侧边框 |
vsides | 显示左边和右边的外侧边框 |
lhs | 显示左边的外侧边框 |
rhs | 显示右边的外侧边框 |
box | 在所有四个边上显示外侧边框 |
border | 在所有四个边上显示外侧边框 |
值 | 说明 |
---|---|
none | 没有线条 |
groups | 位于行组和列组之间的线条 |
rows | 位于行之间的线条 |
cols | 位于列之间的线条 |
all | 位于行和列之间的线条 |
6、单元格跨列或跨行显示
colspan和rowspan是两个重要的单元格属性,分别用来定义单元格可跨列或跨行显示。
7、定义表头单元格
scope属性可以将单元格与表头单元格联系起来
属性取值:row|col|rowgroup|colgroup|
8、为单元格指定表头
headers属性可以为单元格指定表头,该属性值是一个表头名称的字符串,id定义的。
9、为机器键索服务的属性
abbr:可以为单元格内容定义缩写版本
axis:可以对单元格进行分类。它是引号包括的一列类型的名称…(目前没有浏览器支持)
二、CSS样式
CSS为表格定义了5个专用属性
属性 | 取值 | 说明 |
---|---|---|
border-collapse | separate(边分开)|collapse(边合并) | 定义表格的的行和单元格的边是合并在一起还是分开 |
border-spacing | length | 定义当表格边框独立式,行和单元格的边在横向和纵向上的间距 |
caption-side | top|bottom | 定义表格的caption对象位于表格的顶部或底部,应与caption元素一起使用 |
empty-cells | show|hide | 定义当单元格五内容时,是否显示该单元格的边框 |
table-layout | auto|fixed | 定义表格的布局算法,fixed一次一次呈递内容,更快。auto所有内容读取完了才会显示出来 |
1、用CSS的border属性代替table标签的border属性,提升效率
2、兼容<table>
标签的cellspacing属性,CSS定义了border-spacing属性