目前，在大多数开发环境中，已经基本不用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. 使用Robot Framework框架远程操作UNIX系统

    bot Framework是一个强大的自动化测试框架,依靠社区力量编写的Test Library为它提供了非常强的扩展性.下面我将介绍的就是如何使用第三方提供的扩展测试库(Test Library)来 ...

  2. mysql 注入问题

    1.实质 MySql语句是用户自行拼接的字符串 2.例子 import pymysql # 获取用户输入信息 username = input("请输入用户名:") pwd = i ...

  3. 【WPF学习】第二十章 内容控件

    内容控件(content control)是更特殊的控件类型,它们可包含并显示一块内容.从技术角度看,内容控件时可以包含单个嵌套元素的控件.与布局容器不同的是,内容控件只能包含一个子元素,而布局容器主 ...

  4. php--->cookie和session

    cookie和session cookie和session理解 HTTP协议本身是无状态的,这与HTTP协议本来的目的是相符的,客户端只需要简单的向服务器请求下载某些文件,无论是客户端还是服务器都没有 ...

  5. 养成编程思维，可以从python开始，今天说说python注释

    先看思维导图!对内容简单了解一下. 提高代码的可读性,需要提供对代码的注释.python注释,主要作用在代码中,对代码功能进行解释,是一种标注性文字.一般情况下分成三类,单行注释.多行注释.中文声明注 ...

  6. 科普文，搭建python开发环境

    Python简介!首先,是一门面向对象的程序设计语言,先说3个优点!1.有条理,简单,易学,易用.2.强大!可以把其他编程语言制作的模块利用起来.3.拥有丰富的库.Python作为高级编程语言,拥有的 ...

  7. 深浅拷贝 集合（定义，方法） 函数（定义，参数，return，作用域） 初识

    深浅拷贝 在python中浅拷贝 a=[1,2,3,4,]b=a.copy()b[0]='3333'print(a) #[1, 2, 3, 4] 浅拷贝一层并不会对a造成变化print(b) #[33 ...

  8. Maven debug异常:Source not found.

    异常 用Maven debug 时出现了Source not found.,在调试过程中尝试添加源码也没有效果 解决方案 先把当前正在运行中的项目停止 右键项目 -> Debug As -> ...

  9. html块级元素的水平垂、直居中的方式

    说明 对于初学者来说,块级元素的剧中,也是一大难题,我学习的时候,也是一脸懵逼,每次遇到都要百度,但是写的多了也自然记住一些常用的剧中方式,但是还是很模糊,今天就来好好总结一些. 布局 布局即为简单, ...

  10. 微信小程序框架分析小练手（三）——仿香哈菜谱小程序制作

    香哈菜谱是一款围绕美食而成的小程序,在这里可以查看各式各样的菜谱. 一.打开微信开发者工具,新建一个项目:xhcp.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标.美食轮播图片.宫格导航图 ...