Atribut colspan

Atribut colspan mengawal penggabungan lajur jadual HTML. Digunakan pada tag th dan td.

Nilai yang diterima: integer bermula dari 1.

Cara penggunaan: tambahkan atribut ini kepada mana-mana sel td atau th. Jika, sebagai contoh, menetapkan colspan kepada nilai 2 - maka sel yang ditetapkan ini akan mengambil dua lajur jadual. Pada masa yang sama, sel-sel bersebelahan di sebelah kanan tidak akan hilang, sel kita yang telah diperluas akan menggantikannya dan jadual akan rosak. Untuk mengelakkan ini, anda perlu membuang satu dari sel di sebelah kanan. Lihat contoh untuk pemahaman yang lebih baik.

Contoh . Jadual tanpa penggabungan

Mari kita lihat jadual tanpa penggabungan, yang akan kita gunakan seterusnya:

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;
}

Результат:

Contoh . Luaskan sel kepada dua lajur

Mari cuba luaskan sel 1 kepada dua lajur, dengan menetapkan atribut colspan kepada nilai 2. Pada masa yang sama, ia akan menggantikan sel di sebelah kanan dan jadual akan rosak:

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;
}

Результат:

Contoh . Luaskan sel tanpa merosakkan jadual

Sekarang mari cuba betulkan masalah kerosakan jadual dari contoh sebelumnya, buang satu dari sel di sebelah kanan sel kita (ini sel 2 atau 3 - tidak mengapa):

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;
}

Результат:

Contoh . Luaskan sel kepada tiga lajur

Mari luaskan sel 1 kepada 3 lajur dan tetapkan atribut colspan kepada nilai 3. Pada masa yang sama, buang satu lagi sel di sebelah kanan, supaya jadual tidak rosak:

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;
}

Результат:

Contoh . Serentak colspan dan rowspan

Mari cuba gabungkan sel dengan nombor 4, 5, 7 dan 8, dengan menggunakan atribut colspan dan rowspan (penggabungan sebelumnya dibuang dari jadual):

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;
}

Результат:

Lihat juga