在網頁設計中,表格是一個非常常見的元素,當我們需要在表格中展示更多的數據時,會想到在表格里嵌套一個表格。下面就來談談如何在CSS表格中再弄一個表格。
首先,在HTML中定義一個包含表格的容器,如下所示:
然后,就可以在容器中再創建一個表格。為了讓表格排列更加美觀,可以用CSS進行樣式美化。例如,為表格添加邊框和間距等樣式:
最終,嵌套的表格效果如下所示:
總的來說,在CSS表格里面再弄一個表格,只需要在容器中再創建一個表格即可。通過CSS對表格進行樣式美化,就可以讓網頁更加美觀易讀。
首先,在HTML中定義一個包含表格的容器,如下所示:
<div id="container"> <table> <tr> <th>編號</th> <th>姓名</th> <th>年齡</th> </tr> <tr> <td>001</td> <td>張三</td> <td>25</td> </tr> <tr> <td>002</td> <td>李四</td> <td>30</td> </tr> </table> </div>
然后,就可以在容器中再創建一個表格。為了讓表格排列更加美觀,可以用CSS進行樣式美化。例如,為表格添加邊框和間距等樣式:
#container table { border-collapse: collapse; border: 1px solid gray; margin: 20px; } #container table td, #container table th { border: 1px solid gray; padding: 6px; }
最終,嵌套的表格效果如下所示:
編號 | 姓名 | 年齡 | ||||||
---|---|---|---|---|---|---|---|---|
001 | 張三 | 25 | ||||||
002 | 李四 | 30 | ||||||
|
總的來說,在CSS表格里面再弄一個表格,只需要在容器中再創建一個表格即可。通過CSS對表格進行樣式美化,就可以讓網頁更加美觀易讀。
上一篇css表示第一個div
下一篇css表格設置可編輯器