<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格标签</title>
</head>
<body>
<!--
tr是块元素 table row 行
th是行元素 table header 表头
td 单元格数据 table data
border:表格的边框
cellspacing:单元格之间的空隙
cellpadding:文本距离单元格边框的距离
thead 、tbody了解即可，是划分数据范围的，thead是表头部分、tbody是数据部分
-->
<table border="2" cellspacing="0" cellpadding="20px" width="400px">
<!--caption 表格的名字-->
<caption>学习表</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jane</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>lily</td>
<td>女</td>
<td>19</td>
</tr>
<tr>
<td>3</td>
<td>tom</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>4</td>
<td>Bank</td>
<td>男</td>
<td>21</td>
</tr>
</tbody>
</table>
<!------------------------------------------------------------------------>
<!--table 单元格合并-->
<table border="1px" cellpadding="10px" cellspacing="0" >
<tr>
<td colspan="2">单元格1</td>
<!--<td>单元格2</td>-->
<td></td>
<td>单元格4</td>
<td rowspan="2">单元格5</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td></td>
<td>单元格4</td>
<!--<td>单元格5</td>-->
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td colspan="5">单元格1</td>
<!--<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>-->
</tr>
<tr>
<td>单元格1</td>
<td rowspan="3">单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td>单元格1</td>
<!--<td>单元格2</td>-->
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td>单元格1</td>
<!--<td>单元格2</td>-->
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
</table>
网友评论