<span>6-表格</span>
有些类型的信息需要用网格或是表格来呈现。例如：体育比赛成绩，股市行情和列车时刻表等。
当使用表格来表示信息时，你首先需要构建一个由行和列组成的网格（有点像电子表格）。你将在本节中学习以下内容：
1.用于创建表格的四个元素。2.使用表格表示复杂的数据。3.给表格添加说明。
用于创建表格的四个元素
-网格通过两个轴线上的引用信息来让我们理解复杂的数据。
-网格中的每个块称为表格的一个单元格。在HTML中，表格按照行的顺序逐行进行编写。
基本的表格结构
<table>
<table>元素用来创建表格。表格的内容逐行填写。
<tr>
你需要起始标签<tr>来表示每行的开始。(tr表示table row)
<tr>之后是一个或多个<td>元素（每个<td>元素代表所在行的一个单元格）
在一行的末尾你要加上结束标签</tr>。
<td>
表格中的每个单元格用<td>元素表示（td表示table data）。
你需要在每个单元格的末尾加上结束标签</td>
有些浏览器会自动为表格和单元格加边框，也可以学习如何利用CSS控制表格的边框。
eg:
<html>
<body>
<table>
<tr>
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
<tr>
<td>60</td>
<td>90</td>
<td>90</td>
</tr>
</table>
</body>
</html>
效果如下图：
表格的标题
<th>
<th>元素和<td>元素的用法一样，但它的作用是表示列或行的标题（th代表table heading）。
即使一个单元格中没有任何内容，你仍需使用<td>或<th>元素来表示一个空单元格的存在，否则该表将无法正确呈现。在下面的示例中，第一行的第一个单元格显示为一个空单元格。
在表格的标题上使用<th>元素可以帮助那些使用屏幕阅读的用户，提升搜索引擎为你页面编写索引的能力，还可以在你开始使用CSS以后让你更好地控制表格的外观。
可在<th>元素上使用scope特性来表明此元素是列标题还是行标题。scope特性可以取以下值：row指明这是一个行标题，col指明这是一个列标题。
浏览器通常以粗体显示<th>元素的内容，并在单元格内居中显示这些内容。
eg:
<html>
<body>
<table>
<tr>
<th></th>
<th scope="col">Saturady</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Tickets sold:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th scope="row">Total sales:</th>
<td>$600</td>
<td>$675</td>
</tr>
</table>
</body>
</html>
效果如下图:
跨列
有时你可能需要让表格中的某个单元格跨越多个列。我们可在<th>或<td>元素中用colspan特性来表明单元格所要跨越的列数。
在下面的示例中，你可以看到一个列数为5的课程表。第一列所包含的是所在行的标题（星期几），其余四列各代表一小时的时段。
看一下包含单词“Geography”的单元格，你会发现此单元格的colspan特性值为2，这表明单元格横跨两列。
eg:
<html>
<body>
<table>
<tr>
<th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</tr>
<tr>
<th>Monday</th>
<td colspan="2">Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan="3">Gym</td>
<td>Home Ec</td>
</tr>
</table>
</body>
</html>
效果如下图：
跨行
有时你可能还需要表中某个单元格跨越多行。
在<th>或<td>元素中使用rowspan特性来表明单元格所要跨越的的行数。
在下侧的示例中，你可以看到ABC在6点到8点之间播出电影，然而BBC和CNN频道在在同样的时间段都播出两套节目（每套节目持续一个小时）。
看一下最后一个<tr>元素，尽管在结果图中显示为4列，但它仅包含3个元素。这是因为上一个<tr>元素中的Movie单元格使用了rowspan特性，使得这个单元格向下延伸并占据了在其下面的单元格。
eg:
<html>
<body>
<table>
<tr>
<th></th>
<th>ABC</th>
<th>BBC</th>
<th>CNN</th>
</tr>
<tr>
<th>6pm ~ 7pm</th>
<td rowspan="2">Movie</td>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm ~ 8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
<tr>
<th>7pm ~ 8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
</table>
</body>
</html>
结果如下图：
长表格
有3种元素有助于区分表格的主体内容、第1行和最后一行(它们可以包含不同的内容)。
这些元素会对那些使用屏幕阅读器的人们有所帮助，并且允许你按照不同于表格中其余部分的方式来定义这些元素的样式(当你学习CSS时就会明白这一点)。
<thread>
表格的标题应放到<thread>元素中。
<tbody>
表格的主题部分应放到<tbody>元素中。
<tfoot>
表格的脚注应放在<tfoot>元素中。
默认情况下，很少有浏览器在外观上将这几种元素中的内容与其他元素的内容区别对待，但设计人员经常使用CSS样式来改变它们的外观。
eg:
<html>
<body>
<table>
<thead>
<tr>
<th>Date</th>
<th>Income</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<th>1st January</th>
<td>250</td>
<td>36</td>
</tr>
<tr>
<th>2nd January</th>
<td>67</td>
<td>219</td>
</tr>
</tbody>
<tfoot>
<td></td>
<td>7834</td>
<td>1234</td>
</tfoot>
</table>
</body>
</html>
效果如下：
小结
<table>元素用来向网页中添加表格。
表格是逐行绘制的。行是由<tr>元素创建的。
每行中都有一定数量的<td>元素（表示标题时使用<th>元素）表示单元格。
可利用rowspan和colspan特性来使表格中的单元格跨越多行或多列。
对于长表格，可以将表格分为<thead>,<thead>,<tbody>三个部分。
查看2道真题和解析
小红书公司福利 636人发布
