Việt1. Giới thiệu
Trong HTML, bảng (table) là một cách thức hiệu quả để hiển thị dữ liệu theo cấu trúc hàng và cột. Khi làm việc với bảng, đôi khi bạn sẽ cần gộp nhiều cột thành một hoặc gộp nhiều hàng lại với nhau để trình bày dữ liệu một cách trực quan hơn. Điều này có thể thực hiện bằng cách sử dụng các thuộc tính colspan và rowspan trong HTML.
Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về cách gộp các cột (colspan), gộp các hàng (rowspan), và cách sử dụng chúng để tạo bảng phức tạp. Bài viết cũng bao gồm các ví dụ cụ thể giúp bạn dễ dàng hiểu và áp dụng trong các dự án web của mình.
2. Gộp cột và hàng ngang trong HTML Tables là gì?
Khi hiển thị dữ liệu dạng bảng, bạn có thể gặp các trường hợp cần hợp nhất (gộp) nhiều cột hoặc nhiều hàng thành một ô duy nhất. Điều này có thể được thực hiện bằng cách sử dụng:
colspan: Dùng để gộp nhiều cột thành một.rowspan: Dùng để gộp nhiều hàng thành một.
Việc gộp cột và hàng không chỉ giúp bảng của bạn trở nên gọn gàng và dễ hiểu hơn mà còn cải thiện tính thẩm mỹ cho trang web.
3. Cách sử dụng colspan để gộp cột
a. colspan là gì?
Thuộc tính colspan được sử dụng với thẻ <td> hoặc <th> để gộp nhiều cột thành một. Số cột mà bạn muốn gộp được chỉ định bằng giá trị của thuộc tính colspan.
b. Cách sử dụng
Cú pháp của colspan rất đơn giản, bạn chỉ cần thêm thuộc tính colspan vào thẻ <td> hoặc <th> và chỉ định số lượng cột bạn muốn gộp.
Ví dụ:
<table border="1">
<tr>
<th colspan="2">Thông tin sản phẩm</th>
<th>Giá</th>
</tr>
<tr>
<td colspan="2">Máy tính xách tay</td>
<td>20,000,000 VND</td>
</tr>
</table>Giải thích:
- Ở hàng đầu tiên, cột tiêu đề "Thông tin sản phẩm" được gộp từ 2 cột thành một ô duy nhất bằng thuộc tính
colspan="2". - Ở hàng thứ hai, giá trị "Máy tính xách tay" cũng được gộp từ 2 cột lại thành một ô.
c. Ví dụ cụ thể
<table border="1">
<tr>
<th>STT</th>
<th colspan="2">Tên sản phẩm</th>
<th>Giá</th>
</tr>
<tr>
<td>1</td>
<td colspan="2">Điện thoại thông minh</td>
<td>15,000,000 VND</td>
</tr>
<tr>
<td>2</td>
<td colspan="2">Laptop</td>
<td>25,000,000 VND</td>
</tr>
</table>Trong ví dụ này, các cột "Tên sản phẩm" ở cả tiêu đề và dữ liệu đều được gộp thành một ô lớn chiếm hai cột.
4. Cách sử dụng rowspan để gộp hàng ngàng
a. rowspan là gì?
Tương tự như colspan, thuộc tính rowspan được sử dụng với thẻ <td> hoặc <th> để gộp nhiều hàng lại với nhau. Số lượng hàng bạn muốn gộp sẽ được chỉ định bằng giá trị của rowspan.
b. Cách sử dụng
Bạn thêm thuộc tính rowspan vào thẻ <td> và chỉ định số lượng hàng mà ô này sẽ chiếm.
Ví dụ:
<table border="1">
<tr>
<th rowspan="2">Thông tin</th>
<th>Giá</th>
</tr>
<tr>
<td>20,000,000 VND</td>
</tr>
</table>Giải thích:
- Cột "Thông tin" được gộp lại với hai hàng bằng thuộc tính
rowspan="2", do đó ô "Thông tin" chiếm cả hai hàng.
c. Ví dụ
<table border="1">
<tr>
<th>STT</th>
<th>Tên sản phẩm</th>
<th>Giá</th>
<th rowspan="2">Tình trạng</th>
</tr>
<tr>
<td>1</td>
<td>Điện thoại</td>
<td>15,000,000 VND</td>
</tr>
<tr>
<td>2</td>
<td>Laptop</td>
<td>25,000,000 VND</td>
<td>Còn hàng</td>
</tr>
</table>Trong ví dụ trên:
- Ở hàng đầu tiên, cột "Tình trạng" được gộp lại với hai hàng đầu tiên bằng thuộc tính
rowspan="2", chiếm cả chiều dọc của hai hàng liên tiếp.
5. Kết hợp colspan và rowspan
Bạn có thể kết hợp cả hai thuộc tính colspan và rowspan để tạo các bảng phức tạp hơn.
Ví dụ kết hợp
<table border="1">
<tr>
<th rowspan="2">STT</th>
<th colspan="2">Sản phẩm</th>
<th rowspan="2">Giá</th>
</tr>
<tr>
<th>Tên</th>
<th>Loại</th>
</tr>
<tr>
<td>1</td>
<td>Máy tính xách tay</td>
<td>Điện tử</td>
<td>20,000,000 VND</td>
</tr>
<tr>
<td>2</td>
<td>Điện thoại</td>
<td>Điện tử</td>
<td>10,000,000 VND</td>
</tr>
</table>Giải thích:
- Ở hàng đầu tiên, cột "STT" được gộp với hai hàng bằng
rowspan="2", trong khi tiêu đề "Sản phẩm" được gộp với hai cột bằngcolspan="2". - Ở hàng thứ hai, cột "Sản phẩm" được chia nhỏ thành hai cột con là "Tên" và "Loại".
6. Lợi ích của việc sử dụng colspan và rowspan
a. Tăng tính trực quan
Việc sử dụng các thuộc tính colspan và rowspan giúp bạn tạo ra các bảng rõ ràng hơn, dễ nhìn hơn và giúp người dùng hiểu dữ liệu tốt hơn.
b. Tối ưu hóa không gian hiển thị
Sử dụng colspan và rowspan giúp bạn sử dụng hiệu quả không gian hiển thị trên trang web, tránh tình trạng dữ liệu bị phân tán và rối mắt.
c. Trình bày dữ liệu phức tạp
Đối với những dữ liệu phức tạp, cần phải chia nhỏ theo nhiều tiêu chí, bạn có thể sử dụng kết hợp colspan và rowspan để trình bày dữ liệu một cách hợp lý và dễ hiểu.
7. Mẹo SEO khi sử dụng HTML Tables
a. Sử dụng thẻ <caption>
Thẻ <caption> nên được sử dụng để mô tả ngắn gọn nội dung bảng, giúp công cụ tìm kiếm hiểu rõ hơn về dữ liệu trong bảng và cải thiện khả năng tìm kiếm.
Ví dụ:
<table border="1">
<caption>Bảng giá sản phẩm tại CodeTutHub</caption>
<tr>
<th>Sản phẩm</th>
<th>Giá</th>
</tr>
<tr>
<td>Điện thoại</td>
<td>15,000,000 VND</td>
</tr>
</table>b. Sử dụng thẻ <th> thay vì <td> cho tiêu đề cột
Công cụ tìm kiếm và trình đọc màn hình hiểu rằng thẻ <th> đại diện cho tiêu đề của một cột hoặc hàng, giúp cải thiện trải nghiệm người dùng và khả năng truy cập.
c. Sử dụng bảng khi cần thiết
Tránh sử dụng bảng HTML chỉ để bố cục trang, vì điều này có thể ảnh hưởng tiêu cực đến trải nghiệm người dùng trên thiết bị di động và tác động xấu đến SEO. Bảng chỉ nên được sử dụng khi bạn cần trình bày dữ liệu dạng bảng.
8. Kết luận
Việc gộp cột và hàng trong HTML tables bằng cách sử dụng colspan và rowspan giúp bạn tạo ra những bảng dữ liệu dễ hiểu và trực quan hơn. Sử dụng đúng cách các thuộc tính này không chỉ cải thiện cách trình bày mà còn giúp trang web của bạn trông chuyên nghiệp hơn. Hãy nhớ tối ưu bảng của bạn với các thẻ như <caption>, <th> để hỗ trợ tốt cho SEO và cung cấp trải nghiệm tốt nhất cho người dùng.
Hy vọng với bài viết này, bạn đã hiểu rõ cách gộp cột và hàng trong HTML tables và có thể áp dụng vào các dự án web của mình trên CodeTutHub!
