漂亮的表格

有了前面的基礎學習，下面我們的系統性的掌握以下前面的知識點，這裡運用表格的形式展現。表格是網頁製作的重要組成部分，常用來處理統計，所以表格的清新高大上也很重要。

下面我們先在預覽下要做的表格效果：

是不是很美觀？其實製作表格很容易，需要寫的程式碼也不多，如果你英文夠好的話，這些不需要死記硬背，很容易記住。

下面我們來一睹程式碼，然後逐個分析

從上可以明顯的看出，製作表格用到的都是表格方面的標籤，具體什麼意思？解釋如下：

table：表格

thead：table head 表頭

tbody：table body 表體

tfoot：table foot 表尾

tr：table row 錶行

th：table head cell 表頭單元格

td：table data cell 資料單元格

HTML標籤大全：https：//www。runoob。com/tags/html-reference。html

相關標籤屬性介紹：

colspan：column span列合併（總共5列，這裡合併了4列）

相關CSS屬性介紹：

width：寬度

border-collapse：邊框合併規則

boder：邊框（有上下左右之分）

padding：內間距

text-align：對齊方式

font-weight：字型粗細

background-color：背景顏色

color：字型顏色

至於樣式選擇器及屬性規則，這裡就用到的描述一下

。zh-table：class名

。zh-table th：對指定class下的所有th標籤元素設定樣式

具體的選擇器和CSS屬性，不需要死記，前期只需要不求甚解就行，多寫寫自然就熟悉了

CSS選擇器大全：https：//www。runoob。com/cssref/css-selectors。html

CSS屬性大全：https：//www。runoob。com/cssref/css-reference。html

在具體使用的時候可以透過查手冊即可。