<table></table> 定义表格区域
border 表格边框
<tr></tr> 定义表格的行
<td></td> 行中的单元格
<th></th> 表格表头
<caption></cantion> 表格标题
colspan 水平合并
rowspan 垂直合并
table border caption colspan rowspan
表格基本结构
一个最基本的HTML表格包括<table>,<tr>,<td>这三种标签，他们是双标签结构，这三个标签搭配使用就可以创建一个基础表格，其中<table></table>定义了一个表格的区域，<tr></tr>构成了表格的行，<td></td>是行中的一个单元格。
语法：
<table>
<tr>
<td>...内容</td>
</tr>
</table>
<body>
<table>
<tr>
<td>一行一列的单元格</td>
<td>一行二列的单元格</td>
<td>一行三列的单元格</td>
</tr>
<tr>
<td>二行一列的单元格</td>
<td>二行二列的单元格</td>
<td>二行三列的单元格</td>
</tr>
</table>
</body>
在浏览器中展示效果如下
表格边框属性border
语法：
<table border="属性值">...</table>
border属性要写在<table>标签中， 并且border属性值只表示是否显示表格边框，只
允许为“1”或者“ ” (默认值为：空)。
<body>
<table border="1">
<tr>
<td>一行一列的单元格</td>
<td>一行二列的单元格</td>
<td>一行三列的单元格</td>
</tr>
<tr>
<td>二行一列的单元格</td>
<td>二行二列的单元格</td>
<td>二行三列的单元格</td>
</tr>
</table>
</body>
在浏览器中展示效果如下
表格表头<th>
一般把<th>标签放在第一行<tr>内来使用，表示表格的表头。
<body>
<table border="1">
<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>
在浏览器中展示效果如下：
表格标题<caption>
<caption>标签可以为表格添加一个标题。<caption>标签是双标签结构，必须写到<table>开始标签之后，每个表格只能设置一个标题。
<body>
<table border="1">
<caption>表格的标题</caption>
<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>
在浏览器中的展示效果如下：
表格单元格合并
单元格水平跨度colspan
<td colspan="数字(要合并的单元格个数)">...</td>
单元格垂直跨度rowspan
<td rowspan="数字(要合并的单元格个数)">...<td>
表格间嵌套
一个表格的单元格内部再嵌入另一个表格。
例子：
HTML代码块：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套表格</title>
</head>
<body>
<table border="1">
<caption>表格嵌套（外层表格）</caption>
<tr>
<td rowspan="2">一行一列</td>
<td>
<table border="1">
<tr>
<td>内层一行一列</td>
</tr>
<tr>
<td>内层二行一列</td>
</tr>
</table>
</td>
<td>一行三列</td>
</tr>
<tr>
<td colspan="2">二行 二 三列</td>
</tr>
</table>
</body>
</html>运行结果：
更多推荐
03 HTML_网页中的表格
发布评论