HTML Table
2018-11-24 本文已影响0人
roy_pub
表格标签
用来显示数据，不是用来布局
| 属性 | 意义 |
|---|---|
| border | 边框 |
| width | 宽度 |
| align | left, center, right |
| cellspacing | 单元格之间的距离 |
| cellpadding | 单元格与内容之间的距离 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
</head>
<body>
<table border="1" width="500" align="center" cellspacing="0" cellpadding="6">
<caption>学生成绩表</caption>
<thead>
<tr align="center">
<th>成绩</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>小明</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
<tr align="center">
<td>小红</td>
<td>96</td>
<td>100</td>
<td>99</td>
</tr>
<tr align="center">
<td>小张</td>
<td>54</td>
<td>23</td>
<td>19</td>
</tr>
</tbody>
</table>
</body>
</html>
合并单元格
- rowspan 跨行合并
- colspan 跨列合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
</head>
<body>
<table border="1" width="500" align="center" cellspacing="0" cellpadding="6">
<caption>合并单元格</caption>
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td>6</td>
<td rowspan="2">7</td>
<td>9</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
</tr>
</table>
</body>
</html>
