Gộp ô trong bảng HTML

8.1 Gộp ô theo chiều ngang

Gộp các ô trong bảng cho phép bạn tạo ra cách trình bày dữ liệu linh hoạt và dễ hiểu hơn. Điều này đặc biệt hữu ích khi bạn cần gộp nhiều ô lại để tạo tiêu đề hoặc dữ liệu tổng hợp. Trong HTML, để gộp các ô, bạn sử dụng các thuộc tính colspan và rowspan.

Thuộc tính colspan

Thuộc tính colspan gộp các ô theo chiều ngang. Nó xác định số lượng cột mà một ô cần chiếm. Ví dụ, nếu bạn có một ô với colspan="2", thì nó sẽ chiếm không gian của hai ô bình thường trong hàng.

Ví dụ sử dụng:

Hãy tưởng tượng rằng bạn có một bảng có ba cột, và bạn muốn ô đầu tiên trong hàng chiếm hai cột. Bạn sử dụng colspan="2", để gộp hai ô này lại. Điều này rất hữu ích khi tạo tiêu đề phủ nhiều cột, hoặc để hợp nhất dữ liệu thuộc nhiều danh mục.

    
      <table border="1">
        <tr>
          <th>Tên</th>
          <th>Tuổi</th>
          <th>Thành phố</th>
        </tr>
        <tr>
          <td>Alice</td>
          <td>25</td>
          <td>London</td>
        </tr>
        <tr>
          <td colspan="2">Tổng cộng</td>
          <td>2 bản ghi</td>
        </tr>
      </table>
    
  

8.2 Gộp ô theo chiều dọc

Thuộc tính rowspan gộp các ô theo chiều dọc. Nó chỉ định số lượng hàng mà một ô cần chiếm. Ví dụ, nếu bạn có một ô với rowspan="2", thì nó sẽ chiếm không gian của hai ô bình thường trong cột.

Ví dụ sử dụng:

Hãy tưởng tượng rằng bạn có một bảng với ba hàng, và bạn muốn ô đầu tiên trong cột chiếm hai hàng. Bạn sử dụng rowspan="2" để gộp hai ô này lại. Điều này rất hữu ích khi tạo bảng mà một danh mục dữ liệu liên quan đến nhiều hàng, như tiêu đề hợp nhất hoặc dữ liệu tổng hợp.

    
      <table border="1">
        <tr>
          <th>Tên</th>
          <th>Dự án</th>
          <th>Thành phố</th>
        </tr>
        <tr>
          <td rowspan="2">Alice</td>
          <td>Dự án A</td>
          <td>London</td>
        </tr>
        <tr>

          <td>Dự án B</td>
          <td>Batumi</td>
        </tr>
      </table>
    
  

8.3 Giải thích hoạt động

Cách hoạt động của colspan và rowspan

Gộp ngang (colspan): tưởng tượng rằng bạn đang tạo một bảng lịch trình, trong đó một khóa học được tổ chức tại nhiều địa điểm. Bạn có thể gộp các ô bằng colspan để cho biết một khóa học chiếm hai khung giờ.

Gộp dọc (rowspan): tưởng tượng rằng bạn đang tạo một bảng kết quả cuộc thi, trong đó một người tham gia tham gia nhiều vòng. Bạn có thể gộp các ô bằng rowspan để cho biết một người tham gia chiếm hai vòng.

Ví dụ thực tế

Tạo tiêu đề phủ nhiều cột: nếu bạn có một bảng với các danh mục dữ liệu khác nhau, và bạn muốn tạo tiêu đề phủ nhiều cột, hãy sử dụng colspan. Ví dụ, tiêu đề "Thông tin nhân viên" có thể phủ các cột "Tên", "Tuổi" và "Phòng ban".

Gộp dữ liệu theo chiều dọc: nếu bạn có dữ liệu cần hợp nhất theo chiều dọc, ví dụ, nhiều bản ghi cho cùng một người hoặc đối tượng, hãy sử dụng rowspan. Ví dụ, nếu bạn có thông tin về một dự án, và một dự án chiếm nhiều hàng (ví dụ, các giai đoạn của dự án), hãy gộp các hàng bằng rowspan.

8.4 Ví dụ

Hãy tưởng tượng bạn có một bảng hiển thị nhân viên và sự tham gia của họ trong các dự án khác nhau:

• Nhân viên: Ivan, Maria, Peter.
• Dự án: Dự án A, Dự án B.

Bạn muốn gộp các ô để hiển thị rằng Ivan và Maria làm việc trong hai dự án cùng một lúc:

    
<table border="1">
    <tr>
        <th>Tên</th>
        <th>Dự án A</th>
        <th>Dự án B</th>
        <th>Thành phố</th>
    </tr>
    <tr>
        <td>Ivan</td>
        <td colspan="2">Có</td>
        <td>London</td>
    </tr>
    <tr>
        <td>Maria</td>
        <td colspan="2">Có</td>
        <td>London</td>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Có</td>
        <th>Không</th>
        <td>Rome</td>
    </tr>
</table>
    
  

Hoặc, nếu bạn muốn hiển thị rằng Ivan làm việc trên hai dự án:

    
      <table border="1">
        <tr>
          <th>Tên</th>
          <th>Dự án</th>
          <th>Thành phố</th>
        </tr>
        <tr>
          <td rowspan="2">Ivan</td>
          <td>Dự án A</td>
          <td>London</td>
        </tr>
        <tr>
          <!-- trống -->
          <td>Dự án B</td>
          <td>London</td>
        </tr>
        <tr>
          <td>Sergey</td>
          <td>Dự án C</td>
          <td>Rome</td>
        </tr>
      </table>
    
  

Mình đã cố tình chèn một chú thích vào vị trí ô bị "nuốt" bởi ô liền kề mở rộng. Điều này giúp dễ hiểu hơn về vị trí sẽ hiển thị các phần còn lại.