Thuộc tính Rowspan và Colspan: Hướng dẫn gộp ô trong HTML

Bạn đang gặp khó khăn khi muốn trình bày dữ liệu phức tạp trong bảng HTML? Việc gộp các ô lại với nhau chính là giải pháp bạn cần. Bài viết này sẽ cùng bạn tìm hiểu sâu về hai công cụ mạnh mẽ là thuộc tính rowspan và colspan. Da I Kin sẽ hướng dẫn bạn từ những khái niệm cơ bản nhất đến cách kết hợp chúng để tạo ra các bảng biểu chuyên nghiệp, giúp bạn làm chủ kỹ thuật gộp ô trong HTML một cách dễ dàng.

Rowspan và Colspan là gì?

Khi bạn tạo bảng trong HTML bằng thẻ <table>, mặc định nó sẽ có dạng một lưới ô vuông vức. Mỗi ô chiếm đúng một hàng và một cột. Tuy nhiên, trong thực tế, dữ liệu không phải lúc nào cũng đơn giản như vậy. Đôi khi, bạn cần một ô tiêu đề bao quát nhiều cột, hoặc một ô danh mục áp dụng cho nhiều hàng.

Đây chính là lúc thuộc tính rowspan và colspan phát huy tác dụng. Chúng là hai thuộc tính đặc biệt của các thẻ <td> (ô dữ liệu) và <th> (ô tiêu đề) trong HTML. Hiểu đơn giản, chúng cho phép một ô có thể mở rộng kích thước để chiếm không gian của các ô khác.

• Colspan giúp một ô mở rộng theo chiều ngang, gộp nhiều cột lại thành một.
• Rowspan giúp một ô mở rộng theo chiều dọc, gộp nhiều hàng lại thành một.

Sử dụng thành thạo hai thuộc tính này sẽ giúp bạn tạo ra các bảng thông tin có cấu trúc rõ ràng, logic và trực quan hơn rất nhiều. Hãy coi chúng như công cụ giúp bạn sắp xếp dữ liệu một cách thông minh.

Thuộc tính Colspace

Colspan trong HTML là gì và hoạt động ra sao?

Colspan là viết tắt của Column Span (mở rộng cột). Thuộc tính này cho phép một ô trong bảng có thể trải dài ra, chiếm lấy không gian của một hoặc nhiều cột liền kề bên phải nó. Đây là cách gộp cột trong table HTML phổ biến và hiệu quả nhất.

Khi bạn đặt colspan="2" cho một ô, nó sẽ có chiều rộng bằng tổng chiều rộng của chính nó và ô ngay bên phải. Điều quan trọng cần nhớ là: bạn phải xóa thẻ <td> hoặc <th> của ô đã bị chiếm dụng đi trong mã HTML. Nếu không, bảng của bạn sẽ bị vỡ layout vì có quá nhiều ô trong một hàng.

Cú pháp sử dụng thuộc tính colspan

Cú pháp để sử dụng colspan trong HTML rất đơn giản. Bạn chỉ cần thêm thuộc tính này vào bên trong thẻ <td> hoặc <th> mà bạn muốn gộp.

<td colspan="số_cột_bạn_muốn_gộp">Nội dung ô</td>

Trong đó, sốcộtbạnmuốngộp là một số nguyên dương, đại diện cho tổng số cột mà ô đó sẽ chiếm dụng (bao gồm cả chính nó).

Ví dụ minh họa chi tiết về gộp cột với colspan

Hãy xem một ví dụ về bảng thông tin liên lạc. Chúng ta muốn có một tiêu đề chung là Thông tin liên hệ cho cả hai cột Điện thoại và Email.

Code HTML:

<table border="1" style="width:100%; border-collapse: collapse;">
  <tr>
    <th colspan="2">Thông tin liên hệ</th> <!-- Ô này gộp 2 cột -->
  </tr>
  <tr>
    <td>Điện thoại</td>
    <td>0987.654.321</td>
  </tr>
  <tr>
    <td>Email</td>
    <td>[email protected]</td>
  </tr>
</table>

Kết quả: Trong ví dụ trên, ô tiêu đề Thông tin liên hệ đã được gộp từ hai cột. Vì vậy, ở hàng đầu tiên (<tr>), chúng ta chỉ cần một thẻ <th> duy nhất với thuộc tính colspan="2". Các hàng tiếp theo vẫn có hai ô <td> như bình thường. Cách này rất gọn gàng phải không nào?

Thuộc tính Rowspan

Rowspan được sử dụng để làm gì?

Ngược lại với colspan, rowspan (Row Span – mở rộng hàng) được dùng để gộp hàng trong table HTML. Thuộc tính này cho phép một ô có thể kéo dài xuống dưới, chiếm không gian của các ô ở các hàng tiếp theo trong cùng một cột.

Kỹ thuật này cực kỳ hữu ích khi bạn có một mục dữ liệu áp dụng cho nhiều hàng khác nhau. Ví dụ, trong một thời khóa biểu, một môn học có thể kéo dài trong hai tiết liên tiếp. Thay vì lặp lại tên môn học ở cả hai hàng, bạn có thể dùng rowspan trong HTML để gộp chúng lại.

Cú pháp sử dụng thuộc tính rowspan

Cú pháp của rowspan cũng tương tự như colspan. Bạn thêm nó vào thẻ <td> hoặc <th>.

<td rowspan="số_hàng_bạn_muốn_gộp">Nội dung ô</td>

Lưu ý quan trọng khi dùng rowspan: bạn phải xóa thẻ <td> hoặc <th> tương ứng ở các hàng tiếp theo đã bị ô gộp chiếm chỗ. Đây là điểm khác biệt chính so với colspan.

Ví dụ minh họa chi tiết về gộp hàng với rowspan

Cùng xem một ví dụ về bảng điện thoại. Một người có thể có hai số điện thoại khác nhau (di động và nhà riêng).

Code HTML:

<table border="1" style="width:100%; border-collapse: collapse;">
  <tr>
    <th>Tên</th>
    <th>Loại điện thoại</th>
    <th>Số điện thoại</th>
  </tr>
  <tr>
    <td rowspan="2">Nguyễn Văn A</td> <!-- Ô này gộp 2 hàng -->
    <td>Di động</td>
    <td>0901.112.223</td>
  </tr>
  <tr>
    <!-- Ô tên đã bị gộp nên hàng này chỉ cần 2 ô -->
    <td>Nhà riêng</td>
    <td>028.345.6789</td>
  </tr>
</table>

Kết quả: Ô Nguyễn Văn A đã được gộp từ hai hàng. Thẻ <td rowspan="2"> nằm ở hàng thứ hai. Vì vậy, ở hàng thứ ba, chúng ta không cần khai báo ô đầu tiên nữa mà chỉ cần khai báo hai ô còn lại. Cách này giúp bảng của bạn trông khoa học hơn hẳn.

So sánh Rowspan và Colspan

Đến đây, chắc hẳn bạn đã hiểu rõ hơn về cách dùng rowspan và colspan. Để giúp bạn củng cố kiến thức và không bao giờ nhầm lẫn, Da I Kin đã tổng hợp một bảng so sánh nhanh.

Việc phân biệt colspan và rowspan thực ra rất đơn giản nếu bạn nhớ quy tắc sau:

• Colspan = Column Span = Gộp Cột
  • Hướng gộp: Theo chiều ngang (từ trái sang phải).
  • Tác dụng: Mở rộng chiều rộng của một ô.
  • Khi nào dùng: Khi bạn có một tiêu đề hoặc một dữ liệu chung cho nhiều cột. Ví dụ: Tiêu đề “Họ và Tên” cho hai cột “Họ” và “Tên”.
• Rowspan = Row Span = Gộp Hàng
  • Hướng gộp: Theo chiều dọc (từ trên xuống dưới).
  • Tác dụng: Mở rộng chiều cao của một ô.
  • Khi nào dùng: Khi bạn có một danh mục hoặc một dữ liệu chung cho nhiều hàng. Ví dụ: Tên một người dùng cho hai hàng “Số điện thoại” và “Email”.

Kết hợp Rowspan và Colspan trong một bảng phức tạp

Lý thuyết sẽ dễ hiểu hơn khi đi kèm thực hành. Bây giờ, chúng ta sẽ cùng nhau tạo một bảng phức tạp hơn, kết hợp cả hai thuộc tính này. Đây là một ví dụ về rowspan và colspan trong thực tế.

Phân tích yêu cầu và cấu trúc bảng

Yêu cầu: Tạo một bảng lịch học đơn giản. Bảng có các cột Thứ, Buổi và Môn học. Trong đó:

1. Tiêu đề Lịch học tuần sẽ chiếm toàn bộ chiều ngang của bảng (3 cột).
2. Ngày Thứ Hai sẽ chiếm 2 hàng (áp dụng cho cả buổi Sáng và Chiều).

Phân tích:

• Để đáp ứng yêu cầu 1, chúng ta sẽ dùng colspan="3" cho ô tiêu đề Lịch học tuần.
• Để đáp ứng yêu cầu 2, chúng ta sẽ dùng rowspan="2" cho ô Thứ Hai.

Code hoàn chỉnh và giải thích kết quả

Dưới đây là đoạn mã HTML hoàn chỉnh cho yêu cầu trên.

<table border="1" style="width:100%; border-collapse: collapse; text-align: center;">
  <thead>
    <tr>
      <th colspan="3">LỊCH HỌC TUẦN</th> <!-- Dùng colspan để gộp 3 cột -->
    </tr>
    <tr>
      <th>Thứ</th>
      <th>Buổi</th>
      <th>Môn học</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Thứ Hai</td> <!-- Dùng rowspan để gộp 2 hàng -->
      <td>Sáng</td>
      <td>Lập trình HTML</td>
    </tr>
    <tr>
      <!-- Ô 'Thứ' đã bị gộp, hàng này chỉ cần 2 ô -->
      <td>Chiều</td>
      <td>Lập trình CSS</td>
    </tr>
    <tr>
      <td>Thứ Ba</td>
      <td>Sáng</td>
      <td>JavaScript cơ bản</td>
    </tr>
  </tbody>
</table>

Kết quả: Bạn sẽ nhận được một bảng biểu rất chuyên nghiệp. Tiêu đề LỊCH HỌC TUẦN nằm chính giữa và trải dài hết bảng. Ô Thứ Hai chiếm trọn hai hàng của buổi Sáng và Chiều. Việc kết hợp hai thuộc tính này cho phép bạn tạo ra những cấu trúc bảng linh hoạt và phức tạp nhất.

Những lưu ý quan trọng khi gộp ô trong HTML

Để việc gộp ô trong HTML luôn hiệu quả và không gây ra lỗi hiển thị, bạn hãy ghi nhớ một vài lưu ý quan trọng sau:

• Đếm chính xác: Luôn tính toán cẩn thận số lượng ô cần xóa. Nếu bạn dùng colspan="3", bạn phải xóa 2 thẻ <td>/<th> liền kề trong cùng hàng. Nếu bạn dùng rowspan="2", bạn phải xóa 1 thẻ <td>/<th> ở hàng ngay bên dưới.
• Không lạm dụng: Chỉ gộp ô khi thực sự cần thiết để cấu trúc dữ liệu rõ ràng hơn. Một bảng có quá nhiều ô gộp phức tạp có thể trở nên khó đọc và khó bảo trì.
• Ưu tiên tính προσβασιμότητα (accessibility): Các trình đọc màn hình cho người khiếm thị có thể gặp khó khăn khi phân tích các bảng quá phức tạp. Hãy giữ cấu trúc bảng càng đơn giản và logic càng tốt.
• Kiểm tra trên di động: Hãy chắc chắn rằng bảng của bạn hiển thị tốt trên các kích thước màn hình khác nhau. Đôi khi, các bảng phức tạp có thể bị vỡ trên màn hình nhỏ.

Lời kết

Qua bài viết này, Da I Kin hy vọng bạn đã nắm vững cách sử dụng thuộc tính rowspan và colspan để tạo ra những bảng biểu HTML đẹp mắt và chuyên nghiệp. Việc trình bày dữ liệu một cách khoa học không chỉ giúp người dùng dễ theo dõi mà còn thể hiện sự tinh tế trong kỹ năng lập trình của bạn.

Bạn đã thử kết hợp cả hai thuộc tính này trong dự án của mình chưa? Hãy chia sẻ kết quả hoặc bất kỳ thắc mắc nào ở phần bình luận bên dưới nhé!

Nếu bạn đang tìm kiếm một đơn vị thiết kế website chuyên nghiệp để hiện thực hóa những ý tưởng phức tạp hơn, Da I Kin luôn sẵn sàng đồng hành. Liên hệ với chúng tôi ngay hôm nay!