在 HTML 中，常看到 <table> 之内加了 border、cellpadding、及 cellspacing 的属性。如果我们有透过 CSS 来制定表格的样式，那就不需要在 HTML 之内用到这些属性了。
table、th、tr、及 td 这几个选择器可以使用许多在这个教学中有提到的 CSS 属性，例如 文字、字体、边框、颜色、以及 背景。
来看个例子。假设我们想要把以下的样式加入表格内：
表格： 没有边框，字体是 arial，字的大小是 14px。
标题： 背景是黄色。
格子： 每个格子的下面有一条黑色实线。
低于 60 的分数栏内，字体是红色的。
我们就会使用以下的样式表：
table {
border: 0;
font-family: arial;
font-size:14px;
}
th {
background-color:yellow;
}
td {
border-bottom:1 solid #000000;
}
.fail {
color:#FF0000;
}以下是html代码
<table> <tr> <th>学生</th> <th>分数</th> </tr> <tr> <td>Stella</td> <td>85</td> </tr> <tr> <td>Sophie</td> <td>95</td> </tr> <tr> <td>Alice</td> <td class="fail">55</td> </tr> </table>
效果如下
学生 分数
Stella 85
Sophie 95
Alice 55
border-collapse
在这裡我们要特别提到一个跟表格有关的 CSS 属性，那就是 border-collapse。基本上，这个属性可以直接代替 cellspacing=0 的渲染代码。我门来看看下面的例子：
CSS 渲染代码如下，
table {
border:0;
border-collpase:collpase;
width:200px;
}
tr {
border-bottom:1px solid #000;
}以下的 HTML 码，
<table> <tr><td>年度</td><td>收入</td></tr> <tr><td>2006</td><td>35.2M</td></tr> <tr><td>2007</td><td>40.1M</td></tr> </table>
效果如下
年度 收入
2006 35.2M
2007 40.1M
请注意到，年度拦及收入栏的下划线中间并没有空隙。这就是 border-collapse:collapse 的作用。
此文章本站原创，地址 https://www.vxzsk.com/882.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：es6教程(6):正则的扩展
下一篇：Spark 外部数据集
^