<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 2.1.2表格基本语法 -->
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>王</td>
<td>男</td>
<td>19</td>
</tr>
<!-- 要知道表格的作用是用来展示数据的 -->
</table>
<!-- 2.1.3表头单元格标签 -->
<!-- 一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示 -->
<!-- <th>标签表示HTML表格的表头部分是table head的缩写 -->
td 与 th的区别在于th可以达到加粗的效果
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>王</td>
<td>男</td>
<td>19</td>
</tr>
<!-- 到这里为止我们发现表格表格，这么没有边框呢 -->
<!-- 2.1.4表格属性 -->
<!-- 表格标签这部分属性实际开发我们不常用，后面通过css来设置
目的有两个 1.这些单词，后面css需要使用2.直观感受表格的外观形态 -->
<table>
<tr>
<th>属性名</th>
<th>属性值</th>
<th>描述</th>
</tr>
</table>
<table>
<tr>
<td>align</td>
<td>left.center.right</td>
<td>规定表格二相对周围元素的对齐方式</td>
</tr>
</table>
<table>
<tr>
<td>border</td>
<td>1或""</td>
<td>规定表格单元是否有边框，默认为"",表示没有边框</td>
</tr>
</table>
<table>
<tr>
<td>cellpadding</td>
<td>像素值</td>
<td>规定单元边沿与其内容之间的空白，默认1像素</td>
</tr>
</table>
<table>
<tr>
<td>cellspancing</td>
<td>像素值</td>
<td>规定单元格之间的空白，默认2像素</td>
</tr>
</table>
<table>
<tr>
<td>width</td>
<td>像素值或百分比</td>
<td>规定表格的宽度</td>
</tr>
</table>
<tablealign="center"border="1"cellpadding="20"cellspancing="0"width="20"height="5">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>王新桦</td>
<td>男</td>
<td>19</td>
</tr>
</table>
<!-- 小说排行榜的例题 -->
<table>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><imgsrc="down.jpg"></td>
<td>456</td>
<td>123</td>
<td><ahref="#">贴吧</a><ahref="#">图片</a><ahref="#">百科</a></td>
</tr>
</table>
<!-- 2.1.5表格结构标签 -->
<!-- 表格可能很长，为了更好的表示表格的词义，可以将表格分割成表格头部和表格主体两大部分
在表格标签中，分别用:<thead>标签表示表格的头部区域，<tbody>标签表示表格的主体区域 -->
<tablealign="center"width="500"height="249"border="1"cellspancing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><imgsrc="down.jpg"></td>
<td>456</td>
<td>123</td>
<td><ahref="#">贴吧</a><ahref="#">图片</a><ahref="#">百科</a></td>
</tr>
</tbody>
</table>
<!-- 2.1.6合并单元格 -->
<!-- 1合并单元格三部曲
2找到目标单元格。写上合并方式=合并的单元格数量。比如<td clospan="2"></td>
3删除多余的单元格 -->
<tablealign="center"width="500"height="249"border="1"cellspancing="0">
<tr>
<td></td>
<tdcolspan="2"></td>
</tr>
<tr>
<tdrowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
