Bảng hướng dẫn này sẽ cho bạn biết làm thế nào để tạo bảng trong HTML.

Xem thêm>> Kiến thức về HTML (p1): Giới thiệu HTML và tạo trang web bằng HTML, Kiến thức về HTML (P2): HTML Elements

Khung cấu trúc

  • Tag <table> được dùng để tạo một bảng HTML.
  • Một tag <table> đơn giản có chứa một hoặc nhiều <tr>, <th> và <td>, trong đó:
    • <tr> xác định hàng của table.
    • <th> xác định phần tử tiêu đề của table
    • <td> xác định phần tử nội dung của table
  • Một table phức tạp có thể bao gồm nhiều thành phần khác, gồm: <caption>, <col>, <colgroup>, <thead>,<tfoot>, và <tbody>.

– Thẻ <TH>…</TH>: Có nghĩa là tiêu đề của bảng (Table Header), các ô này tương tự như ô bình thường khác được định nghĩa bằng <TD>, có điều font chữ đậm và có thuộc tính mặc định là ALIGN=Center.

– Thẻ <CAPTION>…</CAPTION>: Đặt đầu đề cho một bảng nên phải nằm trong một cặp <TABLE> song không được nằm trong hàng hay cột. Thuộc tính mặc định là ALIGN=Top (đầu đề đặt ở đầu bảng), song có thể đặt là ALIGN=Bottom (cuối bảng).

Bảng cơ bản

Trong HTML, bạn tạo bảng bằng cách sử dụng bảng thẻ, kết hợp với các tr và td thẻ. Mặc dù có các thẻ khác có thể tạo bảng, đây những điều cơ bản để tạo một bảng trong HTML  mà bạn cần nắm được.

Đây là mã cho một bảng cơ bản:

Xem thêm:  Bạn có biết 5 tính năng cần có cho website bán hàng hiện đại?

1C

Bạn sẽ nhận thấy tôi đã thêm một biên giới ( viền khung) thuộc tính cho bảng thẻ. Thuộc tính đặc biệt này cho phép chúng ta tạo ra đường viền khung. Nếu chúng ta không muốn có viền khung chúng ta có thể chỉ định 0 (zero). Trong nhiều trường hợp, bạn có thể chọn để lại giá trị này bằng không vì vậy mà bạn có thể sử dụng Cascading Style Sheets để tạo viền khung bảng của bạn.

 Bảng headers

Trong một bảng, ta có thể phải chia làm nhiều cột, có cột làm tiêu đề.  Thương ta sẽ in đậm dòng tiêu đề.

 

2C

Colspan

Colspan=n: Trộn n ô trên một hàng thành một ô (mở rộng qua nhiều cột). Số n này phụ thuộc số ô trên hàng

3C

Rowspan

Rowspan=n: Trộn n ô trên một cột thành một ô (mở rộng ô qua nhiều hàng). Số n này phụ thuộc số ô trên cột

5C

Adding CSS to tables

Bạn có thể định dạng bảng của bạn sử dụng Cascading Style Sheets (CSS). Sử dụng CSS, bạn có thể chỉ định màu nền, màu đường viền, kiểu đường viền vv…

6C

7C

Thuộc tính tag <table>

Cách sử dụng: <table thuoctinh=”giatri”></table>

Thuộc tính tùy chọn

1d

2d

Thuộc tính tổng quát

3d

Thuộc tính sự kiện

4d

Chúc bạn tự học thiết kế web thật giỏi. Rất mong ý kiến phản hồi từ các bạn.

> Bài tiếp theo

BÀI VIẾT LIÊN QUANXEM NHIỀU HƠN TỪ TÁC GIẢ NÀY