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

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

DXOan

Đây chính là tôi với sự bùng nổ của những giấc mơ. Tôi thích khám phá và chia sẻ những điều mới mẻ. Hãy đồng hành cùng tôi nhé ! 😁😘😍 - Con đường tôi đi là con đường tôi chọn - 😎😂✌ facebook twitter pinterest youtube external-link

10 Nhận xét

Vui lòng đưa ra những nhận xét tích cực, mang tính xây dựng.*

  1. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  2. 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
  3. 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
  4. 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
  5. 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
  6. border-collapse: collapse; nghĩa là thế nào ạ. E không điều chỉnh được kích thước bảng

    Trả lờiXóa
    Trả lời
    1. nè bạn http://hocwebchuan.com/reference/cssSection/pr_bdr-collapse.php

      Xóa
Mới hơn Cũ hơn

AdBlock Detected!

Phát hiện trình duyệt đang sử dụng AdBlock. Vui lòng tắt AdBlock để có thể xem nội dung cũng như ủng hộ tác giả. DXOan xin cảm ơn. Chúc bạn một ngày vui vẻ !