15. CSS 表格

CSS 表格属性可以帮助您极大地改善表格的外观。

表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。

下面的例子为 table、th 以及 td 设置了蓝色边框：

table, th, td{border: 1px solid blue;}

<html>
<head>
<style type="text/css">
table,th,td
{
border:1px solid blue;
}
</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>
</body>
</html>

请注意，上例中的表格具有双线条边框。这是由于 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;}

<html>
<head>
<style type="text/css">
table,td,th{border:1px solid black;}table{width:100%;}th{height:50px;}
</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>
</body>
</html>

表格文本对齐

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;}

15. CSS 表格相关推荐

Ajax/CSS表格设计汇集
来源:http://www.ffner.cn/bbs/redirect.php?tid=2611&goto=lastpost 当谈到表格数据的设计时,没有太多的网页设计师会有太大的兴趣.今天我 ...
新奇漂亮的Ajax/CSS表格设计汇集
当谈到表格数据的设计时,没有太多的网页设计师会有太大的兴趣.今天我们已经收集了20多个功能超大且看上去挺漂亮的Ajax/CSS表格设计,并且教你一些表格设计中所运用的技巧,例如表格数据的排序和过滤等. ...
21个强大漂亮Ajax/CSS表格设计
本文收集整理20多个功能超强并且挺漂亮的Ajax/CSS表格设计分享给大家,这些表格有表格数据的排序和过滤等. 让我们来看一下这些表格: 1. Tablecloth Tablecloth由CSS Gl ...
【CSS 表格属性（Table）】
CSS 表格属性 Table 1. border-collapse 属性: 单元格/表格边框合并 2. border-spacing 属性: 设置表格/单元格边框间距 /间隔距离 (搭配 bo ...
教你玩转CSS表格（table）
目录表格边框折叠边框表格宽度和高度表格文字对齐表格填充表格颜色表格边框指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框: table, t ...
html 表格文字颜色 css,CSS 表格-JavaScript中文网-JavaScript教程资源分享门户
使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkiste Maria Anders Germany Berglunds sn ...
前端：CSS/13/HTML引入CSS的方法，CSS表格属性，盒子模型，上下外边距合并
HTML引入CSS的方法 1,嵌入式通过<style>标记,来引入CSS样式: 语法格式:<style type="text/css"></styl ...
html css表格制作,CSS 表格(Table)
CSS 表格使用CSS可以大大提高HTML表格的外观,下表是通过CSS制作的表格. Company Contact Country Alfreds Futterkiste Maria Anders ...
一款清爽的CSS表格样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtm ...
php中调用css设置表格,CSS表格设置实例
4.CSS表格设置 /*第一步:给整个表格以及内部的所有单元格加上边框*/ table,th,td { border: 1px solid #333; } /*第二步:将整个表格以及内部单元格的边框全 ...

15. CSS 表格

15. CSS 表格相关推荐

最新文章

热门文章