表格是網(wǎng)頁設(shè)計中經(jīng)常用到的一個元素,有時候我們需要對表格進(jìn)行樣式處理,這時候 CSS 可以大顯身手。
下面是一個使用 CSS 樣式做表格的代碼示例,其中使用了 pre 標(biāo)簽來展示代碼。
<table> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> <tr> <td>張三</td> <td>26</td> <td>男</td> </tr> <tr> <td>李四</td> <td>33</td> <td>女</td> </tr> <tr> <td>王五</td> <td>18</td> <td>男</td> </tr> </table> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: center; } th { background-color: #f2f2f2; font-weight: bold; } </style>
上面的代碼中,首先是一個 HTML 表格的基本結(jié)構(gòu)。在樣式部分使用了 CSS 選擇器來選擇表格、表頭、單元格元素,然后分別對其進(jìn)行樣式處理。其中,使用了 border-collapse 屬性來設(shè)置表格的邊框合并,使用了 padding 屬性來設(shè)置內(nèi)邊距,使用了 text-align 屬性來設(shè)置文本水平居中。
此外,在樣式部分還設(shè)置了表頭的背景顏色和字體加粗。可以看出,使用 CSS 樣式處理表格可以快速且方便地定制表格樣式,使得表格在網(wǎng)頁設(shè)計中具有更多的靈活性。