表格用table定义,标签标题用caption标签定义;用tr定义表格的若干行;用td定义若干个单元格;(当单元格是表头时,用th标签定义)(th标签会略粗于td标签)
table的整体外观取决于属性,border:定义表格边框的粗细
width:定义表格的宽度
height:定义表格的宽度
cellspacing:定义表项间隙,i为像素数
cellpadding:定义表项内部空白,j为像素数
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格示例</title>
</head>
<body>
<table>
<caption>班级名单</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>专业</th>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>大数据与信息处理技术</td>
</tr>
<tr>
<td>李四萍</td>
<td>女</td>
<td>软件工程</td>
</tr>
<tr>
<td>王五一</td>
<td>女</td>
<td>计算机科学与技术</td>
</tr>
</table>
<table border="1" cellspacing="10" cellpadding="20">
<caption>班级名单</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>专业</th>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>大数据与信息处理技术</td>
</tr>
<tr>
<td>李四萍</td>
<td>女</td>
<td>软件工程</td>
</tr>
<tr>
<td>王五一</td>
<td>女</td>
<td>计算机科学与技术</td>
</tr>
</table>
</body>
</html>
跨行单元格:
合并单元格:跨行单元格就是竖向合并,跨列单元格就是横向合并。在th标签当中,可以使用rowspan和colspan两个属性,分别表示单元格纵跨多少行和横跨多少列。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨行跨列表格示例</title>
</head>
<body>
<table width="300" border="2">
<tr>
<td colspan="3">课程成绩</td> <!-- 设置单元格水平跨 3 列 -->
</tr>
<tr>
<td rowspan="2">语文</td> <!-- 设置单元格垂直跨 2 行 -->
<td>期中</td>
<td>89</td>
</tr>
<tr>
<td>期末</td>
<td>92</td>
</tr>
<tr>
<td rowspan="2">英语</td> <!-- 设置单元格垂直跨 2 行 -->
<td>期中</td>
<td>95</td>
</tr>
<tr>
<td>期末</td>
<td>90</td>
</tr>
</table>
</body>
</html>
用thead、tbody和tfooter标签实现表格分组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分组表格示例</title>
</head>
<body>
<table border="0" width="420"><!-- 设置表格宽度为 420px,无边框 -->
<caption>成绩汇总表</caption>
<thead style="background:#FAF0E6"><!-- 设置表格的页眉 -->
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead><!-- 表格页眉结束 -->
<tbody style="background:#FFFAF0"><!-- 设置表格主体 -->
<tr>
<td>张三丰</td>
<td>90</td>
<td>92</td>
<td>98</td>
</tr>
<tr>
<td>李四萍</td>
<td>96</td>
<td>100</td>
<td>90</td>
</tr>
<tr>
<td>王五一</td>
<td>93</td>
<td>97</td>
<td>97</td>
</tr>
</tbody><!-- 表格主体结束 -->
<tfoot style="background:#FAF0E6"><!-- 设置表格的数据页脚 -->
<tr>
<td>平均分数</td>
<td>93</td>
<td>96</td>
<td>95</td>
</tr>
</tfoot><!-- 表格页脚结束 -->
</table>
</body>
</html>
用colgroup和col来调整列的格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分组表格示例</title>
</head>
<body>
<table border="1">
<colgroup>
<col width="150" style="background:#FFFAF0">
<col width="100" style="background:#8d8d8d">
<col width="200" style="background:#FFFAF0">
</colgroup>
<tr>
<th>姓名</th>
<th>性别</th>
<th>专业</th>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>大数据与信息处理技术</td>
</tr>
<tr>
<td>李四萍</td>
<td>女</td>
<td>软件工程</td>
</tr>
<tr>
<td>王五一</td>
<td>女</td>
<td>计算机科学与技术</td>
</tr>
</table>
</body>
</html>