表格是網頁設計中必不可少的元素之一。表格可以用來展示數據、排版圖表等。在使用表格時,我們可以利用CSS樣式來美化表格,讓其更加美觀和易讀。
一般情況下,我們可以使用table標簽來創建表格,而th表頭、tr行和td單元格分別表示表格的不同部分。在使用CSS樣式時,我們可以對這些標簽進行樣式設置。
table { width: 100%; /* 表格的寬度 */ border-collapse: collapse; /* 合并單元格邊框 */ } th { background-color: #ccc; /* 表頭背景顏色 */ font-weight: bold; /* 加粗字體 */ } tr:first-child { font-size: 16px; /* 第一行字體大小 */ } td { padding: 10px; /* 單元格內邊距 */ border: 1px solid #999; /* 單元格邊框 */ }
利用以上CSS樣式,我們可以實現一個簡單的表格,如下所示:
姓名 | 年齡 | 性別 |
---|---|---|
小明 | 20 | 男 |
小紅 | 18 | 女 |
通過使用CSS樣式,我們可以美化表格,并使其更具可讀性。同時,我們還可以根據實際需求,進一步調整表格樣式,并實現更多的功能。
上一篇html 畫圖代碼