HTML5表格和CSS是網頁設計中必不可少的兩個元素。HTML5表格用于展示和組織數據,而CSS則負責美化和布局。
要創建一個HTML5表格,我們需要使用Table標簽和它的子標簽,如tr和td。以下是一個簡單的例子:
<table> <tr> <td>姓名</td> <td>年齡</td> <td>性別</td> </tr> <tr> <td>小明</td> <td>18</td> <td>男</td> </tr> </table>
上面的代碼創建了一個包含表頭和一行數據的表格,并使用td標簽定義單元格。我們可以進一步使用CSS來美化這個表格,例如添加邊框和背景色,以及設置字體樣式等。以下是一個簡單的CSS樣例:
table { border-collapse: collapse; } td, th { border: 1px solid #ddd; padding: 8px; text-align: center; } th { background-color: #f2f2f2; } tr:nth-child(even) td { background-color: #f2f2f2; } tr:hover td { background-color: #ddd; }
上面的代碼設置了表格的邊框為collapse,單元格的邊框為1像素實線,填充為8像素,水平居中對齊。表頭使用灰色背景色,并且偶數行使用灰色背景色。當鼠標移動到單元格上時,它的背景色變成淺灰色。
除了以上的基本用法,HTML5表格和CSS還有很多高級用法,例如合并單元格、排序、篩選等。掌握這些技巧可以讓你創建出更豐富、更實用的表格。
上一篇css里的pre
下一篇html與css簡介