HTML <td> tag

Definitie en gebruik

<td> De tag definieert de standaardgegevenscel in HTML-tabellen.

HTML-tabellen hebben twee soorten cellen:

  • Titelcel - bevatten titelinformatie (gebruik <th> Elementen aanmaken)
  • Gegevenscellen - bevatten gegevens (gebruik <td> Elementen aanmaken)

Standaard:<td> De tekst in de elementen is normaal en links uitgelijnd.

De tekst in de <th>-elementen is standaard vet en centrisch uitgelijnd.

Zie ook:

HTML handleiding:HTML table

HTML DOM referentiehandleiding:TableData object

CSS handleiding:Tabelstijlen instellen

Voorbeeld

Voorbeeld 1

Een eenvoudige HTML-tabel met twee rijen en vier tabelcellen:

<table>
  <tr>
    <td>Cel A</td>
    <td>Cel B</td>
  </tr>
  <tr>
    <td>Cel C</td>
    <td>Cel D</td>
  </tr>
</table>

Try it yourself

Voorbeeld 2

Hoe te uitlijnen <td> inhoud (gebruik CSS):

<table style="width:100%">
  <tr>
    <th>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

Try it yourself

Voorbeeld 3

Hoe de achtergrondkleur toe te voegen aan een tabelcel (gebruik CSS):

<table>
  <tr>
    <th>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">Januari</td>
    <td style="background-color:#00FF00">￥3400</td>
  </tr>
 </table>

Try it yourself

Voorbeeld 4

Hoe stel je de hoogte van tabelcellen in (gebruik CSS):

<table>
  <tr>
    <th>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr>
    <td style="height:100px">Januari</td>
    <td style="height:100px">￥3400</td>
  </tr>
</table>

Try it yourself

Voorbeeld 5

Hoe specificeer je dat er in een tabelcel niet wordt doorgewisseld (gebruik CSS):

<table>
  <tr>
    <th>Poëzie</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">朝辞白帝彩云间，千里江陵一日还。两岸猿声啼不住，轻舟已过万重山。</td>
  </tr>
</table>

Try it yourself

Voorbeeld 6

Hoe verticaal uitlijnen <td> inhoud (gebruik CSS):

<table style="width:50%;">
  <tr>
    <th>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">Januari</td>
    <td style="vertical-align:bottom">￥3400</td>
  </tr>
</table>

Try it yourself

Voorbeeld 7

Hoe stel je de breedte van tabelcellen in (gebruik CSS):

<table style="width:100%">
  <tr>
    <th>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr>
    <td style="width:70%">Januari</td>
    <td style="width:30%">￥3400</td>
  </tr>
</table>

Try it yourself

Voorbeeld 8

Hoe maak je een tabeltitel:

<table>
  <tr>
    <th>Naam</th>
    <th>E-mail</th>
    <th>Telefoon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Try it yourself

Voorbeeld 9

Hoe maak je een tabel met een titel:

<table>
  <caption>Maandelijkse spaargelden</caption>
  <tr>
    <th>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Try it yourself

Voorbeeld 10

Hoe definieer je een tabelcel die meerdere rijen of kolommen overspant:

<table>
  <tr>
    <th>Naam</th>
    <th>E-mail</th>
    <th colspan="2">Telefoon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Try it yourself

Attribute

Attribute Value Description
colspan Number Specify the number of columns the cell should span.
headers header_id Specify one or more header cells related to the cell.
rowspan Number Set the number of rows the cell should span.

Global attributes

<td> The tag also supports Global attributes in HTML.

event attributes

<td> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will use the following default values to display <td> Element:

td {
  display: table-cell;
  vertical-align: inherit;
{}

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support