文章目录
1. 表< table > ,行 < tr >,列 < tb >
- 语法
每个 < table > 是一个表格 →
其中每个< tr > 是一列 →
其中每个 < tb > 是一格
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事(runoob.com)</title>
</head>
<body>
<h4>一列:</h4>
<table border="1">
<tr>
<td>刘备</td>
</tr>
</table>
<h4>一行三列:</h4>
<table border="1">
<tr>
<td>刘备</td>
<td>关羽</td>
<td>张飞</td>
</tr>
</table>
<h4>两行三列:</h4>
<table border="1">
<tr>
<td>刘备</td>
<td>关羽</td>
<td>张飞</td>
</tr>
<tr>
<td>孙尚香</td>
<td>曹月娥</td>
<td>夏侯涓</td>
</tr>
</table>
- 输出
2. 表头 < th >
- 语法
<th>表头</th>
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<h4>水平标题:</h4>
<table border="1">
<tr>
<th>姓</th>
<th>名</th>
<th>字</th>
</tr>
<tr>
<td>关</td>
<td>羽</td>
<td>云长</td>
</tr>
</table>
- 输出
3. 表名 < caption >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<caption>人员姓名字</caption>
<table border="1">
<tr>
<th>姓</th>
<th>名</th>
<th>字</th>
</tr>
<tr>
<td>关</td>
<td>羽</td>
<td>云长</td>
</tr>
</table>
</body>
</html>
- 结果输出
4. 跨列 colspan
- 语法
<th colspan="2">xxxxx</th>
在th里还是在td里都可以
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">姓名</th>
<th>字</th>
</tr>
<tr>
<td>关</td>
<td>羽</td>
<td>云长</td>
</tr>
</table>
</body>
</html>
- 输出
5. 跨行 rowspan
- 语法
<th rowspan="2">xxxx</th>
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<h4>单元格跨两行:</h4>
<table border="1">
<tr>
<th rowspan="2">姓名</th>
<td>关</td>
</tr>
<tr>
<td>羽</td>
</tr>
<tr>
<th>表字</th>
<td>云长</td>
</tr>
</table>
</body>
</html>
- 输出
6. 单元格边距 cellpadding
- 语法
cellpadding="50"
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<h4>有单元格边距:</h4>
<table border="1" cellpadding="50">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
7. 单元格间距 cellspacing
- 语法
cellspacing="10"
- 示例
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
8. 表内标签
- 语法
直接嵌套就可以了
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<table border="1">
<tr>
<td>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</td>
<td>这个单元格包含一个表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元格包含一个列表
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
- 输出
9. 一个示例
受理员业务统计表 |
2017-01-02---2017-05-02 |
受理员 | 受理数 | 自办数 | 直接解答 | 拟办意见 | 返回修改 | 工单类型 | |||||
同意 | 比例 | 数量 | 比例 | 建议件 | 诉求件 | 咨询件 | |||||
受理处 | 关羽 | ||||||||||
总计 | 20 | 20 | 20 | 20 | 20 | 20 | 20 | 20 | 20 | 20 | |
话务组 | 关羽 | ||||||||||
关羽 | |||||||||||
关羽 | |||||||||||
关羽 | |||||||||||
总计 | 20 | 20 | 20 | 20 | 20 | 20 | 20 | 20 | 20 | 20 |