HTML5：表格

表格的作用是显示二维数据。在HTML5中不再同意用表格控制页面内容的布局。而是採用新增的CSS表格特性（这里不涉及CSS，将在后面介绍）。

以下主要介绍用于制作表格的HTML元素。

构建表格

表格的基本元素包含：table、tr和td。

table表示HTML文档中的表格。支持border属性，用于定义表格边框的宽度；
tr表示表格中的行；
td表示表格中的单元格，包含例如以下属性：
1）colspan：规定单元格可横跨的列数；
2）rowspan：规定单元格可横跨的行数；
3）headers：规定与单元格相关的标头，该属性不会在普通浏览器中产生不论什么视觉变化。但能够被屏幕阅读器使用。

<table>
	<tr>
		<td>Apples</td>
		<td>Green</td>
		<td>Medium</td>
	</tr>
	<tr>
		<td>Oranges</td>
		<td>Orange</td>
		<td>Large</td>
	</tr>
</table>

上面定义了一个两行、三列的表格，使用表格的优点是：浏览器会保证列的宽度满足最宽的内容。让行的高度满足最高的单元格。

表格边框

使用table元素的border属性，能够为表格加入边框。

<table border="1">
	<tr>
		<td>Apples</td>
		<td>Green</td>
		<td>Medium</td>
	</tr>
	<tr>
		<td>Oranges</td>
		<td>Orange</td>
		<td>Large</td>
	</tr>
</table>

浏览器的默认边框不太美观。通常还须要用CSS来为为各种元素重设边框样式。

不规则表格

使用单元格的colspan和rowspan属性能够构建不规则表格。使表格的某些行或者列跨越多个单元格。以下是一个单元格跨多列的一个样例：

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td colspan="2">January</td>
  </tr>
  <tr>
    <td colspan="2">February</td>
  </tr>
</table>

以下是一个单元格跨多行的一个样例：

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100.00</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$10.00</td>
  </tr>
</table>

表头

th元素用于为表格加入表头。能够用来区分数据和对数据的说明。th元素支持例如以下属性：
1）colspan：规定单元格可横跨的列数。
2）rowspan：规定单元格可横跨的行数。
3）scope：定义将表头数据与单元数据相关联的方法。
3）headers：由空格分隔的表头单元格ID列表。为数据单元格提供表头信息，该属性不会在普通浏览器中产生不论什么视觉变化，但能够被屏幕阅读器使用。

<table>
	<tr>
		<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>

能够在一行中混合使用th和td。

让单元格关联表头

使用td的headers属性能够将单元格和表头关联。关联的目的主要是供屏幕阅读器和其它残障辅助技术用来简化对表格的处理。headers属性能够为一个或多个th单元格的id属性值：

<table border="1" width="100%">
  <tr>
	<th id="name">Name</th>
	<th id="Email">Email</th>
	<th id="Phone">Phone</th>
	<th id="Address">Address</th>
  </tr>
  <tr>
	<td headers="name">George Bush</td>
	<td headers="Email">someone@example.com</td>
	<td headers="Phone">+789451236</td>
	<td headers="Address">Fifth Avenue New York,USA</td>
  </tr>
</table>

构造复杂表头

使用th的colspan和rowspan属性能够构造复杂表头。

<table border="1">
  <tr>
    <th colspan="2">Company in USA</th>
  </tr>
  <tr>
    <th>Name</th><th>Addr</th>
  </tr>
  <tr>
    <td>Apple, Inc.</td>
    <td>1 Infinite Loop Cupertino, CA 95014</td>
  </tr>
  <tr>
    <td>Google, Inc.</td>
    <td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
  </tr>
</table>

为表格加入结构

能够使用thead、tbody和tfoot元素来为表格加入结构，这样能够让为表格各个部分加入CSS样式变得更加easy。

1）表格主题
tbody元素表示构成表格主题的全体行，不包括表头行（thead元素表示）和表脚行（tfoot元素表示）。
注意大多数浏览器在处理table元素时都会自己主动插入tbody元素。
2）表格表头
thead元素用来标记表格的标题行。假设没有thead元素的话，全部tr元素都会被视为表格主体的一部分。
3）加入脚注
tfoot元素用来标记组成表脚的行。在HTML5之前tfoot元素仅仅能出如今tbody元素之前，而在HTML5中则同意将tfoot元素放在tbody之后。
以下是一个综合的样例，里面使用了tbody、thead和tfoot元素。

<table>
	<thead>
		<tr>
			<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
		</tr>
	</tfoot>
	<tbody>
		<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>
	</tbody>
</table>

为表格加入标题

使用caption元素能够为表格定义一个标题。并将其与表格关联起来。

<table>
	<caption>Results of the 2011 Fruit Survey</caption>
	<thead>
		<tr>
			<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
		</tr>
	</tfoot>
	<tbody>
		<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>
	</tbody>
</table>

一个表格仅仅能包括一个caption元素。无需是表格的第一个元素，但始终显示在表格上方。

列分组

在表格中，因为表格都是按行组建的。导致对列的操作不太方便，比如为表格的某列定义样式。

能够使用colgroup元素来指定列的分组。

<html>
<head>
    <style>
        #colgroup1{background-color: red}
        #colgroup2{background-color: green; font-size=small}
    </style>
</head>
<body>
<table width="100%" border="1">
  <colgroup id="colgroup1" span="2" ></colgroup>
  <colgroup id="colgroup2"></colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
</table>
</body>
</html>

上面的样例中指定了两个列的组，第一个包括前2列。第二个包括剩下的1列，并为不同的分组指定了不同的样式。colgroup的span属性指定扩展几列，假设不指定span属性，也能够指定一个或多个col元素，以下的样例达到了和上面样例一样的效果。

<html>
<head>
    <style>
        #colgroup1{background-color: red}
        #col3{background-color: green; font-size=small}
    </style>
</head>
<body>
<table width="100%" border="1">
  <colgroup id="colgroup1">
	<col id="col1And2" span="2"/>
	<col id="col3"/>
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/mfmdaoyou/p/7137265.html