p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}li.li1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}li.li3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}span.s1 {font: 12.0px 'PingFang SC'}span.s2 {font: 12.0px Helvetica}span.Apple-tab-span {white-space:pre}ul.ul1 {list-style-type: hyphen}
表格元素
一、元素
<table>:表示表格
<tr>：行
<td>：列
<th>:标题单元格,默认加粗,文字居中
<th>,<td>均属于单元格，包含两个合并属性，colspan(列合并),rowspan(行合并)
<thead>添加表头,
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
</thead>
不管这段代码放在编辑器的什么位置，显示的时候都会显示在表格的第一行。
<tfoot>添加表脚,意思同表头
<tbody>,表主体
<caption>，表标题。紧挨着表格的上方居中显示表格的标题。
<colgroup>,设置列，为了处理某个列，span属性定义处理哪些列。1：第一列，2：表示前两列。如果要单独设置第二列，那么需要声明两个，先处理第一个，将列点移入第二位，在处理第二个即可。
<col>更灵活的设置列。表示单独一列，一个表示一列，控制更加的灵活。如果设置了span则控制多列。
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; 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>
</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>
</table>
<br>
<table border="1" style="width:300px;">
<tr>
<th rowspan="4">基本情况</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 colspan="3">统计：共两人</td>
</tr>
</table>
<br>
<table border="1" style="width:300px;">
<caption>这是一个表格</caption>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<!--表脚 -->
<tfoot>
<tr>
<td colspan="3">统计：共两人</td>
</tr>
</tfoot>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<!--表头 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
</thead>
</table>
<br>
<table border="1" style="width:300px;">
<colgroup span="1" style="background:green">
<colgroup span="1" style="background:red">
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
</body>
</html>
