[Thực hành] Tạo bảng nâng cao – Học lập trình cùng CodeGym

Mục tiêu

Tạo bảng có cấu trúc nâng cao trong HTML.

Mô tả – Tạo bảng nâng cao

Tạo bảng thời khoá biểu với cấu trúc như sau:

Hướng dẫn

Bước 1: Tạo 1 file HTML.
Bước 2: Tạo cấu trúc table như sau :

Để làm được bảng này, chúng ta sử dụng:

• Thuộc tính colspan của thẻ <td> hoặc <th> để mở rộng theo chiều ngang.
• Thuộc tính rowspan của thẻ <td> hoặc <th> để mở rộng theo chiều dọc.

Tạo cấu trúc tiêu đề như sau :

• Sử dụng thẻ <tr> để tạo ra một hàng
• Sử dụng thẻ <th> để tạo ra các mục tiêu đề

<h2> Thời Khóa Biểu</h2>
<table>
    <tr>
        <th rowspan=2>Thứ</th>
        <th colspan=2>Hoạt động</th>
    </tr>
    <tr>
        <th>Sáng</th>
        <th>Chiều</th>
    </tr>
</table>

Bước 3: Thêm phần nội dung cho bảng:

<h2> Thời Khóa Biểu</h2>
<table>    
    <tr>
        <th rowspan=2>Thứ</th>
        <th colspan=2>Hoạt động</th>
    </tr>
    <tr>
        <th>Sáng</th>
        <th>Chiều</th>
    </tr>
    <tr>
        <td>Thứ Hai</td>
        <td>Thể dục</td>
        <td>HD trò chơi mới</td>
    </tr>
    <tr>
        <td>Thứ 3</td>
        <td>Nhận biết tập nói</td>
        <td>Rèn nề nếp,kỹ năng sống</td>
    </tr>
    <tr>
        <td>Thứ 4</td>
        <td>Âm Nhạc </td>
        <td>Vui chơi</td>
    </tr>
    <tr>
        <td>Thứ 5</td>
        <td>Văn Học</td>
        <td>Nhận Biết các giá trị sống</td>
    </tr>
</table>

Bước 4: Trang trí cho bảng sử dụng CSS.

Nhúng file css vào trang HTML: <link rel=”stylesheet” type=”text/css” href=”css/style.css”>

Kết quả cuối cùng:

<h2> Thời Khóa Biểu</h2>
<table>    
    <tr>
        <th rowspan=2>Thứ</th>
        <th colspan=2>Hoạt động</th>
    </tr>
    <tr>
        <th>Sáng</th>
        <th>Chiều</th>
    </tr>
    <tr>
        <td>Thứ Hai</td>
        <td>Thể dục</td>
        <td>HD trò chơi mới</td>
    </tr>
    <tr>
        <td>Thứ 3</td>
        <td>Nhận biết tập nói</td>
        <td>Rèn nề nếp,kỹ năng sống</td>
    </tr>
    <tr>
        <td>Thứ 4</td>
        <td>Âm Nhạc </td>
        <td>Vui chơi</td>
    </tr>
    <tr>
        <td>Thứ 5</td>
        <td>Văn Học</td>
        <td>Nhận Biết các giá trị sống</td>
    </tr>
</table>

Để hoàn thành bài thực hành, bạn cần:

• Đưa mã nguồn lên GitHub
• Dán link của repository lên phần nộp bài trên CodeGymX

Xem thêm: Học Coding Bootcamp tại Việt Nam ở đâu để đi định cư tại Mỹ