1 生成基本的表格
table元素 | |
---|---|
元素类型 | 流 |
允许具有的父元素 | 任何可以包含流元素的元素 |
局部属性 | border |
内容 | caption 、colgroup 、thead 、tbody 、tfoot 、tr 、th和td元素 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | summary 、align 、width 、bgcolor 、cellpadding 、cellspacing 、frame和rules属性已不再使用,其功能改用css实现。border属性的值必须设置为1 。表格边框的粗细必须用css设置 |
习惯样式 | table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; } |
tr元素表示表格中的行
tr元素 | |
---|---|
元素类型 | 无 |
允许具有的父元素 | table 、thead 、tfoot和tbody元素 |
局部属性 | 无 |
内容 | 一个或多个td或th元素 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | align 、char 、charoff 、valign和bgcolor属性已不再使用, 其功能改用css实现 |
习惯样式 | tr { display: table-row; vertical-align: inherit; border-color: inherit;} |
td元素表示表格中的单元格
td元素 | |
---|---|
元素类型 | 无 |
允许具有的父元素 | tr元素 |
局部属性 | colspan 、rowspan 、headers |
内容 | 流内容 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | scope属性已不再使用。abbr 、axis 、align 、width 、char 、charoff 、valign 、bgcolor 、height和nowrap属性已不再使用,其功能改用css实现 |
习惯样式 | td { display: table-cell; vertical-align: inherit; } |
例子:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!--每个表格都必须要有的: table 、tr和td-->
<table>
<tr>
<td>Apples</td>
<td>Green</td>
<td>Medium</td>
</tr>
<tr>
<td>Oranges</td>
<td>Orange</td>
<td>Large</td>
</tr>
</table>
</body>
</html>
2 添加表头单元格
th元素 | |
---|---|
元素类型 | 无 |
允许具有的父元素 | t玩素 |
局部属性 | colspan 、rowspan 、scope和headers |
内容 | 短语内容 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | scope 属性已不再使用; abbr 、axis 、align 、width 、char 、charoff 、valign 、bgcolor 、height和nowrap属性已不再使用,其功能改用css实现 |
习惯样式 | th { display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center; } |
例子:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<tr>
<!--th元素表示表头的单元格,它可以用来区分数据和对数据的说明-->
<th>Rank</th><th>Name</th>
<th>Color</th><th>Size</th>
</tr>
<tr>
<th>Favorite:</th>
<td>Apples</td><td>Green</td><td>Medium</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Oranges</td><td>Orange</td><td>Large</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>Pomegranate</td><td>A kind of greeny-red</td>
<td>Varies from medium to large</td>
</tr>
</table>
</body>
</html>
3 为表格添加结构
tbody元素表示构成表格主体的全体行
tbody元素 | |
---|---|
元素类型 | 无 |
允许具有的父元素 | table元素 |
局部属性 | 无 |
内容 | 零个或多个tr元素 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | align 、char 、charoff和valign属性已不再使用 |
习惯样式 | tbody { display: table-row-group; vertical-align: middle; border-color: inherit; } |
thead元素用来标记表格的标题行
thead元素 | |
---|---|
元素类型 | 无 |
允许具有的父元素 | table元素 |
局部属性 | 无 |
内容 | 零个或多个tr元素 |
标签用法 | 无 |
是否为HTML5新增 | 开始标签和结束标签 |
在HTML5中的变化 | align 、char、charoff和valign属性已不再使用 |
习惯样式 | thead { display: table-header-group; vertical-align: middle; border-color: inherit; } |
tfoot元素用来标记组成表脚的行
tfoot元素 | |
---|---|
元素类型 | 无 |
允许具有的父元素 | table元素 |
局部属性 | 无 |
内容 | 零个或多个tr元素 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | tfoot元素现在出现在tbody或tr元素前后都可以。在HTML4中, 它只能出现在这些元素之前。align 、char 、charoff和valign属性已不再使用 |
习惯样式 | tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit; } |
例子:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<!--如果没有thead元素的话,所有tr元素都会被视为表格主体的一部分-->
<thead>
<tr>
<th></th>
</tr>
</thead>
<!--即便在文档中表格没有用到tbody元素,大多数浏览器在处理table元素的时候都会自动插入tbody元素。
所以table> tr这个选择器会失效。
为了应对这种情况,需要使用table> tbody > tr或table tr (没有字符> )这样的选择器,或者干脆写成tbody > tr 。-->
<tbody>
<tr>
<th>:</th><td></td>
</tr>
</tbody>
<!--在HTML5 中则可以把tfoot元素放在tbody元素之后或最后一个tr元素之后-->
<tfoot>
<tr>
<th></th>
</tr>
</tfoot>
</table>
</body>
</html>
4 制作不规则表格
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<tr>
<!--想让一个单元格横跨多列要用colspan属性。-->
<td colspan="2">1</td>
<!--想让一个单元格纵跨多行要用rowspan属性-->
<td rowspan="3">2</td>
</tr>
</table>
</body>
</html>
注意:
- 为rowspan和colspan设置的值必须是整数。有些浏览器会把100%这个值理解为表格中所有的行或列
- colspan和rowspan属性应该用在要占据的网格左上角那个单元格上
5 把表头与单元格关联起来
td和th元素都定义了headers属性, 它可以供屏幕阅读器和其他残障辅助技术用来简化对表格
的处理。headers属性的值可被设置为一个或多个th单元格的id属性值
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<thead>
<tr>
<th id="rank">Rank</th>
<th id="name">Name</th>
<th id="color">Color</th>
<th id="sizeAndVotes" colspan="2">Size & Votes</th>
</tr>
</thead>
<tbody>
<tr>
<!--tbody 中的每一个td和th 元素都通过设置headers属性将相应单元格与列表头关联起来-->
<th id="first" headers="rank">Favorite:</th>
<td headers="name first">Apples</td>
<td headers="color first">Green</td>
<td headers="sizeAndVote first">Medium</td>
<td headers="sizeAndVote first">500</td>
</tr>
<tr>
<th id="second" headers="rank">2nd Favorite:</th>
<td headers="name second">Oranges</td>
<td headers="color second">Orange</td>
<td headers="sizeAndVote second">Large</td>
<td headers="sizeAndVote second">450</td>
</tr>
</tbody>
</table>
</body>
</html>
6 为表格添加标题
caption元素 | |
---|---|
元素类型 | 无 |
允许具有的父元素 | table元素 |
局部属性 | 无 |
内容 | 流内容(但不能是table元素) |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | align属性已不再使用 |
习惯样式 | caption { display: table-caption; text-align: center; } |
例子:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<!--caption元素可以用来为表格定义一个标题并将其与表格关联起来
一个表格只能包含一个caption元素。它不必是表格的第一个子元素, 但是无论定义在什么
位置, 它总会显示在表格上方。-->
<caption></caption>
</table>
</body>
</html>
7 处理列
使用css对列进行处理可以使用colgroup和col元素
colgroup元素 | |
---|---|
元素类型 | 无 |
允许具有的父元素 | table元素 |
局部属性 | span |
内容 | 零个或多个col元素(只有未设置span属性时才能使用) |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | width 、char 、charoff和valign属性已不再使用 |
习惯样式 | colgroup { display: table-column-group; } |
例子:
<!DOCTYPE HTML>
<html>
<head>
<style>
/*样式处理*/
#colgroup1 {background-color: red}
#colgroup2 {background-color: green; font-size:small}
</style>
</head>
<body>
<table>
<!--span属性指定了colgroup元素负责的列数
这里表示colgroup1控制前3列,colgroup2控制后2列-->
<colgroup id="colgroup1" span="3"/>
<colgroup id="colgroup2" span="2"/>
</table>
</body>
</html>
1. 应用到colgroup上的css样式在具体程度上低于直接应用到tr、td和th元素上的样式
2. 不规则单元格被计入其起始列
3. colgroup元素的影响范围覆盖了列中所有的单元格,包括那些位thead和tfoot元素中的单元格,不管它们是用th还是td元素定义的
4. 影响到的元素并未包含在其内部。因此该元素无法用做更具体的选择的基础(如#colgroupl > td这个选择器不会有任何匹配元素)。
用col元素指定组中的各列
col元素 | |
---|---|
元素类型 | 无 |
允许具有的父元素 | colgroup元素 |
局部属性 | span |
内容 | 无 |
标签用法 | 虚元素形式 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | align 、width、char 、charoff和valign属性巳不再使用 |
习惯样式 | col { display: table-column; } |
例子:
<!DOCTYPE HTML>
<html>
<head>
<style>
#colgroup1 {background-color: red}
#col3 {background-color: green; font-size:small}
</style>
</head>
<body>
<table>
<colgroup id="colgroup1">
<!--能对一组列应用样式,也能对该组中个别的列应用样式
可以用col元素的span属性让一个col元素代表几列。不用span属性的col元素只代表一列
这里表示col1And2控制头2列,col3控制col1And2后的一列-->
<col id="col1And2" span="2"/>
<col id="col3"/>
</colgroup>
</table>
</body>
</html>
8 设置表格边框
table元素定义了border这个属性就是告诉浏览器这个表格是用来表示表格式数据
而不是用来布置其他元素的
- border属性的值必须设置为1 或空字符串
- 不设置表格的border属性也能用css为其定义边框。不过,如果没有border属性,那么浏览器可能会认为表格是用于处理布局事宜的,因此其显示表格的方式可能会预想的不一样。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table border="1">
<caption>Results of the 2011 Fruit Survey</caption>
<colgroup id="colgroup1">
<col id="col1And2" span="2"/>
<col id="col3"/>
</colgroup>
<colgroup id="colgroup2" span="2"/>
<thead>
<tr>
<th>Rank</th><th>Name</th><th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th><td>Apples</td><td>Green</td>
<td>Medium</td><td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
<td>Large</td><td>450</td>
</tr>
<tr>
<th>3rd Favorite:</th><td>Pomegranate</td>
<td colspan="2" rowspan="2">
Pomegranates and cherries can both come in a range of colors
and sizes.
</td>
<td>203</td>
</tr>
<tr>
<th rowspan="2">Joint 4th:</th>
<td>Cherries</td>
<td rowspan="2">75</td>
</tr>
<tr>
<td>Pineapple</td>
<td>Brown</td>
<td>Very Large</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">© 2011 Adam Freeman Fruit Data Enterprises</th>
</tr>
</tfoot>
</table>
</body>
</html>