HTML <td> Merker


Voorbeeld

'n Eenvoudige HTML-tabel, met twee rye en vier tabelselle:

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

Meer "Probeer dit self" voorbeelde hieronder.


Definisie en gebruik

Die <td>merker definieer 'n standaard datasel in 'n HTML-tabel.

'n HTML-tabel het twee soorte selle:

  • Kopselle - bevat kopinligting (geskep met die <th> element)
  • Dataselle - bevat data (geskep met die <td>element)

Die teks in <td>elemente is standaard gereeld en linksbelyn.

Die teks in <th>-elemente is by verstek vetgedruk en gesentreer. 


Blaaierondersteuning

Element
<td> Yes Yes Yes Yes Yes

Eienskappe

Attribute Value Description
colspan number Specifies the number of columns a cell should span
headers header_id Specifies one or more header cells a cell is related to
rowspan number Sets the number of rows a cell should span

Globale eienskappe

Die <td>merker ondersteun ook die Global Attributes in HTML .


Gebeurtenis eienskappe

Die <td>merker ondersteun ook die gebeurteniskenmerke in HTML .



Meer voorbeelde

Voorbeeld

Hoe om inhoud binne <td> in lyn te bring (met CSS):

<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td style="text-align:right">$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td style="text-align:right">$80</td>
  </tr>
</table>

Voorbeeld

Hoe om agtergrondkleur by tabelsel te voeg (met CSS):

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">January</td>
    <td style="background-color:#00FF00">$100</td>
  </tr>
 </table>

Voorbeeld

Hoe om die hoogte van 'n tabelsel te stel (met CSS):

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td style="height:100px">January</td>
    <td style="height:100px">$100</td>
  </tr>
</table>

Voorbeeld

Hoe om geen woordomvou in tabelsel (met CSS) te spesifiseer nie:

<table>
  <tr>
    <th>Poem</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">Never increase, beyond what is necessary, the number of entities required to explain anything</td>
  </tr>
</table>

Voorbeeld

Hoe om inhoud in <td> vertikaal in lyn te bring (met CSS):

<table style="width:50%;">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">January</td>
    <td style="vertical-align:bottom">$100</td>
  </tr>
</table>

Voorbeeld

Hoe om die breedte van 'n tabelsel (met CSS) te stel:

<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td style="width:70%">January</td>
    <td style="width:30%">$100</td>
  </tr>
</table>

Voorbeeld

Hoe om tabelopskrifte te skep:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
  </tr>
</table>

Voorbeeld

Hoe om 'n tabel met 'n onderskrif te skep:

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Voorbeeld

Hoe om tabelselle te definieer wat meer as een ry of een kolom strek:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
  </tr>
</table>

Verwante bladsye

HTML-tutoriaal: HTML-tabelle

HTML DOM verwysing: TableData Object

CSS-tutoriaal: Stileertabelle


Verstek CSS-instellings

Die meeste blaaiers sal die <td>element met die volgende verstekwaardes vertoon:

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