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

个人认为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显得尤为重要。

Kure讲HTML_div标签和table标签的更多相关文章

  1. dl标签和table标签

    dl标签定义了一个定义列表 <html> <body> <h2>一个定义列表:</h2> <dl>   <dt>计算机</ ...

  2. python 之 前端开发（form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签）

    11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. flask第二十八篇——HTML【1】table标签

    请关注公众号:自动化测试实战 以下内容参考:http://www.w3school.com.cn/tags/tag_table.asp <!DOCTYPE html> <html l ...

  4. 9月6日表格标签（table、行、列、表头）（补）

    一.<table> <table>代表表格标签.   <table></table> 1.width  表示表格宽度,宽度表达方式有像素和百分比两种.网 ...

  5. python处理html的table标签

    转载:http://www.xuebuyuan.com/583071.html python处理html的table标签 2012年01月06日 ⁄ 综合 ⁄ 共 5279字 ⁄ 字号 小 中 大 ⁄ ...

  6. ol,ul,dl,table标签的基本语法

    ol,ul,dl,table标签的基本语法 有序列表: 无序列表:                                  自定义列表: <ol> <ul> < ...

  7. HTML——表格table标签，tr或者td

    表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...

  8. table标签

    table标签使我们最常用的的标签,在使用table标签时我们要注意一些其属性,早期我们经常使用table标签对其进行页面布局但是现在我们基本不再使用,由此可见table标签也是非常强大的一个工具. ...

  9. PHP自学4——通过函数将数组数据输出到html的Table标签中（使用函数的例子）

    这一节其实说实话并没有什么干货,不过为了防止PO主的懒癌的复发,还是坚持放一点东西,即使是内容和长度都令人发指.这一节通过一个函数来实现将数组中的内容输出html的Table标签当中显示. 函数文件— ...

随机推荐

  1. Java50道经典习题-程序35 最大最小交换

    题目:输入数组,最大的与第一个元素交换,最小的与最后一个元素交换,输出数组.分析: 例如输入6 4 8 3 9 7 交换后输出9 4 8 7 6 3 import java.util.Arrays; ...

  2. Mac下的UI自动化测试 （一）

    在我看来,实现UI自动化测试的过程一向都是令人快乐的事情,而维护它们就是跟噩梦一样了,尤其是对每次CI产生的build进行BVT测试,由于开发不会告诉你任何UI的变化,那么你拿到的测试结果就势必会一片 ...

  3. 程序自动化需要一个Windows服务

    前段时间,写了一个SPC to SQL数据传输的小功能,用户不太想用手执行或有可能忘记操作.解决这个问题,Insus.NET原本是使用windows的任务管理执行的,但觉得并不太理想,因此又得写一个W ...

  4. UncategorizedSQLException Mybatis中jdbcType的作用

    使用MyBatis框架做更新操作时,在该字段需要更新的内容为空时,就会出现1111错误,也就是无效的列类型,这个时候你就要使用jdbcType.至于什么时候要使用到javaType我还没遇到过,而且我 ...

  5. 并查集【洛谷P1197】 [JSOI2008]星球大战

    P1197 [JSOI2008]星球大战 题目描述 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治着整个星系. 某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系 ...

  6. [BZOJ4916]神犇和蒟蒻 杜教筛/Min_25筛

    题目大意: 给定\(n\le 10^9\),求: 1.\(\sum_{i=1}^n\mu(i^2)\) 2.\(\sum_{i=1}^n\varphi(i^2)\) 解释 1.\(\sum_{i=1} ...

  7. IOS 浏览器上设置overflow: auto 不可滚动

    项目中最近遇到一个bug,在ios上出现的问题:原页面是在某一块地方滚动,但是改版后,滚动区域改为最外层元素,最外层包裹了一层class为main的div .main { position: fixe ...

  8. [POI2014]KUR-Couriers BZOJ3524 主席树

    给一个长度为n的序列a.1≤a[i]≤n. m组询问,每次询问一个区间[l,r],是否存在一个数在[l,r]中出现的次数大于(r-l+1)/2.如果存在,输出这个数,否则输出0. Input 第一行两 ...

  9. Linux不同发型版本(Debian REHL)与软件包管理器(RPM dpkg)的概念

    Linux的发行版本可以大体分为两类: Linux发行版 = Linux内核(类Unix内核) + Linux软件管理(package manager) 一类是商业公司维护的发行版本,以著名的Red ...

  10. WebServcies 调用方法异常：System.Web.HttpRequestValidationException: 从客户端中检测到有潜在危险的 Request.Form 值。

    我在做WebServcies时,页面调试,报类了下面这样的错误信息: System.Web.HttpRequestValidationException: 从客户端(checkXML="&l ...