认识HTML一一表格的结构
表格的结构
观察下面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>细线表格</title>
</head>
<body>
<table bgcolor="black" cellspacing="1px" width="870px" >
<caption><h2>今日小说排行榜</h2></caption>
<tr bgcolor="white" >
<th>排行</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr bgcolor="white">
<td>第一名</td>
<td>《斗罗大陆》</td>
<td>上升</td>
<td>100000</td>
<td>100000</td>
<td><a href="##">链接</a> <a href="##">论坛</a> <a href="##">帖子</a></td>
</tr>
<tr bgcolor="white">
<td>第二名</td>
<td>《斗罗2》</td>
<td>上升</td>
<td>99999</td>
<td>99999</td>
<td><a href="##">链接</a> <a href="##">论坛</a> <a href="##">帖子</a></td>
</tr>
<tr bgcolor="white">
<td>第3名</td>
<td>《斗罗2》</td>
<td>上升</td>
<td>99998</td>
<td>99998</td>
<td><a href="##">链接</a> <a href="##">论坛</a> <a href="##">帖子</a></td>
</tr>
<tr bgcolor="white">
<td>第4名</td>
<td>《诛仙》</td>
<td>上升</td>
<td>99997</td>
<td>99997</td>
<td><a href="##">链接</a> <a href="##">论坛</a> <a href="##">帖子</a></td>
</tr>
</table>
</body>
</html>
运行结果如图所示：
查看一下源代码：
由于表格中存储的数据比较复杂，为了方便管理和利于提升语义，我们可以对表格中存储的数据进行分类，表格中存储的数据可以分为4类
1.表格的标题
2.表格的表头信息
3.表格的主体信息。
4.表格的页尾信息。
如图所示：
表格的格式
整体结构
thead-------表格的表头信息
tbody--------表格的主体信息
tfoot----------表格的附加信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>细线表格</title>
</head>
<body>
<table bgcolor="black" cellspacing="1px" width="870px" >
<caption><h2>今日小说排行榜</h2></caption>
<thead>
<tr bgcolor="white" >
<th>排行</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr bgcolor="white">
<td>第一名</td>
<td>《斗罗大陆》</td>
<td>上升</td>
<td>100000</td>
<td>100000</td>
<td><a href="##">链接</a> <a href="##">论坛</a> <a href="##">帖子</a></td>
</tr>
<tr bgcolor="white">
<td>第二名</td>
<td>《斗罗2》</td>
<td>上升</td>
<td>99999</td>
<td>99999</td>
<td><a href="##">链接</a> <a href="##">论坛</a> <a href="##">帖子</a></td>
</tr>
<tr bgcolor="white">
<td>第3名</td>
<td>《斗罗2》</td>
<td>上升</td>
<td>99998</td>
<td>99998</td>
<td><a href="##">链接</a> <a href="##">论坛</a> <a href="##">帖子</a></td>
</tr>
<tr bgcolor="white">
<td>第4名</td>
<td>《诛仙》</td>
<td>上升</td>
<td>99997</td>
<td>99997</td>
<td><a href="##">链接</a> <a href="##">论坛</a> <a href="##">帖子</a></td>
</tr>
</tbody>
<tfoot >
<tr bgcolor="white"><td >附注：</td></tr></tfoot>
</table>
</body>
</html>
运行结果如下：
注：1）后面学合并单元格时，各位在优化这张表格
2）如果指定thead和tfoot的宽度和高度，那么不会随表格的宽度变化而变化
