Thuộc tính colspan

Thuộc tính colspan điều khiển việc hợp nhất các cột của bảng HTML. Áp dụng cho các thẻ th và td.

Giá trị 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ỳ ô td hoặc th nào. Nếu, ví dụ, đặt colspan với giá trị 2 - thì ô được đặt thuộc tính này sẽ chiếm hai cột của bảng. Khi đó, các ô lân cận bên phả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 ô bên phả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 xét 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 ô thành hai cột

Hãy thử mở rộng ô 1 thành hai cột, bằng cách đặt thuộc tính colspan với giá trị 2. Khi đó nó sẽ đẩy các ô bên phải ra và bảng sẽ bị phá vỡ:

html<table>
  <tr>
    <td colspan="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

Bây giờ hãy thử sửa vấn đề phá vỡ bảng từ ví dụ trước, xóa một trong các ô bên phải của ô chúng ta (đó là ô 2 hoặc 3 - không quan trọng):

html<table>
  <tr>
    <td colspan="2">cell1</td>
    <td>cell2</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 ô thành ba cột

Hãy mở rộng ô 1 thành 3 cột và đặt thuộc tính colspan với giá trị 3. Khi đó xóa thêm một ô bên phải, để bảng không bị phá vỡ:

html<table>
  <tr>
    <td colspan="3">cell1</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ụ . Đồng thời colspan và rowspan

Hãy thử hợp nhất các ô với số thứ tự 4, 5, 7 và 8, sử dụng các thuộc tính colspan và rowspan (loại bỏ các hợp nhất trước đó khỏi bảng):

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

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

Результат:

Xem thêm