Trong bài viết này mình sẽ hướng dẫn cách tạo bảng trong HTML, qua đó bạn sẽ biết được các thuộc tính của bảng như. colspan, rowspan, cellpadding và cellspacing
Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức.
Dùng bảng HTML để hiển thị dữ liệu ở dạng bảng. Mỗi bảng sẽ được chia ra bao gồm hai thành phần, đó là cột và hàng. Chúng được tạo ra bởi các thẻ
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
5,
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
6,
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
0,
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
1,
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
2,
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
3
Trong các trang web ứng dụng, bảng ít khi được sử dụng, chỉ những ứng dụng quản lý dữ liệu thì người mới hay sử dụng. Lý do có thể là cấu trúc của bảng trông rất nặng nề, rất khó kết hợp với CSS để tạo ra những mẫu giao diện phức tạp. Tuy nhiên, với bảng dữ liệu được hiển thị dưới dạng bảng thì bảng vẫn là ưu tiên số 1
1. Bảng thẻ trong HTML là gì?
Bảng thẻ trong HTML là một thẻ đặc biệt, được sử dụng để hiển thị bảng dữ liệu dạng bảng lên trình duyệt. Mỗi bảng sẽ có số hàng và số cột được xác định. Bạn cũng có thể ghép hai ô hai ô liền kề nhau thành một ô giống như trong Word. Xem hình dưới đây để hiểu rõ hơn về thẻ này
Bài viết này đã được đăng tại [free tuts. mạng lưới]
Cách đơn giản nhất để tạo bảng là uốn theo cú pháp sau
Bản trình diễn CHẠY
| Hàng 1 cột 1 |
Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
in which
- Thuộc tính
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
4 là khai báo đường bao của bảng - Thuộc tính
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
5 là khai báo khoảng cách giữa ranh giới trên và ranh giới bên dưới của đường viền - Thuộc tính
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
6 là khai báo khoảng cách giữa nội dung trong ô so với đường viền - Nếu muốn thêm một cột thì chỉ việc bổ sung một
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
0 - Nếu muốn thêm một hàng thì chỉ việc bổ sung một
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
6
Bạn hãy tự thay đổi số lượng thẻ tr và td để quan sát nhé, việc làm này sẽ giúp bạn hiểu rõ hơn về table
2. Colspan trong HTML
Colspan html là một thuộc tính của bảng thẻ, nó được sử dụng để hợp nhất các ô lại với nhau trên cùng một hàng. Ví dụ bạn muốn gộp 2 ô với nhau thì khai báo giá trị cho nó là 2, gộp 3 ô thì khai báo là 3
Khi khai báo colspan thì số lượng thẻ td của hàng hiện tại sẽ giảm đi so với các hàng khác
Như trong ví dụ dưới đây, thẻ
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
6 đầu tiên chỉ có hai thẻ
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
0, còn thẻ
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
6 thứ hai thì có đến 3 thẻ
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
0. Lý do là trong thẻ
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
6 đầu tiên có thẻ
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
0 có
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
25
Bản trình diễn CHẠY
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
3. Rowspan trong HTML
Tương tự như colspan, rowspan được sử dụng để ghép hai ô lại với nhau. Tuy nhiên, nó sẽ tràn theo cột chứ không phải theo hàng. Bạn muốn bao hàm bao nhiêu ô thì hãy nhập số lượng cho nó
Ví dụ. Xây dựng bảng cấu trúc cho hình ảnh trên
Bản trình diễn CHẠY
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
2
3. Nhóm thẻ thead - tbody - tfoot
Ở bài tìm hiểu HTML là gì mình có giới thiệu sơ lược về bổ sung của trang web bao gồm các thành phần như header, content, footer thì trong bảng cũng tương tự. Người ta sẽ chia bảng ra làm ba thành phần chính, đó là
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
26,
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
27 và
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
28 tương ứng với các thẻ
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
2,
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
1 và
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
3
Ví dụ. Build struct table for form on
Bản trình diễn CHẠY
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
1
Run up thì kết quả là giao diện vẫn giống như cách làm thông thường. Tuy nhiên, nếu bây giờ ta thay đổi vị trí của nhóm
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
1 và
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
2 xem chuyện gì xảy ra
Ví dụ. Thay đổi vị trí của các thẻ thead, tbody và tfoot
Bản trình diễn CHẠY
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
4
Run up interface is normal. Theo đúng luật biên dịch thì phần
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
1 sẽ phải nằm trên cùng bởi vì nó đặt trên cùng, nhưng nó lại nằm đúng vị trí ngay giữa. Điều này có nghĩa là nếu ta sử dụng các nhóm này thì dù đặt ở đâu thì lúc hiển thị vẫn theo luật thead - tbody - tfoot
4. Các thuộc tính của bảng trong HTML thường được sử dụng nhiều nhất
Sau đây mình xin tổng hợp lại 4 thuộc tính của bảng thẻ trong HTML, các bạn lưu lại để sau này cần dùng đến nhé
- biên giới. Dùng để khai báo kích thước đường viền của bảng
- không gian tế bào. Khai báo độ rộng của đường viền
- đệm di động. Khai báo khoảng cách giữa đường viền và dữ liệu trong ô
- bề rộng. Khai báo chiều rộng của các cột [nằm trong thẻ tr]
5. Câu hỏi thường gặp về bảng HTML
Cách tạo bảng không có đường viền trong HTML?
Để tạo một bảng không có đường viền, ta sẽ thiết lập thuộc tính
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
15
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
7
Cách tạo khoảng cách giữa các chữ và đường viền của các ô trong bảng
Chúng ta sử dụng thuộc tính cellpadding để tạo khoảng trống giữa dữ liệu và đường viền của bảng. Đơn vị truyền tải được tính theo pixel
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
8
Cách thiết lập đồ dài của các cột trong bảng
Ta set property width is in the tagtr to setting chiều dài cho các cột
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
9
6. Lời kết
Như vậy trong bài viết này mình đã giới thiệu đến các thẻ HTML liên quan đến bảng. Điều lưu ý thứ nhất ở bài này là cách nhiều vườn ô với nhau bằng hai thẻ
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
16 và
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
17. Thứ hai được hiểu là các nhóm thẻ
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
2,
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
1 và
| Hàng 1 cột 1 và Hàng 1 cột 2 |
Hàng 1 cột 3 |
| Hàng 2 cột 1 |
Hàng 2 cột 2 |
Hàng 2 cột 3 |
3 để nhanh chóng xác định vị trí cho nó. Bài này mình xin dừng ở đây, cám ơn các bạn đã theo dõi bộ truyện này