Trang chủ » Blog » Bài thực hành » [Thực hành] Tạo bảng nâng cao – Học lập trình cùng CodeGym

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

bởi CodeGym | 26/12/2023 17:17 | Bài thực hành | Blog

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:

Tạo bảng nâng cao

Hướng dẫn

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

Tạo bảng nâng cao

Để 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ỹ

Tags:

0 Lời bình

Gửi Lời bình

Email 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ÀI VIẾT LIÊN QUAN

BẠN MUỐN HỌC LẬP TRÌNH?

GỌI NGAY

098 953 44 58

Đăng ký tư vấn lộ trình học lập trình

Đăng ký tư vấn, định hướng lộ trình học và giải đáp các thắc mắc về ngành nghề – Miễn phí – Online.

1 + 2 =

TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM
TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM