Kuinka yhdistää tai yhdistää soluja HTML-taulukossa

Voit yhdistää kaksi tai useampia taulukon soluja sarakkeessa käyttämällä colspan-attribuuttia

colspan-attribuutin käyttäminen

Alla olevassa koodissa on taulukko, jossa on kolme riviä ja kolme saraketta. Jos halusimme yhdistää ensimmäisen sarakkeen kaksi ensimmäistä solua, voisimme käyttää colspan=”2″-attribuuttia ensimmäisessä

Esimerkki HTML-taulukosta

<table>
 <tr>
  <td colspan="2">&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
</table>

Yllä oleva koodi, joka on renderöity verkkoselaimella, tuottaa alla olevan taulukon kaltaisen taulukon. Kuten kuvassa, ensimmäinen solu kattaa kahden sarakkeen leveyden.

Jos haluat käyttää kaikkia kolmea taulukon yläreunassa olevaa solua, lisää colspan-arvoksi 3, koska sarakkeita on kolme. Arvon lisääminen 3:een antaa alla olevan esimerkin kaltaisen taulukon.

Kuinka käyttää rowspan-attribuuttia

Alla olevassa koodissa on taulukko, jossa on kolme riviä ja kolme saraketta. Jos halusimme yhdistää ensimmäisen sarakkeen kaksi ensimmäistä solua yhdeksi soluksi, voisimme käyttää rowspan=”2″-attribuuttia ensimmäisessä

Esimerkki HTML-taulukosta

<table>
 <tr>
  <td rowspan="2">&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
</table>

Yllä oleva koodi, joka on renderöity verkkoselaimella, tuottaa alla olevan taulukon kaltaisen taulukon. Kuten kuvassa, ensimmäinen solu kattaa kahden rivin korkeuden.

Jos haluat käyttää kaikkia kolmea ensimmäisen sarakkeen solua, lisää rivivälin arvoksi 3, koska riviä on kolme. Arvon lisääminen 3:een antaa alla olevan esimerkin kaltaisen taulukon.

“0”:n käyttäminen numerona colspan- ja rivivälissä

Kaikki nykyaikaiset selaimet käsittelevät “0” (nolla) rivivälissä ja rivivälissä enimmäisriveinä tai -sarakkeina. Esimerkiksi sen sijaan, että lasket taulukon rivejä, käytä rowspan=”0″ laajentaaksesi rivin taulukon loppuun.

“0”:n käyttäminen on hyödyllistä suurille taulukoille ja dynaamisille taulukoille, joissa rivien ja sarakkeiden määrä voi muuttua usein.

Solujen yhdistäminen WYSIWYG-editorilla

Voit myös käyttää WYSIWYG-editoria solujen yhdistämiseen. Yhdistäksesi solun WYSIWYG-editorissa korosta vähintään kaksi solua, napsauta soluja hiiren kakkospainikkeella ja valitse solujen yhdistämisvaihtoehto. Alla on lisäohjeita tämän tekemiseen Adobe Dreamweaverissä ja Microsoft Expression Webissä.

Solujen yhdistäminen Dreamweaverilla

1. Korosta kaksi tai useampia soluja taulukossasi.
2. Napsauta korostettuja soluja hiiren kakkospainikkeella.
3. Napsauta Taulukko ja valitse sitten Yhdistä solut.

tai

1. Korosta kaksi tai useampia soluja taulukossasi.
2. Paina pikanäppäintä Alt+Ctrl+M.

Solujen yhdistäminen Expression Webillä

1. Korosta kaksi tai useampia soluja taulukossasi.
2. Napsauta korostettuja soluja hiiren kakkospainikkeella.
3. Napsauta Muokkaa ja valitse sitten Yhdistä solut.