目前，在大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table系表格元素呢？

1、用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大

2、table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示

3、非表格内容用table来装，不符合标签语义化要求，不利于SEO

4、table的嵌套性太多，用DIV代码会比较简洁

但是有的项目中又需要类似表格的布局怎么办呢？可以用display:table来解决

display:table系列几乎是和table系的元素相对应的，请看下表：

table （类似 <table>）此元素会作为块级表格来显示，表格前后带有换行符。
inline-table （类似 <table>）此元素会作为内联表格来显示，表格前后没有换行符。
table-row-group （类似 <tbody>）此元素会作为一个或多个行的分组来显示。
table-header-group （类似 <thead>）此元素会作为一个或多个行的分组来显示。
table-footer-group （类似 <tfoot>）此元素会作为一个或多个行的分组来显示。
table-row （类似 <tr>）此元素会作为一个表格行显示。
table-column-group （类似 <colgroup>）此元素会作为一个或多个列的分组来显示。
table-column （类似 <col>）此元素会作为一个单元格列显示。
table-cell （类似 <td> 和 <th>）此元素会作为一个表格单元格显示。
table-caption （类似 <caption>）此元素会作为一个表格标题显示。

目前display:table的应用场景也是比较广泛的，Google地图在搜索路线时，左侧的路线详情就是用的display:table来实现的。

1.div模拟表格：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>模拟表格</title>

</head>

<body>

<style type="text/css" rel="stylesheet">

    .table {

        display: table;

        border: 1px solid #cccccc;

        margin: 5px;

        /*display: table时padding会失效*/

    }

    .row {

        display: table-row;

        border: 1px solid #cccccc;

        /*display: table-row时margin、padding同时失效*/

    }

    .cell {

        display: table-cell;

        border: 1px solid #cccccc;

        padding: 5px;

        /*display: table-cell时margin会失效*/

    }

</style>

<div class="table">

    <div class="row">

        <div class="cell">张三</div>

        <div class="cell">李四</div>

        <div class="cell">王五</div>

    </div>

    <div class="row">

        <div class="cell">张三</div>

        <div class="cell">李四</div>

        <div class="cell">王五</div>

    </div>

</div>

</body>

</html>

2.让块级标签实现行内效果，即浮动至同一横轴，并实现等高效果

table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助display:table-cell属性。说到table-cell的布局，不得不说一下“匿名表格元素创建规则”：

CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table- cell的三层嵌套关系。

举个例子吧，如果我们为元素使用“display:table-cell;”属性，而不将其父容器设置为“display:table-row;”属性，浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>display:table实现浮动效果</title>

</head>

<body>

<style type="text/css" rel="stylesheet">

    .table {

        display: table;

        margin: 5px;

        width: 1000px;

    }

    .row {

        display: table-row;

    }

    .cell {

        display: table-cell;

        padding: 10px;

        background-color: red;

    }

</style>

<div class="table">

    <div class="row">

        <div class="cell">内容内容内容内容内容内内容内</div>

        <div class="cell">内容内容内容内容内容内容内容内容内容</div>

        <div class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>

    </div>

</div>

</body>

</html>

上例中div.row可以不要，效果一样

3.结合vetical-align实现块级元素垂直居中

display:table的用法的更多相关文章

  1. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  2. display:table / display:table-cell 用法

    display:table  元素会作为块级表格来显示(类似table):表格前后带有换行符: display:table-cell 元素会作为表格单元格来显示(类似<td> 和 < ...

  3. [转]基于display:table的CSS布局

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...

  4. 使用display:table来解决一些问题

    一直有,多栏的需求,当然用table布局,很快就做完了.不怎么喜欢用table,刚开始使用display:table,但是有一条老是不能达到我的效果,那就是有一行不固定宽度的时候,就不知道怎么处理,今 ...

  5. 垂直居中display:table;

    父级元素 display:table: 子元素 display:table-cell:vertical-align:middle:

  6. alter table的用法

    在数据库开发过程中,除了用得最多的数据库查询外,我们有时也需要去修改数据表的定义,比如在已存在的数据表中新增列和删除列等.这篇文章就总结一下alter table语句的用法. 示例代码如下. USE ...

  7. display:table 水平居中

    <div style="width:auto; margin:auto;display:table"> <div style="width: 100px ...

  8. display:table表格合并单元格

    直接上代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  9. Display:table;妙用，使得左右元素高度相同

    我们在设计网页的时候,为了左右能够分明一点,我们经常会在左边元素弄一个border-right,但是出现一个问题,如果左边高度比较小,这根线就短了,下面空了一部分,反正如果在右边的元素弄一个borde ...

随机推荐

  1. 使用read、readline、readlines和pd.read_csv、pd.read_table、pd.read_fwf、pd.read_excel获取数据

    从文本文件读取数据 法一: 使用read.readline.readlines读取数据 read([size]):从文件读取指定的字节数.如果未给定或为负值,则去取全部.返回数据类型为字符串(将所有行 ...

  2. 本地缓存google.guava及分布式缓存redis 随笔

    近期项目用到了缓存,我选用的是主流的google.guava作本地缓存,redis作分布式 缓存,先说说我对本地缓存和分布式缓存的理解吧,可能不太成熟的地方,大家指出,一起 学习.本地缓存的特点是速度 ...

  3. Nginx的踩坑实录

    1.昨天在为一个新项目配置地址转发,搞了很久都没生效,日志也没有问题,但就是没到转发的目标机器上. nginx.conf 配置如下: location /prism{ proxy_pass http: ...

  4. 客户端 jQuery 跨端口 调用 node 服务端

    一句话 很顶用 response.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:8020'); 说 响应的头文件里设置 一个 h ...

  5. 返回数据中提取数据的方法（JSON数据取其中某一个值的方法）

    返回数据中提取数据的方法 比如下面的案例是,取店铺名称 接口返回数据如下: {"Code":0,"Msg":"ok","Data& ...

  6. THU的告诫

    究其原因,还是自己只会OI了.要成为一个合格的选手,是方方面面各个地方都要看的,同时也要自己去实现.快速实现.清晰实现.运行成功. 尤其是各种平时用的东西,不要只会技,还要研其道. 再次警醒,各位同我 ...

  7. CSS-13-块级元素和行内元素

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. linux--->linux 各个文件夹及含义

    1./bin 是binary的缩写 存放linux常用命令 2./lib 该目录用来存放系统动态链接共享库,几乎所有的应用程序都会用到该目录下的共享库. 3./dev 该目录包含了Linux系统中使用 ...

  9. 如何使用jmeter做一个功能的性能测试

    一.为什么又再次写类似的文章? 在博客园和公号写文章,已经快两年了,所以自然在公号和博客园都能联系到我的. 也就是几天前,有个人加我微信,对于总有人加我好友,我已经觉得不奇怪了,为什么呢? 加我好友的 ...

  10. Redis系列(三)：Redis的持久化机制(RDB、AOF)

    本篇博客是Redis系列的第3篇,主要讲解下Redis的2种持久化机制:RDB和AOF. 本系列的前2篇可以点击以下链接查看: Redis系列(一):Redis简介及环境安装. Redis系列(二): ...