Bảng trong HTML

Tháng mười một 1, 2022
 |  Không có bình luận

1. Tạo bảng

Các bảng HTML cho phép các tác giả web sắp xếp dữ liệu như văn bản, hình ảnh, liên kết, các bảng khác, v.v. thành các hàng và cột của ô.

<table>

<tr>

          <td>…</td>

</tr>

</table>

2. Tiêu đề bảng

Tiêu đề bảng có thể được xác định bằng thẻ <th> . Thẻ này sẽ được đặt để thay thế thẻ <td>, được sử dụng để đại diện cho ô dữ liệu thực tế. Thông thường, bạn sẽ đặt hàng trên cùng của mình làm tiêu đề bảng như hình dưới đây, nếu không, bạn có thể sử dụng phần tử <th> trong bất kỳ hàng nào. Các tiêu đề được xác định trong thẻ <th> được căn giữa và in đậm theo mặc định.

Ví dụ :

3. Thuộc tính Cellpadding và Cellspacing

Có hai thuộc tính được gọi là cellpadding và cellspacing mà bạn sẽ sử dụng để điều chỉnh khoảng trắng trong các ô bảng của mình. Thuộc tính cellspacing xác định khoảng cách giữa các ô trong bảng, trong khi cellpadding biểu thị khoảng cách giữa các đường viền ô và nội dung trong một ô.

Ví dụ

4. Thuộc tính Colspan và Rowspan

Bạn sẽ sử dụng thuộc tính colspan nếu bạn muốn hợp nhất hai hoặc nhiều cột thành một cột duy nhất. Cách tương tự, bạn sẽ sử dụng rowspan nếu bạn muốn hợp nhất hai hoặc nhiều hàng.

Ví dụ

5. Tạo nền trong Table

Bạn có thể đặt nền bảng bằng một trong hai cách sau:

– Thuộc tính bgcolor – Bạn có thể đặt màu nền cho toàn bộ bảng hoặc chỉ cho một ô.

– Thuộc tính background – Bạn có thể đặt hình nền cho toàn bộ bảng hoặc chỉ cho một ô.

Bạn cũng có thể đặt màu viền cũng bằng cách sử dụng thuộc tính bordercolor .

Ví dụ:

 Và bạn cũng có thể tạo nền cho table bằng hình ảnh theo mẫu sau

Bài tập Thực hành 1 (15 phút): Tạo Thời khóa biểu đơn giản.

(Video hướng dẫn )

  • Mục tiêu: Học sinh gõ được cấu trúc bảng 3×3 cơ bản.

  • Sản phẩm: BaiThucHanh_01.html

Hướng dẫn làm bài:

Bước 1: Mở trình soạn thảo và Tạo file mới

  • Việc làm: Mở trình soạn thảo văn bản của bạn (như Notepad, Notepad++, Sublime Text, hoặc VS Code).

  • Giải thích: Chúng ta cần một nơi để gõ code. HTML là file văn bản thuần túy, nên bất kỳ trình soạn thảo nào cũng dùng được.

Bước 2: Lưu file với tên .html

  • Việc làm: Ngay lập tức, hãy lưu file này.

    • Chọn “Save As…” (Lưu thành…).

    • Đặt tên file là: BaiThucHanh_01.html.

    • Chọn “All Files” (Tất cả các loại file) ở phần “Save as type” (nếu dùng Notepad) để đảm bảo file được lưu với đuôi .html chứ không phải .txt.

  • Giải thích: Đuôi file .html rất quan trọng. Nó báo cho máy tính và trình duyệt web (như Chrome, Firefox) rằng “Đây là một trang web”, để trình duyệt có thể đọc và hiển thị nội dung bên trong.

Bước 3: Gõ cấu trúc HTML cơ bản

  • Việc làm: Gõ đoạn code “khung sườn” của một trang web.

    HTML

     
    <!DOCTYPE html>
<html>
<head>
  <title>Bai thuc hanh 1 - TKB</title>
</head>
<body>
  </body>
</html>

  • Giải thích:

    • <!DOCTYPE html>: Khai báo đây là tài liệu HTML5.

    • <html>...</html>: Thẻ “gốc”, bao bọc toàn bộ nội dung trang web.

    • <head>...</head>: Chứa thông tin về trang web (như tiêu đề).

    • <title>...</title>: Đặt tên cho tab của trình duyệt.

    • <body>...</body>: Quan trọng nhất. Tất cả nội dung bạn nhìn thấy trên trang web (văn bản, hình ảnh, và bảng của chúng ta) đều phải được đặt bên trong thẻ <body>.

Bước 4: Khởi tạo Bảng và Thêm đường viền

  • Việc làm: Bên trong thẻ <body>, gõ cặp thẻ <table> và thêm thuộc tính border.

    HTML

     
    ...
<body>
  <table border="1">
  </table>
</body>
...

  • Giải thích:

    • <table>...</table>: Cặp thẻ này báo với trình duyệt: “Một cái bảng sẽ được tạo ở đây”.

    • border="1": Đây là một thuộc tính. Nếu bạn chỉ gõ <table>, bảng vẫn được tạo nhưng nó sẽ vô hình vì không có đường viền. Thêm border="1" (viền dày 1 pixel) là cách nhanh nhất để chúng ta có thể nhìn thấy cấu trúc bảng của mình.

Bước 5: Tạo Dòng đầu tiên (Row 1)

  • Việc làm: Bên trong cặp thẻ <table>, thêm cặp thẻ <tr> đầu tiên.

    HTML

     
    ...
<table border="1">
  <tr>
  </tr>
</table>
...

  • Giải thích: <tr> là viết tắt của “Table Row” (Dòng của Bảng). Mỗi khi bạn muốn tạo một dòng mới theo chiều ngang, bạn phải dùng một cặp thẻ <tr>...</tr>.

Bước 6: Tạo 3 Ô dữ liệu cho Dòng 1 (3 Cột)

  • Việc làm: Bên trong cặp thẻ <tr> bạn vừa tạo, thêm 3 cặp thẻ <td> và gõ nội dung vào.

    HTML

     
    ...
<table border="1">
  <tr>
    <td>Thứ 2</td>
    <td>Thứ 3</td>
    <td>Thứ 4</td>
  </tr>
</table>
...

  • Giải thích:

    • <td> là viết tắt của “Table Data” (Dữ liệu của Bảng). Đây chính là các ô chứa nội dung.

    • Quan hệ: Các thẻ <td> phải nằm bên trong thẻ <tr>. Điều này có nghĩa là: “Tạo 3 ô dữ liệu và 3 ô này thuộc về Dòng 1”.

    • Khi bạn thêm 3 ô <td> vào một <tr>, bảng của bạn sẽ tự động hiểu là nó có 3 cột.

Bước 7: Tạo Dòng thứ hai (Row 2) và 3 ô dữ liệu

  • Việc làm: Gõ một cặp thẻ <tr> mới ngay bên dưới thẻ </tr> cũ, và thêm 3 ô <td> vào bên trong nó.

    HTML

     
    ...
<table border="1">
  <tr>
    <td>Thứ 2</td>
    <td>Thứ 3</td>
    <td>Thứ 4</td>
  </tr>
  <tr>
    <td>Toán</td>
    <td>Văn</td>
    <td>Anh</td>
  </tr>
</table>
...

  • Giải thích: Khi trình duyệt đọc thẻ <tr> thứ hai, nó hiểu rằng phải ngắt xuống một dòng mới và bắt đầu vẽ các ô tiếp theo. Các ô “Toán”, “Văn”, “Anh” sẽ tự động xếp thẳng hàng bên dưới 3 ô “Thứ 2”, “Thứ 3”, “Thứ 4”.

Bước 8: Tạo Dòng thứ ba (Row 3) và 3 ô dữ liệu

  • Việc làm: Lặp lại tương tự, tạo thêm một khối <tr> và 3 <td> nữa.

    HTML

     
    ...
<table border="1">
  <tr>
    <td>Thứ 2</td>
    <td>Thứ 3</td>
    <td>Thứ 4</td>
  </tr>
  <tr>
    <td>Toán</td>
    <td>Văn</td>
    <td>Anh</td>
  </tr>
  <tr>
    <td>Lý</td>
    <td>Hóa</td>
    <td>Sinh</td>
  </tr>
</table>
...

  • Giải thích: Bạn đã hoàn thành cấu trúc bảng 3×3 (3 dòng và 3 cột).

Bước 9: Lưu file và Xem kết quả

  • Việc làm:

    1. Nhấn Ctrl + S để lưu lại tất cả thay đổi trong file BaiThucHanh_01.html.

    2. Tìm file này trong thư mục bạn đã lưu.

    3. Nháy đúp chuột vào file đó.

  • Giải thích: File sẽ tự động mở bằng trình duyệt web mặc định của bạn. Bạn sẽ thấy một bảng 3×3 đơn giản hiện ra trên màn hình.

Tự đánh giá bài thực hành 1

Bài tập thực hành 2: Nâng cấp Thời khóa biểu (10 phút)

(Video hướng dẫn )

Mục tiêu: Áp dụng thẻ tiêu đề <th> và các thuộc tính cellpadding, cellspacing để tùy chỉnh bảng. Sản phẩm: File BaiThucHanh_02.html.

Hướng dẫn và Giải thích Từng Bước

Bước 1: Chuẩn bị file

  • Việc làm:

    1. Mở file BaiThucHanh_01.html (bài thực hành trước) bằng trình soạn thảo code của bạn.

    2. Chọn “Save As…” (Lưu thành…) và lưu file này với tên mới là BaiThucHanh_02.html.

  • Giải thích: Chúng ta làm điều này để giữ lại file bài 1 làm bản gốc và bắt đầu chỉnh sửa trên một bản sao. Đây là cách làm việc rất phổ biến khi phát triển phần mềm.

Bước 2: Sử dụng thẻ <th> (Table Header) cho dòng tiêu đề

  • Việc làm: Tìm đến Dòng 1 của bảng (dòng chứa “Thứ 2”, “Thứ 3”, “Thứ 4”). Thay thế tất cả các thẻ <td> và </td> ở dòng này bằng <th> và </th>.

    Code CŨ (ở Dòng 1):

    HTML

     
    <tr>
  <td>Thứ 2</td>
  <td>Thứ 3</td>
  <td>Thứ 4</td>
</tr>

    Code MỚI (ở Dòng 1):

    HTML

     
    <tr>
  <th>Thứ 2</th>
  <th>Thứ 3</th>
  <th>Thứ 4</th>
</tr>

  • Giải thích:

    • <th> là viết tắt của “Table Header” (Tiêu đề của Bảng).

    • Về mặt ngữ nghĩa, nó báo cho trình duyệt biết đây là ô tiêu đề, không phải ô dữ liệu thông thường (<td>).

    • Về mặt hiển thị, trình duyệt sẽ tự động làm cho nội dung bên trong thẻ <th> được in đậm và căn giữa. Điều này làm cho dòng tiêu đề nổi bật lên.

Bước 3: Thêm cellpadding và cellspacing vào thẻ <table>

  • Việc làm: Tìm đến thẻ mở <table> ở đầu bảng và thêm 2 thuộc tính mới vào đó.

    Code CŨ:

    HTML

     
    <table border="1">

    Code MỚI:

    HTML

     
    <table border="1" cellpadding="10" cellspacing="5">

  • Giải thích:

    • cellpadding="10": “Padding” có nghĩa là “đệm”. Thuộc tính này tạo ra một khoảng đệm 10 pixel bên trong mỗi ô, giữa nội dung (chữ) và đường viền của ô đó. Điều này làm cho các ô nhìn “rộng rãi” và thoáng hơn.

       

    • cellspacing="5": “Spacing” có nghĩa là “khoảng cách”. Thuộc tính này tạo ra khoảng cách 5 pixel giữa các ô với nhau. Bạn sẽ thấy đường viền giữa các ô trở nên dày hơn (vì thực ra đó là khoảng trống).

Bước 4: Lưu và So sánh kết quả

  • Việc làm:

    1. Nhấn Ctrl + S để lưu file BaiThucHanh_02.html.

    2. Mở file này bằng trình duyệt.

    3. Hãy mở song song file BaiThucHanh_01.html và file BaiThucHanh_02.html để so sánh.

  • Giải thích (Kết quả bạn sẽ thấy):

    • Dòng tiêu đề (“Thứ 2”, “Thứ 3”, “Thứ 4”) bây giờ đã được in đậm và căn giữa.

    • Chữ bên trong mỗi ô (như “Toán”, “Văn”…) không còn dính sát vào đường viền nữa (do có cellpadding).

    • Khoảng cách giữa các ô đã rộng ra (do có cellspacing).

Qua bài thực hành này, bạn đã học được:

  1. <th>: Dùng cho ô tiêu đề để làm nổi bật và đúng ngữ nghĩa.

  2. cellpadding: Tăng khoảng trống bên trong ô.

  3. cellspacing: Tăng khoảng cách giữa các ô.

Tự đánh giá bài thực hành 2

Bài thực hành 3: Hoàn thiện Thời khóa biểu (Gộp ô) (10 phút)

(Video hướng dẫn )

Mục tiêu: Sử dụng thành thạo colspan và rowspan để gộp ô. Sản phẩm: Nâng cấp file BaiThucHanh_02.html (lưu thành BaiThucHanh_03.html).

Hướng dẫn và Giải thích Từng Bước

Bước 1: Chuẩn bị file

  • Việc làm:

    1. Mở file BaiThucHanh_02.html (bài thực hành trước) bằng trình soạn thảo code.

    2. Chọn “Save As…” (Lưu thành…) và lưu file này với tên mới là BaiThucHanh_03.html.

  • Giải thích: Chúng ta tạo file mới để giữ lại kết quả của Bài 2 và bắt đầu làm Bài 3.

Bước 2: Thêm Tiêu đề chính cho bảng (Sử dụng colspan)

Hiện tại bảng của chúng ta có 3 cột. Chúng ta muốn thêm một dòng tiêu đề chung “THỜI KHÓA BIỂU” nằm trên cùng và chiếm hết chiều rộng của cả 3 cột.

  • Việc làm:

    1. Tìm đến thẻ <table>.

    2. Ngay bên dưới thẻ <table ...>, thêm một cặp thẻ <tr>...</tr> mới (để tạo một dòng mới).

    3. Bên trong <tr> này, thêm một ô tiêu đề <th>.

    4. Trong thẻ <th> này, thêm thuộc tính colspan="3".

    Code CŨ (phần đầu của bảng):

    HTML

     
    <table border="1" cellpadding="10" cellspacing="5">
  <tr>
    <th>Thứ 2</th>
    <th>Thứ 3</th>
    <th>Thứ 4</th>
  </tr>
  ...

    Code MỚI (thêm dòng tiêu đề chung):

    HTML

     
    <table border="1" cellpadding="10" cellspacing="5">
  <tr>
    <th colspan="3">THỜI KHÓA BIỂU</th>
  </tr>

  <tr>
    <th>Thứ 2</th>
    <th>Thứ 3</th>
    <th>Thứ 4</th>
  </tr>
  ...

  • Giải thích:

    • Chúng ta tạo một dòng (<tr>) mới ở trên cùng.

    • Dòng này chỉ chứa một ô (<th>).

    • colspan="3" báo cho trình duyệt rằng: “Ô này sẽ chiếm chiều rộng của 3 cột”. Vì bảng của chúng ta có 3 cột, ô này sẽ tự động kéo dài ra để bao phủ hết.

       

  • Kiểm tra: Lưu file BaiThucHanh_03.html và mở trên trình duyệt. Bạn sẽ thấy một tiêu đề “THỜI KHÓA BIỂU” mới xuất hiện, nằm giữa và trải dài trên 3 cột của bảng.

Bước 3: Gộp ô cho môn học 2 tiết (Sử dụng rowspan)

Giả sử môn “Toán” (ở dòng 3) là môn học 2 tiết, nó cần chiếm cả ô của nó và ô ngay bên dưới nó (ô “Lý”).

  • Việc làm (Gồm 2 phần):

    1. Sửa ô “Toán”: Tìm đến ô <td>Toán</td> (nằm ở dòng thứ 3 của bảng – <tr> thứ 3). Thêm thuộc tính rowspan="2" vào thẻ <td> này.

    2. Xóa ô “Lý”: Tìm đến dòng ngay bên dưới (dòng thứ 4, chứa “Lý”, “Hóa”, “Sinh”). Xóa ô <td>Lý</td> đi.

    Code CŨ (dòng 3 và 4):

    HTML

     
      ...
  <tr>
    <td>Toán</td>
    <td>Văn</td>
    <td>Anh</td>
  </tr>
  <tr>
    <td>Lý</td>
    <td>Hóa</td>
    <td>Sinh</td>
  </tr>
...

    Code MỚI (áp dụng rowspan):

    HTML

     
      ...
  <tr>
    <td rowspan="2">Toán</td> <td>Văn</td>
    <td>Anh</td>
  </tr>
  <tr>
    <td>Hóa</td>
    <td>Sinh</td>
  </tr>
...

  • Giải thích (Rất quan trọng):

    • rowspan="2" báo cho trình duyệt: “Ô ‘Toán’ này sẽ chiếm chiều cao của 2 dòng” (dòng của nó và dòng ngay bên dưới).

    • Vì ô “Toán” đã lấn xuống và chiếm chỗ của ô “Lý”, chúng ta bắt buộc phải xóa thẻ <td>Lý</td> ở dòng bên dưới.

    • Nếu bạn không xóa ô “Lý”, nó sẽ bị đẩy sang bên phải, làm “Hóa” và “Sinh” bị lệch cột và vỡ cấu trúc bảng.

Bước 4: Lưu và Xem kết quả cuối cùng

  • Việc làm: Nhấn Ctrl + S để lưu file BaiThucHanh_03.html và F5 (tải lại) trình duyệt.

  • Kết quả: Bạn sẽ thấy một bảng “Thời khóa biểu” hoàn chỉnh, có tiêu đề chung, và ô “Toán” đã gộp 2 dòng thành công, thể hiện đúng một môn học 2 tiết.

Tự đánh giá bài thực hành 3