CSS 表格实例
CSS 表格属性可以帮助您极大地改善表格的外观。
CSS Table 属性
属性 描述
border-collapse    设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side   设置表格标题的位置。
empty-cells    设置是否显示表格中的空单元格。
table-layout   设置显示单元、行和列的算法。
########################
table-layout可能的值
值  描述
automatic  默认。列宽度由单元格内容设定。
fixed  列宽由表格宽度和列宽度设定。
inherit    规定应该从父元素继承 table-layout 属性的值。

################
border-collapse
可能的值
值  描述
separate   默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse   如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit    规定应该从父元素继承 border-collapse 属性的值。

#########
border-spacing可能的值
值  描述
length length
规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。

如果定义一个 length 参数，那么定义的是水平和垂直间距。

如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

inherit    规定应该从父元素继承 border-spacing 属性的值。

###########
caption-side可能的值
值  描述
top    默认值。把表格标题定位在表格之上。
bottom 把表格标题定位在表格之下。
inherit    规定应该从父元素继承 caption-side 属性的值。
####
empty-cells
可能的值
值  描述
hide   不在空单元格周围绘制边框。
show   在空单元格周围绘制边框。默认。
inherit    规定应该从父元素继承 empty-cells 属性的值。
#############

########
1.设置表格的布局
本例演示如何设置表格的布局。
    <style type="text/css">
        table.one{table-layout:automatic}
        table.two{table-layout:fixed}
    </style>
</head>
<body>
<table class="one" border="1" width="100%">
    <tr>
        <td width="20%">10000000000000000000000000000000000000000000</td>
        <td width="40%">10000</td>
        <td width="40%">100</td>

    </tr>
</table>
<table class="two" border="1" width="100%">
    <tr>
        <td width="20%">10000000000000000000000000000000000000000000000</td>
        <td width="40%">1000000000000</td>
        <td width="40%">100</td>
    </tr>
</table>

2.显示表格中的空单元
本例演示是否显示表格中的空单元。（请在非 IE 浏览器中浏览）

    <style type="text/css">
        table{border-collapse:separate;empty-cells:hide;}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <td>Adams</td>
        <td>John</td>
    </tr>
    <tr>
        <td>Bush</td>
        <td></td>
    </tr>
</table>
<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 empty-cells 属性。</p>

3.合并表格边框
本例演示是否把表格边框显示为一条单独的边框，还是像标准的 HTML 中那样分开显示。

    <style type="text/css">
        table{border-collapse:collapse}
        table,td,th{border:1px solid black}
    </style>
</head>
<body>
<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td>bill</td>
        <td>Gates</td>
    </tr>
    <tr>
        <td>Steven</td>
        <td>Jobs</td>
    </tr>
</table>
<p><b>注释</b>如果没有规定 !DOCTYPE，border-collapse 属性可能会引起意想不到的错误</p>
</body>

4.设置表格边框之间的空白
本例演示如何设置单元格边框之间的距离。（请在非 IE 浏览器中浏览）
    <style type="text/css">
        table.one{border-collapse:separate;border-spacing:10px}
        table.two{border-collapse:separate;border-spacing:10px 50px}
    </style>
</head>
<body>
<table class="one" border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table>

<br />

<table class="two" border="1">
<tr>
<td>Carter</td>
<td>Thomas</td>
</tr>
<tr>
<td>Gates</td>
<td>Bill</td>
</tr>
</table>

5.设置表格标题的位置
本例演示如何定位表格的标题。（请在非 IE 浏览器中浏览）
    <style type="text/css">
        caption{caption-side:bottom}
    </style>
</head>
<body>
<table border="1">
    <caption>This is a caption</caption>
    <tr>
        <td>Adams</td>
        <td>John</td>
    </tr>
    <tr>
        <td>Bush</td>
        <td>George</td>
    </tr>
</table>
<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 caption-side 属性。</p>
</body>

CSS 表格实例的更多相关文章

  1. W3School-CSS 表格实例

    CSS 表格实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (paddi ...

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

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

  3. CSS：CSS 表格

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

  4. 第 18 章 CSS 表格与列表

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

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

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

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

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

  7. CSS表格(未完成)

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

  8. css sprite实例

    css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css ...

  9. CSS 分页实例

    CSS 分页实例 一.简单分页 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航. 以下实例演示了如何使用 HTML 和 CSS 来创建分页: <!DOCTYPE html> ...

随机推荐

  1. CGI,FastCGI,PHP-FPM,PHP-CLI,modPHP

    This might give you a broader understanding of their difference: CGI: (common gateway interface) It ...

  2. python第九十一天----第十六周作业

    实现功能: 1.非编辑模式 ​ 可以对每行进行选择,全选,取消,反选 : 2.编辑模式 ​ 进入编辑模式时: 如果行被选中,则被选中的行变为可编辑状态,未选中则不改变 ​ 退出编辑模式时: 保存所有的 ...

  3. nslookup debug

    Try adding forwarders to some public DNS servers leave the box ticked which says use root hints if f ...

  4. 传智播客张孝祥java邮件开发随笔01

    01_传智播客张孝祥java邮件开发_课程价值与目标介绍 02_传智播客张孝祥java邮件开发_邮件方面的基本常识 03_传智播客张孝祥java邮件开发_手工体验smtp和pop3协议 第3课时 关于 ...

  5. 6.3Pytyhon文件的操作（三）

    目录 目录 前言 (一)文件的创建 (二)文件的删除 (三)文件的重命名 (四)文件的查看 (五)文件的复制 ==1.小文件的复制== ==2.大文件的复制== (六)文件的实战案例 ==1.文件的分 ...

  6. python基础 - 变量与运算符

    变量与运算符 变量 定义一个变量 a = [1,2,3,4,5,6] print(a) # [1,2,3,4,5,6] 变量命名要求: 首字母不能是数字 只能包含字符数字下划线 不能是关键字 type ...

  7. Beta冲刺（1/5）（麻瓜制造者）

    今天小组进行了第一次冲刺,虽然新组员还没有确定. 今日完成任务 邓弘立:修改登录代码 李佳铭: 用户收藏UI代码编写 江郑: 进行了后台管理员界面ui的设计和环境的搭建 刘双玉:后台github仓库建 ...

  8. git命令行解决冲突文件步骤

    原文https://blog.csdn.net/zwl18210851801/article/details/79106448 亲测有用,解决git冲突的好办法 方法一(推荐使用): git pull ...

  9. Linux基础第六课——grep|awk|sort|uniq

    管道符 | 前面的输出作为后面的输入 grep 可以理解为正则表达式 grep [参数] 文件名 -c 打印符合要求的行数 -v 打印不符合要求的行 -n 在输出符合要求的行的同时连同行号一起输出 - ...

  10. 难点--均方误差(MSE)和均方根误差(RMSE)和平均绝对误差(MAE)

    MSE: Mean Squared Error 均方误差是指参数估计值与参数真值之差平方的期望值; MSE可以评价数据的变化程度,MSE的值越小,说明预测模型描述实验数据具有更好的精确度. MSE=1 ...