CSS表格属性：设置表格的外观样式
CSS 表格
CSS 表格属性可以帮助您极大地改善表格的外观。
表格边框
如需在 CSS 中设置表格边框，请使用 border 属性。如为 table、th 以及 td 设置蓝色边框：
提示：如果需要把表格显示为单线条边框，请使用 border-collapse 属性。
折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框：
表格宽度和高度
通过 width 和 height 属性定义表格的宽度和高度。
表格文本对齐
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：
表格内边距
如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：
表格颜色
下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：
表格实例
CSS Table 属性及描述
border-collapse：设置是否把表格边框合并为单一的边框。
border-spacing：设置分隔单元格边框的距离。
caption-side：设置表格标题的位置。
empty-cells：设置是否显示表格中的空单元格。
table-layout：设置显示单元、行和列的算法。
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 属性定义表格的宽度和高度。
table {width: 100%;}
th {height:50px;}
注释：本实例将表格宽度设置为 100%，同时将 th 元素的高度设置为 50px。表格文本对齐
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：
td {text-align: right;}
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：
td {height: 50px; vertical-align: bottom;}
表格内边距
如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：
td {padding: 15px;}
表格颜色
下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：
table, td, th {border: 1px solid green;}
th {background-color: green; color: white;}
表格实例
<html>
<head>
<style type="text/css">
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#customers td, #customers th {
font-size: 1em;
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
}
#customers th {
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>
CSS Table 属性及描述
border-collapse：设置是否把表格边框合并为单一的边框。
border-spacing：设置分隔单元格边框的距离。
caption-side：设置表格标题的位置。
empty-cells：设置是否显示表格中的空单元格。
table-layout：设置显示单元、行和列的算法。
2016-07-27 4187人浏览
评论