CSS3是一種用于網頁設計的樣式表語言,它可以讓我們創建各種美觀實用的表格。下面就讓我們來看一個使用CSS3制作的表格吧。
table { border-collapse: collapse; width: 100%; margin-bottom: 20px; } td, th { border: 1px solid #ddd; padding: 8px; } th { background-color: #eee; font-weight: bold; }
以上代碼是用于創建表格的CSS樣式。其中,border-collapse: collapse
用于合并表格單元格的邊框;width: 100%
用于使表格占據整個可見區域;margin-bottom: 20px
用于設置表格和其它元素之間的距離;td, th
用于對表格單元格應用樣式。
接下來是用于顯示表格的HTML代碼:
姓名 | 性別 | 年齡 |
---|---|---|
張三 | 男 | 25 |
李四 | 女 | 30 |
以上代碼是一個簡單的表格。如果想要添加更多的表格單元格,只需在<tr>
標簽內再添加更多的<td>
標簽即可。
總之,CSS3提供了豐富的表格樣式,可以讓我們創建出美觀實用的表格。使用CSS3制作表格可以幫助我們更好地展示數據和信息,提高用戶體驗。