在網頁設計中,我們常常需要用到表格來展示數據或排版,而通過CSS可以讓表格更加美觀和易于閱讀。下面就來學習一下如何使用CSS來建立表格樣式。
table { border-collapse: collapse; width: 100%; max-width: 800px; margin: 0 auto; } th, td { border: 1px solid #ccc; padding: 10px; } th { background-color: #eee; font-weight: bold; text-align: left; } tr:nth-child(even) { background-color: #f2f2f2; }
首先要注意的是,CSS樣式要應用在table元素上。通過設置border-collapse: collapse;
可以讓邊框重疊,讓表格更加美觀。在設置表格寬度時,我們通常會使用width: 100%;
讓表格占據整個父容器的寬度,并使用max-width
來限制表格的最大寬度。通過設置margin: 0 auto;
可以讓表格水平居中。
接下來,我們可以為表格的表頭和單元格設置相同的border
和padding
,讓表格看起來更加整齊。可以使用th
來設置表頭的樣式,通過設置background-color
可以讓表頭有一個不同于表格內容的顏色,并使用font-weight
來加粗表頭文字。為了讓表頭文字左對齊,可以設置text-align: left;
。
最后,我們可以通過使用tr:nth-child(even)
來為表格的偶數行設置不同的background-color
,讓表格更加易于閱讀。
上一篇table可以外加css
下一篇table居中css樣式