表格的基本结构
表格是网页上最平常的元素，它除了能够用来展示数据，还常常被用来排版。虽然此刻提倡运用DIV+CSS完成页面布局，但表格框架简单明了，针对繁杂的数据，一个简洁的表格能让其展现的极有条理。
简单来讲，表格是由于行、列（单元格）构成。表格由 <table> 标签来定义。每一个表格均有若干行（由 <tr> 标签定义），每行又由若干单元格（即列，由 <td> 标签定义）构成。表格单元格里能够包括文本、照片、列表、段落、表单、水平线、表格（嵌套）等等。
别罗嗦，看代码。
下面的代码是一个两行两列的表格。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<table><!--表格起始-->
<tr><!--表格第1行-->
<td>姓名</td><!--第1行第1个单元格-->
<td>张三</td><!--第1行第二个单元格-->
</tr>
<tr><!--表格第二行-->
<td>民族</td><!--第二行第1个单元格-->
<td>汉族</td><!--第二行第二个单元格-->
</tr>
</table><!--表格结束-->
</body>
</html>
表格默认是无边框的，下面的效果图加入了边框，目的是能让表格的结构更清晰。
表格的标准结构
表格除了行<tr>和单元格<td>，还能够有标题<caption>和表头<th>。另一，表格的语义化还将表格分为表格页眉<thead>、表格主体<tbody>、表格页脚<tfoot>三个部分。引入语义化，能够让表格结构更清晰、代码语义更良好。
下面的示例代码加入了标题和表头，同期引入了表格语义化，将表格分为页眉、主体。页脚三个部分，表格语义化是不是添加不会影响到表格的表示效果。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<table><!--表格起始-->
<caption>第1学期学生成绩表</caption><!--表格标题-->
<thead><!--表格页眉-->
<tr><!--第1行-->
<th>姓名</th><!--表头-->
<th>语文</th>
<th>数学</th>
<th>理学</th>
</tr>
</thead>
<tbody><!--表格主体-->
<tr><!--第二行-->
<td>张小明</td>
<td>80</td>
<td>90</td>
<td>80</td>
</tr>
<tr><!--第三行-->
<td>王小花</td>
<td>90</td>
<td>70</td>
<td>80</td>
</tr>
</tbody>
<tfoot><!--表格页脚-->
<tr><!--第四行-->
<td>平均分</td>
<td>85</td>
<td>80</td>
<td>80</td>
</tr>
</tfoot>
</table><!--表格结束-->
</body>
</html>
表格默认是无边框的，下面的效果图加入了边框，目的是能让表
| 
发表于 2024-6-30 08:39:22
