Trang chủ » Bài 4: Table và các thành phần của table trong HTML

Bài 4: Table và các thành phần của table trong HTML

Tác giả:
Đánh giá bài đăng
0
82

-Ở phần trước mọi người đã được tìm hiểu về các thẻ tác dụng vào văn bản trong HTML rồi, bài hôm nay chúng ta sẽ cùng tìm hiểu về bảng trong HTML

1, Table là gì?

-Table là một định dạng dùng để hiển thị dữ liệu ở dạng danh sách. Mỗi table sẽ được chia ra gồm hai thành phần là hàngcột,

-Trong HTML chúng được tạo ra bởi các thẻ table, tr,thtd, tbody, thead, tfood.

2, Cấu trúc thường gặp của Table.

-Một thẻ table thì thường có cấu trúc mặc định như sau:

Tiêu đề cột 1 hàng 1 Tiêu đề cột 2 hàng 1
Phần thân cột 1 hàng 2 Phần thân cột 2 hàng 2
Phần thân cột 1 hàng 3 Phần thân cột 2 hàng 3

Xem Kết Quả

-Chú thích:

  • Thuộc tính border="1" là khai báo đường viền cho table.
  • Thuộc tính cellpadding="2" là khai báo khoảng cách giữa nội dung trong ô so với đường viền.
  • Thuộc tính cellspacing="2" là khai báo khoảng cách giữa viền trên và viền dưới của đường viền.
  • Nếu muốn thêm một cột thì thêm 1 cặp nội dung

    .

  • Nếu muốn thêm một hàng thì thêm 1 cặp 
    nội dung

    .

  • Thuộc tính thead,tbody là quy định phần đầu và thân của bảng(có cũng được,không có cũng đựơc), Ngoài ra còn thuộc tính tfood- phần cuối của  bảng.

3, Thuộc tính Rowspan,Colspan trong table.

Thuộc tính rowspan.

-Thuộc tính rowspan dùng để gộp 2 hoặc nhiều hàng vào làm một.

  • Cú Pháp: rowspan=”n”.
  • Trong đó n là số lượng hàng muốn gộp.

Ví dụ:

Tiêu đề cột 1 hàng 1 Tiêu đề cột 2 hàng 1
Phần thân cột 1 hàng 2 Phần thân cột 2 hàng 2
Phần thân cột 2 hàng 3

Xem Kết Quả

Thuộc tính colspan.

-Thuộc tính colspan dùng để gộp 2 hoặc nhiều cột vào làm một.

  • Cú Pháp: colspan=”n”.
  • Trong đó n là số lượng cột muốn gộp.

Ví dụ:

Tiêu đề cột 1 hàng 1 Tiêu đề cột 2 hàng 1
Phần thân cột 1 hàng 2
Phần thân cột 1 hàng 3 Phần thân cột 2 hàng 3

Xem Kết Quả

4, Lời kết.

-Qua bài này mình đã giới thiệu cho mọi người hiểu về table trong HTML và các thuộc tính đi kèm của nó. Các bạn nên chú ý phần gộp hàng và cột nhé!  

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Facebook Messenger Chat Zalo
Messenger Zalo