HTML基础-06-表格（表＜table＞ ，行 ＜tr＞，列 ＜tb＞，表头 ＜th＞，跨列colspan，跨行rowspan，单元格边距 cellpadding，单元格间距cellspacing）
文章目录
- 1. 表< table > ，行 < tr >，列 < tb >
- 2. 表头 < th >
- 3. 表名 < caption >
- 4. 跨列 colspan
- 5. 跨行 rowspan
- 6. 单元格边距 cellpadding
- 7. 单元格间距 cellspacing
- 8. 表内标签
- 9. 一个示例
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 | |
