一、表格标签
<table>
<tr><th>姓名</th><th>性别</th></tr>
<tr><td>张三</td><td>男</td></tr>
</table>
1、<table></table>定义表格
2、<tr></tr>行
3、<th></th>表头单元格 默认加粗居中
4、<td></td>单元格
5、<caption></caption> 表格标题
6、<thead></thead> 表格头部区域 为了更好的表示表格的语意，属于结构标签
7、<tbody></tbody> 表格主题区域
<table>
<thead>
<tr> <th></th> </tr>
</thead>
<tbody>
<tr> <td></td> </tr>
</tbody>
</table>
二、 表格属性
<table align="center" border="1" cellpadding="20">
<caption>表格标题</caption>
<tr><th>姓名</th><th>性别</th></tr>
<tr><td>张三</td><td>男</td></tr>
</table>
1、宽:width
2、高:hight
3、背景色:bgcorlor
4、单元格与单元格之间的距离:cellspacing=数值，默认是2可设置
5、指单元格里的内容占据的地方 cellpadding=数值 可设置
6、边框线:border=数值
7、align 表格对齐方式 “center”“left”“right”
案例
<table align="center" border="1" cellspacing="0">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="../images/down.jpeg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>2</td>
<td>西游记</td>
<td><img src="../images/up.jpeg"></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="../images/down.jpeg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</table>
三、合并单元格
colspan 跨列合并
rowspan 跨行合并
1、确定跨行合并还是跨列合并 目标单元格从上到下，从左到右
2、找到目标单元格，写上合并方式=合并的单元格数量，如 rowspan="2"
3、删除多余的单元格代码
<table width="500" height="300" border="1">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
网友评论