table表格
1.1 table的完整用法
格式:
<table>
<thead>
<tr>
<th>项目1</th><th>项目2</th>
</tr>
</thead>
<tbody>
<tr>
<td>100个</td><td>120个</td>
</tr>
<tr>
<td>30元</td><td>56元</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>结束</td>
</tr>
</tfoot>
</table>
效果:
- table分为3部分:
thead、tbody、tfoot
,即表格的头部、中间部分和尾部。一般要改动的只是tbody部分;- tr代表行,td代表列,th代表加粗列。
1.2 table的省略用法
格式:
<table>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</table>
效果:
1.3 table的合并
关键字:colspan='n'
,列合并,n为要合并的列数;rowspan='n'
,行合并;border='1'
,边框距离为1;width='90%'
,宽度为相对于当前网页的90%。
格式:
<table border="1px" width="90%">
<thead>
<tr>
<th>标题1</th><th>标题2</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan='2'>合并列1</td>
</tr>
<tr>
<td rowspan="2">合并行1</td><td>行1</td>
</tr>
<tr>
<td>行2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">合并列2</td>
</tr>
</tfoot>
</table>
效果:
border="1px" width="90%"
设置边框为1像素,宽度为相对于当前网页大小90%。
1.4 iframe网页嵌套
格式:
<table>
<iframe src="./html1.html" width="90%" height="300px"></iframe>
</table>
效果:
在一个网页中嵌套如另一个网页。