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. Java三行代码搞定MD5加密，测试5c短信网关的demo

    看到之前项目中,关于MD5加密的足足写了一个辅助类. 其实在Java中大部分都帮你实现好了,完成MD5加密,主要就三行代码: /** * 对字符串md5加密 * * @param str * @ret ...

  2. Java中ProcessBuilder应用实例

    系列说明 浅析Java.lang.Runtime类 浅析Java.lang.Process类 浅析Java.lang.ProcessBuilder类 可以使用java中的ProcessBuilder执 ...

  3. 《编写可维护的JavaScript》——JavaScript编码规范（七）

    UI层的松耦合 在web开发中,用户界面(UI)是由三个彼此隔离又相互作用的层定义的. HTML用来定义页面的数据和语义. CSS用来给页面添加样式,创建视觉特征. JavaScript用来给页面添加 ...

  4. JZ2440开发板学习 1. 刚接触开发板， 安装驱动

    一. jtag和串口驱动 1. 驱动下载 http://pan.baidu.com/s/1pJkAHJH 2. 驱动安装 禁用win10的驱动数字签名 http://www.100ask.org/bb ...

  5. 【STL】优先队列priority_queue详解+OpenJudge-4980拯救行动

    一.关于优先队列 队列(queue)这种东西广大OIer应该都不陌生,或者说,队列都不会你还学个卵啊(╯‵□′)╯︵┻━┻咳咳,通俗讲,队列是一种只允许从前端(队头)删除元素.从后端(队尾)插入元素的 ...

  6. Ubuntu学习小结(一)

    这段时间,抽空研究了一下Ubuntu,虽然也有过到目前为止使用计算机最作死的经历,但目前已经学会了一些最基本的操作.在这里简单的记录一下,算是吸取的教训,供其他人借鉴. 1.装Ubuntu系统.装Ub ...

  7. mac终端命令大全介绍(转)

    OSX 的文件系统 OSX 采用的Unix文件系统,所有文件都挂在跟目录 / 下面,所以不在要有Windows 下的盘符概念. 你在桌面上看到的硬盘都挂在 /Volumes 下. 比如接上个叫做 US ...

  8. widgets、dialogs与自动连接（auto-connect）

    QMetaObject的自动连接设施(auto-connect facilities)可以自动将槽与信号连接起来,只需要声明和定义一个符合标准命名规则的槽函数 void on_<object n ...

  9. Oracle数据库体系结构、启动过程、关闭过程

    一.Oracle数据库体系结构体系结构由下面组件组成:1.Oracle服务器(Server):由数据库实例和数据库文件组成,另外在用户建立与服务器的连接时启动服务器进程并分配PGA(程序全局区) (1 ...

  10. OpenCV从入门到放弃系列之——如何扫描图像、利用查找表和计时

    目的 如何遍历图像中的每一个像素? OpenCV的矩阵值是如何存储的? 如何测试我们所实现算法的性能? 查找表是什么?为什么要用它? 测试用例 颜色空间缩减.具体做法就是:将现有颜色空间值除以某个输入 ...