HTML 表格（下）
HTML 表格1. 设置单元格背景色和文字颜色
设置单元格背景色和文字颜色要用到 CSS 的 background 和 color 属性。例如：
<!DOCTYPE html>
<html>
<head>
<title>表格练习</title>
<style>
table, th, td {
/*
1px 指定边框宽度为 1 像素
solid 指定边框为实线
red 指定边框的颜色为红色
*/
border: 1px solid red;
border-collapse: collapse;
/* 这里设置内边距为 5 像素 */
padding: 5px;
}
/* 表头的背景色为 #999999，文字颜色为 #2eb14f */
th {
background: #999999;
color: #2eb14f;
}
/* 单元格的背景色为 #ab90b9，文字颜色为 #4744ff */
td {
background: #ab90b9;
color: #4744ff;
}
</style>
</head>
<body>
<table>
<!-- caption 元素用于指定表格的标题 -->
<caption>
鱼 C 论坛
</caption>
<!-- tr 是表格的每一行 -->
<tr>
<!-- th 是表格的表头 -->
<th>用户名</th>
<th>UID</th>
</tr>
<tr>
<!-- td 是表格普通的单元格 -->
<td>小甲鱼</td>
<td>9</td>
</tr>
<tr>
<td>不二如是</td>
<td>378930</td>
</tr>
<tr>
<td>冬雪雪冬</td>
<td>326976</td>
</tr>
<tr>
<td>zltzlt</td>
<td>702609</td>
</tr>
</table>
</body>
</html>
显示效果：
2. thead、tbody 和 tfoot
thead、tbody、tfoot 元素用于将表格划分为表头、表格体和表尾三个部分。
例如：
<!DOCTYPE html>
<html>
<head>
<title>表格练习</title>
<style>
table, th, td {
/*
1px 指定边框宽度为 1 像素
solid 指定边框为实线
red 指定边框的颜色为红色
*/
border: 1px solid red;
border-collapse: collapse;
/* 这里设置内边距为 5 像素 */
padding: 5px;
}
/* 表头的背景色为 #999999，文字颜色为 #2eb14f */
th {
background: #999999;
color: #2eb14f;
}
/* 单元格的背景色为 #ab90b9，文字颜色为 #4744ff */
td {
background: #ab90b9;
color: #4744ff;
}
</style>
</head>
<body>
<table>
<!-- caption 元素用于指定表格的标题 -->
<caption>鱼 C 论坛</caption>
<!-- thead 表格表头 -->
<thead>
<tr>
<th>用户名</th>
<th>UID</th>
</tr>
</thead>
<!-- tbody 表格主体 -->
<tbody>
<tr>
<!-- td 是表格普通的单元格 -->
<td>小甲鱼</td>
<td>9</td>
</tr>
<tr>
<td>不二如是</td>
<td>378930</td>
</tr>
<tr>
<td>冬雪雪冬</td>
<td>326976</td>
</tr>
<tr>
<td>zltzlt</td>
<td>702609</td>
</tr>
</tbody>
</table>
<tfoot>
<p>来源于：<a href="https://fishc.com.cn">鱼 C 论坛</a></p>
</tfoot>
</body>
</html>
显示效果：
3. 跨行显示
th 和 td 元素有 rowspan 和 colspan，用于设置该单元格横跨的列数或纵跨的行数。例如：
<!DOCTYPE html>
<html>
<head>
<title>表格练习</title>
<style>
table, th, td {
/*
1px 指定边框宽度为 1 像素
solid 指定边框为实线
red 指定边框的颜色为红色
*/
border: 1px solid red;
border-collapse: collapse;
/* 这里设置内边距为 5 像素 */
padding: 5px;
}
/* 表头的背景色为 #999999，文字颜色为 #2eb14f */
th {
background: #999999;
color: #2eb14f;
}
/* 单元格的背景色为 #ab90b9，文字颜色为 #4744ff */
td {
background: #ab90b9;
color: #4744ff;
}
</style>
</head>
<body>
<table>
<!-- caption 元素用于指定表格的标题 -->
<caption>鱼 C 论坛</caption>
<!-- thead 表格表头 -->
<thead>
<tr>
<th></th>
<th>用户名</th>
<th>UID</th>
</tr>
</thead>
<!-- tbody 表格主体 -->
<tbody>
<tr>
<!-- 横跨 5 行 -->
<th rowspan="5">每个人</th>
<!-- 横跨 3 列 -->
<th colspan="2">以下是信息：</th>
</tr>
<tr>
<td>小甲鱼</td>
<td>9</td>
</tr>
<tr>
<td>不二如是</td>
<td>378930</td>
</tr>
<tr>
<td>冬雪雪冬</td colspan="2">
<td>326976</td>
</tr>
<tr>
<td>zltzlt</td colspan="2">
<td>702609</td>
</tr>
</tbody>
</table>
<tfoot>
<p>来源于：<a href="https://fishc.com.cn">鱼 C 论坛</a></p>
</tfoot>
</body>
</html>
显示效果：
4. 设置列样式
通过 colgroup 和 col 元素可以设置每一列的样式。例如：
<!DOCTYPE html>
<html>
<head>
<title>colgroup 练习</title>
<style>
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<!-- 设置第 1 列背景为蓝色，第 2、3 列背景为橙色 -->
<colgroup>
<col style="background: blue;" />
<!-- span 属性表示横跨两列 -->
<col span="2" style="background: orange;" />
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
显示效果：
页:
[1]