Otsikkosolut taulukossa HTML:ssä

Tagien td lisäksi on olemassa myös tagit th, jotka myös luovat soluja. Mutta nämä eivät ole enää tavallisia soluja, vaan otsikkosoluja, jotka osoittavat, mitä tietyssä sarakkeessa (tai rivissä) on. Oletusarvoisesti teksti sellaisissa soluissa th on lihavoitu ja keskitetty.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on tällainen taulukko työntekijöistä:

html<table border="1" width="300">
  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>200$</td>
  </tr>
  <tr>
    <td>Nick</td>
    <td>Mayers</td>
    <td>300$</td>
  </tr>
  <tr>
    <td>Alex</td>
    <td>Jonson</td>
    <td>400$</td>
  </tr>
</table>

Результат:

Kuten näette, ensimmäisessä sarakkeessa säilytetään työntekijän etunimi, toisessa sarakkeessa - sukunimi, ja kolmannessa - palkka. Tehdään vielä yksi rivi taulukon alkuun, johon sijoittamme sarakkeiden otsikot th -tageihin:

html<table border="1" width="300">
  <tr>
    <th>Nimi</th>
    <th>Sukunimi</th>
    <th>Palkka</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>200$</td>
  </tr>
  <tr>
    <td>Nick</td>
    <td>Mayers</td>
    <td>300$</td>
  </tr>
  <tr>
    <td>Alex</td>
    <td>Jonson</td>
    <td>400$</td>
  </tr>
</table>

Результат: