📊 Bài 6: HTML Tables

Học cách tạo và định dạng bảng trong HTML để hiển thị dữ liệu có cấu trúc

📊 Giới thiệu về HTML Tables

HTML Tables được sử dụng để hiển thị dữ liệu dạng bảng (tabular data) - dữ liệu được tổ chức thành hàng và cột một cách có cấu trúc.

⚠️ Lưu ý quan trọng

Tables chỉ nên được sử dụng để hiển thị dữ liệu, không nên dùng để tạo layout cho trang web. Để tạo layout, hãy sử dụng CSS Grid hoặc Flexbox.

🏗️ Cấu trúc cơ bản của Table

Cấu trúc HTML Table cơ bản 
<table>
    <tr>
        <th>Tiêu đề cột 1</th>
        <th>Tiêu đề cột 2</th>
    </tr>
    <tr>
        <td>Dữ liệu 1</td>
        <td>Dữ liệu 2</td>
    </tr>
</table>

🏷️ Các thẻ chính trong Table

Thẻ Mô tả Ví dụ
<table> Định nghĩa bảng Container chính của bảng
<tr> Định nghĩa hàng (table row) Mỗi hàng trong bảng
<th> Định nghĩa tiêu đề cột (table header) Tiêu đề của cột, in đậm và căn giữa
<td> Định nghĩa ô dữ liệu (table data) Chứa nội dung của ô

📝 Ví dụ Table đơn giản

Danh sách sinh viên

STT Họ tên Tuổi Lớp
1 Nguyễn Văn An 20 12A1
2 Trần Thị Bình 19 12A2
3 Lê Văn Cường 21 12A1

🚀 Các thẻ cấu trúc nâng cao

Ngoài các thẻ cơ bản, HTML cung cấp thêm các thẻ để tạo cấu trúc bảng rõ ràng và có ý nghĩa hơn:

📋 Các thẻ cấu trúc nâng cao

Thẻ Mô tả Chức năng Vị trí
<caption> Tiêu đề bảng Mô tả nội dung của bảng Đầu bảng, sau thẻ <table>
<thead> Nhóm tiêu đề bảng Chứa các hàng tiêu đề Phần đầu của bảng
<tbody> Nhóm nội dung bảng Chứa các hàng dữ liệu chính Phần thân của bảng
<tfoot> Nhóm chân bảng Chứa các hàng tổng kết Phần cuối của bảng
Cấu trúc table đầy đủ 
<table>
    <caption>Tiêu đề mô tả bảng</caption>
    
    <thead>
        <tr>
            <th>Tiêu đề cột 1</th>
            <th>Tiêu đề cột 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>
            <th>Tổng cộng</th>
            <td>Kết quả</td>
        </tr>
    </tfoot>
</table>

✅ Lợi ích của việc sử dụng các thẻ cấu trúc:

  • Semantic HTML: Tăng ý nghĩa và cấu trúc rõ ràng
  • SEO tốt hơn: Search engine hiểu được cấu trúc bảng
  • Accessibility: Screen reader đọc được tốt hơn
  • CSS styling: Dễ dàng định dạng từng phần riêng biệt
  • Print styling: Có thể lặp lại header khi in

🎯 Ví dụ Table với cấu trúc đầy đủ

📊 Báo cáo doanh thu quý 1/2024
Tháng Doanh thu (VNĐ) Chi phí (VNĐ) Lợi nhuận (VNĐ)
Tháng 1 100,000,000 70,000,000 30,000,000
Tháng 2 120,000,000 80,000,000 40,000,000
Tháng 3 130,000,000 85,000,000 45,000,000
Tổng cộng 350,000,000 235,000,000 115,000,000
Code của ví dụ trên 
<table>
    <caption><strong>📊 Báo cáo doanh thu quý 1/2024</strong></caption>
    <thead>
        <tr>
            <th>Tháng</th>
            <th>Doanh thu (VNĐ)</th>
            <th>Chi phí (VNĐ)</th>
            <th>Lợi nhuận (VNĐ)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tháng 1</td>
            <td>100,000,000</td>
            <td>70,000,000</td>
            <td>30,000,000</td>
        </tr>
        <!-- More rows... -->
    </tbody>
    <tfoot>
        <tr>
            <th>Tổng cộng</th>
            <th>350,000,000</th>
            <th>235,000,000</th>
            <th>115,000,000</th>
        </tr>
    </tfoot>
</table>

⚙️ Thuộc tính của các thẻ Table

📋 Thuộc tính của thẻ <table>

Thuộc tính Giá trị Mô tả Ví dụ
border số (pixels) Độ dày đường viền bảng <table border="1">
width số hoặc % Chiều rộng của bảng <table width="100%">
cellpadding số (pixels) Khoảng cách giữa nội dung và viền ô <table cellpadding="10">
cellspacing số (pixels) Khoảng cách giữa các ô <table cellspacing="0">

⚠️ Lưu ý về thuộc tính HTML

Các thuộc tính như border, cellpadding, cellspacing đã được khuyến nghị thay thế bằng CSS trong HTML5. Tuy nhiên, vẫn cần hiểu để đọc code cũ.

🔗 Thuộc tính của thẻ <td> và <th>

Thuộc tính Giá trị Mô tả Ví dụ
colspan số Gộp nhiều cột <td colspan="2">
rowspan số Gộp nhiều hàng <td rowspan="3">
align left, center, right Căn chỉnh nội dung theo chiều ngang <td align="center">
valign top, middle, bottom Căn chỉnh nội dung theo chiều dọc <td valign="top">
width số hoặc % Chiều rộng của ô <td width="50%">
height số (pixels) Chiều cao của ô <td height="50">

🎯 Ví dụ sử dụng thuộc tính

Table với các thuộc tính cơ bản 
<table border="1" width="100%" cellpadding="10" cellspacing="0">
    <tr>
        <th width="30%">Môn học</th>
        <th width="20%" align="center">Điểm</th>
        <th width="50%">Ghi chú</th>
    </tr>
    <tr>
        <td>Toán học</td>
        <td align="center">9.5</td>
        <td>Điểm cao</td>
    </tr>
    <tr>
        <td>Văn học</td>
        <td align="center">8.0</td>
        <td>Khá</td>
    </tr>
</table>

📊 Bảng điểm với thuộc tính

Môn học Điểm Ghi chú
Toán học 9.5 Điểm cao
Văn học 8.0 Khá
Lịch sử 7.5 Trung bình khá

🔗 Thuộc tính colspan và rowspan

📝 Giải thích chi tiết

  • colspan: Gộp nhiều cột thành một ô. Giá trị là số cột muốn gộp.
  • rowspan: Gộp nhiều hàng thành một ô. Giá trị là số hàng muốn gộp.
  • Khi sử dụng colspan/rowspan, cần bỏ bớt các ô <td> tương ứng.
Ví dụ colspan - gộp cột 
<table border="1">
    <tr>
        <td colspan="3">Tiêu đề gộp 3 cột</td>
    </tr>
    <tr>
        <td>Cột 1</td>
        <td>Cột 2</td>
        <td>Cột 3</td>
    </tr>
</table>
Ví dụ rowspan - gộp hàng 
<table border="1">
    <tr>
        <td rowspan="2">Gộp 2 hàng</td>
        <td>Hàng 1, Cột 2</td>
    </tr>
    <tr>
        <!-- Bỏ ô đầu vì đã bị gộp -->
        <td>Hàng 2, Cột 2</td>
    </tr>
</table>

📅 Ví dụ Table với colspan và rowspan

Thời khóa biểu

Thời gian Thứ 2 Thứ 3 Thứ 4 Thứ 5 Thứ 6
7:00 - 8:00 Toán Văn Anh Lý Hóa
8:00 - 9:00 Thể dục Toán Văn Anh Lý
9:00 - 10:00 Lịch sử Địa lý Sinh Toán
10:00 - 11:00 🥤 GIẢI LAO

🎨 CSS Styling cho Tables

CSS cho Tables 
/* Border collapse - gộp đường viền */
table {
    border-collapse: collapse;
    width: 100%;
}

/* Styling cho ô */
th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

/* Styling cho tiêu đề */
th {
    background-color: #4CAF50;
    color: white;
}

/* Zebra striping - tô màu xen kẽ */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Hover effect */
tr:hover {
    background-color: #ddd;
}

📱 Table Responsive

Tạo table responsive 
/* Tạo table responsive */
.table-container {
    overflow-x: auto;
}

table {
    min-width: 600px;
}

@media screen and (max-width: 600px) {
    table {
        font-size: 14px;
    }
    
    th, td {
        padding: 8px;
    }
}

💪 Bài tập thực hành

🎯 Bài tập 1: Tạo bảng thông tin cá nhân

Sử dụng các thuộc tính width, align, cellpadding để tạo bảng thông tin với các cột: Họ tên, Ngày sinh, Email, Số điện thoại

📋 Demo mẫu bài tập 1:

Họ tên Ngày sinh Email Số điện thoại
Nguyễn Văn An 15/05/2000 nguyenvanan@email.com 0123-456-789
Trần Thị Bình 20/08/1999 tranthibinh@email.com 0987-654-321
Lê Hoàng Cường 10/12/2001 lehoangcuong@email.com 0345-678-901
📝 Code mẫu bài tập 1 
<table border="1" width="100%" cellpadding="8" cellspacing="0">
    <tr>
        <th width="25%" align="center">Họ tên</th>
        <th width="20%" align="center">Ngày sinh</th>
        <th width="30%" align="center">Email</th>
        <th width="25%" align="center">Số điện thoại</th>
    </tr>
    <tr>
        <td>Nguyễn Văn An</td>
        <td align="center">15/05/2000</td>
        <td>nguyenvanan@email.com</td>
        <td align="center">0123-456-789</td>
    </tr>
    <tr>
        <td>Trần Thị Bình</td>
        <td align="center">20/08/1999</td>
        <td>tranthibinh@email.com</td>
        <td align="center">0987-654-321</td>
    </tr>
    <tr>
        <td>Lê Hoàng Cường</td>
        <td align="center">10/12/2001</td>
        <td>lehoangcuong@email.com</td>
        <td align="center">0345-678-901</td>
    </tr>
</table>

🎯 Bài tập 2: Tạo bảng điểm số với colspan

Tạo bảng điểm các môn học. Sử dụng colspan để tạo tiêu đề "Bảng điểm học kỳ I" gộp tất cả các cột.

📋 Demo mẫu bài tập 2:

📊 BẢNG ĐIỂM HỌC KỲ I - LỚP 12A1
Tên học sinh Toán Văn Anh
Nguyễn Văn An 9.5 8.5 7.0
Trần Thị Bình 8.0 9.0 8.5
Lê Hoàng Cường 7.5 7.0 8.0
Điểm trung bình 8.3 8.2 7.8
📝 Code mẫu bài tập 2 
<table border="1" width="100%" cellpadding="10" cellspacing="0">
    <tr>
        <th colspan="4" align="center">
            📊 BẢNG ĐIỂM HỌC KỲ I - LỚP 12A1
        </th>
    </tr>
    <tr>
        <th width="25%" align="center">Tên học sinh</th>
        <th width="25%" align="center">Toán</th>
        <th width="25%" align="center">Văn</th>
        <th width="25%" align="center">Anh</th>
    </tr>
    <tr>
        <td>Nguyễn Văn An</td>
        <td align="center">9.5</td>
        <td align="center">8.5</td>
        <td align="center">7.0</td>
    </tr>
    <tr>
        <td>Trần Thị Bình</td>
        <td align="center">8.0</td>
        <td align="center">9.0</td>
        <td align="center">8.5</td>
    </tr>
    <tr>
        <td>Lê Hoàng Cường</td>
        <td align="center">7.5</td>
        <td align="center">7.0</td>
        <td align="center">8.0</td>
    </tr>
    <tr>
        <th align="center">Điểm trung bình</th>
        <th align="center">8.3</th>
        <th align="center">8.2</th>
        <th align="center">7.8</th>
    </tr>
</table>

🎯 Bài tập 3: Tạo bảng thời khóa biểu

Sử dụng rowspan cho các môn học kéo dài nhiều tiết và colspan cho giờ nghỉ.

📋 Demo mẫu bài tập 3:

📅 THỜI KHÓA BIỂU LỚP 12A1 - TUẦN 1
Tiết/Thứ Thứ 2 Thứ 3 Thứ 4 Thứ 5 Thứ 6
Tiết 1
7:00-7:45		 Toán Văn Anh Lý Hóa
Tiết 2
7:50-8:35		 Toán Văn Anh Lý Hóa
Tiết 3
8:45-9:30		 🏃‍♂️
THỂ DỤC
(2 tiết liên tục) 		Lịch sử Địa lý Sinh Toán
Tiết 4
9:35-10:20		 Lịch sử Địa lý Sinh Toán
Giải lao ☕ NGHỈ GIẢI LAO (20 phút)
Tiết 5
10:40-11:25		 Văn Toán Lý Anh Sinh
📝 Code mẫu bài tập 3 
<table border="1" width="100%" cellpadding="8" cellspacing="0">
    <tr>
        <th colspan="6" align="center">
            📅 THỜI KHÓA BIỂU LỚP 12A1 - TUẦN 1
        </th>
    </tr>
    <tr>
        <th width="15%" align="center">Tiết/Thứ</th>
        <th width="17%" align="center">Thứ 2</th>
        <th width="17%" align="center">Thứ 3</th>
        <th width="17%" align="center">Thứ 4</th>
        <th width="17%" align="center">Thứ 5</th>
        <th width="17%" align="center">Thứ 6</th>
    </tr>
    <tr>
        <td align="center">Tiết 1</td>
        <td align="center">Toán</td>
        <td align="center">Văn</td>
        <td align="center">Anh</td>
        <td align="center">Lý</td>
        <td align="center">Hóa</td>
    </tr>
    <tr>
        <td align="center">Tiết 2</td>
        <td align="center">Toán</td>
        <td align="center">Văn</td>
        <td align="center">Anh</td>
        <td align="center">Lý</td>
        <td align="center">Hóa</td>
    </tr>
    <tr>
        <td align="center">Tiết 3</td>
        <td rowspan="2" align="center">THỂ DỤC</td>
        <td align="center">Lịch sử</td>
        <td align="center">Địa lý</td>
        <td align="center">Sinh</td>
        <td align="center">Toán</td>
    </tr>
    <tr>
        <td align="center">Tiết 4</td>
        <!-- Không có td cho THỂ DỤC vì đã dùng rowspan -->
        <td align="center">Lịch sử</td>
        <td align="center">Địa lý</td>
        <td align="center">Sinh</td>
        <td align="center">Toán</td>
    </tr>
    <tr>
        <td align="center">Giải lao</td>
        <td colspan="5" align="center">NGHỈ GIẢI LAO</td>
    </tr>
    <tr>
        <td align="center">Tiết 5</td>
        <td align="center">Văn</td>
        <td align="center">Toán</td>
        <td align="center">Lý</td>
        <td align="center">Anh</td>
        <td align="center">Sinh</td>
    </tr>
</table>

🎯 Bài tập 4: Tạo bảng sử dụng CSS

Tạo bảng không sử dụng thuộc tính HTML mà chỉ dùng CSS để định dạng.

📋 Demo mẫu bài tập 4:

🛍️ Sản phẩm 💰 Giá 📦 Số lượng 📊 Trạng thái
MacBook Pro 16" 45,000,000 VNĐ 12 ✅ Còn hàng
iPhone 15 Pro 28,000,000 VNĐ 25 ✅ Còn hàng
iPad Air 18,000,000 VNĐ 0 ❌ Hết hàng
Apple Watch 12,000,000 VNĐ 8 ✅ Còn hàng
📝 Code mẫu bài tập 4 (HTML + CSS) 
<!-- HTML -->
<table class="modern-table">
    <thead>
        <tr>
            <th>🛍️ Sản phẩm</th>
            <th>💰 Giá</th>
            <th>📦 Số lượng</th>
            <th>📊 Trạng thái</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="product-name">MacBook Pro 16"</td>
            <td class="price">45,000,000 VNĐ</td>
            <td>12</td>
            <td class="status-available">✅ Còn hàng</td>
        </tr>
        <tr>
            <td class="product-name">iPhone 15 Pro</td>
            <td class="price">28,000,000 VNĐ</td>
            <td>25</td>
            <td class="status-available">✅ Còn hàng</td>
        </tr>
        <tr>
            <td class="product-name">iPad Air</td>
            <td class="price">18,000,000 VNĐ</td>
            <td>0</td>
            <td class="status-sold">❌ Hết hàng</td>
        </tr>
    </tbody>
</table>

<!-- CSS -->
<style>
.modern-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden;
}

.modern-table thead tr {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    text-align: left;
    font-weight: bold;
}

.modern-table th,
.modern-table td {
    padding: 12px 15px;
}

.modern-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.modern-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.modern-table tbody tr:hover {
    background-color: #e3f2fd;
    transform: scale(1.02);
    transition: all 0.3s ease;
}

.product-name {
    font-weight: bold;
    color: #2c3e50;
}

.price {
    color: #e74c3c;
    font-weight: bold;
}

.status-available {
    color: #27ae60;
    font-weight: bold;
}

.status-sold {
    color: #e74c3c;
    font-weight: bold;
}
</style>

💡 Hướng dẫn thực hành:

  1. Copy code mẫu từ các demo trên làm nền tảng
  2. Thay đổi nội dung để phù hợp với yêu cầu của bạn
  3. Thử nghiệm các thuộc tính khác nhau (width, align, colspan, rowspan)
  4. Kiểm tra kết quả trên trình duyệt
  5. Cải thiện design bằng CSS để đẹp hơn

⚠️ Lưu ý khi làm bài tập:

  • Kiểm tra cẩn thận khi dùng colspan và rowspan
  • Đếm đúng số cột và hàng để tránh lỗi cấu trúc
  • Khi gộp ô, nhớ bỏ bớt các thẻ <td> tương ứng
  • Sử dụng CSS thay vì thuộc tính HTML cho styling hiện đại
  • Test responsive trên các thiết bị khác nhau

✅ Best Practices

💡 Những điều nên làm:

  • Luôn sử dụng <th> cho tiêu đề cột để tăng tính semantic
  • Sử dụng CSS thay vì thuộc tính HTML để định dạng (HTML5 khuyến nghị)
  • Sử dụng border-collapse: collapse để gộp đường viền
  • Kiểm tra kỹ khi sử dụng colspan và rowspan để tránh lỗi cấu trúc
  • Tạo responsive design cho table trên mobile
  • Không sử dụng table để tạo layout trang web
  • Sử dụng thuộc tính scope cho <th> khi cần thiết

⚠️ Thuộc tính deprecated (không nên dùng):

Các thuộc tính sau đây vẫn hoạt động nhưng không được khuyến khích sử dụng trong HTML5:

  • border, cellpadding, cellspacing → Dùng CSS
  • align, valign → Dùng CSS text-align, vertical-align
  • bgcolor → Dùng CSS background-color
  • width, height → Dùng CSS