Rate this post

Thuộc tính colspan trong HTML là một thuộc tính của thẻ <td> hoặc <th> (các ô trong một bảng) để chỉ định số cột mà ô đó sẽ chiếm. Ví dụ, nếu bạn muốn một ô chiếm hai cột, bạn có thể sử dụng thuộc tính colspan="2".

Các bài viết liên quan

Ví dụ:

<table>
  <tr>
    <td colspan="2">This cell spans across 2 columns</td>
    <td>This is a regular cell</td>
  </tr>
  <tr>
    <td>This is another regular cell</td>
    <td>This is another regular cell</td>
  </tr>
</table>

Trong ví dụ trên, ô đầu tiên trong hàng đầu tiên sẽ chiếm hai cột, còn lại là các ô bình thường.

Ngoài thuộc tính colspan, còn có thuộc tính rowspan cho phép một ô chiếm nhiều hàng trong bảng. Ví dụ, nếu bạn muốn một ô chiếm hai hàng, bạn có thể sử dụng thuộc tính rowspan="2".

Ví dụ:

<table>
  <tr>
    <td rowspan="2">This cell spans across 2 rows</td>
    <td>This is a regular cell</td>
  </tr>
  <tr>
    <td>This is another regular cell</td>
  </tr>
</table>

Trong ví dụ trên, ô đầu tiên trong hàng đầu tiên sẽ chiếm hai hàng, còn lại là các ô bình thường.

Sử dụng cả rowspan và colspan có thể giúp tạo ra các bảng bằng lối bảo trì và dễ dàng hơn.

một số ví dụ colspan trong html

Đây là một số ví dụ về cách sử dụng thuộc tính colspan trong HTML:

Tạo một ô chiếm hai cột:

<table>
  <tr>
    <td colspan="2">This cell spans across 2 columns</td>
    <td>This is a regular cell</td>
  </tr>
</table>

Tạo một ô chiếm ba cột:

<table>
  <tr>
    <td colspan="3">This cell spans across 3 columns</td>
    <td>This is a regular cell</td>
  </tr>
</table>

Tạo một bảng với các ô chiếm nhiều cột:

<table>
  <tr>
    <td colspan="2">This cell spans across 2 columns</td>
    <td>This is a regular cell</td>
  </tr>
  <tr>
    <td colspan="3">This cell spans across 3 columns</td>
  </tr>
</table>

Tạo một bảng với các ô chiếm nhiều cột và hàng:

<table>
  <tr>
    <td rowspan="2" colspan="2">This cell spans across 2 rows and 2 columns</td>
    <td>This is a regular cell</td>
  </tr>
  <tr>
    <td>This is a regular cell</td>
  </tr>
</table>

Các ví dụ trên chỉ là một số cách sử dụng thuộc tính colspan trong HTML, bạn có thể sử dụng thuộc tính này để tạo các bảng có cấu trúc phức tạp hơn và tùy chỉnh các ô trong bảng theo nhu cầu của bạn. Cũng như colspan, rowspan cũng có thể sử dụng để tạo các bảng có cấu trúc phức tạp hơn.

Tự học html

colspan trong html

một số ví dụ colspan trong html

Trả lời Hủy