CSS 表格实例
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 表格实例的更多相关文章
- W3School-CSS 表格实例
CSS 表格实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (paddi ...
- HTML 学习笔记 CSS(表格)
CSS 表格属性可以帮助您极大的改善表格的外观 表格边框 如需在CSS中设置表格的边框 请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td ...
- CSS：CSS 表格
ylbtech-CSS:CSS 表格 1.返回顶部 1. CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkis ...
- 第 18 章 CSS 表格与列表
学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式 表格有五 ...
- Bootstrap css栅格 + 网页中插入代码+css表格
设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...
- 第七十五节，CSS表格与列表
CSS表格与列表 学习要点: 1.表格样式 2.列表样式 3.其他功能 一．表格样式 表格有五种独有样式,样式表如下: 属性 值 ...
- CSS表格(未完成)
CSS 表格 使用 CSS 可以使 HTML 表格更美观. 表格边框 指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框:
- css sprite实例
css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css ...
- CSS 分页实例
CSS 分页实例 一.简单分页 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航. 以下实例演示了如何使用 HTML 和 CSS 来创建分页: <!DOCTYPE html> ...
随机推荐
- debian图形界面安装安装GNOME中文桌面环境_刀光剑影_新浪博客 - Google Chrome
debian图形界面安装安装GNOME中文桌面环境 (2012-06-12 16:47:41) 转载▼ 标签: 杂谈 分类: linux 安装GNOME中文桌面环境 安装基本的X系统 # apt-g ...
- [MapReduce_add_1] Windows 下开发 MapReduce 程序部署到集群
0. 说明 Windows 下开发 MapReduce 程序部署到集群 1. 前提 在本地开发的时候保证 resource 中包含以下配置文件,从集群的配置文件中拷贝 在 resource 中新建 ...
- yolo.h5制作方法
学习吴恩达的深度学习第三课缺少yolo.h5文件,花了很长时间来解决这个问题. 看到CSDN上各种需要积分下载的yolo.h5文件,实在看不下去了. 从 https://github.com/alla ...
- MySQL安全模式：sql_safe_updates讲解
什么是安全模式 在mysql中,如果在update和delete没有加上where条件,数据将会全部修改.不只是初识mysql的开发者会遇到这个问题,工作有一定经验的工程师难免也会忘记写入where条 ...
- java.sql.SQLSyntaxErrorException: ORA-00904: "column": 标识符无效
java.sql.SQLSyntaxErrorException: ORA-00904: "column": 标识符无效 首先查看无效的列是不是orcale关键字 , 如果不是 , ...
- 从研发到市场，一个C#程序员半年神奇之旅
序 距离上次在博客园发布文章已经过了大约有一年了,由于最近一系列神奇的际遇,让我非常强烈意愿的提起笔来给大家描述我最近一段时间的经历,希望大家根据我的经历做一些参考,我尽量写的逻辑通顺,如果各位兄弟阅 ...
- div放在li标签中，无法撑开li标签的问题
作为一个前端菜鸟,我又碰到问题了,今天把div放到li标签中,发现div并没有把li标签撑开,而是在li标签边界之外,具体情况如下图所示: 那么,怎样才能达到预期的效果(每个li中放置一个div标签, ...
- 【Ansible 文档】提示、推荐、注意事项
1. 查看 详细 信息 如果你想要查看成功模块和不成功的详细输出,使用 --verbose 标识 2. 检查 playbook 的语法 使用 ansible-playbook 的 --syntax-c ...
- APC | Memcache等缓存key冲突的解决的方法
版权声明:https://github.com/wusuopubupt https://blog.csdn.net/wusuopuBUPT/article/details/24397109 apc.m ...
- pek （北大oj）3070
思路:矩阵快速幂, 二分加速 #include<cstdio> #include<cstring> #define ll long long #define mod 10000 ...