Tìm hiểu Thẻ table trong HTML, đó là một loại thẻ HTML trình bày dữ liệu theo dạng bảng, nó dùng cột và hàng để tổ chức các dữ liệu có cấu trúc giống nhau, chi tiết như nào hãy cùng chúng tôi phân tích:

Thẻ table trong HTML

Thẻ <table> trong HTML là gì?

Thẻ <table> trong HTML là một loại thẻ HTML trình bày dữ liệu theo dạng bảng, nó dùng cột và hàng để tổ chức các dữ liệu có cấu trúc thuộc tính giống nhau, nó giúp chúng ta dễ dàng quản lý dữ liệu một cách thuận tiện.

Các thành phần, thuộc tính có trong <table>

Thành phần:

<table>: Thẻ khai báo

<tr>: Hàng

<td>: Cột

<th>: Tiêu đề của bảng, cũng là cột mà là cột của tiêu đề.

<thead>: Chứa phần tiêu đề của table.

<tbody>: Chứa nội dung của bảng.

<tfoot>: Tạo nội dung chân trang của bảng.

<caption>: Tạo chú thích cho bảng.

Thuộc tính:

colspan: Nhóm các cột lại.

rowspan: Nhóm các hàng lại.

Các ví dụ về Thẻ <table> trong HTML

<table> có đầy đủ các thành phần chính

<!DOCTYPE html>
<html>
<head>
<title>table có đầy đủ các thành phần chính</title>
<style>
table{width:100%;border-collapse: collapse; font-family: sans-serif; font-size: 15px; letter-spacing: 1px;}
table, th, td { border:1px solid black; }
td, th {text-align: left; padding: 8px; }
caption{padding: 8px;text-transform: uppercase;font-size:18px;font-weight:bold}
tr:nth-child(even) { background-color: #dddddd; }
</style>
</head>
<body>
<table>
 <caption> Bảng Lương</caption>
  <thead>
    <tr>
      <th>STT</th>
      <th>Họ Tên</th>
      <th>Lương</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Bùi Tấn Lực</td>
      <td>20.000.000VNĐ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Trần Thị Vân</td>
      <td>25.000.000VNĐ</td>
    </tr>
   <tr>
      <td>3</td>
      <td>Nguyễn Thùy Dung</td>
      <td>20.000.000VNĐ</td>
    </tr>
   <tr>
      <td>4</td>
      <td>Trần Ngọc Thanh</td>
      <td>20.000.000VNĐ</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan= "2">Tổng Lương</th>
      <td>85.000.000VNĐ</td>
    </tr>
  </tfoot>
</table>
</body>
</html>

Bảng Lương
STT	Họ Tên	Lương
1	Bùi Tấn Lực	20.000.000VNĐ
2	Trần Thị Vân	25.000.000VNĐ
3	Nguyễn Thùy Dung	20.000.000VNĐ
4	Trần Ngọc Thanh	20.000.000VNĐ
Tổng Lương		85.000.000VNĐ

Chạy Thử >>

Rowspan (Nhóm hàng) trong table

<!DOCTYPE html>
<html>
<head>
<title>Chạy Thử Rowspan (Nhóm hàng) trong table</title>
<style>
table{width:100%;border-collapse: collapse; font-family: sans-serif; font-size: 15px; letter-spacing: 1px;}
table, th, td { border:1px solid black; }
td, th {text-align: left; padding: 8px; }
caption{padding: 8px;text-transform: uppercase;font-size:18px;font-weight:bold}
tr:nth-child(even) { background-color: #dddddd; }
</style>
</head>
<body>
<table>
 <caption> Bảng điểm</caption>
  <thead>
    <tr>
      <th>Tên</th>
      <th>Môn</th>
      <th>Điểm</th>
    </tr>
  </thead>
  <tbody>
   <tr>
      <td rowspan="2">Bùi Tấn Lực</td>
      <td>Toán</td>
      <td>9.5</td>
    </tr>
    <tr>
      <td>Văn</td>
      <td>10</td>
    </tr>
    <tr>
      <td rowspan="2">Trần Thị Vân</td>
      <td>Toán</td>
      <td>9</td>
    </tr>
    <tr>
      <td>Văn</td>
      <td>9</td>
    </tr>
   </tbody>
</table>
</body>
</html>

Bảng điểm
Tên	Môn	Điểm
Bùi Tấn Lực	Toán	9.5
Bùi Tấn Lực	Văn	10
Trần Thị Vân	Toán	9
Trần Thị Vân	Văn	9

Chạy Thử >>

<table> cơ bản trong HTML

<!DOCTYPE html>
<html>
<head>
<title>Chạy Thử table cơ bản trong HTML</title>
<style>
table{width:100%;border-collapse: collapse; font-family: sans-serif; font-size: 15px; letter-spacing: 1px;}
table, th, td { border:1px solid black; }
td, th {text-align: left; padding: 8px; }
tr:nth-child(even) { background-color: #dddddd; }
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>STT</th>
      <th>Họ Tên</th>
      <th>Lương</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Bùi Tấn Lực</td>
      <td>20.000.000VNĐ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Trần Thị Vân</td>
      <td>25.000.000VNĐ</td>
    </tr>
   <tr>
      <td>3</td>
      <td>Nguyễn Thùy Dung</td>
      <td>20.000.000VNĐ</td>
    </tr>
   <tr>
      <td>4</td>
      <td>Trần Ngọc Thanh</td>
      <td>20.000.000VNĐ</td>
    </tr>
  </tbody>
  
</table>
</body>
</html>

STT	Họ Tên	Lương
1	Bùi Tấn Lực	20.000.000VNĐ
2	Trần Thị Vân	25.000.000VNĐ
3	Nguyễn Thùy Dung	20.000.000VNĐ
4	Trần Ngọc Thanh	20.000.000VNĐ

Chạy Thử >>

Lời Kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ table trong HTML.

5/5 - (1 Đánh giá)
0 Bình luận

Ngọc Thanh

Ngọc Thanh là người viết content có kinh nghiệm nhiều năm tại Web Mới, chuyên viết content bên lĩnh vực website và nhiều lĩnh vực khác

Chia sẻ nội dung đánh giá của bạn về Thẻ table trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn