1.给元素的display属性添加为以下值

table ： <table>

table-caption ：<caption>

table-cell ： <td>

table-row ：<tr>

table-row-group ：<tbody>

table-column ： <col>

table-column-group ：<colgroup>

table-header-group ： <thead>

table-footer-group ： <tfoot>

2.实现简单的三列布局

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

    <title>css html</title>

<style type="text/css">

    .container {

    display: table;

    }

    .row {

    display: table-row;

    }

    .cell {

    display: table-cell;

    width: 100px;

    height: 100px;

    border: 1px solid blue;

    padding: 1em;

    }

</style>

</head>

<body>

<div class="container">

    <div class="row">

        <div class="cell">CELL A</div>

        <div class="cell">CELL B</div>

        <div class="cell">CELL C</div>

    </div>

</div>

</body>

</html>

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

　　即以下部分可以省略

<div class=”container”>
<div class=”row”>

.container {
display: table;
}

.row {
display: table-row;
}

4.其他有用的属性

table-layout 将table-layout属性设置为fixed可以让浏览器按照固定算法来渲染单元格的宽度。

Border-collapse 定义边框

Border-spacing 声明“border-collapse:separate;”后，可用border-spacing属性来定义相邻两个单元格边框间的距离。

css 表格的更多相关文章

  1. 第 18 章 CSS 表格与列表

    学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式 表格有五 ...

  2. HTML 学习笔记 CSS(表格)

    CSS 表格属性可以帮助您极大的改善表格的外观 表格边框 如需在CSS中设置表格的边框 请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td ...

  3. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  4. 第七十五节，CSS表格与列表

    CSS表格与列表 学习要点: 1.表格样式 2.列表样式 3.其他功能 一．表格样式 表格有五种独有样式,样式表如下:             属性               值           ...

  5. CSS 表格实例

    CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性 描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...

  6. CSS表格(未完成)

    CSS 表格 使用 CSS 可以使 HTML 表格更美观. 表格边框 指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框:

  7. CSS：CSS 表格

    ylbtech-CSS:CSS 表格 1.返回顶部 1. CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkis ...

  8. 3月23.CSS表格布局

    360表格布局: CSS定义标签: @charset "utf-8";/* CSS Document */.bt1{ border:#309 solid 1px; height:1 ...

  9. HTML学习笔记 CSS表格及轮廓案例 第八节 （原创）参考使用表

    #tb, tb1, tr, th, td { border: 5px solid blue; /*加边框*/ padding: 5px; /*内边距*/ } #tb1 { border-collaps ...

随机推荐

  1. Centos搭建Python+Nginx+Tornado+Mysql环境[转载]

    Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开发,供俄国大型的入 ...

  2. ftp发送文件

    #!/bin/bash #author:luyongjin IP=220.250.65.22 USERNAME='ftp_hangye20' PASSWORD='oUo2JD7oK#u-epw' #D ...

  3. 工作中总结的常用PHP代码

    [目录] ◆PHP常用的代码 ◆HTML常用代码 [值传递 和 引用传递] [单例模式] [魔术常量] [代码调试(自定义一个简单的debug函数)] [thinkphp多表查询] [获取客户端IP地 ...

  4. [转]opencv3.0 鱼眼相机标定

    [原文转自]:http://blog.csdn.net/qq_15947787/article/details/51441031 前两天发表的时候没注意,代码出了点错误,所以修改了一下,重新发上来.  ...

  5. json pickle time

    多层装饰器: 字符串格式化: 当字符串格式化时 , %% 生成器 使用函数创造的 yield递归模块PY:模块其他:类库 先导入 后使用 自定义模块内置模块第三方模块为什么要有模块 将代码归类模块的内 ...

  6. CSS3中毛玻璃效果的使用方法

    今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...

  7. 学生信息管理系统（cocos2d引擎）——数据结构课程设计

    老师手把手教了两天半,看了一下模式,加了几个功能就大功告成了!!! 给我的感想就是全都是指针! 添加图片精灵: CCSprite*  spBG = CCSprite::create("&qu ...

  8. 定时备份SQL SERVER的数据库并且把备份文件复制到另外一台服务器

    需求介绍:每天备份线上正式库并且把备份文件复制到测试服务器,测试服务器自动把数据库备份文件还原. 方案介绍: 第1步:在正式库上创建存储过程用来备份数据库和复制到测试服务器,然后新建作业每天定时执行创 ...

  9. Arduino 极速入门系列–1 点亮 LED

    本篇内容为,使用 Arduino 点亮 LED 的做法示范.很简单的一个入门示范.我们让 LED 闪. 本篇使用到的工具和材料 Arduino Mini Pro 1 PCS Mini USB 数据线 ...

  10. CSS 选择器

    1.  .   ==> class选择器 2.  #  ==> id选择器 3.  *  ==>选择所有元素 4.<p>  ==>选择所有<p>标签的元 ...