Thẻ <table> trong HTML


1) Giới thiệu "các thành phần cơ bản của một cái bảng"

- Thông thường, bảng là một phần tử gồm có các hàng và các ô.

(một bảng sẽ có nhiều hàng và một hàng thì sẽ có nhiều ô)

- Ví dụ: Bảng bên dưới có bốn hàng, mỗi hàng có bốn ô.

- Để tạo một bảng thì chúng ta phải sử dụng kết hợp các thẻ: <table>, <tr>, <td>, <th>

- Trong đó:

  • Thẻ <table> xác định phần tử là một cái bảng.
  • Thẻ <tr> xác định phần tử là một hàng trong bảng.
  • Thẻ <td> xác định phần tử là một ô trong hàng.
  • Thẻ <th> xác định phần tử là một ô tiêu đề trong hàng.
  • (ô tiêu đề là ô chữ được tô đậm nổi bật giống như: Họ và tên, ngày sinh, giới tính, quê quán)
Ví dụ:

- Đoạn mã phía dưới dùng để tạo một cái bảng giống như ví dụ phía trên


<table border="1">
    <tr>
        <th>Họ và tên</th>
        <th>Năm sinh</th>
        <th>Giới tính</th>
        <th>Quê quán</th>
    </tr>
    <tr>
        <td>Nguyễn Thành A</td>
        <td>1993</td>
        <td>Nam</td>
        <td>Cần Thơ</td>
    </tr>
    <tr>
        <td>Trần Văn B</td>
        <td>1985</td>
        <td>Nam</td>
        <td>Vĩnh Long</td>
    </tr>
    <tr>
        <td>Lê Thị C</td>
        <td>1990</td>
        <td>Nữ</td>
        <td>Sóc Trăng</td>
    </tr>
</table>
Xem ví dụ

2) Các thuộc tính được sử dụng trong thẻ <table>

- Thẻ <table> có tám thuộc tính thường hay được sử dụng nhất.

- Dưới đây là bảng mô tả sơ lượt về tám thuộc tính của thẻ <table> :

align

Xác định vị trí của bảng so với các văn bản xung quanh

bgcolor

Thiết lập màu nền cho bảng

border

Thiết lập đường viền cho bảng cũng như các ô trong bảng

cellpadding

Xác định khoảng cách từ nội dung của ô đến đường viền của ô

cellspacing

Xác định khoảng cách từ đường viền của ô cho đến các ô xung quanh

frame

Xác định những phần đường viền nào của bảng sẽ được hiển thị

rules

Xác định những phần đường kẻ nào nằm bên trong bảng sẽ được hiển thị

width

Xác định chiều rộng của bảng

2.1) Thuộc tính align

- Thuộc tính align dùng để xác định vị trí của bảng so với các văn bản xung quanh.

- Thuộc tính align có ba giá trị:

left

Bảng sẽ được đẩy sang trái

Xem ví dụ
right

Bảng sẽ được đẩy sang phải

Xem ví dụ
center

Bảng sẽ được đẩy ra giữa

Xem ví dụ

- Ngoài việc sử dụng thuộc tính align thì ta cũng có thể dùng thuộc tính float trong CSS để thay thế.

Ví dụ:

<table border="1" style="float:right">
    ...
</table>
Xem ví dụ

2.2) Thuộc tính bgcolor

- Thuộc tính bgcolor dùng để thiết lập màu nền cho bảng.

Ví dụ:

- Nền của bảng bên dưới có màu vàng


<table border="1" bgcolor="yellow">
    ...
</table>
Xem ví dụ

2.3) Thuộc tính border

- Thuộc tính border dùng để thiết lập đường viền cho bảng cũng như các ô trong bảng.

- Thuộc tính border có hai giá trị:

0 (đây là giá trị mặc định)

Bảng và các ô trong bảng không có đường viền

1

Bảng và các ô trong bảng có đường viền

Ví dụ:

<table border="1">
    ...
</table>
Xem ví dụ

2.4) Thuộc tính cellpadding

- Thuộc tính cellpadding xác định khoảng cách từ nội dung của ô đến đường viền của ô.

(mặc định thì giá trị của thuộc tính cellpadding được tính theo đơn vị pixel)

Ví dụ:

- Nội dung bên trong ô cho đến đường viền của ô sẽ có khoảng cách là 30px


<table border="1" cellpadding="30">
    ...
</table>
Xem ví dụ

2.5) Thuộc tính cellspacing

- Thuộc tính cellspacing xác định khoảng cách từ đường viền của ô cho đến các ô xung quanh.

(mặc định thì giá trị của thuộc tính cellspacing được tính theo đơn vị pixel)

Ví dụ:

- Đường viền của ô cho đến các ô xung quanh sẽ có khoảng cách là 30px


<table border="1" cellspacing="30">
    ...
</table>
Xem ví dụ

2.6) Thuộc tính frame

- Thuộc tính frame xác định những phần đường viền nào của bảng sẽ được hiển thị.

- Thuộc tính frame sẽ có các giá trị sau:

void Cả bốn đường viền của bảng đều KHÔNG được hiển thị
above Đường viền phía trên của bảng sẽ được hiển thị
below Đường viền phía dưới của bảng sẽ được hiển thị
lhs Đường viền bên trái của bảng sẽ được hiển thị
rhs Đường viền bên phải của bảng sẽ được hiển thị
vsides Đường viền bên trái và bên phải của bảng sẽ được hiển thị
hsides Đường viền phía trên và phía dưới của bảng sẽ được hiển thị
box Cả bốn đường viền của bảng đều được hiển thị
border Cả bốn đường viền của bảng đều được hiển thị

2.7) Thuộc tính rules

- Thuộc tính rules xác định những phần đường kẻ nào nằm bên trong bảng sẽ được hiển thị.

- Thuộc tính rules sẽ có các giá trị sau:

none Không có đường kẻ nào được hiển thị
rows Chỉ những đường kẻ ngang được hiển thị
cols Chỉ những đường kẻ dọc được hiển thị
all Tất cả các đường kẻ ngang và dọc đều được hiển thị

2.8) Thuộc tính width

- Thuộc tính width dùng để xác định chiều rộng của bảng.

- Giá trị của thuộc tính width có thể xác định theo một trong hai loại đơn vị:

  • px (pixel)
  • % (tỷ lệ phần trăm chiều rộng phần nội dung của phần tử cha của nó)
Ví dụ:

<table border="1" width="100%">
    ...
</table>
Xem ví dụ

3) Định dạng CSS mặc định

- Hầu hết các trình duyệt sẽ hiển thị phần tử <table> với định dạng CSS như sau:

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}