CSS 是一個強大的樣式語言,可以讓網頁設計變得更加美觀和易于閱讀。創建一個漂亮的表格是很容易的,只需要使用 CSS 來設置表格的外觀和樣式即可。
table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #4CAF50; color: white; }
首先,需要在 HTML 中創建一個表格。為了使表格更加容易樣式化,建議使用相同的類名和 ID 來標識不同的元素。以下是一個簡單的表格示例:
<table> <tr> <th>名稱</th> <th>價格</th> <th>數量</th> </tr> <tr> <td>蘋果</td> <td>2 元</td> <td>10 個</td> </tr> <tr> <td>香蕉</td> <td>3 元</td> <td>5 個</td> </tr> </table>
上面的代碼將創建一個簡單的表格,其中包含三列:名稱、價格和數量。接下來,使用 CSS 來設置表格的外觀和樣式。在上面的代碼示例中,使用了border-collapse
屬性來將單元格邊框合并為一個,以獲得更好的外觀效果。然后,使用td
和th
元素的border
和padding
屬性設置單元格的邊框和內邊距。
最后,使用 CSS 的background-color
和color
屬性來設置表頭的背景色和前景色。這些屬性將使表格更加易于閱讀和理解。
使用上面的 CSS 代碼,就可以創建一個漂亮的表格,展示您的數據。