No.9 HTML5--表格标签
一、表格标签构成
- 表格：<table></table>
- 行：<tr></tr>
- 单元格（列）：<td></td>
<body>
<table border="1" width="400px" height="200px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
- 快捷键：
table>tr*4>td*3{单元格}，回车
- 表格属性：
- border="1"
- width="400px"
- height="200px"
二、表格单元格合并
水平合并：colspan （参数代表合并单元格的个数）
垂直合并：rowspan
2.1 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1" width="400px" height="200px">
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
</tr>
<tr>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
<td>单元格8</td>
</tr>
<tr>
<td>单元格9</td>
<td>单元格10</td>
<td>单元格11</td>
<td>单元格12</td>
</tr>
<tr>
<td>单元格13</td>
<td>单元格14</td>
<td>单元格15</td>
<td>单元格16</td>
</tr>
</table>
</body>
</html>
合并代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1" width="400px" height="200px">
<tr>
<td>单元格1</td>
<td colspan="3">单元格2</td>
<td>单元格3</td> <td>单元格4</td> </tr> <tr> <td>单元格5</td> <td>单元格6</td> <td>单元格7</td> <td>单元格8</td> </tr> <tr> <td>单元格9</td> <td>单元格10</td> <td>单元格11</td> <td rowspan="2">单元格12</td>
</tr>
<tr>
<td>单元格13</td>
<td>单元格14</td>
<td>单元格15</td>
<td>单元格16</td>
</tr>
</table>
</body>
</html>
同时合并行和列：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1" width="400px" height="200px">
<tr>
<td>单元格1</td>
<td colspan="3">单元格2</td>
</tr>
<tr>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
<td>单元格8</td>
</tr>
<tr>
<td colspan="2" rowspan="2">单元格9</td>
<td>单元格11</td>
<td rowspan="2">单元格12</td>
</tr>
<tr>
<td>单元格15</td>
</tr>
</table>
</body>
</html>
记得删除原来的单元格10 ，13 和14，
浙公网安备 33010602011771号