这一小节，我们继续练习纯HTML，开发一个简单的数据表格吧。就像这样：
目录
1 设计需求分析
2 用到的标签
3 实战代码
1 设计需求分析
做之前，我们仍然是分析一下这张图，以便更好的更快的开发出来。
- 分2个大部分
- 第一个大部分是第一行，有个小图标，后面跟着“创作历程”4个字；
- 第二个大部分呢，是一个表格。
- 表格又分两行四列
- 而每一列呢，里面的内容又是可点击可跳转的
- 每一列呢，又分两小行，第一行是篇数，第二行是年份
- 还有个重点呢，就是第一小行字体稍微大一些，第二小行字体稍微小一些
2 用到的标签
做了布局的设计分析以后呢，我们就要快速的想一想，都会用到哪些标签，这样心理有个初步判断，手里的代码就敲的更快了。都说HTML编写不算开发，逻辑简单。哈哈，其实并不难，但这都源于最初的基础足够扎实。
那么包含的标签都会有哪些呢？来看一下：
- 分2部分，那么就是2个块元素，也就是2个 div 标签；
- 第一行，是2个行内元素，一个是图标，想到了 img 标签，第二个文字，我们可以用 span 标签
- 第二部分呢，明显是个表格，所以我们使用 table tr td 的组合
- 需要注意的是，在项目开发布局中，其实越来越不推荐使用 table 标签了，因为他有一定的弊端，都是使用 div + css 的方式来布局。但这里为了练习纯HTML标签的使用呢，还是先用 table 来做
- 每个单元格 td 标签里呢，都是可点击可跳转的，所以我们用 a 标签将其他内容包裹起来；
- 里面分2小行，所以需要2个块级元素，比如div p 都行。但如果不用css的话，很难区分字体的大小不同，所以我们想到了 h1 到 h6标签，这个可以区分字体的大小，对吧。
3 实战代码
其实HTML实战没多少内容，就是分析一下部分，想一想这些标签们，用着用着就熟了。我们先一小块一小块的实战，等学了CSS，我们做大一些的，漂亮一些的页面。慢慢的，学校期末要求的那些页面们，我们就实战出来了。
下面看一下这一小节的实战代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<style type="text/css">
</style>
</head>
<body>
<div>
<img src="./files/imgs/time.png" />
创作历程
</div>
<div>
<table>
<tr>
<td width="90">
<a href="https://blog.csdn.net/xingyu_qie">
<h3>260篇</h3>
<h5>2024年</h5>
</a>
</td>
<td width="90">
<a href="https://blog.csdn.net/xingyu_qie">
<h3>93篇</h3>
<h5>2023年</h5>
</a>
</td>
<td width="90">
<a href="https://blog.csdn.net/xingyu_qie">
<h3>103篇</h3>
<h5>2022年</h5>
</a>
</td>
<td width="90">
<a href="https://blog.csdn.net/xingyu_qie">
<h3>3篇</h3>
<h5>2020年</h5>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
