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 扒开美女衣服
本文主要实现一个小的扒开美女衣服的游戏项目 效果如下: 项目布局设计: <FrameLayout xmlns:android="http://schemas.android.com/a ...
- org.apache packages can't be resolved in Eclipse解决方案
删除.m2仓库里面对应的jar包,重新Maven->update project
- iOS 9 升级过程汇中白苹果 iPhone或iPad 解决方案
最近想必有很多朋友升级了iOS 9,不过有部分朋友在升级过程中遇到了白苹果问题.也就是卡在升级过程中,不限重启.这时,你只能通过dfu进行升级了. ios9怎么进入dfu模式: 1.将你的iPhone ...
- MojoDatabase 源码学习之对象映射
Mojo-database是我个人比较喜欢多开源项目,下文是该项目打介绍和地址: mojo-database 简介: MojoDatabase is an ActiveRecord-like ORM ...
- 用css3绘制你需要的几何图形
1.圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class="size example ...
- JavaScript Patterns 5.5 Sandbox Pattern
Drawbacks of the namespacing pattern • Reliance on a single global variable to be the application’s ...
- Linux 执行partprobe命令时遇到Unable to open /dev/sr0 read-write (Read-only file system)
在使用fdisk创建分区时,我们会使用partprobe命令可以使kernel重新读取分区信息,从而避免重启系统,但是有时候会遇到下面错误信息"Warning: Unable to open ...
- SQL Server（五）——常用函数
1.数学函数:操作一个数据,返回一个结果 --取上限ceiling select code,name,ceiling(price) from car ; --取下限 floor select floo ...
- Maven 打包涉及证书文件问题
当使用maven-assembly-plugin或者maven-shade-plugin打包时,如果涉及到证书文件,一定设置过滤,否则证书文件会被做修改.报异常: java.io.IOExceptio ...
- 0015 Java学习笔记-集合-TreeMap集合
主要的方法 构造方法: TreeMap(); TreeMap(Comparator<?super K> comparator); TreeMap(Map<? extends K,? ...