thực hành - tạo bảng full width
Trong bài thực hành này, chúng ta sẽ tìm hiểu cách tạo bảng với chiều rộng full width 100% bằng HTML và CSS.
Bảng full width 100%
Bảng với chiều rộng mặc định ban đầu.
| Name | Country | Gender |
|---|---|---|
| Glfreds Futterkiste | Germany | Female |
| Aerglunds snabbkop | Sweden | Male |
| Island Trading | UK | Male |
| Koniglich Essen | Germany | Female |
| Baughing Bacchus Winecellars | Canada | Female |
| Zagazzini Alimentari Riuniti | Italy | Male |
Bảng với chiều rộng full width 100%.
| Name | Country | Gender |
|---|---|---|
| Glfreds Futterkiste | Germany | Female |
| Aerglunds snabbkop | Sweden | Male |
| Island Trading | UK | Male |
| Koniglich Essen | Germany | Female |
| Baughing Bacchus Winecellars | Canada | Female |
| Zagazzini Alimentari Riuniti | Italy | Male |
Cách tạo bảng full width 100%
Bước 1) Thêm HTML:
Ví dụ
<table id="table2"> <tr> <th>Name</th> <th>Country</th> <th>Gender</th> </tr> <tr> <td>Glfreds Futterkiste</td> <td>Germany</td> <td>Female</td> </tr> <tr> <td>Aerglunds snabbkop</td> <td>Sweden</td> <td>Male</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> <td>Male</td> </tr> <tr> <td>Koniglich Essen</td> <td>Germany</td> <td>Female</td> </tr> <tr> <td>Baughing Bacchus Winecellars</td> <td>Canada</td> <td>Female</td> </tr> <tr> <td>Zagazzini Alimentari Riuniti</td> <td>Italy</td> <td>Male</td> </tr> </table>
Bước 2) Thêm CSS:
Ví dụ
/* Bảng có chiều rộng là 100% */ #table2 { width:100%; } /* 3 cột rộng bằng nhau */ #table2 th, #table2 td { width:33.33%; }