HTML 08 – Bảng trong HTML

0
105

Bảng trong HTML được hiểu là các bảng biểu dùng để biểu diễn dữ liệu, trong một bảng có thể chứa một hoặc nhiều dòng, và trong mỗi dòng có thể chứa một hoặc nhiều cột. Nếu bạn biết Excel thì bạn có thể tưởng tượng bảng trong HTML cũng tương tự như bảng biểu trong Excel vậy.
Trong HTML có nhiều loại bảng khác nhau với hình dáng và kích thước khác nhau, tuy nhiên ta có thể chia làm hai loại lớn: bảng đối xứng và bảng không đối xứng.

1. Bảng đối xứng

Bảng đối xứng là bảng có số cột của các dòng như nhau. Và ngược lại , bảng không đối xứng là bảng mà số cột của các dòng không bằng nhau.
Để tạo một bảng trong HTML ta sử dụng cặp thẻ <table></table> và bên trong có các thẻ <tr></tr><td></td>. Trong đó:

  • Cặp thẻ <table></table> : Khai báo bảng
  • Cặp thẻ <tr></tr> : Khai báo dòng trong bảng
  • Cặp thẻ <td></td> : Khai báo cột trong dòng

Các thuộc tính khi làm việc với bảng:

  • Thuộc tính width : xác đinh độ rộng của bảng
  • Thuộc tính height: xác định chiều cao của bảng
  • Thuộc tính border: thiết lập đường viền cho bảng
  • Thuộc tính bordercolor: màu đường viền của bảng
  • Thuộc tính align: xác định vị trí tương đối của bảng so với bao ngoài của nó
  • Thuộc tính bgcolor: thiết lập màu nền cho bảng
  • Thuộc tính cellpadding: xác định khoảng cách của bảng so với nội dung bên trong
  • Thuộc tính cellspacing: xác định độ dày các khung bao quanh của bảng

Ví dụ: bảng đối xứng với 4 dòng và 4 cột:

See the Pen vp_table_examp by Thien (@anhtomks) on CodePen.0

Ở ví dụ trên ta thấy mỗi bảng đều có  thể có các thuộc tính phục vụ cho việc trang trí căn chỉnh bảng, và tất nhiên các dòng và các cột cũng có các thuộc tính của nó.

Các thuộc tính của thẻ <tr> :

  • Thuộc tính height : độ cao của dòng, đơn vị tính bằng % hoặc px.
  • Thuộc tính bgcolor : màu nền cho dòng.
  • Thuộc tính align: xác định vị trí tương đối của các phần tử trên một dòng theo chiều ngang (với các giá trị left, right, center và justify).
  • Thuộc tính valign : xác định vị trí tương đối của các phần tử trên một dòng theo chiều dọc (với các giá trị top , bottom và middle).

Các thuộc tính của thẻ <td> :

  • Thuộc tính width : độ rộng của cột, đơn vị tính bằng % hoặc px.
  • Thuộc tính height : độ cao của cột.
  • Thuộc tính bgcolor: màu nền cho cột
  • Thuộc tính background: ảnh nền cho cột
  • Thuộc tính align: xác định vị trí tương đối của các phần tử trên một cột theo chiều ngang.
  • Thuộc tính valign : xác định vị trí tương đối của các phần tử trên một cột theo chiều dọc.

Ví dụ:

See the Pen vp_tr_td_examp by Thien (@anhtomks) on CodePen.0

Cùng là bảng trên , tuy nhiên tôi sử dụng một vào thuộc tính cho tr và td để bảng của chúng ta đẹp hơn một chút.

2. Bảng không đối xứng

Để tạo nên bảng không đối xứng ta có hai thuộc tính là rowspan và colspan của cặp thẻ td.

Thuộc tính colspan: Gom các cột trên cùng một hàng của một bảng lại với nhau. Thuộc tính này có giá trị là số cột muốn gom lại, và những cột đã gộp thì ta cần phải xóa bỏ đi.

Ví dụ :

See the Pen vp_colspan_examp by Thien (@anhtomks) on CodePen.0

Ở ví dụ này , tôi đã gộp các cột số 3, 4, 5 lại với nhau bằng cách sử dụng thuộc tính colspan tại thẻ td của cột số 3 với giá trị là 3 và xóa bỏ hai cột 4 và 5. Tương tự các cột 7, 8, 9, 10 tôi cũng gộp lại bằng cách sử dụng thuộc tính colspan ở thẻ td của cột số 7 với giá trị là 4 và xóa bỏ các cột 8 , 9, 10.

Thuộc tính rowspan: Gom các cột trên nhiều hàng khác nhau của một bảng. Thuộc tính này cũng có giá trị là số cột muốn gộp lại và những cột đã gộp cũng phải xóa đi.

Ví dụ:

See the Pen vp_rowspan_examp by Thien (@anhtomks) on CodePen.0

Trước tiên, tôi tạo một bảng gồm có 4 dòng và 5 cột, với các cột được đánh chữ cái lần lượt theo bảng chữ cái từ a tới t. Như các bạn đã thấy , tôi dùng rowspan=”3″ để gom lại các cột g, l, q. Và tôi kết hợp giữa rowspan=”3″ và colspan=”2″ để gom 6 cột d, i, n, e, j, o lại với nhau.

 

Tác giả: Thiện Nguyễn

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here