Bảng (Tables) trong HTML

Bảng HTML được dùng để tạo bảng bằng thẻ <table>. Trong bảng, mỗi hàng được chỉ định bằng thẻ <tr> và tiêu đề bảng được định nghĩa bằng thẻ <th>. Dữ liệu bảng được định nghĩa bằng thẻ <td>.

Cú pháp

Cú pháp như sau:

<table> <tr> <th>Tiêu đề bảng</th> <th>Tiêu đề bảng</th> </tr> <tr> <td>Dữ liệu bảng</td> <td>Dữ liệu bảng</td> </tr> <tr> <td>Dữ liệu bảng</td> <td>Dữ liệu bảng</td> </tr> </table>

Các thuộc tính của bảng HTML

Phần tử caption trong HTML

Chúng ta cũng có thể đặt tiêu đề cho bảng bằng phần tử caption của HTML.

Cú pháp

Cú pháp như sau:

<caption>văn bản</caption>

Ví dụ

Dưới đây là ví dụ minh họa Bảng HTML:

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    text-align: center;
  }
  table {
    margin: 2rem auto;
    width: 400px;
  }
  caption {
    color: #fff;
    font-size: 1.5rem;
  }
</style>
<body>
<h1>Bảng HTML</h1>
<table border="2">
  <caption>Dữ liệu sinh viên</caption>
  <tr>
    <th>Tên</th>
    <th>Mã số</th>
  </tr>
  <tr>
    <td>John</td>
    <td>031717</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>051717</td>
  </tr>
</table>
</body>
</html>

Kết quả