Thuộc tính rowspan

Thuộc tính rowspan kiểm soát việc hợp nhất các hàng trong bảng HTML. Áp dụng cho các thẻ th và td.

Giá trị được chấp nhận: số nguyên bắt đầu từ 1.

Cách sử dụng: thêm thuộc tính này vào bất kỳ ô nào td hoặc th. Nếu, ví dụ, đặt rowspan với giá trị 2 - thì ô được đặt giá trị đó sẽ chiếm hai hàng theo chiều cao của bảng. Khi đó các ô từ hàng bên dưới sẽ không biến mất, ô đã mở rộng của chúng ta sẽ đẩy chúng ra và bảng sẽ bị phá vỡ. Để điều này không xảy ra, cần xóa một trong các ô khỏi hàng bên dưới. Xem các ví dụ để hiểu rõ hơn.

Ví dụ . Bảng không có hợp nhất

Hãy xem một bảng không có hợp nhất, mà chúng ta sẽ làm việc tiếp theo:

html<table>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Ví dụ . Mở rộng ô sang hai hàng

Bây giờ hãy mở rộng ô 1 sang hai hàng, bằng cách đặt cho nó thuộc tính rowspan với giá trị 2. Chúng ta sẽ thấy rằng nó đẩy các ô từ hàng bên dưới nó và bảng bị phá vỡ:

html<table>
  <tr>
    <td rowspan="2">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Ví dụ . Mở rộng ô mà không làm phá vỡ bảng

Để sửa vấn đề bảng bị phá vỡ từ ví dụ trước, hãy thử xóa một trong các ô khỏi hàng thứ hai (và điều này không nhất thiết phải là ô 4, ô nằm ngay dưới ô 1 của chúng ta, có thể xóa bất kỳ ô nào, chúng ta sẽ xóa ô có số 5):

html<table>
  <tr>
    <td rowspan="2">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Ví dụ . Mở rộng ô sang 3 hàng

Ở đây hãy mở rộng ô của chúng ta không phải sang hai hàng, mà sang 3 hàng, đặt cho nó rowspan với giá trị 3. Đồng thời xóa một trong các ô khỏi hàng thứ ba (ô 7, 8 hoặc 9 - không quan trọng), để bảng không bị phá vỡ:

html<table>
  <tr>
    <td rowspan="3">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell9</td>
  </tr>
</table>   

csstable, td, th {
  border: 1px solid black;
}

Результат:

Ví dụ . Mở rộng thêm 2 cột

Hãy mở rộng thêm ô 2 sang 2 cột bổ sung cho ô đầu tiên. Để làm điều này, thêm colspan vào ô 2 với giá trị 2. Đồng thời xóa ô 3, để bảng không bị phá vỡ:

html<table>
  <tr>
    <td rowspan="3">cell1</td>
    <td colspan="2">cell2</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Xem thêm