CSS中的table元素可用于創(chuàng)建并格式化HTML表格。table元素包含許多相關(guān)元素,如th和td(定義表頭和表單元格),tr(定義每一行),以及caption和tbody元素(用于添加標(biāo)題和分組)。
使用CSS樣式可以定義表格的外觀。通過(guò)CSS,可以更改表格的寬度、背景顏色、邊框樣式、對(duì)齊方式、字體樣式等。例如,以下代碼用于定義一個(gè)具有紅色邊框的簡(jiǎn)單表格:
<style> table { border: 1px solid red; } th, td { padding: 10px; } </style> <table> <tr> <th>姓名</th> <th>年齡</th> </tr> <tr> <td>張三</td> <td>25</td> </tr> <tr> <td>李四</td> <td>30</td> </tr> </table>此外,還可以使用CSS選擇器來(lái)針對(duì)表格的不同部分進(jìn)行樣式更改。例如,以下代碼將添加一些樣式到表頭,以使其更明顯:
th { background-color: #F2F2F2; font-size: 18px; text-align: center; }此樣式定義了表頭的背景顏色為灰色、字體大小為18px、并使文本水平居中對(duì)齊。 盡管沒(méi)什么好的理由去手動(dòng)創(chuàng)建表格,像AngularJS或ReactJS這樣的庫(kù)仍在使用表格來(lái)組織數(shù)據(jù)。無(wú)論什么情況下使用表格,都可以使用CSS樣式使其外觀出色并使其易于閱讀和理解。
上一篇css table 隔行
下一篇css table漂亮的