<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table><!-- 用于定义表格的标签 -->
<tr><!-- 行 -->
<!-- td定义表格中的单元格 -->
<td>姓名</td><td>性别 </td><td>年龄</td>
</tr>
<tr><!-- 行 -->
<!-- td定义表格中的单元格 -->
<td>刘德华</td><td>男</td><td>55 </td>
</tr>
<tr><!-- 行 -->
<!-- td定义表格中的单元格 -->
<td>张学友</td><td>男</td><td>45 </td>
</tr>
</table>
<!-- <!-- 表头单元格 -->
<table><!-- 用于定义表格的标签 -->
<tr><!-- 行 -->
<!-- td定义表格中的单元格 -->
<th>姓名</th><th>性别 </th><th>年龄</th>
</tr>
<tr><!-- 行 -->
<!-- td定义表格中的单元格 -->
<td>刘德华</td><td>男</td><td>55 </td>
</tr>
<tr><!-- 行 -->
<!-- td定义表格中的单元格 -->
<td>张学友</td><td>男</td><td>45 </td>
</tr>
</table>
<!-- 表格属性 -->
<table align="center" border='1' cellpadding="20" cellspacing="0"width="50">
<!-- align表格对齐方式 border边框
cellpadding是单元格和文字之间的距离 cellspacing是单元格和单元格之间的距离 width表格的宽度 -->
<tr>
<th>姓名</th><th>性别 </th><th>年龄</th>
</tr>
<tr>
<td>刘德华</td><td>男</td><td>55 </td>
</tr>
<tr>
<td>张学友</td><td>男</td><td>45 </td>
</tr>
</table>
<table align="center" border="1" cellspacing="0"width="500"height="249">
<tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr>
<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
</table>
<!-- 表格结构标签 -->
<!-- <thead></thead>表格头部区域(第一行 ) <tbody></tbody>表格主体部分 -->
<table align="center" border="1" cellspacing="0"width="500"height="249">
<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="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
<tr><td>1</td><td>鬼吹灯</td><td><img src="img/12.jpg" ></td><td>345</td><td>123</td><td><a href="#">贴吧</a></td></tr>
</tbody>
</table>
<!-- 表格标签-合并单元格 -->
<!-- 方式:1.跨行合并rowspan 2.跨列合并colspan -->
<!--合并单元格三部曲:
1.先确定跨行还是跨列
2.找到目标单元格,写上合并方式=合并的单元格数量
3.删除多余的单元格 -->
<table cellspacing="0" width="500" height="400" align="center" border="1">
<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>
总结:
1.表格的相关标签 table tr td th thead tbody
2.表格的相关属性 align border cellpadding cellspacing width
3.合并单元格
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表标签</title>
</head>
<body>
<!--
表格是显示数据的,列表是用来布局的 整洁 有序
1.无序列表(重点)
2.有序列表(理解)
3.自定义列表 (重点)
-->
<!-- 1.无序列表 -->
<h4>您喜欢的食物是什么</h4>
<ul><!-- 里面只能放li,无顺序,li里面可以放任何标签 -->
<li>西瓜</li>
<li>香蕉</li>
<li>鸡</li>
<li><!-- li里面可以放任何标签 -->
<p>123</p>
</li>
</ul>
<!-- 2.有序列表(理解) -->
<h4>粉丝排行榜</h4>
<ol><!-- 里面只能放li,有顺序,li里面可以放任何标签 -->
<li>刘德华 1000</li>
<li>杨幂 999</li>
<li>唐嫣 888</li>
</ol>
<!-- 3.自定义列表 (重点)(一个大哥领着一群小弟)-->
<dl><!-- 里面只能放dt,dd,dt和dd里面可以放任何标签 -->
<dt>关注我们</dt><!-- 大哥 -->
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
</body>
</html>