HTML Bảng

Bảng HTML

Trong HTML thẻ <table> được sử dụng để đánh dấu một bảng.

Thẻ <table> được sử dụng kết hợp cùng các thẻ khác như <thead>, <tbody>, <tr><td> để tạo thành các phần nội dung cụ thể của bảng.

<table>
    <tbody>
        <tr>
            <th>Tên Cột 1</th>
            <th>Tên Cột 2</th>
            <th>Tên Cột 3</th>
        <tr>
        <tr>
            <td>Giá Trị Cột 1</td>
            <td>Giá Trị Cột 2</td>
            <td>Giá Trị Cột 3</td>
        </tr> 
    </tbody>
</table>

Chạy Thử

Trong đó:

  • Thẻ <tbody> dùng để đánh dấu phần nội dung của bảng
  • Thẻ <tr> dùng để đánh dấu các dòng (row) trong bảng
  • Thẻ <th> dùng để đánh dấu tên các cột trong bảng. Nội dung bên trong thẻ này được trình duyệt hiển thị với chữ in đậm.
  • Thẻ <td> dùng để đánh dấu giá trị của các cột trong từng dòng

Ở ví dụ trên chúng ta có một bảng với hai dòng, dòng dầu tiên chứa tên cột và dòng thứ hai chứa giá trị các cột tưng ứng.

Nội dung mà chúng ta nhìn thấy của bảng được đặt bên trong các thẻ <td><th> và chúng không nhất thiết phải là văn bản mà có thể là link hoặc hình ảnh...

Thẻ <thead>

Thông thường chúng ta sẽ nhóm dòng chứa tên cột trong bảng trong thẻ <thead> để phân biệt với phần nội dung chính của bảng được đặt trong thẻ <tbody>:

<table>
    <thead>
        <tr>
            <th>Tên Cột 1</th>
            <th>Tên Cột 2</th>
            <th>Tên Cột 3</th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <td>Giá Trị Cột 1</td>
            <td>Giá Trị Cột 2</td>
            <td>Giá Trị Cột 3</td>
        </tr> 
    </tbody>
</table>

Chạy Thử

Tạo Đường Viền Cho Bảng

Trình duyệt sẽ không hiển thị đường viền của bảng trừ khi chúng ta thêm vào.

Để thêm đường viền cho bảng chúng ta cần sử dụng CSS với đặc tính border:

table, th, td {
    border: 1px solid black;
}

Chạy Thử

Đoạn code CSS trên sẽ thêm đường viền cho các phần tử table, thtd.

Gộp Đường Viền

Ở ví dụ trên bạn thấy các đường viền của phần tử thtd được đặt cạnh đường viền của phần tử tbody và sẽ tạo ra 2 đường viền nằm cạnh nhau.

Để gộp các đường viền cạnh nhau lại chúng ta có thể sử dụng thêm đặc tính border-collapse của CSS:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

Chạy Thử

Lúc này các đường viền cạnh nhau sẽ được gộp lại thành 1 đường viền duy nhất.

Độ Rộng Của Bảng

Để quy định động rộng của bảng chúng ta có thể sử dụng thuộc tính style:

<table style="width: 100%">
    <tr>
        <th>Họ Tên</th>
        <th colspan="2">Số ĐT</th>
    </tr>
    <tr>
        <td>Lê Văn An</td>
        <td>093421122</td>
        <td>012345678</td>
    </tr>
</table>

Chạy Thử

Gộp Các Cột Trong Cùng Dòng

Thuộc tính colspan được sử dụng để gộp hai hay nhiều cột liên tiếp trong cùng một dòng thành một cột duy nhất:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Tiêu đề trang</title>
    </head>
<body>
    <table style="width: 100%">
        <tr>
            <th>Họ Tên</th>
            <th colspan="2">Số ĐT</th>
        </tr>
        <tr>
            <td>Lê Văn An</td>
            <td>093421122</td>
            <td>012345678</td>
        </tr>
    </table>
</body>
</html>

Chạy Thử

Bảng trên sẽ có độ rộng bằng 100% của phần tử chứa nó hay phần tử body. Bạn hoàn toàn có thể sử dụng đơn vị tuyệt đối như style="width: 500px;"

Gộp Các Dòng Trong Cùng Một Cột

Thuộc tính rowspan được sử dụng để gộp hai hay nhiều dòng liên tiếp trog cùng một cột thành một dòng thành một dòng duy nhất:

<table style="width: 100%">
    <tr>
        <th>Họ Tên</th>
        <th>Số ĐT</th>
    </tr>
    <tr>
        <th rowspan="2">Số Điện Thoại:</th>
        <td>093421122</td>
    </tr>
    <tr>
        <td>012345678</td>
    </tr>
</table>

Chạy Thử

Thêm Caption

Để thêm caption (chú thích) cho bảng chúng ta sử dụng thẻ <caption>:

<table>
    <caption>Tiết Kiệm Hàng Tháng</caption>
    <tr>
        <th>Tháng</th>
        <th>Khoản Tiết Kiệm</th>
    </tr>
    <tr>
        <td>Tháng 01</td>
        <td>1.000.000</td>
    </tr>
    <tr>
        <td>Tháng 02</td>
        <td>1500000</td>
    </tr>
</table>

Chạy Thử

HTML Frontend Thiết Kế Web
Thêm Bình Luận: