Hướng Dẫn Chi Tiết Về Bảng HTML (Đơn Giản, Dễ Hiểu và Chi Tiết)

Dưới đây là bản dịch sang tiếng Việt của bài viết về bảng HTML:

---

Hướng Dẫn Chi Tiết Về Bảng HTML (Đơn Giản, Dễ Hiểu và Chi Tiết)

Bảng HTML được sử dụng để hiển thị dữ liệu trên trang web, tạo thành bằng cách sử dụng các thẻ HTML và các thẻ liên quan. Bảng bao gồm các hàng và cột, mỗi hàng chứa một hoặc nhiều ô, và mỗi ô có thể chứa văn bản, hình ảnh, liên kết, và các yếu tố khác. Bài viết này sẽ giới thiệu chi tiết về cách tạo bảng HTML, các thẻ và thuộc tính thường dùng, cũng như cách sử dụng CSS để làm đẹp bảng.

I. Cấu Trúc Cơ Bản Của Bảng HTML

Một bảng HTML đơn giản bao gồm các thẻ sau:

<table>
  <tr>
    <th>Tiêu đề 1</th>
    <th>Tiêu đề 2</th>
  </tr>
  <tr>
    <td>Dữ liệu 1</td>
    <td>Dữ liệu 2</td>
  </tr>
  <tr>
    <td>Dữ liệu 3</td>
    <td>Dữ liệu 4</td>
  </tr>
</table>

• <table>: Xác định bắt đầu và kết thúc của bảng.

• <tr>: Xác định một hàng trong bảng.

• <th>: Xác định ô tiêu đề của bảng, thường được dùng trong hàng đầu tiên để chỉ định tiêu đề cột.

• <td>: Xác định ô dữ liệu trong bảng, dùng để chứa dữ liệu cụ thể.

II. Các Thuộc Tính Thường Dùng Của Bảng HTML

1. border
   Thuộc tính border dùng để thiết lập đường viền cho bảng. Mặc định, bảng không có đường viền.

<table border="1">
  <!-- Nội dung bảng -->
</table>

2. cellpadding
   Thuộc tính cellpadding dùng để thiết lập khoảng cách giữa nội dung ô và đường viền của ô.

<table border="1" cellpadding="5">
  <!-- Nội dung bảng -->
</table>

3. cellspacing
   Thuộc tính cellspacing dùng để thiết lập khoảng cách giữa các ô trong bảng.

<table border="1" cellpadding="5" cellspacing="0">
  <!-- Nội dung bảng -->
</table>

4. width và height
   Các thuộc tính width và height dùng để thiết lập chiều rộng và chiều cao của bảng. Các thuộc tính này có thể được thiết lập bằng đơn vị pixel hoặc phần trăm.

<table border="1" width="500" height="200">
  <!-- Nội dung bảng -->
</table>

III. Các Cách Dùng Nâng Cao Của Bảng HTML

1. Hợp Nhất Ô

   • colspan: Thuộc tính colspan dùng để hợp nhất các ô theo chiều ngang.

   <table border="1">
     <tr>
       <th colspan="2">Tiêu đề 1 và 2 hợp nhất</th>
     </tr>
     <tr>
       <td>Dữ liệu 1</td>
       <td>Dữ liệu 2</td>
     </tr>
   </table>
   

   • rowspan: Thuộc tính rowspan dùng để hợp nhất các ô theo chiều dọc.

   <table border="1">
     <tr>
       <th rowspan="2">Tiêu đề 1</th>
       <td>Dữ liệu 1</td>
     </tr>
     <tr>
       <td>Dữ liệu 2</td>
     </tr>
   </table>
   

2. Đầu Bảng, Thân Bảng và Chân Bảng

   • : Thẻ <thead> dùng để xác định phần đầu của bảng, thường chứa các ô tiêu đề.

   <table border="1">
     <thead>
       <tr>
         <th>Tiêu đề 1</th>
         <th>Tiêu đề 2</th>
       </tr>
     </thead>
     <!-- Thân bảng -->
   </table>
   

   • : Thẻ <tbody> dùng để xác định phần thân của bảng, chứa các ô dữ liệu.

   <table border="1">
     <thead>
       <tr>
         <th>Tiêu đề 1</th>
         <th>Tiêu đề 2</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Dữ liệu 1</td>
         <td>Dữ liệu 2</td>
       </tr>
       <tr>
         <td>Dữ liệu 3</td>
         <td>Dữ liệu 4</td>
       </tr>
     </tbody>
   </table>
   

   • : Thẻ <tfoot> dùng để xác định phần chân của bảng, thường dùng để chứa các dòng tổng kết hoặc tổng số.

   <table border="1">
     <thead>
       <tr>
         <th>Tiêu đề 1</th>
         <th>Tiêu đề 2</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Dữ liệu 1</td>
         <td>Dữ liệu 2</td>
       </tr>
       <tr>
         <td>Dữ liệu 3</td>
         <td>Dữ liệu 4</td>
       </tr>
     </tbody>
     <tfoot>
       <tr>
         <td>Tổng cộng</td>
         <td>100</td>
       </tr>
     </tfoot>
   </table>
   

3. Thiết Kế Phong Cách Cho Bảng

   • Sử dụng kiểu nội tuyến (Inline Style)

   <table border="1" style="border-collapse: collapse; width: 500px;">
     <tr>
       <th style="background-color: #f2f2f2; padding: 8px;">Tiêu đề 1</th>
       <th style="background-color: #f2f2f2; padding: 8px;">Tiêu đề 2</th>
     </tr>
     <tr>
       <td style="padding: 8px; text-align: center;">Dữ liệu 1</td>
       <td style="padding: 8px; text-align: center;">Dữ liệu 2</td>
     </tr>
   </table>
   

   • Sử dụng kiểu bảng trong thẻ <style>

   <style>
     table {
       border-collapse: collapse;
       width: 500px;
     }
     th, td {
       padding: 8px;
       text-align: left;
       border: 1px solid #ddd;
     }
     th {
       background-color: #f2f2f2;
     }
     tr:nth-child(even) {
       background-color: #f9f9f9;
     }
   </style>
   <table>
     <tr>
       <th>Tiêu đề 1</th>
       <th>Tiêu đề 2</th>
     </tr>
     <tr>
       <td>Dữ liệu 1</td>
       <td>Dữ liệu 2</td>
     </tr>
     <tr>
       <td>Dữ liệu 3</td>
       <td>Dữ liệu 4</td>
     </tr>
   </table>
   

   • Sử dụng kiểu bảng từ một tệp CSS bên ngoài

   <link rel="stylesheet" type="text/css" href="styles.css">
   <table class="custom-table">
     <tr>
       <th>Tiêu đề 1</th>
       <th>Tiêu đề 2</th>
     </tr>
     <tr>
       <td>Dữ liệu 1</td>
       <td>Dữ liệu 2</td>
     </tr>
   </table>
   

   • CSS trong tệp styles.css

   .custom-table {
     border-collapse: collapse;
     width: 500px;
   }
   .custom-table th, .custom-table td {
     padding: 8px;
     text-align: left;
     border: 1px solid #ddd;
   }
   .custom-table th {
     background-color: #f2f2f2;
   }
   .custom-table tr:nth-child(even) {
     background-color: #f9f9f9;
   }
   

4. Bảng Phản Hồi (Responsive Table)
   Để cải thiện trải nghiệm người dùng trên các thiết bị di động, có thể làm cho bảng phản hồi bằng cách sử dụng CSS.

<style>
.responsive-table {
width: 100%;
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
<div class="responsive-table">
<table>
<tr>
<th>Tiêu đề 1</th>
<th>Tiêu đề2</th>
<th>Tiêu đề 3</th>
<th>Tiêu đề 4</th>
</tr>
<tr>
<td>dữ liệu 1</td>
<td>dữ liệu 2</td>
<td>dữ liệu 3</td>
<td>dữ liệu 4</td>
</tr>
<tr>
<td>dữ liệu 5</td>
<td>dữ liệu 6</td>
<td>dữ liệu 7</td>
<td>dữ liệu 8</td>
</tr>
</table>
</div>

IV. Ví dụ hoàn chỉnh về bảng HTML
Dưới đây là một ví dụ hoàn chỉnh về bảng HTML bao gồm nhiều cách sử dụng:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ bảng HTML</title>
<style>
.custom-table {
border-collapse: collapse;
width: 100%;
}
.custom-table th, .custom-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.custom-table th {
background-color: #4CAF50;
color: white;
}
.custom-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.custom-table tr:hover {
background-color: #f1f1f1;
}
.responsive-table {
width: 100%;
overflow-x: auto;
}
</style>
</head>
<body>
<h1>Ví dụ bảng HTML</h1>
<!-- Bảng cơ bản -->
<h2>Bảng cơ bản</h2>
<table border="1">
<tr>
<th>Tiêu đề 1</th>
<th>Tiêu đề 2</th>
</tr>
<tr>
<td>Dữ liệu 1</td>
<td>Dữ liệu 2</td>
</tr>
<tr>
<td>Dữ liệu 3</td>
<td>Dữ liệu 4</td>
</tr>
</table>
<!-- Gộp ô -->
<h2>Gộp ô</h2>
<table border="1">
<tr>
<th colspan="2">Gộp tiêu đề 1 và 2</th>
</tr>
<tr>
<td>Dữ liệu 1</td>
<td>Dữ liệu 2</td>
</tr>
<tr>
<td>Dữ liệu 3</td>
<td>Dữ liệu 4</td>
</tr>
</table>
<!-- Phần đầu, thân và chân bảng -->
<h2>Phần đầu, thân và chân bảng</h2>
<table border="1">
<thead>
<tr>
<th>Tiêu đề 1</th>
<th>Tiêu đề 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dữ liệu 1</td>
<td>Dữ liệu 2</td>
</tr>
<tr>
<td>Dữ liệu 3</td>
<td>Dữ liệu 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Tổng</td>
<td>100</td>
</tr>
</tfoot>
</table>
<!-- Bảng phản hồi -->
<h2>Bảng phản hồi</h2>
<div class="responsive-table">
<table class="custom-table">
<thead>
<tr>
<th>Tiêu đề 1</th>
<th>Tiêu đề 2</th>
<th>Tiêu đề 3</th>
<th>Tiêu đề 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dữ liệu 1</td>
<td>Dữ liệu 2</td>
<td>Dữ liệu 3</td>
<td>Dữ liệu 4</td>
</tr>
<tr>
<td>Dữ liệu 5</td>
<td>Dữ liệu 6</td>
<td>Dữ liệu 7</td>
<td>Dữ liệu 8</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

V. Tóm tắt

Bảng HTML là một công cụ quan trọng để trình bày dữ liệu trên trang web. Bằng cách sử dụng các thẻ như <table>, <tr>, <th>, <td>, bạn có thể tạo ra các bảng có cấu trúc rõ ràng và giao diện đẹp mắt. Dưới đây là bảng tóm tắt về các thẻ và thuộc tính trong bảng HTML:

Các thuộc tính phổ biến:

Bằng cách sử dụng hợp lý các thẻ và thuộc tính trên, bạn có thể tạo ra các bảng HTML đẹp và hiệu quả, đáp ứng nhiều nhu cầu trình bày dữ liệu khác nhau.

Hy vọng bài viết này sẽ giúp bạn hiểu rõ hơn về cách sử dụng bảng HTML. Nếu bạn muốn tìm hiểu thêm, hãy tra cứu các bài viết khác trên Script House hoặc khám phá các tài liệu liên quan bên dưới.