表格就是以网格的形式显示二维数据。
表格的基本构成最少需要三个元素<table>(表格的声明)、<tr>(一行单元格)、<td>(一个单元格)。
*建立一个表格/有固定长度的表格
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>表格元素</title>
</head>
<body>
<table border="1">
<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>
<br>
<table border="1" style="width: 300px;">
<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>
运行结果：
用双标签<table>来声明一个表格，每一行用双标签<tr>，每一行至少有一个单元格，每个单元格用双标签<td>来括起来。<table>里有一个属性border默认为0，这时表格是没有边框的，上面的例子将border属性设置为1就看到了边框。双标签<th>用于表头单元格，表头单元格的文字默认为加粗的。本例中将<table>的公有属性style的width设置为300px实现了固定表格长度(而不是随字扩展)。
*横向合并和纵向合并单元格
<!DOCTYPE html>运行结果：
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>表格元素</title>
</head>
<body>
<table border="1" style="width: 300px;">
<tr>
<th rowspan="5">基本情况</th>
<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>
<tr>
<td colspan="3">合计:共3人</td>
</tr>
</table>
</body>
</html>
在单元格上设置属性colspan="3"表示向右合并共三个单元格。设置属性rowspan="5"表示向下合并共5个单元格。
*固定表头和表脚的位置
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>表格元素</title>
</head>
<body>
<table border="1" style="width: 300px;">
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tfoot>
<tr>
<td colspan="3">合计:共3人</td>
</tr>
</tfoot>
<tr>
<td>李四</td>
<td>女</td>
<td>未婚</td>
</tr>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
</thead>
<tr>
<td>王五</td>
<td>男</td>
<td>已婚</td>
</tr>
</table>
</body>
</html>
运行结果：
可以发现，虽然表头和表脚在代码中没有在它应该有的位置(为什么会出现这种情况，以后在JavaScript学习时会知道)，但是由于分别放在了双标签<thead>和双标签<tfoot>中，就不用担心它在编写时的位置了。另外，标准的表格中也应将表格的主体放入双标签<tbody>中。
*用双标签<colgroup>及其子标签<col>设置列
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>表格元素</title>
</head>
<body>
<table border="1" style="width: 300px;">
<tfoot>
<tr>
<td colspan="3">合计:共3人</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>未婚</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>已婚</td>
</tr>
</tbody>
<colgroup style="background: pink" span="1"></colgroup>
<colgroup style="background: green" span="2"></colgroup>
<caption>这是一个表格的标题</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
</thead>
</table>
<table border="1" style="width: 300px;">
<tfoot>
<tr>
<td colspan="3">合计:共3人</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>未婚</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>已婚</td>
</tr>
</tbody>
<colgroup>
<col>
<col style="background: red">
</colgroup>
<caption>这是一个表格的标题</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
</thead>
</table>
</body>
</html>
运行结果：
可以看到span属性表示继续向右选择几列作控制。如果在<colgroup>标签中使用，假如要选择第2~3列就要对第一列也使用这个标签。第二种方法直接使用了<colgroup>的子标签<col>，在这个例子中先用了一个<col>作占位符占掉第一列，从而第二个<col>将直接对第二列进行操作。
另外，在双标签<table>中直接使用双标签<caption>就可以给表格添加标题。
这几天心情确实不好，逐渐调整吧。