Blog DX

Bài 4: Tạo bảng trong HTML

6 tháng 8, 2014
Cấu trúc tổng quát :
<table border="2">
<tr><th>Cột 1</th><th>Cột 2</th></tr>
<tr><td>Cột 1, dòng 1</td><td>Cột 2, dòng 1</td></tr>
<tr><td>Cột 1, dòng 2</td><td>Cột 2, dòng 2</td></tr>
</table>

Kết quả:
Cột 1Cột 2
Cột 1, dòng 1Cột 2, dòng 1
Cột 1, dòng 2Cột 2, dòng 2

1. Thẻ <table>
- Cặp thẻ <table></table> dùng để khai báo 1 bảng

Thuộc tính Ý nghĩa
bgcolor="color" Đặt màu nền
background="url" Đặt hình nền
border=" " Độ dày của đường viền
bordercolor="color" Màu của đường viền
cellpadding=" " Khoảng cách giữa nội dung và đường viền
cellspacing=" " Khoảng cách giữa các ô
width=" " height=" " Kích thước chiều ngang và chiều cao
align="center"| "left"| "right" Căn vị trí của bảng so với toàn website

2. Thẻ <tr>
- Xác định dòng trong bảng, nằm bên trong cặp thẻ <table></table>
Bao nhiêu cặp thẻ <tr> ứng với từng đó dòng trong 1 bảng

Thuộc tính Ý nghĩa
bgcolor="color" Đặt màu nền
bordercolor="color" Màu của đường viền
align="center"| "justify"| "left"| "right" Căn lề theo phương ngang (giữa | chiều rộng bằng nhau | trái | phải)
valign="bottom"| "middle"| "top" Căn lề theo phương dọc (dưới | giữa | trên)

3. Thẻ <th>, <td>
- <td></td> ( table data): Thẻ định nghĩa cột trong bảng, chứa dữ liệu của bảng. Cặp thẻ <td></td> nằm bên trong cặp thẻ <tr></tr>
- <th></th> ( table heading): Tương tự cặp thẻ <td></td> tuy nhiên <th> dùng trong trường hợp nếu ô đó chứa tiêu đề của cột. Nội dung trong cặp thẻ này được in đậm và căn giữa tự động.

Thuộc tính Ý nghĩa
bgcolor="color" Đặt màu nền
background="url" Đặt hình nền
bordercolor="color" Màu của đường viền
align="center"| "justify"| "left"| "right" Căn lề theo phương ngang (giữa | chiều rộng bằng nhau | trái | phải)
valign="bottom"| "middle"| "top" Căn lề theo phương dọc (dưới | giữa | trên)
rowspan=" " colspan=" " Gộp nhiều dòng (cột) lại thành 1
width=" " height=" " Kích thước chiều ngang và chiều cao

Một số lưu ý:
- Số cặp thẻ <td> (số cột) trong các dòng phải bằng nhau để tránh vỡ khung của bảng
- Đối với ô trống (không có nội dung) nên sử dụng thẻ <br> hoặc &nbsp; thay cho khoảng trống
- colspan=“x”: Gộp x cột tính từ cột đang đặt thuộc tính colspan
- rowspan=“y”: Gộp y hàng tính từ hàng đang xét
( Sau khi gộp phải loại bỏ số dòng( hoặc cột) để cân đối bảng )

Ví dụ:
<table border="5" cellpadding="20" cellspacing="10" width=600" height="400">
     <tr bgcolor="#6699FF">
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
     </tr>
     <tr align="center" valign="top">
         <td>Row 1, Col 1</td>
         <td valign="middle">Row 1, Col 2</td>
         <td valign="bottom">Row 1, Col 3</td>
     </tr>
     <tr align="center" valign="middle">
         <td>Row 2, Col 1</td>
         <td bgcolor="#FFCC00" colspan="2">Row 2, Col 2</td>
     </tr>
</table>

Kết quả:
Header 1 Header 2 Header 3
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3
Row 2, Col 1 Row 2, Col 2

8 nhận xét:

  1. Khi mình tạo một bảng với số cột cố định, làm thế nào để độ rộng các cột là bằng nhau và cố định? Giống như độ rộng mặc định khi tạo bảng trong word ấy hả bạn?

    Trả lờiXóa
    Trả lời
    1. thì bạn chỉ cần cho thêm thuộc tính width vào thẻ <td></td> thôi.
      Ví dụ: <td width="50%">Cột</td> ~> ô này chiếm 50% chiều rộng của dòng
      hoặc <td width="20px">Cột</td> ~> ô này có kích thước chiều rộng là 20px

      Xóa
  2. cho mình hỏi làm thế nào để tạo một cột được tách thành nhiều ô mà nó ko ảnh hưởng tới table chính

    Trả lờiXóa
    Trả lời
    1. Bạn sử dụng rowspan và colspan nhé

      Xóa
  3. cho mình hỏi muốn tạo bảng mà khi xem trên di động nó tự responsive được trên thiết bị di động.

    Trả lờiXóa
    Trả lời
    1. thẻ table bạn đừng đặt width với height
      làm theo như cái bảng trên bài viết của mình ấy
      <table style="width-max: 665px">
      =>> chỉ cần đặt width-max thôi

      Xóa
  4. Sao kỳ vậy ta, mình copy hết đoạn code trên vào thêm vào blog cái bảng thì OK nhưng mà sao nó không có màu gì hết vậy nè.

    Trả lờiXóa