BÀI 3: BẢNG BIỂU (TABLE) VÀ BỐ CỤC KHỐI (BOX MODEL)

3.1. Tạo bảng dữ liệu (HTML Tables)

Bảng biểu dùng để hiển thị dữ liệu dạng lưới (danh sách học sinh, hóa đơn), không dùng để chia bố cục trang web.

3.1.1. Cấu trúc bảng cơ bản

<table border="1">
    <tr>
        <th>Họ tên</th>
        <th>Điểm</th>
    </tr>
    <tr>
        <td>Nguyễn Văn A</td>
        <td>10</td>
    </tr>
</table>

Giải thích cú pháp:

<table border="1"> : mở bảng, có đường viền.
<tr> : tạo một dòng trong bảng.
<th> : ô tiêu đề (in đậm, căn giữa).
<td> : ô dữ liệu thực tế.
Trong thẻ <table>, ngoài việc khai báo border="1" để tạo đường viền, bạn có thể khai báo thêm nhiều thuộc tính khác để điều chỉnh cách hiển thị bảng. Đây là những thuộc tính cơ bản thường dùng trong HTML truyền thống (trước khi CSS phổ biến):
- border="..." → độ dày đường viền (ví dụ: border="1").
- width="..." → chiều rộng bảng (ví dụ: width="600" hoặc width="100%").
- height="..." → chiều cao bảng (ít dùng, vì thường để nội dung tự co giãn).
- cellpadding="..." → khoảng cách từ nội dung đến viền ô (ví dụ: cellpadding="5").
- cellspacing="..." → khoảng cách giữa các ô trong bảng (ví dụ: cellspacing="2").
- align="..." → căn chỉnh bảng trong trang (ví dụ: align="center" để căn giữa).
- bgcolor="..." → màu nền cho toàn bảng (ví dụ: bgcolor="lightblue").
👉 Ví dụ cú pháp:
html
```
<table border="1" width="600" cellpadding="5" cellspacing="2" align="center" bgcolor="lightyellow">
    ...
</table>
```
Ngày nay, các thuộc tính này thường được thay thế bằng CSS để dễ quản lý hơn.

👉 Viết xuống dòng và thụt lề như trên sẽ giúp bạn dễ đọc, dễ hiểu cấu trúc bảng hơn.

Một ví dụ thực tế về bảng điểm học sinh sẽ giúp bạn hình dung rõ cách dùng các thẻ bảng:

<table>: là toàn bộ khung bảng điểm.
<tr>: mỗi dòng là một học sinh hoặc một phần tiêu đề.
<th>: tiêu đề cột, ví dụ: “Họ tên”, “Toán”, “Văn”, “Anh”, “Điểm trung bình”.
<td>: dữ liệu thực tế, ví dụ: “Nguyễn Văn A – 8 – 7 – 9 – 8.0”.

Ví dụ

Bảng điểm học sinh lớp 12A1

Họ tên	Toán	Văn	Anh	Điểm trung bình
Nguyễn Văn A	8	7	9	8.0
Trần Thị B	9	8	8	8.3
Lê Văn C	6	7	7	6.7
Phạm Thị D	10	9	9	9.3

👉 Ở đây:

Dòng đầu tiên là tiêu đề cột (<th>).
Các dòng tiếp theo là dữ liệu học sinh (<td>).
Mỗi học sinh có một dòng riêng (<tr>).

Như vậy, bảng điểm học sinh là một ứng dụng rất thực tế của các thẻ bảng trong HTML.

3.1.2. Kỹ thuật gộp ô (Merge Cells)

Gộp cột (colspan): Làm cho một ô “dài ra” theo chiều ngang, chiếm chỗ của các ô bên cạnh.
- Ví dụ: colspan="2" (Ô này chiếm 2 cột). Thường dùng cho tiêu đề lớn bao trùm nhiều cột con.
Gộp dòng (rowspan): Làm cho một ô “cao lên” theo chiều dọc, chiếm chỗ của các dòng bên dưới.
- Ví dụ: rowspan="2" (Ô này chiếm 2 dòng). Thường dùng cho cột số thứ tự hoặc các mục chung.

Ví dụ thực tế (Thời khóa biểu):

HTML
<table border="1">
    <tr>
        <th colspan="2">Lịch Học</th>
    </tr>
    <tr>
        <td rowspan="2">Thứ 2</td>
        <td>Sáng: Toán</td>
    </tr>
    <tr>
        <td>Chiều: Lý</td>
    </tr>
</table>

3.2. Thẻ khối và Thẻ nội dòng (Block vs Inline) Hiểu rõ hai loại thẻ này giúp kiểm soát vị trí hiển thị trên trang web.

3.2.1. Thẻ khối (Block-level elements): Thẻ <div>

Khái niệm: Là các thẻ luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn (từ mép trái sang mép phải màn hình).

Ví dụ

Tiêu đề bài báo
- Khi bạn mở một trang tin tức, dòng tiêu đề thường nằm riêng một dòng, chiếm hết chiều ngang.
- Đó chính là thẻ <h1> hoặc <h2>.
Đoạn văn bản
- Trong một bài viết, mỗi đoạn văn luôn xuống dòng mới và kéo dài từ trái sang phải.
- Đó là thẻ <p>.
Khối nội dung
- Một khung giới thiệu sản phẩm hoặc khối quảng cáo thường chiếm nguyên một vùng ngang.
- Đó là thẻ <div>.
Bảng dữ liệu
- Khi bạn xem bảng điểm học sinh, bảng giá sản phẩm… bảng luôn chiếm toàn bộ chiều ngang.
- Đó là thẻ <table>.

👉 Nếu bạn viết một đoạn văn bằng thẻ <p> rồi ngay sau đó viết thêm một đoạn khác, thì đoạn thứ hai sẽ tự động xuống dòng mới và không nằm cạnh đoạn đầu. Đây cũng chính là đặc điểm của thẻ block-level.

Đại diện: <div>, <h1>–<h6>, <p>, <ul>.
Chức năng của <div> (Division): Dùng để gom nhóm các phần tử HTML thành một khu vực (một khối) để dễ dàng đóng khung, tô màu nền hoặc di chuyển.

Ví dụ:

HTML
<div style="background-color: blue; color: white;">
    <h2>Khu vực Menu</h2>
    <p>Đây là một khối riêng biệt.</p>
</div>

3.2.2. Thẻ nội dòng (Inline elements): Thẻ <span>

Khái niệm: Là các thẻ chỉ chiếm chiều rộng vừa đủ với nội dung của nó và không xuống dòng mới.
Đại diện: <span>, <a>, <b>, <img>.
Chức năng của <span>: Dùng để tác động vào một phần nhỏ văn bản nằm trong một dòng (ví dụ: tô màu một chữ, làm đậm một từ).

Ví dụ: Code bảng điểm học sinh bằng thẻ <table> để bạn thấy rõ cách hiển thị:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bảng điểm minh hoạ</title>
</head>
<body>
    <h2>Bảng Điểm Học Sinh</h2>
    <table border="1" cellpadding="8" cellspacing="0">
        <tr>
            <th>Họ tên</th>
            <th>Toán</th>
            <th>Văn</th>
            <th>Điểm trung bình</th>
        </tr>
        <tr>
            <td>Nguyễn Văn A</td>
            <td>8</td>
            <td>7</td>
            <td>7.5</td>
        </tr>
        <tr>
            <td>Trần Thị B</td>
            <td>9</td>
            <td>8</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>Lê Văn C</td>
            <td>6</td>
            <td>7</td>
            <td>6.5</td>
        </tr>
    </table>
</body>
</html>

Khi hiển thị trên trình duyệt:

Dòng đầu tiên (<th>) sẽ là tiêu đề cột, in đậm và căn giữa: Họ tên, Toán, Văn, Điểm trung bình.
Các dòng tiếp theo (<td>) là dữ liệu thực tế của từng học sinh.
border="1" tạo đường viền cho bảng, cellpadding="8" tạo khoảng cách giữa chữ và viền ô, cellspacing="0" loại bỏ khoảng trống giữa các ô.

Bài tập 3.1: Thiết kế Thời khóa biểu (Sử dụng Table)

Mục tiêu: Thành thạo colspan và rowspan.
Yêu cầu: Tạo bảng TKB gồm các cột: Thứ, Buổi, Tiết, Môn học.
- Gộp cột tiêu đề lớn “THỜI KHÓA BIỂU HỌC KỲ 1”.
- Gộp dòng cột “Thứ” (Thứ 2 có Sáng/Chiều).
- Gộp dòng cột “Buổi” (Sáng có 5 tiết).
Gợi ý: Vẽ bảng ra giấy trước để xác định ô nào cần gộp.

Đây là hình mẫu bài tập này

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Thời khóa biểu học kỳ 1</title>
</head>
<body>

    <table border="1" cellspacing="0" cellpadding="5" width="600">
        <!-- Tiêu đề lớn -->
        <tr>
            <th colspan="4">THỜI KHÓA BIỂU HỌC KỲ 1</th>
        </tr>

        <!-- Tiêu đề các cột -->
        <tr>
            <th>Thứ</th>
            <th>Buổi</th>
            <th>Tiết</th>
            <th>Môn học</th>
        </tr>

        <!-- Thứ 2 -->
        <tr>
            <td rowspan="10">Thứ 2</td> <!-- Gộp cho cả sáng + chiều -->
            <td rowspan="5">Sáng</td>   <!-- Gộp cho 5 tiết buổi sáng -->
            <td>Tiết 1</td>
            <td>Toán</td>
        </tr>
        <tr>
            <td>Tiết 2</td>
            <td>Ngữ văn</td>
        </tr>
        <tr>
            <td>Tiết 3</td>
            <td>Tiếng Anh</td>
        </tr>
        <tr>
            <td>Tiết 4</td>
            <td>Lịch sử</td>
        </tr>
        <tr>
            <td>Tiết 5</td>
            <td>Địa lý</td>
        </tr>

        <!-- Buổi chiều -->
        <tr>
            <td rowspan="5">Chiều</td> <!-- Gộp cho 5 tiết buổi chiều -->
            <td>Tiết 1</td>
            <td>Vật lý</td>
        </tr>
        <tr>
            <td>Tiết 2</td>
            <td>Hóa học</td>
        </tr>
        <tr>
            <td>Tiết 3</td>
            <td>Sinh học</td>
        </tr>
        <tr>
            <td>Tiết 4</td>
            <td>Tin học</td>
        </tr>
        <tr>
            <td>Tiết 5</td>
            <td>Thể dục</td>
        </tr>
    </table>

</body>
</html>

Bài tập 3.2: Tạo bảng giá sản phẩm bằng HTML

Đây là hình mẫu bài tập này

Mục tiêu:

Luyện tập sử dụng thẻ <table>, <tr>, <td> để tạo bảng.
Biết cách chèn hình ảnh bằng thẻ <img>.
Biết cách trình bày văn bản bằng thẻ <p>, <font>, và tiêu đề <h2>.

Yêu cầu thực hiện:

Tạo một file HTML mới, đặt tên là bang-gia-san-pham.html.
Dùng thẻ <h2> để viết tiêu đề: Bảng Giá Sản Phẩm (chữ màu xanh lá, font Arial, cỡ chữ 4).
Tạo bảng bằng thẻ <table border="1"> gồm 4 cột.
Hàng đầu tiên: chèn 4 hình ảnh sản phẩm (ví dụ: laptop, camera, máy in, loa).
Hàng thứ hai: ghi giá tham khảo cho từng sản phẩm (ví dụ: 4.000.000 VNĐ, 9.000.000 VNĐ…).
Hàng thứ ba: tiếp tục chèn thêm 4 hình ảnh sản phẩm khác (ví dụ: wifi, dầu thụ, ipad, PC).
Hàng thứ tư: ghi giá tham khảo cho các sản phẩm đó.
Đảm bảo bảng hiển thị rõ ràng, có đường viền, chữ dễ đọc.
Tên các hình ảnh : Tải từ internet và hay đổi tên thành các tên sau

latop.jpg → ảnh laptop
camera.jpg → ảnh máy ảnh
mayin.jpg → ảnh máy in
loa.jpg → ảnh loa
wifi.jpg → ảnh thiết bị wifi
dauthu.jpg → ảnh đầu thu
ipad.jpg → ảnh iPad
pc.jpg → ảnh máy tính PC

Gợi ý làm bài:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> <!-- Khai báo bộ mã ký tự -->
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Giúp hiển thị tốt trên thiết bị di động -->
    <title></title> <!-- Tiêu đề trang -->

    <!-- Tiêu đề chính của bảng giá -->
    <h2> 
        <font face="arial" size="4" color="green">
            <p>Bảng Giá Sản Phẩm</p>
        </font>
    </h2>
</head>  
<body>
    <!-- Nội dung chính của trang -->
    <font face="arial" size="4" color="black">
        <p>
            <!-- Tạo bảng với đường viền -->
            <table border="1"> 
                <!-- Hàng 1: chứa hình ảnh sản phẩm -->
                <tr>
                    <td><img src="latop.jpg"></td> <!-- Ảnh laptop -->
                    <td><img src="camera.jpg"></td> <!-- Ảnh camera -->
                    <td><img src="mayin.jpg"></td>  <!-- Ảnh máy in -->
                    <td><img src="loa.jpg"></td>    <!-- Ảnh loa -->
                </tr>

                <!-- Hàng 2: giá tham khảo cho các sản phẩm ở hàng 1 -->
                <tr>
                    <td>Giá Tham Khảo 4.000.000 VNĐ</td>
                    <td>Giá Tham Khảo 9.000.000 VNĐ</td>
                    <td>Giá Tham Khảo 17.000.000 VNĐ</td> 
                    <td>Giá Tham Khảo 12.000.000 VNĐ</td>   
                </tr>

                <!-- Hàng 3: thêm hình ảnh sản phẩm khác -->
                <tr>
                    <td><img src="wifi.jpg"></td>   <!-- Ảnh thiết bị wifi -->
                    <td><img src="dauthu.jpg"></td> <!-- Ảnh đầu thu -->
                    <td><img src="ipad.jpg"></td>   <!-- Ảnh iPad -->
                    <td><img src="pc.jpg"></td>     <!-- Ảnh máy tính PC -->
                </tr>

                <!-- Hàng 4: giá tham khảo cho các sản phẩm ở hàng 3 -->
                <tr>
                    <td>Giá Tham Khảo 11.000.000 VNĐ</td>
                    <td>Giá Tham Khảo 13.000.000 VNĐ</td>
                    <td>Giá Tham Khảo 19.000.000 VNĐ</td> 
                    <td>Giá Tham Khảo 50.000.000 VNĐ</td>   
                </tr>
            </table>
        </p>
    </font>
</body>
</html>

📌 Giải thích nhanh:

<table border="1">: tạo bảng có đường viền.
<tr>: tạo một hàng trong bảng.
<td>: tạo một ô trong hàng.
<img src="...">: chèn hình ảnh sản phẩm.
Các hàng xen kẽ: một hàng chứa ảnh, một hàng chứa giá tham khảo.

Bài tập 3.3.: Tạo bố cục trang web đơn giản

Yêu cầu:

Tạo file bo-cuc.html.
Dùng nhiều thẻ <div> để chia trang thành 3 khu vực: Header, Nội dung, Footer.
Trong phần Nội dung, tạo thêm một khối con để hiển thị danh sách môn học bằng thẻ <ul>.
Thêm màu nền khác nhau cho từng khối để dễ phân biệt.

Gợi ý:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Bố cục trang web</title>
</head>
<body>
    <div style="background-color: lightgreen; padding: 10px;">
        <h1>Header - Trang Web của Tôi</h1>
    </div>

    <div style="background-color: lightyellow; padding: 10px;">
        <h2>Nội dung chính</h2>
        <div style="background-color: white; padding: 5px;">
            <h3>Danh sách môn học</h3>
            <ul>
                <li>Toán</li>
                <li>Ngữ văn</li>
                <li>Tiếng Anh</li>
            </ul>
        </div>
    </div>

    <div style="background-color: lightgray; padding: 10px;">
        <p>Footer - Bản quyền © 2026</p>
    </div>
</body>
</html>

Bài tập 3.4: Tạo khối giới thiệu cá nhân

Yêu cầu:

Tạo file gioi-thieu.html.
Dùng thẻ <div> để gom nhóm thông tin cá nhân (họ tên, lớp, sở thích).
Mỗi phần thông tin đặt trong một thẻ khối <p>.
Thêm tiêu đề bằng thẻ <h2>.
Đặt màu nền cho khối bằng thuộc tính style="background-color:...".
Dùng 3 khối <div>, nhưng trong mỗi khối có thể kết hợp thêm danh sách <ul><li>, liên kết <a> và hình ảnh để phần giới thiệu cá nhân trở nên sinh động hơn.

Gợi ý làm bài:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Giới Thiệu Cá Nhân</title>
</head>
<body>
    <!-- Khối 1: Họ tên -->
    <div style="background-color:lightblue; padding:15px; margin-bottom:10px;" align="center">
        <h2>Họ Tên</h2>
        <p>Nguyễn Văn A</p>
        <img src="avatar.jpg" alt="Ảnh đại diện" width="120">
        <p><a href="mailto:nguyenvana@example.com">Liên hệ qua Email</a></p>
    </div>

    <!-- Khối 2: Lớp -->
    <div style="background-color:lightgreen; padding:15px; margin-bottom:10px;" align="center">
        <h2>Lớp</h2>
        <p>12A1</p>
        <p><b>Niên khóa:</b> 2025 - 2026</p>
        <p><a href="https://truongexample.edu.vn">Trang web lớp học</a></p>
    </div>

    <!-- Khối 3: Sở thích -->
    <div style="background-color:lightyellow; padding:15px; margin-bottom:10px;" align="center">
        <h2>Sở Thích</h2>
        <ul style="list-style-type:none; padding:0;">
            <li>📚 Đọc sách</li>
            <li>⚽ Chơi bóng đá</li>
            <li>🎵 Nghe nhạc</li>
            <li>💻 Lập trình</li>
        </ul>
    </div>
</body>
</html>

3.3. Mô hình hộp (CSS Box Model)

Đây là kiến thức quan trọng nhất để căn chỉnh giao diện (Layout) thay thế cho công nghệ Frame cũ. Mọi thẻ HTML (div, p, img…) đều được coi là một cái hộp chữ nhật.

3.3.1. Các thành phần của Box Model Một cái hộp gồm 4 lớp (từ trong ra ngoài):

Content (Nội dung): Là văn bản hoặc hình ảnh bên trong cùng.
Padding (Vùng đệm): Khoảng cách từ Nội dung đến Đường viền. Giúp nội dung “dễ thở”, không bị dính sát vào viền.
Border (Đường viền): Đường bao quanh hộp.
Margin (Lề ngoài): Khoảng cách từ Đường viền của hộp này đến các hộp khác xung quanh (để đẩy chúng ra xa).

3.3.2. Định dạng bằng CSS

CSS (Cascading Style Sheets) là ngôn ngữ định kiểu giúp kiểm soát giao diện và cách trình bày của các phần tử HTML trên trang web. Nó cho phép bạn thay đổi màu sắc, font chữ, bố cục, khoảng cách, kích thước, hình nền… để tạo nên một website đẹp và chuyên nghiệp

Vai trò của CSS

Tạo giao diện đẹp mắt: kiểm soát màu sắc, font chữ, hình nền, bố cục.
Tiết kiệm thời gian: chỉ cần viết một đoạn CSS, có thể áp dụng cho nhiều trang hoặc nhiều phần tử.
Tách biệt nội dung và trình bày: HTML tập trung vào cấu trúc, CSS lo phần hiển thị.
Tương thích đa nền tảng: giúp website hiển thị tốt trên máy tính, điện thoại, máy tính bảng

3.3.2.1. Cấu trúc cú pháp CSS

Một đoạn CSS thường có dạng:

selector {
    property: value;
}

Selector: bộ chọn, xác định phần tử HTML cần áp dụng (ví dụ: p, h1, .class, #id).
Property: thuộc tính cần thay đổi (ví dụ: color, font-size, margin).
Value: giá trị của thuộc tính (ví dụ: red, 16px, 20px).

Ví dụ:

p {
    color: blue;
    font-size: 16px;
}

→ Tất cả đoạn văn (<p>) sẽ có chữ màu xanh và cỡ chữ 16px.

3.3.2.2. Các cách nhúng CSS vào HTML

Inline CSS: viết trực tiếp trong thẻ HTML.

<p style="color:red;">Đoạn văn màu đỏ</p>

Internal CSS: viết trong thẻ <style> ở phần <head>.
```
<style>
    h1 { color: green; }
</style>
```
External CSS: viết trong file .css riêng và liên kết bằng <link>.
```
<link rel="stylesheet" href="style.css">
```

3.3.2.3. Các nhóm thuộc tính CSS phổ biến

Văn bản: color, font-family, font-size, text-align, background-color, background-image
Bố cục: margin, padding, border, width, height.
Selector phổ biến :
- element, .class, #id
- Selector tổ hợp: descendant, child, adjacent, group
- Pseudo-class và Pseudo-element: :hover, :first-child, ::before, ::after
Hiệu ứng nâng cao: transition, animation, transform.

Bài tập 3.5: Tạo bảng và sử dụng chức năng colspan, rowspan kết hợp CSS

Đây là hình mẫu bài tập này

Hãy tạo

Bảng có 4 dòng.
Mỗi dòng hiển thị 4 cột (nhờ colspan và rowspan điều chỉnh).

Gợi ý:

<!DOCTYPE html> <!-- Khai báo đây là tài liệu HTML5 -->
<html lang="en"> <!-- Ngôn ngữ trang là tiếng Anh -->
<head>
    <meta charset="UTF-8"> <!-- Đặt bảng mã ký tự UTF-8 để hỗ trợ hiển thị tiếng Việt/tiếng Anh -->
    <meta name="viewport" content="width-device-width, initial-scale=1.0"> <!-- Cấu hình hiển thị trên thiết bị di động (có lỗi chính tả: đúng phải là width=device-width) -->
    <title>Bảng html</title> <!-- Tiêu đề trang hiển thị trên tab trình duyệt -->
    <style>
        table {
            width: 100%; /* Bảng chiếm toàn bộ chiều rộng trang */
            border-collapse: collapse; /* Gộp viền bảng lại, không bị đúp */
        }
        table, th, td {
            border: 1px solid black; /* Tạo viền đen cho bảng, ô tiêu đề và ô dữ liệu */
        }
        th, td {
            padding: 8px; /* Khoảng cách bên trong ô */
            text-align: center; /* Căn giữa nội dung theo chiều ngang */
        }
    </style>
</head>
<body>
    <h2>Tạo bảng và sử dụng chức năng colspan, rowspan</h2> <!-- Tiêu đề nội dung -->
    <table> <!-- Bắt đầu bảng -->
        <tr> <!-- Hàng thứ 1 -->
            <td rowspan="2">Dòng 1, cột 1</td> <!-- Ô này chiếm 2 hàng (rowspan=2) -->
            <td colspan="2">Dòng 1, cột 2 và 3</td> <!-- Ô này chiếm 2 cột (colspan=2) -->
            <td rowspan="3">Dòng 1, cột 4</td> <!-- Ô này chiếm 3 hàng -->
        </tr>
        <tr> <!-- Hàng thứ 2 -->
            <td>Dòng 2, cột 1</td> <!-- Ô bình thường -->
            <td>Dòng 2, cột 2</td>
        </tr>
        <tr> <!-- Hàng thứ 3 -->
            <td>Dòng 3, cột 1</td>
            <td>Dòng 3, cột 2</td>
            <td>Dòng 3, cột 3</td>
        </tr>
        <tr> <!-- Hàng thứ 4 -->
            <td>Dòng 4, cột 1</td>
            <td>Dòng 4, cột 2</td>
            <td>Dòng 4, cột 3</td>
            <td>Dòng 4, cột 4</td>
        </tr>
    </table> <!-- Kết thúc bảng -->
</body>
</html> <!-- Kết thúc tài liệu HTML -->

Bài tập 3.6.1: Thiết kế bảng màu và bố cục

Mục tiêu

Hiểu cú pháp tạo bảng trong HTML.
Biết cách liên kết CSS và áp dụng định dạng cho bảng.
Thực hành chia cột, hàng, và sử dụng màu nền khác nhau.
Rèn kỹ năng sửa lỗi cú pháp CSS.

Đề bài

Tạo một file HTML tên index.html và một file CSS tên styles.css.
Trong HTML, tạo một bảng gồm 5 hàng × 3 cột (tổng 15 ô).
Mỗi ô có nội dung “Ô 1”, “Ô 2”, … đến “Ô 15”.

Liên kết file CSS bằng cú pháp:

<link rel="stylesheet" href="styles.css">

Trong CSS:
- Đặt bảng có chiều rộng 100%, border-collapse: collapse.
- Mỗi ô (td) có chiều rộng bằng nhau (33.33%), chiều cao 100px, chữ căn giữa cả ngang và dọc.
- Viền mỗi ô là 1px màu đen.
- Tạo 15 class .cell1 đến .cell15, mỗi class có một màu nền khác nhau.

Đây là hình mẫu bài tập này

Gợi ý là bài:

Tạo 2 file trong một thư mục: bai36.html và style.css

File style.css như sau:

table {
    width: 100%;
    border-collapse: collapse;
}

td {
    width: 33.33%; /* 3 ô chia đều 100% */
    height: 100px; /* có thể chỉnh lại */
    text-align: center;
    vertical-align: middle;
    border: 1px solid #000;
}

.cell1 { background-color:#ff9999; }
.cell2 { background-color:#99ff99; }
.cell3 { background-color:#9999ff; }
.cell4 { background-color:#ffcc99; }
.cell5 { background-color:#ccff99; }
.cell6 { background-color:#99ccff; }
.cell7 { background-color:#ff99cc; }
.cell8 { background-color:#99ffcc; }
.cell9 { background-color:#cc99ff; }
.cell10 { background-color:#ffff99; }
.cell11 { background-color:#99ffff; }
.cell12 { background-color:#ff99ff; }
.cell13 { background-color:#ffccff; }
.cell14 { background-color:#ccffff; }
.cell15 { background-color:#ccffcc; }

File bai36.html như sau:

<!DOCTYPE html> <!-- Khai báo đây là tài liệu HTML5 -->
<html lang="vi"> <!-- Ngôn ngữ trang là tiếng Việt -->
<head>
    <meta charset="UTF-8"> <!-- Đặt bảng mã ký tự UTF-8 để hỗ trợ tiếng Việt -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Giúp hiển thị tốt trên thiết bị di động -->
    <title></title> <!-- Tiêu đề trang (hiện trên tab trình duyệt) -->
    <link rel="stylesheet" href="styles.css"> <!-- Liên kết tới file CSS ngoài -->
</head>
<body>
    <table> <!-- Bắt đầu tạo bảng -->
        <tr> <!-- Hàng thứ 1 -->
            <td class="cell1">Ô 1</td> <!-- Ô 1, có class cell1 để CSS định dạng -->
            <td class="cell2">Ô 2</td> <!-- Ô 2 -->
            <td class="cell3">Ô 3</td> <!-- Ô 3 -->
        </tr>
        <Tr> <!-- Hàng thứ 2 (HTML không phân biệt hoa/thường) -->
            <td class="cell4">Ô 4</td> <!-- Ô 4 -->
            <td class="cell5">Ô 5</td> <!-- Ô 5 -->
            <td class="cell6">Ô 6</td> <!-- Ô 6 -->
        </Tr>
        <tr> <!-- Hàng thứ 3 -->
            <td class="cell7">Ô 7</td>
            <td class="cell8">Ô 8</td>
            <td class="cell9">Ô 9</td>
        </tr>
        <tr> <!-- Hàng thứ 4 -->
            <td class="cell10">Ô 10</td>
            <td class="cell11">Ô 11</td>
            <td class="cell12">Ô 12</td>
        </tr>
        <tr> <!-- Hàng thứ 5 -->
            <td class="cell13">Ô 13</td>
            <td class="cell14">Ô 14</td>
            <td class="cell15">Ô 15</td>
        </tr>
    </table> <!-- Kết thúc bảng -->
</body>
</html> <!-- Kết thúc tài liệu HTML -->

Bài tập 3.6.2: Tạo một file HTML tên là bang-colspan-rowspan.html

Đây là hình mẫu bài tập này

Mục tiêu

Tạo được bảng trong HTML.
Sử dụng colspan để gộp cột.
Sử dụng rowspan để gộp dòng.
Kết hợp được CSS cơ bản để làm bảng đẹp hơn.

Với yêu cầu sau:

Tiêu đề trang: “Tạo bảng và sử dụng chức năng colspan, rowspan”.
Tạo bảng có đường viền, chiếm toàn bộ chiều rộng trang.
Dòng 1:
- Ô đầu tiên gộp 2 dòng (rowspan=2).
- Ô thứ hai gộp 2 cột (colspan=2).
- Ô thứ ba gộp 3 dòng (rowspan=3).
Dòng 2: chứa 2 ô dữ liệu bình thường.
Dòng 3: chứa 3 ô dữ liệu bình thường.
Dòng 4: chứa đủ 4 ô dữ liệu bình thường.
Các ô phải có nội dung minh họa rõ ràng (ví dụ: “Dòng 1, cột 1”, “Dòng 2, cột 2”…).
Bảng phải có định dạng CSS:
- Đường viền đen, gọn gàng (border-collapse: collapse).
- Nội dung căn giữa (text-align: center).
- Khoảng cách trong ô (padding: 8px).

Gợi ý làm bài:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- Khai báo bộ mã ký tự là UTF-8 để hỗ trợ tiếng Việt -->
    <meta name="viewport" content="width-device-width, initial-scale=1.0"> <!-- Giúp trang hiển thị tốt trên thiết bị di động -->
    <title>Bảng html</title> <!-- Tiêu đề trang hiển thị trên tab trình duyệt -->
    <style>
        table {
            width: 100%; /* Bảng chiếm toàn bộ chiều rộng trang */
            border-collapse: collapse; /* Gộp viền bảng lại, không bị chồng chéo */
        }
        table, th, td {
            border: 1px solid black; /* Tạo viền đen cho bảng, ô tiêu đề và ô dữ liệu */
        }
        th, td {
            padding: 8px; /* Khoảng cách bên trong ô */
            text-align: center; /* Căn giữa nội dung trong ô */
        }
    </style>
</head>
<body>
    <h2>Tạo bảng và sử dụng chức năng colspan, rowspan</h2> <!-- Tiêu đề nội dung -->
    <table>
        <tr>
            <td rowspan="2">Dòng 1, cột 1</td> <!-- Ô này chiếm 2 hàng (rowspan=2) -->
            <td colspan="2">Dòng 1, cột 2 và 3</td> <!-- Ô này chiếm 2 cột (colspan=2) -->
            <td rowspan="3">Dòng 1, cột 4</td> <!-- Ô này chiếm 3 hàng (rowspan=3) -->
        </tr>
        <tr>
            <td>Dòng 2, cột 1</td> <!-- Ô bình thường -->
            <td>Dòng 2, cột 2</td> <!-- Ô bình thường -->
        </tr>
        <tr>
            <td>Dòng 3, cột 1</td> <!-- Ô bình thường -->
            <td>Dòng 3, cột 2</td> <!-- Ô bình thường -->
            <td>Dòng 3, cột 3</td> <!-- Ô bình thường -->
        </tr>
        <tr>
            <td>Dòng 4, cột 1</td> <!-- Ô bình thường -->
            <td>Dòng 4, cột 2</td> <!-- Ô bình thường -->
            <td>Dòng 4, cột 3</td> <!-- Ô bình thường -->
            <td>Dòng 4, cột 4</td> <!-- Ô bình thường -->
        </tr>
    </table>
</body>
</html>

Trong đó

rowspan: Dùng để gộp ô theo chiều dọc (chiếm nhiều hàng).
colspan: Dùng để gộp ô theo chiều ngang (chiếm nhiều cột).
Các thẻ <tr> tạo hàng, <td> tạo ô dữ liệu, <th> (nếu dùng) tạo ô tiêu đề.

Bài tập 3.6.3: Thiết kế Bảng điểm kết hợp HTML & CSS

Đây là hình mẫu bài tập này

Mục tiêu

Hiểu cách tạo bảng (<table>) với nhiều hàng và cột.
Biết sử dụng thead, tbody, th, td để cấu trúc dữ liệu.
Áp dụng CSS để định dạng bảng, thêm màu sắc, hiệu ứng hover.
Phân loại dữ liệu bằng màu nền (ví dụ: điểm tốt, trung bình, yếu).

Đề bài

Tạo một bảng điểm cho lớp học gồm các cột:
- STT
- Họ và tên
- Toán
- Văn
- Anh
- Trung bình
Thêm ít nhất 5 học sinh với điểm số khác nhau.
Dùng CSS để:
- Định dạng bảng đẹp, căn giữa nội dung.
- Thêm màu nền cho các loại điểm:
  - Xuất sắc (≥ 9) → xanh lá nhạt
  - Tốt (7–8.9) → xanh pastel
  - Trung bình (5–6.9) → vàng nhạt
  - Yếu (< 5) → đỏ nhạt
- Thêm hiệu ứng hover: khi rê chuột vào hàng, đổi màu nền.

Gợi ý làm bài:

Bai363_bang-diem/ <– Thư mục gốc của dự án
│
├── index.html <– File HTML chính (chứa bảng điểm)
├── styles.css <– File CSS (định dạng bảng, màu sắc, hiệu ứng)
│
├── assets/ <– Thư mục chứa tài nguyên bổ sung
│ ├── images/ <– Hình ảnh minh họa (nếu có)
│ │ └── logo.png
│ └── fonts/ <– Font chữ tùy chỉnh (nếu dùng)
│ └── custom-font.ttf
│
└── README.md <– Ghi chú mô tả dự án (tùy chọn)

Trang code bai363.html:

<!DOCTYPE html> <!-- Khai báo loại tài liệu HTML5 -->
<html lang="vi"> <!-- Ngôn ngữ trang là tiếng Việt -->
<head>
    <meta charset="UTF-8"> <!-- Bộ mã ký tự: UTF-8 hỗ trợ tiếng Việt -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Giúp hiển thị tốt trên thiết bị di động -->
    <title>Bảng điểm minh họa</title> <!-- Tiêu đề hiển thị trên tab trình duyệt -->
    <link rel="stylesheet" href="styles.css"> <!-- Liên kết tới file CSS để định dạng -->
</head>
<body>
    <!-- Tiêu đề chính của trang -->
    <h1>Bảng điểm lớp 10A</h1>

    <!-- Bảng điểm -->
    <table>
        <!-- Phần tiêu đề bảng -->
        <thead>
            <tr> <!-- Hàng tiêu đề -->
                <th>STT</th>          <!-- Số thứ tự -->
                <th>Họ và tên</th>    <!-- Tên học sinh -->
                <th>Toán</th>         <!-- Điểm môn Toán -->
                <th>Văn</th>          <!-- Điểm môn Văn -->
                <th>Anh</th>          <!-- Điểm môn Anh -->
                <th>Trung bình</th>   <!-- Điểm trung bình -->
            </tr>
        </thead>

        <!-- Phần nội dung bảng -->
        <tbody>
            <!-- Học sinh 1 -->
            <tr>
                <td>1</td> <!-- STT -->
                <td>Nguyễn Văn A</td> <!-- Họ và tên -->
                <td class="good">9.0</td>       <!-- Điểm Toán (tốt) -->
                <td class="average">7.5</td>    <!-- Điểm Văn (trung bình) -->
                <td class="excellent">9.5</td>  <!-- Điểm Anh (xuất sắc) -->
                <td>8.7</td>                    <!-- Điểm trung bình -->
            </tr>

            <!-- Học sinh 2 -->
            <tr>
                <td>2</td>
                <td>Trần Thị B</td>
                <td class="average">7.0</td>    <!-- Điểm Toán (trung bình) -->
                <td class="good">8.0</td>       <!-- Điểm Văn (tốt) -->
                <td class="average">7.5</td>    <!-- Điểm Anh (trung bình) -->
                <td>7.5</td>
            </tr>

            <!-- Học sinh 3 -->
            <tr>
                <td>3</td>
                <td>Lê Văn C</td>
                <td class="poor">5.0</td>       <!-- Điểm Toán (yếu) -->
                <td class="average">6.5</td>    <!-- Điểm Văn (trung bình) -->
                <td class="good">8.0</td>       <!-- Điểm Anh (tốt) -->
                <td>6.5</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

📌 Giải thích:

thead: phần tiêu đề bảng (cột).
tbody: phần nội dung bảng (dữ liệu học sinh).
class="excellent/good/average/poor": liên kết với CSS để tô màu nền theo mức điểm.
tr: mỗi hàng trong bảng.
td: mỗi ô dữ liệu.
th: ô tiêu đề (in đậm, mặc định căn giữa).

Trang style.css

/* Định dạng chung cho toàn bộ trang */
body {
    font-family: Arial, sans-serif;   /* Sử dụng font chữ Arial, nếu không có thì dùng sans-serif */
    background-color: #f4f6f9;        /* Màu nền tổng thể của trang (xám nhạt) */
    margin: 20px;                     /* Khoảng cách lề ngoài 20px */
}

/* Định dạng cho tiêu đề chính */
h1 {
    text-align: center;               /* Căn giữa tiêu đề */
    color: #333;                      /* Màu chữ xám đậm */
    margin-bottom: 20px;              /* Khoảng cách dưới tiêu đề */
}

/* Định dạng cho bảng */
table {
    width: 100%;                      /* Bảng chiếm toàn bộ chiều ngang trang */
    border-collapse: collapse;        /* Gộp viền, tránh bị chồng chéo */
    background-color: #fff;           /* Nền bảng màu trắng */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Đổ bóng nhẹ cho bảng */
}

/* Định dạng cho phần tiêu đề bảng (thead) */
thead {
    background-color: #4CAF50;        /* Nền xanh lá */
    color: white;                     /* Chữ màu trắng */
}

/* Định dạng cho ô tiêu đề (th) và ô dữ liệu (td) */
th, td {
    padding: 12px;                    /* Khoảng cách bên trong ô */
    text-align: center;               /* Căn giữa nội dung theo chiều ngang */
    border: 1px solid #ddd;           /* Viền xám nhạt cho mỗi ô */
}

/* Hiệu ứng khi rê chuột vào hàng */
tr:hover {
    background-color: #f1f1f1;        /* Đổi nền sang xám nhạt khi hover */
}

/* Định nghĩa màu nền cho từng loại điểm */
.excellent { background-color: #99ff99; } /* Điểm xuất sắc (≥ 9) → xanh lá nhạt */
.good      { background-color: #ccffcc; } /* Điểm tốt (7–8.9) → xanh pastel */
.average   { background-color: #ffff99; } /* Điểm trung bình (5–6.9) → vàng nhạt */
.poor      { background-color: #ff9999; } /* Điểm yếu (< 5) → đỏ nhạt */

Bài tập 3.7: Thiết kế trang giới thiệu FREE.com

Đây là hình mẫu bài tập này

Mục tiêu

Hiểu cách tạo bố cục trang web bằng thẻ <div>, <main>, <img>, <p>.
Biết cách liên kết file CSS ngoài để định dạng giao diện.
Thực hành sử dụng class (.product, .row, .text1, .text2, .row-img) để quản lý bố cục.
Rèn kỹ năng sửa lỗi cú pháp (ví dụ: highlight viết sai thành hightlight, viewport viết sai thành width-device-width).

Đề bài

Tạo một thư mục dự án 3.7 với cấu trúc:

3.7/
├── css/
│   └── style.css
├── img/
│   ├── logo.gif
│   ├── free.gif
│   ├── LOGON.GIF
│   ├── JOIN.GIF
│   ├── singles.gif
│   ├── chat.gif
│   └── diet.gif
└── index.html

Trong file index.html, viết lại đoạn code bạn đã đưa, đảm bảo:
- Sửa meta viewport thành:
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
- Sửa class sai chính tả: hightlight → highlight, hight → highlight.
Trong file style.css, định nghĩa các class:
- .product: căn giữa nội dung, thêm khoảng cách dưới.
- .row: hiển thị ảnh theo hàng ngang, có khoảng cách giữa các ảnh.
- .text1, .text2: định dạng chữ (font-size, màu sắc).
- .highlight: chữ màu đỏ hoặc vàng để nhấn mạnh.
- .red: chữ màu đỏ.
- .row-img: hiển thị 3 ảnh nhỏ theo hàng ngang.
Thêm CSS để toàn bộ trang có font chữ dễ đọc (ví dụ: Arial), nền màu sáng, chữ màu tối.

Gợi ý làm bài:

File index.html

<!DOCTYPE html> <!-- Khai báo đây là tài liệu HTML5 -->
<html>
<head>
    <meta charset="UTF-8"> <!-- Đặt bảng mã ký tự UTF-8 để hỗ trợ tiếng Việt/tiếng Anh -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Cấu hình hiển thị trên thiết bị di động (sửa lại chính tả: width=device-width) -->
    <link rel="stylesheet" href="C:/4.6//css/style.css"> <!-- Liên kết tới file CSS ngoài -->
    <title>FREE.COM</title> <!-- Tiêu đề trang hiển thị trên tab trình duyệt -->
</head>
<body>
    <div class="product"> <!-- Khối chứa logo -->
        <img src="C:/4.6/img/logo.gif"> <!-- Hình ảnh logo -->
    </div>
    <div class="product"> <!-- Khối chứa banner free.gif -->
        <img src="C:/4.6/img/free.gif">
    </div>
    <main> <!-- Nội dung chính của trang -->
        <div class="product">
            <p>Who says nothing is <span class="hightlight">FREE</span></p> <!-- Có lỗi chính tả: hightlight -> highlight -->
        </div>
        <div class="product">
            <p>At <span class="hight">FREE.com</span>, ...</p> <!-- Có lỗi chính tả: hight -> highlight -->
        </div>
        <div class="product">
            <p>Over <span class="highlight">8000</span> Internet sites ...</p>
        </div>
        <div class="product">
            <p>Hundreds of categories, minimum of <span class="highlight">10,000 Free</span> items </p>
        </div>
        <div class="product">
            <p>Quick and easy Search allows you to find just what you're looking for.</p>
        </div>
        <div class="product">
            <p>You can suggest a new free site ... <span class="highlight">FREE.com</span></p>
        </div>
        <div class="product">
            <p>Review the offers and tell other Internet users what you thought of them.</p>
        </div>
        <div class="product">
            <p>Make <span class="highlight">FREE.com</span> your first choice ... it's all <span class="highlight">FREE</span></p>
        </div>
        <div class="row"> <!-- Hàng chứa 2 nút hình ảnh -->
            <img src="C:/4.6/img/LOGON.GIF"> <!-- Nút đăng nhập -->
            <img src="C:/4.6/img/JOIN.GIF"> <!-- Nút đăng ký -->
        </div>
        <div class="text1"> <!-- Khối văn bản hướng dẫn đăng nhập/đăng ký -->
            <p>Existing members use this link to login to Free.com</p>
            <p>Use this link to register at Free.com, it is completly FREE I</p>
        </div>
        <div class="text2"> <!-- Khối văn bản liên hệ -->
            <p>Question/ Problem/ contact us at <span class="red">support@free.com</span></p>
        </div>
        <div class="row-img"> <!-- Hàng chứa 3 hình ảnh quảng bá -->
            <img src="C:/4.6/img/singles.gif">
            <img src="C:/4.6/img/chat.gif">
            <img src="C:/4.6/img/diet.gif">
        </div>
        <div class="product"> <!-- Footer bản quyền -->
            <p>(C)2001-2008 nation A-1 Advertising. All Rights Reserved.- <br> read the disclaimer -</p>
        </div>
    </main>
</body>
</html>

File style.css

body {
    font-family: Arial, sans-serif; /* Đặt font chữ cho toàn trang là Arial, nếu không có thì dùng sans-serif */
    margin: 20px; /* Tạo khoảng cách lề 20px xung quanh nội dung trang */
}

.product {
    width: 100%; /* Mỗi khối product chiếm toàn bộ chiều rộng */
    text-align: center; /* Căn giữa nội dung bên trong theo chiều ngang */
}

main {
    color: rgb(36, 36, 164); /* Đặt màu chữ mặc định trong thẻ <main> là xanh đậm */
    font-size: 5; /* Lỗi cú pháp: cần đơn vị (ví dụ: 5px, 1.2em). Hiện tại không hợp lệ */
}

.highlight {
    font-weight: bold; /* Làm chữ in đậm */
    color: rgb(24, 62, 143); /* Đặt màu chữ xanh lam */
}

.row {
    display: flex; /* Sử dụng Flexbox để sắp xếp các phần tử con theo hàng ngang */
    justify-content: center; /* Căn giữa các phần tử theo chiều ngang */
    gap: 50px; /* Khoảng cách giữa các phần tử là 50px */
}

.img {
    width: 150px; /* Đặt chiều rộng cho ảnh là 150px */
    margin-right: 30px; /* Tạo khoảng cách bên phải ảnh 30px */
}

.text1 {
    display: flex; /* Hiển thị nội dung theo Flexbox */
    justify-content: center; /* Căn giữa nội dung theo chiều ngang */
    gap: 100px; /* Khoảng cách giữa các phần tử là 100px */
}

.text2 {
    display: flex; /* Hiển thị nội dung theo Flexbox */
    justify-content: center; /* Căn giữa nội dung theo chiều ngang */
    gap: 50px; /* Khoảng cách giữa các phần tử là 50px */
}

.red {
    color: red; /* Đặt màu chữ đỏ */
}

.row-img {
    display: flex; /* Hiển thị các ảnh theo Flexbox */
    justify-content: center; /* Căn giữa các ảnh theo chiều ngang */
    gap: 100px; /* Khoảng cách giữa các ảnh là 100px */
}

Thêm một đoạn văn bản ở đây. Nhấp vào ô văn bản để tùy chỉnh nội dung, phong cách phông chữ và màu sắc của đoạn văn của bạn.

4. Câu hỏi ôn tập

Câu hỏi: Để gộp 3 ô trên cùng một dòng thành 1 ô, ta dùng thuộc tính nào?
- Trả lời: Dùng colspan="3".
Câu hỏi: Phân biệt Padding và Margin?
- Trả lời: Padding là khoảng cách bên trong (từ nội dung ra viền). Margin là khoảng cách bên ngoài (từ viền ra các đối tượng khác).
Câu hỏi: Thẻ <div> và thẻ <span> khác nhau cơ bản ở điểm nào về mặt hiển thị?
- Trả lời: Thẻ <div> là thẻ khối (tự động xuống dòng, chiếm hết chiều ngang). Thẻ <span> là thẻ nội dòng (nằm chung dòng với văn bản, kích thước chỉ bằng nội dung chứa trong nó).
Câu hỏi: Tại sao trong thiết kế hiện đại, người ta ít dùng Table để chia bố cục trang web?
- Trả lời: Vì Table có cấu trúc code phức tạp, khó chỉnh sửa và khó hiển thị tốt trên các thiết bị di động (không Responsive tốt bằng div).

Bài tập 3.8: Thiết kế Website SCAAL Coffee

Đây là hình mẫu bài tập này

Mục tiêu

Hiểu cách tạo trang web nhiều trang (index + story).
Biết cách sử dụng bảng (table) để bố cục nội dung.
Áp dụng CSS để định dạng header, logo, nội dung chính.
Thực hành liên kết giữa các trang HTML.

Yêu cầu bài tập

Tạo website gồm 2 trang: index.html và story.html.
Dùng table để bố cục nội dung.
Thêm menu bên trái bằng hình ảnh.
Viết CSS để định dạng header, nội dung, màu nền.
Thêm liên kết giữa các trang và liên kết ngoài (website/email).

4. Câu hỏi ôn tập

Để lại một bình luận Hủy