Css基础学习（八）—表格

 

终于轮到我们的表格出场了，虽然表格在以前过度的使用在了网页的布局当中，但是其价值还是存在的。很显然把表格贬得一文不名是不公平的！表格在表示列表数据方面有着其突出的作用，我们就学习一下使用css怎么使表格发挥它应有的威力。

在说明css对表格的作用之前，我们需要做出一些说明。表格Table拥有着自己的样式元素：cellpadding cellspacing border等，这些元素将会对css样式的作用起到不少的影响，因此我们建议在表格内不使用样式属性，完全使用css来控制，这是一个很好的原则。

我们先来建立一个表格的html，记住：表格元素内不包含上面所说的任何表现信息。

1. <table>
2. <tr>
3. <th>Team</th>
4. <th>1998</th>
5. <th>2002</th>
6. </tr>
7. <tr>
8. <th>England</th>
9. <td>Second Round</td>
10. <td>Quarter Finals</td>
11. </tr>
12. <tr>
13. <th>France</th>
14. <td>Winners</td>
15. <td>Group stages</td>
16. </tr>
17. </table>

准备活动好了，开始我们的css之旅吧。

1. table{
2. border:1px solid #333;
3. font: normal 12px 'Lucida Grande',Verdana,sans-serif;
4. }
5. td,th{
6. padding:3px;
7. }
8. th{
9. text-align:left;
10. color:#FFF;
11. background-color:#333;
12. border-style:solid;
13. border-width:1px;
14. border-color:#CCC #666 #000 #CCC;
15. }
16. td{
17. background-color:#DDDDDD;
18. border-style:solid;
19. border-width:1px;
20. border-color:#FFF #AAA #666 #FFF;
21. }

我们先定义好表格的样式，里面没有什么我们不熟悉的样式，那就先看看产生的效果是怎么样的。

没有添加样式的纯html表格：

Team	1998	2002
England	Second Round	Quarter Finals
France	Winners	Group stages

添加样式以后的表格表现：

Team	1998	2002
England	Second Round	Quarter Finals
France	Winners	Group stages

border-collapse属性可以替代Table里面的cellspacing属性，用于减少或删除单元格之间的默认间隔。

1. table{
2. border:0;
3. border-collapse:collapse;
4. font: normal 12px 'Lucida Grande',Verdana,sans-serif;
5. }
6. td,th{
7. padding:3px;
8. }
9. th{
10. text-align:left;
11. border-bottom:1px solid #000;
12. }
13. td{
14. border-bottom:1px solid #000;
15. }

我们可以看看border-collapse:collapse;这个属性有和没有的区别在哪里。

没有添加border-collapse:collapse;属性的样式：

Team	1998	2002
England	Second Round	Quarter Finals
France	Winners	Group stages

添加border-collapse:collapse;属性的样式：

Team	1998	2002
England	Second Round	Quarter Finals
France	Winners	Group stages

 

给表格添加背景图像

1. th{
2. text-align:left;
3. background:#FFF url(images/tablefade.gif) repeat-x;
4. border-bottom:1px solid #000;
5. }

显示效果大家就自己去试试看吧。

表格还有很多的技巧，我就不一一介绍了，多多使用会发现更多的技巧的。