HTML4 13 – Bảng (table) trong HTML

0
193

Ở bài trước, mọi người đã tìm hiểu về các thẻ định dạng font chữ và định dạng căn giữa trong HTML rồi, bài số 13 hôm nay chúng ta sẽ tiếp tục tìm hiểu về bảng trong HTML.

Bảng (table) là gì?

Bảng là 1 định dạng dùng để hiển thị dữ liệu ở dạng danh sách.

Mỗi table bao gồm 2 thành phần: hàng và cột.

Cấu trúc chung của Bảng

Bảng trong HTML được tạo ra bằng cách sử dụng thẻ <table>, bên trong thẻ <tr> được sử dụng để tạo các hàng và thẻ <td> được sử dụng để tạo các ô trong cột.

Các thẻ sử dụng trong Bảng là:

  • <table>: định nghĩa bảng
  • <tr>: định nghĩa 1 hàng trong bảng
  • <th>: định nghĩa 1 ô trong cột của phần đầu bảng, đại diện nội dung cho các ô dữ liệu tương ứng trong cột.
  • <td>: định nghĩa 1 ô trong cột của bảng
  • <tbody>: chứa nội dung chính của bảng
  • <thead>: chứa nội dung phần đầu của bảng
  • <tfood>: chứa nội dung cuối bảng
  • <caption>: định nghĩa phụ đề cho bảng

Ví dụ:

Các thuộc tính trong Bảng

Thuộc tính border

Border là thuộc tính của thẻ <table>, được sử dụng để đặt đường viền cho tất cả các ô trong bảng. Nếu không cần đường viên, có thể để border bằng 0.

Ví dụ:

Thuộc tính cellpadding và cellspacing

2 thuộc tính này đều được sử dụng để điều chỉnh khoảng cách trong các ô bảng. Thuộc tính cellspacing xác định độ rộng của đường viền, còn thuộc tính cellpadding xác định khoảng cách giữa đường viên và nội dung trong từng ô của bảng.

Ví dụ:

Thuộc tính rowspan, colspan trong Bảng

Thuộc tính colspan để nhập 2 hay nhiều cột vào 1 cột. Cú pháp: colspan=”n”, trong đó n là số lượng cột muốn gộp.

Thuộc tính rowspan để nhập 2 hay nhiều hàng vào 1 hàng. Cú pháp: rowspan=”n”, trong đó n là số lượng hàng muốn gộp.

Ví dụ:

Thuộc tính phông nền cho bảng

Có 2 thuộc tính thiết lập nền cho bảng:

  • Thuộc tính bgcolor: thiết lập màu nền
  • Thuộc tính background: thiết lập ảnh nền

Ngoài ra, để thiết lập màu cho đường viền, chúng ta sử dụng thuộc tính bordercolor.

Ví dụ:

Thuộc tính width và height trong Bảng

2 thuộc tính width và height dùng để thiết lập độ rộng và chiều cao cho bảng.

Ví dụ:

Lồng bảng vào trong bảng

Chúng ta có thể lồng 1 bảng vào trong 1 bảng khác. Các bạn có thể sử dụng các thẻ xây dựng bảng trong thẻ <td>.

Ví dụ:

Trình duyệt hỗ trợ

Tất cả các trình duyệt đều hỗ trợ thẻ <table>

Kết luận

Qua bài này, tôi đã hướng dẫn và giới thiệu cho các bạn về Bảng (table) trong HTML, các thuộc tính đi kèm với nó. Các bạn nên chú ý phần thuộc tính gộp hàng và cột nhé.

Chúc các bạn học tập tốt!

 

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây