Tạo bảng với HTML

Để hiển thị dữ liệu dạng hàng và cột trên trang web, ta sử dụng các thẻ HTML chuyên biệt cho bảng. Cấu trúc cơ bản của một bảng như sau:

<table>
  <tr>
    <td>Nội dung ô</td>
    ...
  </tr>
  ...
</table>

• table: Thẻ chính khai báo một bảng.
• tr: Tạo một hàng trong bảng (table row).
• td: Đại diện cho một ô dữ liệu (table data).
• th: Dùng để tạo ô tiêu đề, nội dung sẽ tự động in đậm và căn giữa.

Thuộc tính cũ của bảng (khuyến cáo không dùng)

Các thuộc tính dưới đây từng được dùng trong HTML cũ nhưng hiện đã lỗi thời. Nên thay thế bằng CSS:

• align: Căn chỉnh trái/phải/giữa —> Dùng text-align hoặc margin trong CSS.
• bgcolor: Màu nền bảng —> Dùng background-color.
• border: Độ rộng viền —> Dùng border: 1px solid #000; trong CSS.
• cellpadding: Khoảng cách nội dung và viền ô —> Dùng padding.
• cellspacing: Khoảng cách giữa các ô —> Kiểm soát qua border-spacing hoặc border-collapse.
• width: Chiều rộng bảng —> Dùng thuộc tính width trong CSS.

Sử dụng tiêu đề bảng (th) và chú thích (caption)

Thẻ <th> giúp xác định ô là tiêu đề, thường nằm ở hàng đầu tiên:

<table border="1">
  <tr>
    <th>Họ tên</th>
    <th>Giới tính</th>
    <th>Tuổi</th>
  </tr>
  <tr>
    <td>Nguyễn Văn A</td>
    <td>Nam</td>
    <td>25</td>
  </tr>
</table>

Thẻ <caption> đặt tiêu đề cho toàn bộ bảng và phải nằm ngay sau <table>:

<table>
  <caption>Danh sách nhân viên</caption>
  <tr><th>STT</th><th>Tên</th></tr>
  <tr><td>1</td><td>Lan</td></tr>
</table>

Gộp ô trong bảng

Để gộp nhiều ô thành một, dùng hai thuộc tính:

• colspan: Gộp theo chiều ngang (nhiều cột thành một).
• rowspan: Gộp theo chiều dọc (nhiều hàng thành một).

Nguyên tắc: Khi gộp n ô, cần xóa đi n-1 ô trùng lặp.

<table border="1" width="400">
  <tr>
    <td>A</td>
    <td colspan="2">Gộp hai cột</td>
  </tr>
  <tr>
    <td rowspan="2">Gộp hai hàng</td>
    <td>X</td>
    <td>Y</td>
  </tr>
  <tr>
    <td>M</td>
    <td>N</td>
  </tr>
</table>

Viền liền mạch với CSS

Để các đường viền của bảng sát nhau như một đường duy nhất, dùng CSS:

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

Di chuyển vị trí tiêu đề bảng

Mặc định caption nằm trên bảng. Có thể đưa xuống dưới bằng CSS:

caption {
  caption-side: bottom;
  font-style: italic;
}

Biểu mẫu (Form) trong HTML

Biểu mẫu dùng để thu thập thông tin người dùng và gửi đến máy chủ. Một form hoàn chỉnh gồm ba phần:

1. Phần tử điều khiển: Các trường nhập liệu như input, select, textarea.
2. Thông tin hướng dẫn: Văn bản mô tả, nhãn (label).
3. Vùng biểu mẫu (form): Thẻ chứa toàn bộ các phần tử.

Thẻ input – Thành phần chính của form

Thẻ <input /> là loại đơn giản, không có thẻ đóng. Dạng của nó phụ thuộc vào thuộc tính type.

Thuộc tính	Giá trị	Mô tả
type	text, password, email, ...	Xác định kiểu nhập liệu
name	tên-tùy-chọn	Tên trường khi gửi dữ liệu
value	giá-trị-mặc-định	Nội dung ban đầu
placeholder	Chuỗi văn bản	Hướng dẫn nhập liệu mờ
required	required	Bắt buộc phải điền
readonly	readonly	Chỉ đọc, không chỉnh sửa
maxlength	Số nguyên	Giới hạn ký tự tối đa

Các giá trị phổ biến của type

• text: Ô nhập văn bản thường.
• password: Ẩn ký tự khi nhập.
• email: Kiểm tra định dạng email (HTML5).
• number: Chỉ cho phép số.
• date: Chọn ngày tháng.
• checkbox: Chọn nhiều tùy chọn.
• radio: Chọn một trong nhiều tùy chọn.
• file: Tải lên tệp tin (dùng multiple để chọn nhiều).
• submit: Nút gửi dữ liệu.
• reset: Đặt lại toàn bộ form.
• hidden: Trường ẩn, không hiển thị nhưng vẫn gửi dữ liệu.

Thẻ label – Kết nối nhãn với điều khiển

Dùng để liên kết nhãn với một trường nhập liệu. Khi nhấn vào nhãn, trường tương ứng sẽ được focus.

<label for="username">Tên đăng nhập:</label>
<input type="text" id="username" name="username" />

Vùng văn bản dài – textarea

Khi cần nhập nhiều dòng, dùng <textarea>:

<textarea name="feedback" rows="5" cols="40" placeholder="Nhập phản hồi...">
</textarea>

• rows: Số dòng hiển thị.
• cols: Số ký tự mỗi dòng.

Menu thả xuống – select và option

Dùng để tạo danh sách lựa chọn:

<select name="city">
  <option value="hn">Hà Nội</option>
  <option value="hcm" selected>TP.HCM</option>
  <option value="dn">Đà Nẵng</option>
</select>

Thêm thuộc tính selected để chọn mục mặc định.

Vùng biểu mẫu – thẻ form

Thẻ <form> bao bọc toàn bộ các phần tử cần gửi:

<form action="/xu-ly.php" method="POST" name="frmContact">
  <!-- Các trường input, textarea... -->
  <input type="submit" value="Gửi đi" />
</form>

• action: Đường dẫn xử lý dữ liệu.
• method: Phương thức gửi — GET (hiển thị trên URL) hoặc POST (ẩn dữ liệu).
• name: Tên biểu mẫu, hữu ích khi có nhiều form trên cùng trang.