<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
table{
border-collapse: collapse;
width: 100%;
font-size: 14px;
color: #666;
border:solid 1px #0047E1;
}
table caption{
font-size: 24px;
line-height: 60px;
color: #000;
font-weight: bold;
}
/*表格头部颜色，最深的蓝色*/
table thead{
background:#0047E1;
color: #fff;
font-size: 16px;
}
/*定义隔行背景色，改善视觉效果*/
table tbody tr:nth-child(odd){
background:#eee;
}
/*定义鼠标滑过上方的颜色*/
table tbody tr:hover{
background:#ddd;
color: #000;
}
/*定义表格主体区域内文本首行缩进*/
table tbody{
text-indent: 1em;
}
/*定义表格主体区域内列标题样式*/
table tbody th {
text-align:left;
background:#7E9DE5;
text-indent:0;
color:#D8E4F8;
}
</style>
</head>
<body>
<div id="apDiv">
<table width="100%">
<!-- <col> 标签为表格中一个或多个列定义属性值。
如需对全部列应用样式，<col> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
您只能在 table 或 colgroup 元素中使用 <col> 标签。 -->
<!-- 第1列分组 -->
<col class="col1"/>
<!-- 第2列分组 -->
<col class="col2"/>
<!-- caption本来是指表格外面最上面一行标题，默认文本加粗，这里没有写文本内容，也就没有什么意义了 -->
<caption>
<thead>
<tr>
<!-- 定义列标题 -->
<th>表格</th>
<!-- 定义列标题 -->
<th>描述</th>
</tr>
</thead>
<tbody>
<!-- “基本结构”一行 -->
<tr>
<th colspan="2">基本结构</th>
</tr>
<!-- 下面紧跟4行 -->
<tr>
<td>table</td>
<td>定义表格</td>
</tr>
<tr>
<td>tr</td>
<td>定义表格的行</td>
</tr>
<tr>
<td>td</td>
<td>定义表格单元</td>
</tr>
<tr>
<td height="20">th</td>
<td>定义表格页眉</td>
</tr>
<!-- 定义第2行到结尾为主体区域 -->
<!-- “列分组”一行 -->
<!-- HTML 表单中有两种类型的单元格：
1、表头单元格 - 包含表头信息（由 th 元素创建）
2、标准单元格 - 包含数据（由 td 元素创建）
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。 -->
<tr>
<!-- 所以,tr里面可以包含th -->
<th colspan="2">列分组</th>
</tr>
<!-- 下面紧跟2行 -->
<tr>
<td>colgroup</td>
<td>定义表格列的组</td>
</tr>
<tr>
<td>col</td>
<td>定义用于表格列的属性</td>
</tr>
<!-- “行分组”一行 -->
<tr>
<th colspan="2">行分组</th>
</tr>
<!-- 下面紧跟3行 -->
<tr>
<td>thead</td>
<td>定义表格的页眉</td>
</tr>
<tr>
<td>tbody</td>
<td>定义表格的主体</td>
</tr>
<tr>
<td>tfoot</td>
<td>定义表格的页脚</td>
</tr>
<!-- “其它”一行 -->
<tr>
<th colspan="2">其它</th>
</tr>
<tr>
<td>caption</td>
<td>定义表格标题</td>
</tr>
</tbody>
</caption>
</table>
</div>
</body>
</html>
E252C0E4-B0BA-476A-9737-05F1694D59FB.png
网友评论