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 将所有元素 ...
随机推荐
- 浏览器判断是否安装APP
浏览器判断是否安装APP http://blog.csdn.net/henrywulibin/article/details/52087041 从浏览器中打开我们的应用 http://blog.csd ...
- NSFileManager和NSFileHandler的作用
NSFileManager类可以管理文件系统中的文件和目录,也可以定位.判断是否存在.创建.拷贝.删除文件和目录,还可以获得文件和目录的信息: 对于读写文件,NSFileManager只可以读写字符串 ...
- iOS设置文字过长时的显示格式
以label为例: //设置文字过长时的显示格式 aLabel.lineBreakMode = UILineBreakModeMiddleTruncation; //截去中间 aLabel.lineB ...
- iOS 学习 - 9.Block 入门
来自李明杰的视频. block 用来保存一段代码 block 的标志:^ block 跟函数很像: 1).可以保存代码 2).有返回值 3). 有形参 temp1:没有返回值.没有形参的 blo ...
- 我的android学习经历7
android签名后报错的问题 Duplicate id @+id/imageView, already defined earlier in this layout,android生成报错 这个是项 ...
- Android中TextView添加删除线
项目中的需求~~~~ 商城中物品的一个本身价格,还有一个就是优惠价格...需要用到一个删除线. public class TestActivity extends Activity { private ...
- node.js使用汇总贴
金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉..NET程序员初用node.js最需要适应的就是异步开发,以及弱类型语言难以避免的拼写错误与弱小的语法提示 ...
- javascript-外观模式
外观模式笔记 1. 为一组复杂的子系统接口提供一个更高级的统一接口, 通过这个接口使得对子系统接口的访问更容易: 2. 简化底层接口的复杂性,解决浏览器兼容性问题. 3.也会用于对底层结构兼容性做 ...
- java 生成和解析二维码
public class QRCode { /** * 解析二维码(QRCode) * @param imgPath * @return */ public static String decoder ...
- C语言(函数)学习之index、rindex
函数定义:char *index(const char *s, int c); 头文件: #include strings.h 函数说明:index()用来找出参数s 字符串中第一个出现的参数c ...