HTML表格的CSS玩法

我又跟起公开课了，这次还是斯坦福大学，课程名字是Web Application 网络应用，代码为CS142, 又是广大cs课程的一元，学起斯坦福的课很有亲切感，毕竟最初的热情就是在Mehran的点播下激发出来的。

Project#1

这个项目要求我们做两个表格，要求两份表格用同一个html文件去链接不同css文件实现。

第一个：

第二个：

表格的html语法还是很简单的

<table>
    <tr>
        <th>h1</th><th>h2</th>
    </tr>
    <tr>
        <td>...</td>
    </tr>
</table>

一行就是一个<tr></tr> 单元格内容有标题<th>和内容<td>之分，今天在w3school上面看到了另外一种表示表格的结构，把头身尾分开了：

<table>
    <thead>
        <th>..</th>
    </thead>
    <tbody>
        <td>..</td>
    </tbody>
    <tfoot>
        <td>..</td>
    </tfoot>
</table>

这样在css里面写样式的时候可以分得更清楚。

今天写第二个css文件的时候我给自己列了个单子，希望自己不要被问题的规模给恫吓到，逐步去分解：

• 字体
• 对齐
• 图二的那条线
• total那一行
• 外面的紫色框
• 单元格之间要更多空间

字体方案

在table {} 里面定义字体的家族：

font-family: sans-serif, Arial, Helvetica;

标题和脚注是要加粗的，这个属性叫做weight:

thead, tfoot {
     font-weight: bold;
} 

对齐

一般都是左对齐，所以在table{}里面设定：

text-align: left;

看图片会发现从第四列开始居中对齐了，这时候我们用到了css3里面一个非常有效的功能：nth-child()

td:nth-child(n+4) {
     text-align: center;
}
th:nth-child(n+4){
     text-align: center;
}

它实现的功能就是从第4列开始居中对齐，标题和内容的设定分开写了，因为我发现合在一起的语法不太好调整；这个功能的拓展你可以在w3school上面找到。

total上面那根线

那是tfoot 部分的上面的边框：

tfoot td {
     border-top-style: solid;
     border-color: black;
}

为什么后面加了个td 呢？因为我发现直接写tfoot 是无效的。

噢，这之前你一定要设置table 的 border-collapse 属性为 collapse，不然中间会有空隙，影响美观。

更多的空间

一个是给单元格设置补白：

th, td {
padding: 5px;
}

还有一个办法是设置table 的宽度：

width: 100%;

这就让table 填满整个空间，随着浏览器的大小变化，单元格的空隙也会变化。

外面紫色的边框

我一开始以为是为table 设置边框，但补白的时候失败了，那条线永远是插着边框的，而不是像图片上那样有空白；后来发现要设置的是body 的边框：

body {
     border-style: solid;
     border-color: #d0d0ff;
     border-style: solid;
     border-width: 10px;
     margin: 20px;
     padding: 15px;
}

补白也有了，完美收官！