CSS中的table(表格)可用于在網站中呈現數據。它由行(tr)和列(td)組成,并使用CSS樣式定義表格的外觀并添加樣式。以下是CSS中table的詳細解釋:
table { border-collapse: collapse; /* 邊框合并為單一線*/ width: 100%; /* 寬度設為100% */ table-layout: fixed; /* 固定表布局 */ } th { background-color: #ddd; /* 表頭背景顏色 */ color: #333; /* 表頭文字顏色 */ font-weight: bold; /* 文字加粗 */ } td, th { border: 1px solid #ccc; /* 邊框為1像素實線,顏色為灰色 */ padding: 8px; /* 單元格內邊距為8像素 */ text-align: left; /* 文字居左對齊 */ } tr:nth-child(even) { background-color: #f2f2f2; /* 設置背景顏色為淡灰色,從第2行開始 */ }
以上代碼表示了table的基本樣式和表格的布局。border-collapse屬性用于合并單元格邊框,然后可以將表格寬度設置為100%,使其占據整個容器。此外,table-layout屬性可確定表格的寬度以確保單元格在所有行中都具有相同的寬度。
在表格中,th作為表頭,而其他單元格則是用td表示。使用th元素可使表頭單元格更突出,并使用背景顏色和加粗字體突出顯示表頭。而td元素則用于定義其他單元格,邊框的顏色和內邊距的大小都可以定義。text-align屬性用于設置文本在單元格內的水平對齊方式。
最后,使用偽類:nth-child(even)在奇數和偶數行之間交替設置不同的背景色來美化表格。
下一篇css的table