Bài 9. Tạo danh sách, bảng – Tóm tắt Tin học 12

1. Danh sách trong HTML

Khi muốn nhóm nhiều thông tin có liên quan vào từng mục riêng biệt, ta dùng danh sách. Trong HTML có hai kiểu danh sách thường gặp: danh sách không thứ tự và danh sách có thứ tự. Điểm chung là mỗi mục trong danh sách đều được khai báo bằng thẻ <li>.

1.1 Danh sách không thứ tự

Định nghĩa

Danh sách không thứ tự (unordered list) được tạo bởi cặp thẻ <ul> ... </ul>. Bên trong là các thẻ <li> ... </li> chỉ từng mục. Trình duyệt thường hiển thị các mục với kí hiệu đầu dòng, thường là hình tròn đặc.

Các bước tạo danh sách không thứ tự

1.
Mở thẻ <ul>.
2.
Với mỗi mục, viết <li>Nội dung mục</li>.
3.
Đóng thẻ </ul>.

Ví dụ đoạn mã:

<ul>
  <li>Soạn thảo văn bản</li>
  <li>Tính toán bảng số</li>
  <li>Thiết kế trình chiếu</li>
</ul>

1.2 Danh sách có thứ tự

Định nghĩa

Danh sách có thứ tự (ordered list) được tạo bởi cặp thẻ <ol> ... </ol>. Bên trong cũng là các thẻ <li> ... </li>. Khác với <ul>, các mục trong <ol> được trình duyệt đánh số thứ tự tự động.

Hai thuộc tính hay dùng với <ol>:

type: quy định kiểu đánh số. Các giá trị thường gặp: "1" (dạng $1;2;3$ ), "A" (chữ in $A;B;C$ ), "a" (chữ thường $a;b;c$ ), "I" (số La Mã in $I;II;III$ ), "i" (số La Mã thường $i;ii;iii$ ).
start: quy định vị trí bắt đầu. Ví dụ start="3" thì mục đầu tiên sẽ mang số hiệu $3$ hoặc chữ thứ $3$ tùy theo type.

Nếu không ghi type, trình duyệt mặc định dùng kiểu số "1".

Ví dụ đoạn mã:

<ol type="A" start="2">
  <li>Mở máy</li>
  <li>Đăng nhập</li>
  <li>Lưu tài liệu</li>
</ol>

Lồng danh sách

Có thể đặt một danh sách con nằm bên trong thẻ <li> của danh sách mẹ. Khi viết cần đóng đầy đủ thẻ của danh sách con trước khi đóng tiếp các thẻ <li> còn lại của danh sách mẹ.

2. Bảng trong HTML

Khi cần trình bày thông tin theo hàng và cột, ví dụ bảng điểm, thời khoá biểu, bảng giá, ta dùng bảng.

2.1 Các thẻ cơ bản của bảng

Định nghĩa

<table> ... </table>: khai báo toàn bộ bảng.
<tr> ... </tr>: khai báo một hàng (table row).
<td> ... </td>: khai báo một ô dữ liệu (table data).
<th> ... </th>: khai báo một ô tiêu đề (table header). Nội dung trong <th> thường được in đậm và căn giữa.
<caption> ... </caption>: tạo tiêu đề cho bảng, phải đặt ngay sau <table> và trước các thẻ <tr>.
Mặc định bảng không có đường kẻ khung. Để hiện khung, dùng CSS, ví dụ đặt trong <head>: <style> table, th, td {border: 1px solid black;} </style>. Thuộc tính border của thẻ <table> là cách cũ, đã lỗi thời trong HTML5.

Các bước dựng một bảng đơn giản

1.
Mở <table>.
2.
Nếu cần tiêu đề, thêm thẻ <caption>...</caption> ngay sau đó.
3.
Với mỗi hàng, mở <tr>.
4.
Trong hàng, thêm các ô: dùng <th> cho ô tiêu đề, dùng <td> cho ô nội dung.
5.
Đóng </tr>; lặp lại cho các hàng còn lại.
6.
Đóng </table>.

2.2 Gộp ô trong bảng

Định nghĩa

colspan: gộp nhiều cột liên tiếp trên cùng một hàng. Giá trị là số cột cần gộp.
rowspan: gộp nhiều hàng liên tiếp trên cùng một cột. Giá trị là số hàng cần gộp.

Lưu ý

Khi dùng colspan hoặc rowspan, số ô khai báo ở những hàng liền kề phải được giảm tương ứng để tổng độ rộng các ô trong hàng khớp với tổng số cột của bảng, nếu không bảng sẽ bị lệch hoặc vỡ khung.

3. Ví dụ minh hoạ

Ví dụ 1

Viết đoạn mã tạo danh sách không thứ tự gồm ba môn học: Ngữ văn, Toán, Anh.

Lời giải

<ul>
  <li>Ngữ văn</li>
  <li>Toán</li>
  <li>Anh</li>
</ul>

Ví dụ 2

Tạo danh sách có thứ tự các bước lưu tài liệu, đánh số dạng số học, nhưng bắt đầu từ số $4$ .

Lời giải · 2 bước

<ol type="1" start="4">
  <li>Kiểm tra nội dung</li>
  <li>Chọn lệnh lưu</li>
  <li>Đặt tên tệp</li>
</ol>

Bước 2

Trình duyệt sẽ hiển thị: 4. Kiểm tra nội dung; 5. Chọn lệnh lưu; 6. Đặt tên tệp.

Ví dụ 3

Tạo bảng điểm gồm tiêu đề "Bảng điểm lớp 12A", một hàng tiêu đề cột là Họ tên, Toán, Lý; hai hàng dữ liệu cho học sinh Nam và Hoa.

Lời giải

<table>
  <caption>Bảng điểm lớp 12A</caption>
  <tr>
    <th>Họ tên</th>
    <th>Toán</th>
    <th>Lý</th>
  </tr>
  <tr>
    <td>Nam</td>
    <td>9</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Hoa</td>
    <td>7</td>
    <td>10</td>
  </tr>
</table>

Ví dụ 4

Tạo bảng gồm ô "Ngày" gộp hai hàng (rowspan) và ô "Buổi" gộp ba cột (colspan) thành Sáng, Chiều, Tối.

Lời giải · 2 bước

<table>
  <tr>
    <th rowspan="2">Ngày</th>
    <th colspan="3">Buổi</th>
  </tr>
  <tr>
    <th>Sáng</th>
    <th>Chiều</th>
    <th>Tối</th>
  </tr>
  <tr>
    <td>Thứ hai</td>
    <td>Toán</td>
    <td>Lý</td>
    <td>Nghỉ</td>
  </tr>
</table>

Bước 2

Giải thích: Hàng đầu gồm hai ô thôi: "Ngày" chiếm hai hàng nên hàng thứ hai chỉ cần khai báo ba ô "Sáng", "Chiều", "Tối"; ô "Buổi" chiếm ba cột nên hàng đầu không cần khai báo thêm ba ô con.

4. Lưu ý và lỗi thường gặp

Những lỗi thường gặp

Quên đóng thẻ </li>, </tr>, </td> khiến trình duyệt hiểu sai cấu trúc, bảng hoặc danh sách bị lỗi.
Dùng colspan hoặc rowspan sai khiến số cột trong các hàng không đồng nhất, gây vỡ khung bảng.
Đặt <caption> không đúng vị trí: phải nằm ngay sau <table>, không được nằm sau một <tr>.
Khi bảng có rowspan ở hàng trên, các hàng bên dưới không được khai báo lại ô đã bị gộp, nếu không sẽ thừa ô.
Với <ol>, start là số thứ tự tương ứng với kiểu type; ví dụ type="A" và start="2" sẽ bắt đầu từ chữ B.

Bảng tra cú pháp nhanh

Thẻ	Công dụng	Ghi chú
`<ul>` `<li>`	Danh sách không thứ tự	Mỗi mục là một `<li>`
`<ol>` `<li>`	Danh sách có thứ tự	Có thể thêm `type`, `start`
`<table>` `<tr>`	Tạo bảng và hàng	Khung bảng tạo bằng CSS
`<th>` `<td>`	Ô tiêu đề và ô dữ liệu	`<th>` thường in đậm, căn giữa
`<caption>`	Tiêu đề bảng	Đặt ngay sau `<table>`
`colspan`	Gộp cột	Giá trị là số cột cần gộp
`rowspan`	Gộp hàng	Giá trị là số hàng cần gộp

Câu hỏi 1 (Câu hỏi ôn tập)

1.
Phân biệt danh sách không thứ tự và danh sách có thứ tự; cho biết khi nào nên dùng mỗi loại.
2.
Một bảng gồm 3 hàng và 2 cột, không có gộp ô, thì cần bao nhiêu thẻ <tr>? Mỗi hàng cần bao nhiêu ô <td>?
3.
Trong một bảng có hàng cuối gồm một ô chứa chữ "Tổng" trải rộng hết hai cột, ô đó phải khai báo thuộc tính gì và giá trị bao nhiêu?

Gợi ý trả lời

1.
Dùng <ul> khi thứ tự các mục không quan trọng; dùng <ol> khi cần đánh số thứ tự hoặc sắp xếp các bước theo trình tự.
2.
Cần 3 thẻ <tr>. Mỗi hàng cần 2 ô <td> (hoặc <th> nếu đó là hàng tiêu đề) để tương ứng 2 cột.
3.
Ô "Tổng" cần thuộc tính colspan="2".

Nhớ nhanh

1. Danh sách trong HTML

1.1 Danh sách không thứ tự

1.2 Danh sách có thứ tự

2. Bảng trong HTML

2.1 Các thẻ cơ bản của bảng

2.2 Gộp ô trong bảng

3. Ví dụ minh hoạ

4. Lưu ý và lỗi thường gặp

Bảng tra cú pháp nhanh