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. C# 获取当前路径7种方法

    //获取模块的完整路径. string path1 = System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName; //获取 ...

  2. 在Linux上配置Zabbix的环境

    useradd -s /bin/false zabbix mkdir /usr/local/zabbix_agent mv /home/zihexin/zabbix_agents_3.2.0.linu ...

  3. android 获取设备拔插状态广播事件易漏掉的一行属性!

    我们都知道设备拔插的状态获取需要一个权限   <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILES ...

  4. 我的Android第四章

    本章需掌握 1.连接真机的过程. 2.dx指令的作用 3.adb是什么? 4.adb有什么用(有什么好处)? 5.adb的一些常用命令 1.连接真机的过程. 需要:一部Android机.usb连接线, ...

  5. POJ 3070 Fibonacci

    Description In the Fibonacci integer sequence, F0 = 0, F1 = 1, and Fn = Fn − 1 + Fn − 2 for n ≥ 2. F ...

  6. mybatis foreach的使用

    foreach标签在批量插入数据库时非常方便,但是很容易出错,我没有注意括号的位置让我折腾了一个半小时找问题,醉醉哒,所以在这里记录一下foreach的使用. 首先,这是insert批量插入正确的代码 ...

  7. Web Api 简介

    ASP.NET Web API 简介  ASP.NET MVC 4 包含了 ASP.NET Web API, 这是一个创建可以连接包括浏览器.移动设备等多种客户端的 Http 服务的新框架, ASP. ...

  8. Sprite(精灵)&& 三个特殊的层Layer

    用来作为以后复习使用. 1 #include "ScenceScend.h" CCScene* ScenceScend::scene() { CCScene* s = CCScen ...

  9. Codeforces Round #389 (Div. 2, Rated, Based on Technocup 2017 - Elimination Round 3) B

    Description Santa Claus decided to disassemble his keyboard to clean it. After he returned all the k ...

  10. 使用JavaScript访问子节点方法elementNode.childNodes时,需要注意的地方

    有这样一个HTML结构 <div> javascript <p>javascript</p> <div>jQuery</div> <h ...