您的位置：首页 > Web前端 > HTML

Kure讲HTML_div标签和table标签

2017-12-27 13:48 330 查看

为什么要把这两个标签放在一起讲？

个人认为div标签可以算是一个万能标签，它可以通过CSS（层叠样式表）来模仿表格的形式来生成一个表格。那么很多人可能会疑惑那在开发的时候，到底是用div+css的形式实现一个表格组件，还是通过table实现一个表格。

个人觉得div实现的表格不具有语义化，不利于做seo（即搜索引擎优化技术，一句话就解释就是你的seo搞的好，那么网站容易被百度，谷歌等的搜索引擎查询到，这对于产品的推广可是个不小的影响。），因此你可以这么想，如果你做的是OA系统（办公自动化系统），或者ERP（人力资源管理系统）这种对seo要求不高的，果断选择div的形式吧。如果你做的是网站，需要和搜索引擎打交道，那么还是用tabel这种具有语义化的标签实现你的表格数据展示。

接下来让我们看看，如何使用table标签：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<!--table标签用来在界面上创建一个表格元素，而border属性表示表格的边框大小-->
<table border="1">
<!--tr标签用来表示表格中的行-->
<tr>
<!--th标签用来表示表格头部-->
<th>姓名</th>
<th>民族</th>
</tr>
<tr>
<!--td标签用来表示表格头部-->
<td>张三丰</td>
<td>230</td>
</tr>
</table>
</body>
</html>

上面给出了一个table的简单应用，可以看看浏览器上的运行效果：

效果如图所示，看起来很丑，那么我们需要通过css让它变得炫酷起来（我避免在将html中讲解css及js的知识，所以你只需要关注如何通过标签展示你想要的数据即可，不要关注美丑问题！）

如何使用div标签？

div标签就相当于一个容器一样，可以展示你想要展示的数据，同样可以通过div标签的多层嵌套实现更复杂的界面结构（通常不建议将div嵌套的层数超过三层），我们当前的页面开发基本都是基于div+css来进行布局，然后做数据展示的，所以会使用div显得尤为重要。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航