BÀI 3: BẢNG BIỂU (TABLE) VÀ BỐ CỤC KHỐI (BOX MODEL)

3.1. Tạo bảng dữ liệu (HTML Tables)

Bảng biểu dùng để hiển thị dữ liệu dạng lưới (danh sách học sinh, hóa đơn), không dùng để chia bố cục trang web.

3.1.1. Cấu trúc bảng cơ bản

• Cú pháp:

  HTML

  <table border="1">      <tr>                <th>Họ tên</th> <th>Điểm</th>
      </tr>
      <tr>
          <td>Nguyễn Văn A</td> <td>10</td>
      </tr>
  </table>
  

• Giải thích chức năng:

  • <table>: Khai báo khu vực bảng.

  • <tr> (Table Row): Tạo ra một dòng. Muốn bảng có bao nhiêu dòng thì dùng bấy nhiêu thẻ tr.

  • <th> (Table Header): Dùng cho dòng đầu tiên. Trình duyệt sẽ tự động in đậm và căn giữa chữ để người xem biết đây là tiêu đề cột.

  • <td> (Table Data): Chứa nội dung dữ liệu thực tế.

3.1.2. Kỹ thuật gộp ô (Merge Cells)

• Gộp cột (colspan): Làm cho một ô “dài ra” theo chiều ngang, chiếm chỗ của các ô bên cạnh.

  • Ví dụ: colspan="2" (Ô này chiếm 2 cột). Thường dùng cho tiêu đề lớn bao trùm nhiều cột con.

• Gộp dòng (rowspan): Làm cho một ô “cao lên” theo chiều dọc, chiếm chỗ của các dòng bên dưới.

  • Ví dụ: rowspan="2" (Ô này chiếm 2 dòng). Thường dùng cho cột số thứ tự hoặc các mục chung.

• Ví dụ thực tế (Thời khóa biểu):

  HTML

  <table border="1">
      <tr>
          <th colspan="2">Lịch Học</th>
      </tr>
      <tr>
          <td rowspan="2">Thứ 2</td>
          <td>Sáng: Toán</td>
      </tr>
      <tr>
          <td>Chiều: Lý</td>
      </tr>
  </table>
  

3.2. Thẻ khối và Thẻ nội dòng (Block vs Inline) Hiểu rõ hai loại thẻ này giúp kiểm soát vị trí hiển thị trên trang web.

3.2.1. Thẻ khối (Block-level elements): Thẻ <div>

• Khái niệm: Là các thẻ luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn (từ mép trái sang mép phải màn hình).

• Đại diện: <div>, <h1>–<h6>, <p>, <ul>.

• Chức năng của <div> (Division): Dùng để gom nhóm các phần tử HTML thành một khu vực (một khối) để dễ dàng đóng khung, tô màu nền hoặc di chuyển.

• Ví dụ:

  HTML

  <div style="background-color: blue; color: white;">
      <h2>Khu vực Menu</h2>
      <p>Đây là một khối riêng biệt.</p>
  </div>
  

3.2.2. Thẻ nội dòng (Inline elements): Thẻ <span>

• Khái niệm: Là các thẻ chỉ chiếm chiều rộng vừa đủ với nội dung của nó và không xuống dòng mới.

• Đại diện: <span>, <a>, <b>, <img>.

• Chức năng của <span>: Dùng để tác động vào một phần nhỏ văn bản nằm trong một dòng (ví dụ: tô màu một chữ, làm đậm một từ).

• Ví dụ:

  HTML

  <p>Hàng này đang <span style="color: red;">GIẢM GIÁ 50%</span> hôm nay.</p>
  

3.3. Mô hình hộp (CSS Box Model)

Đây là kiến thức quan trọng nhất để căn chỉnh giao diện (Layout) thay thế cho công nghệ Frame cũ. Mọi thẻ HTML (div, p, img…) đều được coi là một cái hộp chữ nhật.

3.3.1. Các thành phần của Box Model Một cái hộp gồm 4 lớp (từ trong ra ngoài):

1. Content (Nội dung): Là văn bản hoặc hình ảnh bên trong cùng.

2. Padding (Vùng đệm): Khoảng cách từ Nội dung đến Đường viền. Giúp nội dung “dễ thở”, không bị dính sát vào viền.

3. Border (Đường viền): Đường bao quanh hộp.

4. Margin (Lề ngoài): Khoảng cách từ Đường viền của hộp này đến các hộp khác xung quanh (để đẩy chúng ra xa).

3.3.2. Minh họa bằng Code

• Ví dụ: Tạo một nút bấm (Button) đẹp mắt.

  HTML

  <style>
      .nut-bam {
          background-color: orange; /* Màu nền hộp */
          color: white;             /* Màu chữ (Content) */
          padding: 10px 20px;       /* Đệm: Trên dưới 10px, Trái phải 20px */
          border: 2px solid red;    /* Viền: Dày 2px, nét liền, màu đỏ */
          margin: 50px;             /* Cách xa các nút khác 50px */
      }
  </style>
  <button class="nut-bam">MUA NGAY</button>
  

• Giải thích: Nếu không có padding, chữ “MUA NGAY” sẽ dính chặt vào viền đỏ rất xấu. Nếu không có margin, các nút sẽ dính liền vào nhau.