Đăng nhập
Bạn chưa có tài khoản? Đăng ký.
Bạn đã quên password?
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 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 |
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%; }