Tạo bảng trong HTML

Cấu trúc bảng được sử dụng để hiển thị các thông tin dưới dạng dòng và cột.

Để tạo bảng, chúng ta sử dụng các thẻ sau:

• <table>: Định nghĩa một bảng
• <tr>: Định nghĩa một dòng
• <th>: Định nghĩa một ô tiêu đề
• <td>: Định nghĩa một ô dữ liệu.

Ví dụ:

<table border="1">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
</table>

Chúng ta có thể sử dụng CSS để trang trí cho bảng, chẳng hạn:

<table style="width:100%">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
</table>

Hoặc thay đổi màu nền cho các dòng:

<table>
    <tr style="background-color: red">
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
</table>