tr 一行
td 一列
border 边框
cellspacing 单元格与单元格之间的距离
cellpadding 单元格与文字之间的距离
width 宽
height 高
bordercolor 边框颜色
backgroundcolor 背景颜色
align 居中{直接给表格使用,表格居中。给tr或者td使用,tr或td的内容居中}
例子1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" width="500" height="500" cellpadding="10" bordercolor="red" bgcolor="pink" align="center">
<tr align="left">
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr align="center">
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr >
<tr align="right">
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
</table>
</body>
</html>
运行结果
表格的合并
colspan 水平合并,保留左边,删除右边
rowspan 垂直合并,保留上边,删除下边
caption 表头
例子2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>合并单元格6和7 colspan</p>
<p>合并单元格15和20 rowspan</p>
<caption>课程表</caption>
<table border="1" cellspacing="0" height="500" width="500" align="center">
<tr>
<th>单元格1</th>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<th colspan="2">单元格6 7</th>
<td>单元格8</td>
<td>单元格9</td>
<td>单元格10</td>
</tr>
<tr>
<th colspan="2" rowspan="2">单元格11</th>
<td>单元格13</td>
<td>单元格14</td>
<td rowspan="2">单元格15 20</td>
</tr>
<tr>
<td>单元格18</td>
<td>单元格19</td>
</tr>
<tr>
<td>单元格21</td>
<td>单元格22</td>
<td>单元格23</td>
<td>单元格24</td>
<td>单元格25</td>
</tr>
</table>
</body>
</html>
运行结果
小练习:做一个课程表
源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<caption>课程表</caption>
<table border="1" cellspacing="0" width="500" height="500" align="center" bordercolor="green">
<tr align="center">
<td colspan=2></td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr align="center">
<td rowspan="2">上午</td>
<td>1</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>化学</td>
<td>美术</td>
</tr>
<tr align="center">
<td>2</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr align="center">
<td rowspan="2">下午</td>
<td>3</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr align="center">
<td>4</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
</table>
</body>
</html>
运行结果