CSS可以使表格變得更加美觀和易于閱讀。設置CSS表格樣式的方法是:
table { border-collapse: collapse; /* 合并邊框 */ width: 100%; /* 使表格占據整個容器 */ font-size: 14px; /* 設置表格文字大小 */ } th, td { border: 1px solid #ccc; /* 設置表格邊框 */ padding: 8px; /* 設置單元格內邊距 */ text-align: center; /* 設置單元格內文本對齊方式 */ } th { background-color: #f2f2f2; /* 設置表頭背景顏色 */ font-weight: bold; /* 加粗表頭文字 */ }
此外,我們還可以使用偽類選擇器指定表格不同單元格的背景顏色或其他樣式:
td:nth-child(even) { background-color: #f2f2f2; /* 交替樣式 */ } td:hover { background-color: #ccc; /* 鼠標懸浮樣式 */ }
如果想讓表格跨越整個容器,我們可以使用以下CSS代碼:
table { width: 100%; table-layout: fixed; /* 固定列寬 */ } td { width: 25%; /* 設置每列寬度 */ }
最后,如果需要在表格中添加圖像或樣式,請使用CSS類:
<td class="highlighted">...</td> .highlighted { background-color: #yellow; font-weight: bold; }
通過以上CSS代碼,我們可以打造一個美觀、易于閱讀的表格。