1.基本标签
标签名 | 说明 |
---|---|
table | 表示整体,用于包裹多个tr |
tr | 表格每行,用于包裹td |
td | 表格单元格,用于包裹内容 |
注意点:
表格嵌套关系:table>tr>td
表格table的常见属性:
修饰table属性的标签 需要写道table里面
border="1"边框 cellpadding="4"字与单元格之间的距离
cellspacing=“0” 取消单元格之间的距离
<table align="center" border="1" cellpadding="40" cellspacing="10">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>李旭亮</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>饭桶</td>
<td>未知</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>-18</td>
</tr>
</table>
2.其他标签:
表格结构标签
标签名 | 名称 |
---|---|
thead | 表格头部 |
tbody | 表格主体 |
tfoot | 表格底部 |
<table align="center" border="1" cellspacing="0" width="300">
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>44</td>
</tr>
<tr>
<td>李四</td>
<td>66</td>
</tr>
<tr>
<td>王五</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>210</td>
</tr>
</tfoot>
</table>
3.合并单元格
一:合并单元格步骤:
1、明确合并哪几个单元格
2、通过左上原则,确定保留谁,删除谁
上下合并–只保留最上的,删除其他
左右合并–只保留最左的,删除其他
3、给保留的单元格设置:
跨行合并–rowspan
跨列合并–colspan
注意点:
只有同一个结构标签的单元格才能合并,不能跨结构标签合并
(不能跨:thead、tbody、tfoot)
<table border="1" cellspacing="0" width="300" height="500">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td colspan="2"></td>
</tr>
<tr>
<!-- 7和10合并,先把10删除,再在7所在的位置上添加rowspan -->
<td rowspan="2">7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- 把13,14合并,需要先把14删除。
再把13的位置上添加colspan -->
<td colspan="2">13</td>
<td>15</td>
</tr>
</tfoot>
</table>