HTML <td> etikett

Definition och användning

<td> Taggen definierar den standarddatacell i HTML-tabellen.

HTML-tabeller har två typer av celler:

  • Titelcell - innehåller titelinformation (använd <th> element skapas)
  • Datacell - innehåller data (använd <td> element skapas)

Som standard:<td> Texten i elementen är vanlig och vänsterjusterad.

Texten i <th>-elementen är standardmässigt fet och centrerad.

Se också:

HTML-tutorials:HTML tabell

HTML DOM-referenshandboken:TableData-objektet

CSS-tutorials:Ställ in tabellens stil

Exempel

Exempel 1

En enkel HTML-tabell med två rader och fyra tabellceller:

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

Prova själv

Exempel 2

Hur man justerar <td> innehållet (med CSS):

<table style="width:100%">
  <tr>
    <th>Månad</th>
    <th>Sparande</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>

Prova själv

Exempel 3

Hur man lägger till bakgrundsfärg till celler i tabeller (använd CSS):

<table>
  <tr>
    <th>Månad</th>
    <th>Sparande</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">Januari</td>
    <td style="background-color:#00FF00">￥3400</td>
  </tr>
 </table>

Prova själv

Exempel 4

Hur ställer man in cellhöjd (med CSS):

<table>
  <tr>
    <th>Månad</th>
    <th>Sparande</th>
  </tr>
  <tr>
    <td style="height:100px">Januari</td>
    <td style="height:100px">￥3400</td>
  </tr>
</table>

Prova själv

Exempel 5

Hur specificerar man att celler i tabeller inte ska brytas (med CSS):

<table>
  <tr>
    <th>Poem</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">千里江陵一日还，两岸猿声啼不住，轻舟已过万重山。</td>
  </tr>
</table>

Prova själv

Exempel 6

Hur justerar man vertikalt: <td> innehållet (med CSS):

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

Prova själv

Exempel 7

Hur ställer man in cellbredd i tabeller (med CSS):

<table style="width:100%">
  <tr>
    <th>Månad</th>
    <th>Sparande</th>
  </tr>
  <tr>
    <td style="width:70%">Januari</td>
    <td style="width:30%">￥3400</td>
  </tr>
</table>

Prova själv

Exempel 8

Hur skapar man tabellrubriker:

<table>
  <tr>
    <th>Namn</th>
    <th>E-post</th>
    <th>Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Prova själv

Exempel 9

Hur skapar man en tabell med rubrik:

<table>
  <caption>Månadssparande</caption>
  <tr>
    <th>Månad</th>
    <th>Sparande</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Prova själv

Exempel 10

Hur definierar man cellor i tabeller som sträcker sig över flera rader eller kolumner:

<table>
  <tr>
    <th>Namn</th>
    <th>E-post</th>
    <th colspan="2">Telefon</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>

Prova själv

Egenskap

Egenskap Värde Beskrivning
colspan Nummer Bestäm antalet kolumner som cellen ska sträcka sig över.
headers header_id Bestäm en eller flera rubrikceller som är relaterade till cellen.
rowspan Nummer Ställ in antalet rader som cellen ska sträcka sig över.

Globala egenskaper

<td> Etiketterna stöder också Globala egenskaper i HTML.

händelseegenskaper

<td> Etiketterna stöder också Händelseegenskaper i HTML.

Standard CSS-inställningar

De flesta webbläsare kommer att använda följande standardvärden för att visa <td> Element:

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

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd