表格的作用:表格主要用于展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,一个清爽简约的表格能够把繁琐的数据表现得很有条理。(表格不是用来布局页面得,而是用来展示数据的)
HTML表格标签
标签 | 描述 |
<table></table> | 定义表格 cellspacing属性值表示单元格之间的空白单位px cellpadding属性值表示单元边沿与其内容之间的空白 align属性值(left/center/right)表示表格相对周围环境元素的对齐方式 |
<th></th> | 定义表格的表头 |
<tr></tr> | 定义表格的行 |
<td></td> | 定义表格单元 |
<thead></thead> | 定义表格的页眉 |
<tbody></tbody> | 定义表格的主体 |
<tfoot></tfoot> | 定义表格的页脚 |
<caption></caption> | 定义表格标题 |
<colgroup></colgroup> | 定义表格列的组 |
<col/> | 定义表格列的属性 |
<table align="center" width="500" height="249" border="1" cellspacing="0">
<caption>今日小说排行榜</caption>
<colgroup>
<col style="background-color: red;" />
<col span="5" style="background-color: yellow;" />
</colgroup>
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="up.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</tbody>
</table>
合并单元格
合并表格的方式:
跨行合并:rowspan="合并单元格的个数"(以最上侧单元格为目标单元格,写合并代码)
跨列合并:colspan="合并单元格的个数"(以最左侧单元格为目标单元格,写合并代码)
先确定是跨行还是跨列合并,然后找到目标单元格,写上合并代码,最后删除多余的单元格
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>