您的位置：首页 > Web前端 > HTML5

HTML5权威指南笔记：11-表格元素

2017-10-24 16:32 447 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航