通過(guò)CSS可以輕松制作表格。您可以使用標(biāo)準(zhǔn)的HTML表格標(biāo)簽,如table、th、tr、td、caption等,然后使用CSS添加樣式,例如邊框、背景色、字體等。
以下是一個(gè)基本的表格示例:
<table> <caption>這是表格標(biāo)題</caption> <tr> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> </tr> <tr> <td>單元格1</td> <td>單元格2</td> <td>單元格3</td> </tr> <tr> <td>單元格4</td> <td>單元格5</td> <td>單元格6</td> </tr> </table>在這個(gè)示例中,我們添加了一個(gè)標(biāo)題,一行表頭和兩行數(shù)據(jù)。現(xiàn)在添加一些CSS來(lái)美化表格:
table { border-collapse: collapse; /* 合并邊框 */ width: 100%; font-family: Arial, sans-serif; font-size: 14px; margin-bottom: 20px; } caption { text-align: center; font-weight: bold; font-size: 18px; margin-bottom: 10px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: center; } th { background-color: #f2f2f2; } tr:nth-child(even) td { background-color: #f2f2f2; }在這個(gè)示例中,我們將表格樣式添加到“table”元素,標(biāo)題樣式添加到“caption”元素,單元格樣式添加到“th”和“td”元素。我們?cè)O(shè)置了字體、大小、邊框和填充,并為表頭和偶數(shù)行設(shè)置了背景色。 這樣就完成了一個(gè)簡(jiǎn)單的CSS表格。現(xiàn)在您可以嘗試添加其他樣式,例如添加懸停樣式或更改文本顏色、字體等。