表格是Web頁面中最常見的元素之一。使用CSS,我們可以輕松地創建美觀和具有響應性的表格模板。本文將介紹如何使用CSS制作漂亮的表格模板。
table { border-collapse: collapse; width: 100%; font-size: 1em; color: #4d4d4d; font-weight: normal; line-height: 1.5; text-align: left; margin: 20px 0; } th, td { padding: 0.75em; vertical-align: middle; border: 1px solid #f2f2f2; } th { background-color: #f2f2f2; font-weight: bold; } tr:nth-child(even) { background-color: #f9f9f9; } @media screen and (max-width: 480px) { table { font-size: .8em; } th, td { padding: .5em; } }
首先,我們定義了一個基本的CSS表格模板。我們為表格設置了邊框合并(border-collapse)、單位寬度(width)、字體大小(font-size)、顏色(color)、字重(font-weight)、行高(line-height)、文本對齊方式(text-align)和邊距(margin)。
接下來,我們將樣式應用到表頭單元格(th)和表數據單元格(td)。我們為這些單元格設置了內邊距(padding)、垂直對齊方式(vertical-align)和邊框(border)。
在表頭單元格中,我們設置了背景顏色(background-color)和字體加粗(font-weight)屬性。
我們還使用偽類選擇器:nth-child進行表格斑馬線處理,這會將奇數行設置為深灰色,偶數行設置為淺灰色。
最后,我們使用@media查詢為移動設備調整了表格的字體大小和內邊距。
使用這個表格模板,我們可以根據我們的需要輕松地創建高品質、響應式和美觀的表格。