CSS⼊门到精通——表格样式
第1关：表格边框
任务描述
本关任务：在本关中，我们将学习如何使⽤CSS设置表格样式，使表格更好看。本关任务完成之后的效果图(index.html)如下：
相关知识
为了完成本关任务，请⼤家认真阅读以下内容。
在之前的HTML教程中，我们学习了各类基本表格。
例如，下⾯⽹页代码的表格：
HTML 页⾯：
1. <body>
2. <table width="400">
3. <!-- 表标题 -->
4. <caption>通讯录</caption>
5. <!-- 表头 -->
6. <tr>
7. <th scope="col">姓名</th>
8. <th scope="col">电话</th>
9. <th scope="col">备注</th>
10. </tr>
11. <tr>
12. <td>李雯</td>
13. <td>180********</td>
14. <td>家⼈</td>
15. </tr>
16. <tr>
17. <td>王谦</td>
18. <td>178********</td>
19. <td>同事</td>
20. </tr>
21. <tr>
22. <td>周佳</td>
23. <td>17413511234</td>
24. <td>⾼中同学</td>
25. </tr>
26. </table>
27. </body>
显⽰效果如下：
表格边框
我们使⽤ border 属性为表格添加边框，这样HTML表格才会看起来更符合我们平时使⽤的表格。border属性值可以按顺序设置的属性为：border-width、border-style和border-color。⼀般情况下会省略属性名，直接设置属性值。
其中，border-style可以取如下四种值：
dotted: 点状；
solid: 实线；
double: 双线；
dashed: 虚线。
例如，对上⾯的通讯录表格应⽤如下样式：
1. th,
2. td {
3. border: 1px solid #000; /*设置边框1px粗的⿊⾊实线*/
4. }
显⽰效果如下：
折叠边框
但是，这样设置的通讯录表格有双边框。这是因为表格与th/td元素都有独⽴的边界。
所以，我们可以使⽤ border-collapse 属性设置折叠边框。折叠边框代表边框是否被折叠为⼀个单⼀的边框或相互隔开。
同样的，对上⾯的通讯录表格应⽤如下样式：
1. table {
2. border-collapse: collapse; /*设置折叠边框*/
3. }
4.
5. th,
6. td {
7. padding: .5em .75em;
8. border: 1px solid black; /*设置边框1px粗的⿊⾊实线*/
9. }
显⽰效果如下：
编程要求
学会了基本表格样式修改，现在让我们来实践⼀下吧。请在右侧的编辑框中修改style.css⽂件，完成index.html中表格样式。要求如下：设置表格为折叠边框；
设置 Table属性边框为2px粗的⿊⾊(black)实线；
设置th属性边框为1px粗的灰⾊(grey)实线；
设置td属性边框为1px粗的灰⾊(grey)点线。
注意：本关中，使⽤单词的⽅式指定颜⾊。
测试说明
在右侧编辑器左上⽅，点击代码⽂件，就可以在多个⽂件直接进⾏切换。例如，在关卡中含有实例 example.html，你可以点击example.html 切换到该⽂件。
具体演⽰如下：
1table {
2 /* ********** BEGIN ********** */
3 border-collapse: collapse;
4 border: 2px solid black;
5
6 /* ********** END ********** */
7}
8
9th,
10td {
11 padding: .5em .75em;
12}
13
14th {
15 /* ********** BEGIN ********** */
16 border: 1px solid grey;
17 /* ********** END ********** */
18}
19
20td {
21 /* ********** BEGIN ********** */
22 border: 1px dotted grey;
23 /* ********** END ********** */
24}
第2关：表格颜⾊、⽂字与⼤⼩
任务描述
本关任务：在本关中，我们将学习如何使⽤CSS设置表格样式，使表格更好看。本关任务完成之后的效果图（index.html）如下：
相关知识
css表格样式本关任务：在本关中，我们将学习如何使⽤CSS设置表格样式，使表格更优美。本关任务完成之后的效果图如下：
表格颜⾊
表格颜⾊设置⼗分简便，与设置⽂字颜⾊的⽅式相同。在对应的表格元素标签中，使⽤color属性设置表格中的⽂字颜⾊，使
⽤background属性可以设置表格元素的背景⾊。
例如，对于如下含表格的HTML页⾯：
1. <!DOCTYPE html>
2. <head>
3. <meta charset="UTF-8" />
4. <title>HTML – 简单表格</title>
5. </head>
6. <body>
7. <table width="400">
8. <caption>运动会跑步成绩</caption>
9. <thead>
10. <!-- 表格头部 -->
11. <tr>
12. <th scope="col">长度</th>
13. <th scope="col">李雯</th>
14. <th scope="col">王谦</th>
15. <th scope="col">周佳</th>
16. </tr>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论