Thẻ table trong HTML được sử dụng để hiển thị dữ liệu ở dạng bảng [hàng * cột]. Có thể có nhiều cột trong một hàng.
Các thẻ table trong HTML được sử dụng để quản lý việc bố cục trang web. Ví dụ: Phần tiêu đề, thanh điều hướng, nội dung trang, phần chân trang... Nhưng bạn nên sử dụng thẻ div thay vì table để quản lý bố cục của trang.
Các thẻ định nghĩa bảng trong HTML
ThẻMô tả| Định nghĩa 1 ô của bảng.Định nghĩa phụ đề bảng.Chỉ định một nhóm của một hoặc nhiều cột trong một bảng để định dạng.Được sử dụng với thẻ để chỉ định thuộc tính cột cho mỗi cột. |
| Sonoo | Jaiswal | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
Output:
First_NameLast_NameMarksSonooJaiswal60JamesWilliam80SwatiSironi82ChetnaSingh72
Thuộc tính border của bảng trong HTML
Có hai cách để xác định border cho các bảng trong HTML.
- Sử dụng thuộc tính border của bảng trong HTML.
- Sử dụng thuộc tính border trong CSS.
1. Sử dụng thuộc tính border của bảng trong HTML
Bạn có thể sử dụng thuộc tính border của thẻ table trong HTML để chỉ định đường viền. Nhưng bạn không nên sử dụng cách này.
Ví dụ:
| Sonoo | Jaiswal | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
Output:
First_NameLast_NameMarksSonooJaiswal60JamesWilliam80SwatiSironi82ChetnaSingh722. Sử dụng thuộc tính border trong CSS
Bạn nên sử dụng thuộc tính border của CSS để chỉ định đường viền của bảng.
Ví dụ:
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
| Sonoo | Jaiswal | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
Output:
NenTang.vn® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020
Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: phucuong@ctu.edu.vn
2.2. Gom các dòng, cột theo bố cục đã phân tích
- Vùng chứa nội dung HEADER chúng ta sẽ gom 3 cột lại.
- Vùng chứa nội dung MENU NGANG chúng ta sẽ gom 3 cột lại.
- Vùng chứa nội dung SLIDER chúng ta sẽ gom 2 cột lại.
- Vùng chứa nội dung SIDEBAR, chúng ta sẽ gom 2 dòng lại.
- Vùng chứa nội dung FOOTER 1, FOOTER 2, FOOTER 3, chúng ta sẽ gom 2 dòng lại.
- Vùng chứa nội dung BẢN QUYỀN, chúng ta sẽ gom 3 cột lại.
Nền tảng căn bản về HTML5 đầu tiên - nentang.vnBố cục trang web Sử dụng thẻ TABLE đơn giản
| HEADER | |
| MENU NGANG | |
| SIDEBAR | SLIDER |
| SẢN PHẨM NỔI BẬT 1 | SẢN PHẨM NỔI BẬT 2 |
| THÔNG TIN CÔNG TY | Các đường link FOOTER 1 2 3 |
|
Bản quyền bởi © 2020 bởi NenTang.vn ® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020 Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: phucuong@ctu.edu.vn |
2.3. Hiệu chỉnh định dạng bảng tính, chiều cao, chiều rộng các dòng, cột theo yêu cầu
- Hiệu chỉnh cho khoảng cách giữa các ô table nhỏ lại để đường nét được nhỏ hơn, sử dụng thuộc tính
cellspacing="? px"cho thẻNền tảng căn bản về HTML5 đầu tiên - nentang.vn
Bố cục trang web Sử dụng thẻ TABLE đơn giản
0 cho thẻHEADER MENU NGANG SIDEBAR SLIDER SẢN PHẨM NỔI BẬT 1 SẢN PHẨM NỔI BẬT 2 THÔNG TIN CÔNG TY Các đường link FOOTER 1 2 3 Bản quyền bởi © 2020 bởi NenTang.vn
® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020
Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: phucuong@ctu.edu.vn hoặc hoặc hoặc - Hiệu chỉnh chiều rộng sử dụng thuộc tính
Nền tảng căn bản về HTML5 đầu tiên - nentang.vn
Bố cục trang web Sử dụng thẻ TABLE đơn giản
1 cho thẻHEADER MENU NGANG SIDEBAR SLIDER SẢN PHẨM NỔI BẬT 1 SẢN PHẨM NỔI BẬT 2 THÔNG TIN CÔNG TY Các đường link FOOTER 1 2 3 Bản quyền bởi © 2020 bởi NenTang.vn
® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020
Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: phucuong@ctu.edu.vn - Tô màu nền sử dụng thuộc tính
Nền tảng căn bản về HTML5 đầu tiên - nentang.vn
Bố cục trang web Sử dụng thẻ TABLE đơn giản
2 cho thẻHEADER MENU NGANG SIDEBAR SLIDER SẢN PHẨM NỔI BẬT 1 SẢN PHẨM NỔI BẬT 2 THÔNG TIN CÔNG TY Các đường link FOOTER 1 2 3 Bản quyền bởi © 2020 bởi NenTang.vn
® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020
Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: phucuong@ctu.edu.vn
Nền tảng căn bản về HTML5 đầu tiên - nentang.vnBố cục trang web Sử dụng thẻ TABLE đơn giản
| HEADER | |
| MENU NGANG | |
| SIDEBAR | SLIDER |
|
SẢN PHẨM NỔI BẬT 1
|
SẢN PHẨM NỔI BẬT 2
|
| THÔNG TIN CÔNG TY | Các đường link FOOTER 1 2 3 |
|
Bản quyền bởi © 2020 bởi NenTang.vn ® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020 Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: phucuong@ctu.edu.vn |
2.4. Canh lề nội dung trong ô
- Canh lề theo chiều ngang: sử dụng thuộc tính
Nền tảng căn bản về HTML5 đầu tiên - nentang.vn
Bố cục trang web Sử dụng thẻ TABLE đơn giản
3 cho thẻHEADER MENU NGANG SIDEBAR SLIDER SẢN PHẨM NỔI BẬT 1 SẢN PHẨM NỔI BẬT 2 THÔNG TIN CÔNG TY Các đường link FOOTER 1 2 3 Bản quyền bởi © 2020 bởi NenTang.vn
® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020
Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: phucuong@ctu.edu.vn
Nền tảng căn bản về HTML5 đầu tiên - nentang.vnBố cục trang web Sử dụng thẻ TABLE đơn giản
| HEADER | |
| MENU NGANG | |
| SIDEBAR | SLIDER |
| SẢN PHẨM NỔI BẬT 1 | SẢN PHẨM NỔI BẬT 2 |
| THÔNG TIN CÔNG TY | Các đường link FOOTER 1 2 3 |
|
Bản quyền bởi © 2020 bởi NenTang.vn ® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020 Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: phucuong@ctu.edu.vn |
Nền tảng căn bản về HTML5 đầu tiên - nentang.vnBố cục trang web Sử dụng thẻ TABLE đơn giản
| HEADER | |
| MENU NGANG | |
| SIDEBAR | SLIDER |
|
SẢN PHẨM NỔI BẬT 1
|
SẢN PHẨM NỔI BẬT 2
|
| THÔNG TIN CÔNG TY | Các đường link FOOTER 1 2 3 |
|
Bản quyền bởi © 2020 bởi NenTang.vn ® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020 Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: phucuong@ctu.edu.vn |
Step 3: phân tích bố cục [layout] chi tiết
Bên trong Vùng chứa nội dung FOOTER 1, FOOTER 2, FOOTER 3, chúng ta sẽ tạo 1 table con nằm bên trong, bao gồm:- 1 dòng và 3 cột.
- Có chiều rộng width = 100% chiều rộng của cột cha chứa nó.
® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020
Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: phucuong@ctu.edu.vn