Khám Phá Sử Dụng Bảng (Table) trong HTML

Trong ngôn ngữ đánh dấu HTML, bảng (table) được định nghĩa bằng thẻ table. Hãy theo dõi bài viết dưới đây để hiểu rõ về cú pháp và cách sử dụng bảng trong HTML.

Bảng (table) trong HTML

1. Bảng (table) trong HTML

Như đã đề cập trước đó, bảng trong HTML được xác định bằng thẻ table.
Mỗi hàng trong bảng được định nghĩa bằng thẻ tr. Tiêu đề của bảng sử dụng thẻ th. Mặc định, các tiêu đề bảng được in đậm và căn giữa. Dữ liệu / ô trong bảng được xác định bằng thẻ td.
Ví dụ: dưới đây là một ví dụ về bảng trong HTML:

Kết quả trả về sẽ có dạng như sau:

Chú Ý: Các yếu tố td là những thành phần chứa dữ liệu của bảng. Những thành phần này có thể chứa mọi loại yếu tố HTML, văn bản, hình ảnh, danh sách, ... .

2. Thêm Đường Viền Cho Bảng Trong HTML

Để đặt đường viền cho bảng trong HTML, chúng ta sử dụng thuộc tính border trong CSS.
Ví Dụ: dưới đây là một ví dụ minh họa về cách thêm đường viền cho bảng trong HTML:

Kết quả trả về sau khi áp dụng đường viền cho bảng sẽ có dạng như sau:

Chú Ý: Để tạo đường viền, chúng ta cần áp dụng nó cho cả bảng và các ô bên trong.

Nếu bạn muốn loại bỏ các đường viền, chỉ giữ lại một đường viền duy nhất trong bảng, chúng ta có thể sử dụng thuộc tính border-collapse trong CSS.
Ví Dụ: ở đây là một ví dụ về cách sử dụng thuộc tính border-collapse để loại bỏ các đường viền, chỉ giữ lại một đường duy nhất cho bảng trong HTML:

Kết quả trả về sau khi áp dụng thuộc tính border-collapse cho bảng sẽ có dạng như sau:

4. Thêm Khoảng Cách (Cell Padding) cho Bảng trong HTML

Khoảng cách (Padding) xác định khoảng cách giữa nội dung trong ô và đường viền. Nếu không xác định padding, ô trong bảng sẽ không có khoảng cách.
Để xác định padding cho bảng trong HTML, sử dụng thuộc tính padding trong CSS:
Ví Dụ: ở đây là một ví dụ minh họa về cách sử dụng thuộc tính padding để xác định khoảng cách cho bảng trong HTML:

Kết quả trả về sau khi áp dụng thuộc tính padding cho bảng trong HTML sẽ có dạng như sau:

5. Thuộc Tính Canh Lề Văn Bản (text-align)

Mặc định, tiêu đề bảng được định dạng với chữ in đậm và được căn giữa.
Để căn chỉnh tiêu đề bảng sang trái, chúng ta sử dụng thuộc tính text-align trong CSS.
Ví Dụ: dưới đây là một ví dụ minh họa về cách căn chỉnh tiêu đề của bảng sang trái trong HTML:

Kết quả trả về sau khi áp dụng thuộc tính text-align để căn chỉnh tiêu đề cho bảng trong HTML sẽ có dạng như sau:

6. Khoảng Cách Giữa Đường Viền (border-spacing)

Để thiết lập khoảng cách giữa các đường viền của bảng (table) trong HTML, chúng ta sử dụng thuộc tính border-spacing.
Ví Dụ: dưới đây là một ví dụ minh họa về cách sử dụng thuộc tính border-spacing để thiết lập khoảng cách giữa các đường viền của bảng:

Sau khi thực hiện thuộc tính border-spacing để đặt khoảng cách giữa các đường viền của bảng trong HTML, kết quả sẽ có dạng như sau:

Lưu ý: Trong trường hợp bảng chỉ có một đường viền duy nhất, chúng ta không sử dụng border-spacing.

7. Gộp Cột (colspan) trong HTML

Để mở rộng một ô qua nhiều cột trong bảng, chúng ta sử dụng thuộc tính colspan.
Ví Dụ: dưới đây là một ví dụ minh họa về cách sử dụng thuộc tính colspan để xác định ô trong bảng mở rộng qua nhiều cột.

Khi sử dụng thuộc tính colspan để xác định ô trong bảng mở rộng qua nhiều cột, kết quả sẽ hiển thị như sau:

8. Thuộc tính rowspan trong HTML

Để mở rộng một ô qua nhiều hàng trong bảng, chúng ta sử dụng thuộc tính rowspan.
Ví Dụ: dưới đây là một ví dụ thực hành về cách sử dụng thuộc tính rowspan để xác định 1 ô trong bảng mở rộng qua nhiều hàng.

Kết quả trả về sau khi sử dụng thuộc tính rowspan để xác định 1 ô trong bảng mở rộng qua nhiều hàng sẽ có dạng như sau:

9. Chèn Chú Thích Cho Bảng Trong HTML

Để bổ sung chú thích cho bảng trong HTML, chúng ta sử dụng thẻ caption.
Ví dụ: Dưới đây là một ví dụ minh họa về cách sử dụng thẻ caption để thêm chú thích cho bảng:

Kết quả sau khi thêm thẻ caption sẽ có dạng như sau:

Lưu ý: Thẻ caption phải được đặt sau thẻ table.

10. Thêm Phong Cách Cho Bảng

Để định rõ phong cách cho bảng, chúng ta thêm thuộc tính id cho bảng.
Ví dụ: Dưới đây là một minh họa về cách sử dụng thuộc tính id để định rõ phong cách cho bảng trong HTML:

Bây giờ bạn có thể điều chỉnh phong cách đặc biệt cho bảng:

Kết quả sau khi áp dụng có dạng như sau:

Thêm một số phong cách khác:

11. Tóm Tắt

- Sử dụng thẻ table trong HTML để định nghĩa bảng.
- Sử dụng thẻ tr trong HTML để xác định hàng trong bảng.
- Sử dụng thẻ td trong HTML để xác định dữ liệu trong bảng.
- Sử dụng thẻ th trong HTML để xác định tiêu đề bảng.
- Sử dụng thẻ caption để thêm chú thích cho bảng.
- Sử dụng thuộc tính border trong CSS để thêm đường viền cho bảng.
- Sử dụng thuộc tính border-collapse trong CSS để chỉ giữ lại một đường viền duy nhất cho bảng.
- Sử dụng thuộc tính padding trong CSS để thêm khoảng trống cho các ô trong bảng.
- Sử dụng thuộc tính text-align trong CSS để căn trái văn bản trong ô.
- Sử dụng thuộc tính colspan để xác định một ô trong bảng mở rộng ra bao nhiêu cột.
- Sử dụng thuộc tính rowspan để xác định một ô trong bảng mở rộng thêm bao nhiêu hàng.
- Sử dụng thuộc tính id để tạo phong cách đặc biệt cho bảng.

Bài viết trên đây của Mytour giới thiệu về thẻ bảng (table) trong HTML. Nếu bạn có bất kỳ câu hỏi hoặc muốn biết thêm, hãy để lại ý kiến của bạn để có trải nghiệm HTML tốt hơn. Trong các bài viết sắp tới, Mytour sẽ tiếp tục giới thiệu về danh sách trong HTML.