Gộp hàng và cột

Trong HTML, bạn có thể dùng thuộc tính (attribute) rowspan và colspan để ô trong bảng trải dài qua nhiều hàng hoặc cột. Các thuộc tính này cho phép bạn tạo bố cục bảng phức tạp hơn bằng cách gộp các ô lại với nhau.

Thuộc tính colspan dùng để chỉ định số cột mà một ô sẽ trải rộng. Bạn thêm thuộc tính này vào thẻ <td> hoặc <th> của ô muốn mở rộng.

Đây là ví dụ về cách sử dụng colspan:

<table border="1">
	<tr>
		<th colspan="2">Name</th>
	</tr>
	<tr>
		<td>John</td>
		<td>Doe</td>
	</tr>
</table>

Trong ví dụ này, ô tiêu đề có chữ "Name" trải dài trên hai cột. Cách này hữu ích khi bạn muốn tạo tiêu đề bao phủ nhiều cột. Đây là giao diện của nó:

Thuộc tính rowspan dùng để chỉ định số hàng mà một ô sẽ trải rộng. Thuộc tính này cũng được thêm vào thẻ <td> hoặc <th> của ô mà bạn muốn mở rộng.

Đây là ví dụ về cách dùng rowspan:

<table border="1">
  <tr>
    <th>Employee</th>
    <th>Shift</th>
  </tr>
  <tr>
    <td rowspan="2">Alex</td>
    <td>Morning</td>
  </tr>
  <tr>
    <td>Evening</td>
  </tr>
</table>

Ở đây, rowspan được dùng để thể hiện rằng Alex làm cả ca sáng lẫn ca tối mà không cần lặp lại tên. 

Bạn có thể dùng cả colspan và rowspan trong cùng một bảng để tạo bố cục phức tạp. Chỉ cần nhớ điều chỉnh số lượng ô trong mỗi hàng cho phù hợp với các ô được gộp.