CSS框架可以幫助開發者快速搭建網站,其中制作復雜表格也是常見需求。以下是一個使用Bootstrap框架制作的示例:
<table class="table table-striped table-bordered"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
通過Bootstrap提供的CSS類,表格的樣式被統一了。例如,使用table類可以使表格獲得基本樣式,使用table-striped類可以讓表格斑馬線樣式,使用table-bordered類可以添加邊框線。
在表格中,thead標簽用于包裹表頭,tr標簽用于表示行,th標簽用于表示表頭單元格,td標簽用于表示數據單元格。在Bootstrap中,th和td共用table類的邊框線樣式。
此外,Bootstrap還提供了其他的樣式類,比如table-hover可以在鼠標懸停時添加背景色;table-sm可以使表格變小。還可以通過自定義CSS覆蓋Bootstrap提供的默認樣式,實現更個性化的表格。
上一篇css檢查怎么不變形
下一篇css框架搭建博客