在網頁設計中,表格是經常使用的元素之一。在 CSS 中,我們可以通過以下步驟來建立一個簡單的表格。
<table> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> <tr> <td>張三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>男</td> </tr> <tr> <td>王五</td> <td>28</td> <td>女</td> </tr> </table>
首先,我們需要先建立一個 table 標簽。在 table 標簽內部,我們可以通過 tr 標簽來表示表格中的每一行。在每一行中,我們使用 td 標簽來表示每個單元格的內容,而使用 th 標簽則表示每行的表頭。
為了美化表格,我們可以加入一些 CSS 樣式,如下所示:
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; } tr:hover { background-color: #f5f5f5; }
在上述 CSS 樣式中,我們為表格設置了樣式屬性,并為表頭和單元格設置了不同的背景色和邊框線條。同時,我們也為表格添加了鼠標懸停時的樣式,以提高表格的可視性。
通過上述步驟,我們便可以在 CSS 中建立一個簡單的表格,并通過樣式設置使其具有美觀、清晰的視覺效果。