Học bảng (table) trong HTML

Trong bài viết trước Taimienphi.vn đã giới thiệu cho bạn về thẻ img trong HTML. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về bảng (table) trong HTML.

Trong HTML, bảng (table) xác định bằng thẻ table. Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết bảng (table) trong HTML.

bang table trong html hoc html

Bảng (table) trong HTML

Mục Lục bài viết:
1. Bảng (table) trong HTML
2. Thêm đường viền cho bảng trong HTML
3. Thuộc tính border-collapse
4. Thêm Cell Padding cho bảng trong HTML
5. Thuộc tính text-align
6. Thuộc tính border-spacing
7. Thuộc tính colspan trong HTML
8. Thuộc tính rowspan trong HTML
9. Thêm chú thích cho bảng trong HTML
10. Thêm Style cho bảng
11. Tổng kết

1. Bảng (table) trong HTML

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

bang table trong html

Kết quả trả về có dạng như dưới đây:

bang table trong html 2

Lưu ý: Các phần tử td là các phần tử chứa dữ liệu của bảng. Các phần tử này có thể chứa tất cả các loại phần tử HTML, văn bản, hình ảnh, danh sách, ... .

2. Thêm đường viền cho bảng trong HTML

Để thiết lập đường viền cho bảng trong HTML, chúng ta sử dụng thuộc tính border trong CSS.
Ví dụ: trong ví dụ dưới đây chúng ta sẽ thêm đường viền cho bảng trong HTML:

bang table trong html 3

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

bang table trong html 4

Lưu ý: Chúng ta phải áp dụng đường viền cho cả bảng và các ô trong bảng.

3. Thuộc tính border-collapse

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

bang table trong html 5

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

bang table trong html 6

4. Thêm Cell Padding cho bảng trong HTML

Cell Padding chỉ định khoảng cách giữa nội dung trong ô và đường viền. Nếu chúng ta không chỉ định padding, các ô trong bảng sẽ không hiển thị padding.
Để chỉ định padding cho bảng trong HTML, chúng ta sử dụng thuộc tính padding trong CSS:
Ví dụ: trong ví dụ dưới đây chúng ta sẽ sử dụng thuộc tính padding để chỉ định padding cho bảng trong HTML:

bang table trong html 7

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

bang table trong html 8

5. Thuộc tính text-align

Mặc định tiêu đề bảng được định dạng chữ bôi đậm và 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ụ: tham khảo ví dụ minh họa căn chỉnh tiêu đề bảng trong HTML sang trái dưới đây:

bang table trong html 9

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 có dạng như dưới đây:

bang table trong html 10

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

bang table trong html 11

Kết quả trả về sau khi áp 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 trong HTML có dạng như dưới đây:

bang table trong html 12

Lưu ý: Nếu bảng chỉ có 1 đường viền duy nhất, chúng ta không sử dụng border-spacing.

7. Thuộc tính colspan trong HTML

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

bang table trong html 13

Kết quả trả về sau khi áp dụng thuộc tính colspan để xác định ô trong bảng mở rộng bao nhiêu cột có dạng như dưới đây:

bang table trong html 14

8. Thuộc tính rowspan trong HTML

Thuộc tính rowspan trong HTML để xác định 1 ô trong bảng mở rộng thêm bao nhiêu hàng.
Ví dụ: trong ví dụ dưới đây chúng ta sẽ sử dụng thuộc tính rowspan để xác định 1 ô trong bảng mở rộng thêm bao nhiêu hàng:

bang table trong html 15

Kết quả trả về sau khi áp dụng thuộc tính rowspan để xác định 1 ô trong bảng mở rộng thêm bao nhiêu hàng có dạng như dưới đây:

bang table trong html 16

9. Thêm chú thích cho bảng trong HTML

Để thêm chú thích cho bảng trong HTML, chúng ta sử dụng thẻ caption.
Ví dụ: trong ví dụ dưới đây chúng ta sẽ sử dụng thẻ caption để thêm chú thích cho bảng:

bang table trong html 17

Kết quả trả về sau khi áp dụng thẻ caption có dạng như dưới đây:

bang table trong html 18

Lưu ý: Thẻ caption phải được chèn ngày sau thẻ table.

10. Thêm Style cho bảng

Để xác định style đặc biệt cho bảng, chúng ta thêm thuộc tính id cho bảng.
Ví dụ: ví dụ dưới đây minh họa cách sử dụng thuộc tính id để xác định style cho bảng trong HTML:

bang table trong html 19

Bây giờ bạn có thể chỉnh định style đặc biệt cho bảng:

bang table trong html 20

Kết quả trả về có dạng như dưới đây:

bang table trong html 21

Thêm các style khác:

bang table trong html 22

11. Tổng kết

- Sử dụng phần tử table trong HTML để chỉ định bảng.
- Sử dụng phần tử tr trong HTML để chỉ định hàng trong bảng.
- Sử dụng phần tử td trong HTML để chỉ định dữ liệu trong bảng.
- Sử dụng phần tử th trong HTML để chỉ định tiêu đề bảng.
- Sử dụng phần tử caption để chỉ định 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 để loại bỏ, chỉ để 1 đường viền duy nhất cho bảng.
- Sử dụng thuộc tính padding trong CSS để thêm padding 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 1 ô trong bảng mở rộng thêm bao nhiêu cột.
- Sử dụng thuộc tính rowspan để xác định 1 ô trong bảng mở rộng thêm bao nhiêu hàng.
- Sử dụng thuộc tính id để tạo style đặc biệt cho bảng.

https://thuthuat.taimienphi.vn/bang-table-trong-html-50614n.aspx
Bài viết trên đây Taimienphi.vn vừa giới thiệu cho bạn về bảng (table) trong HTML. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình để học HTML tốt hơn hãy bình luận bên dưới bài viết nhé. Trong các bài viết tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về danh sách trong HTML nhé.

Tác giả: Trần Thuỳ     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Thẻ định dạng đoạn văn bản trong HTML
Responsive Web Design trong HTML
Thẻ img trong HTML
Bảng mã ký tự (Character Set) trong HTML
Thuộc tính id trong HTML, thẻ ID
Từ khoá liên quan:

bang (table) trong html

, html, bang trong html,

SOFT LIÊN QUAN
  • HTML Creator

    Phần mềm thiết kế web cho người mới

    HTML Creator là phần mềm dành cho người mới học HTML, hỗ trợ người dùng tạo webpage cơ bản kèm theo thiết bị đơn giản mà không cần viết mã (code). Mục đích cuối cùng của người học khi sử dụng HTML Creator là làm quen với cấu trúc khối của ngôn ngữ HTML và xem mã HTML tương ứng trông ra sao khi tạo trang.

Tin Mới


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá