HTML 学习笔记 CSS(表格)
CSS 表格属性可以帮助您极大的改善表格的外观
表格边框
如需在CSS中设置表格的边框 请使用border属性。
在下面的例子中table th 以及td设置了蓝色边框。
table, th, td
{
border: 1px solid blue;
}
⚠️上例中的表格具有双线条边框 这是由于table th td元素都具有独立的边框
如果 你想要把表格显示为单线条框 请使用border-collapse属性
折叠边框
border-collapse属性设置是否将表格的边框折叠为单一边框
table
{
border-collapse:collapse;
} table,th, td
{
border: 1px solid black;
}
表格的宽度和高度
通过width和height属性定义表格的宽度和高度
下面的例子将表格的宽度设置为100% 同时将th元素的高度设置为50px
table
{
width:100%;
} th
{
height:50px;
}
表格文本对齐
text-align和vertical-align属性设置表格中文本的对齐方式
text-align属性设置水平的对齐方式 比如左对齐 右对齐 或者居中
td
{
text-align:right;
}
vertical-align设置垂直对齐方式 比如顶部对齐 底部对齐 或 居中对齐
td{
height:50px
vertical-align:bottom
}
表格的内边距
如需控制表格中内容与边框的距离 请为td设置padding属性
td
{
padding:15px;
}
也可以使用background-color为表格设置背景颜色
CSS Table 属性
实例:
1:制作一个漂亮的表格
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#customers {
font-family: arial;
width: 100%;
border-collapse: collapse;
}
#customers td {
font-size: 1em;
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
}
#customers th {
border: 1px solid #98bf21;
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td {
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>BaiDu</td>
<td>Li yanhong</td>
<td>China</td>
</tr>
<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Lenovo</td>
<td>Liu ChuanZhi</td>
<td>China</td>
</tr>
<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>
</table> </body>
</html>
2:显示表格中的空单元
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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>
</body>
</html>
3:设置表格边框之间的距离
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table.tableOne {
/*不折叠单元格的分割线*/
border-collapse: separate;
/*隐藏空表格*/
empty-cells: hide;
border-spacing: 10px;
}
table.tableTwo {
border-collapse: separate;
border-spacing: 10px 50px;
}
</style>
</head>
<body>
<table class="tableOne" border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table>
<table class="tableTwo" border="1">
<tr>
<td>Carter</td>
<td>Thomas</td>
</tr>
<tr>
<td>Gates</td>
<td>Bill</td>
</tr>
</table> <p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 border-spacing 属性。</p>
</body>
</html>
4:设置表格标题的位置
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table.tableOne {
/*不折叠单元格的分割线*/
border-collapse: separate;
/*隐藏空表格*/
empty-cells: hide;
border-spacing: 10px;
caption-side: bottom;
} </style>
</head>
<body>
<table class="tableOne" 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 （以及更高版本）支持 border-spacing 属性。</p>
</body>
</html>
另外table标签有两个属性 cell-padding 表达内容与边框的距离 cell-spacing 表示表格之间的距离。
HTML 学习笔记 CSS(表格)的更多相关文章
- HTML学习笔记 CSS表格及轮廓案例 第八节 （原创）参考使用表
#tb, tb1, tr, th, td { border: 5px solid blue; /*加边框*/ padding: 5px; /*内边距*/ } #tb1 { border-collaps ...
- amazeui学习笔记--css（HTML元素5）--表格Table
amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名 <table class="am-table"& ...
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css（常用组件12）--面板Panel
amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...
- amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- amazeui学习笔记--css（布局相关1）--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css（基本样式4）--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css（基本样式2）--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
随机推荐
- Android NDK环境搭建及调用JNI的简单步骤
转载请注明:http://www.cnblogs.com/tiantianbyconan/p/3396595.html Java Native Interface (JNI)标准是java平台的一部分 ...
- Android 视频播放器，在线播放
1. Bilibili https://github.com/Bilibili/ijkplayer 1.测试的时候总是崩溃,不知道是我不会用还是怎么回事. 2016-04-15 2.AndroidVi ...
- Android项目实战（二十三）：仿QQ设置App全局字体大小
一.项目需求: 因为产品对象用于中老年人,所以产品设计添加了APP全局字体调整大小功能. 这里仿做QQ设置字体大小的功能. QQ实现的效果是,滚动下面的seekbar,当只有seekbar到达某一个刻 ...
- 【iOS】WebView加载HTML图片大小自适应与文章自动换行
在很多App中都会使用到webview,尤其是在加载新闻内容等文章形式的数据时.因为图文混编以及不同字体格式的显示,在iOS进行编辑 和显示都是一大问题(当然,iOS中也可以用CoreText进行绘制 ...
- Swift开发第二篇——extension及fatalError
本篇分两部分: 一.extension在 Swift 中的使用 二.Swift 中的 fatalError 一.extension在 Swift 中的使用 在 swift 中我们可以通过 extens ...
- C阶段【01】 - C基础
一.进制 进位方法:逢几进一(也就是几进制) 举例:十进制 12 : 二进制 0b(计算机前缀) 0b1011 : 八进制 0 073 :十六进制 0x 0xABCDEF 十进 ...
- 解析ABP框架中的事务处理和工作单元，ABP事务处理
通用连接和事务管理方法连接和事务管理是使用数据库的应用程序最重要的概念之一.当你开启一个数据库连接,什么时候开始事务,如何释放连接...诸如此类的. 正如大家都知道的,.Net使用连接池(connec ...
- 判断字符串的首字母 ---------startsWith
列: { xtype : 'gridcolumn', ...
- Linux服务器宕机案例第二则
邮件告警发现海外工厂一Linux服务器连接不上,DPA(Database Performance Analyzer)系统也发现其出现问题,ping这台服务器发现网络不通,联系不到当地系统管理员,邮件咨 ...
- RTP、RTCP协议学习-2015.04.15
最近做视频编解码部分,传输采用RTP协议.对学习做个记录 1.简介 实时传输协议(Real-time Transport Protocol或简写RTP)是一个网络传输协议,它是由IETF的多媒体传输工 ...