HTML <td> - merkintä

Määrittely ja käyttö

<td> Tagi määrittää HTML-taulukon standarditietosolut.

HTML-taulukolla on kaksi solua:

  • Otsikkosolut - sisältää otsikkotietoja (käyttämällä <th> Elementin luominen)
  • Tietosolut - sisältää tietoja (käyttämällä <td> Elementin luominen)

Oletusarvoisesti:<td> Teksti elementissä on tavallista ja vasemmassa tasossa.

Teksti <th>-elementissä on oletusarvoisesti粗体且居中。

Katso myös:

HTML-opas:HTML - taulukko

HTML DOM -viittausoppikirja:TableData-objekti

CSS-opas:Aseta taulukon tyyli

Esimerkki

Esimerkki 1

Yksinkertainen HTML-taulukko, jossa on kaksi riviä ja neljä solua:

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

Kokeile itse

Esimerkki 2

Kuinka tasata: <td> sisältöä (käyttäen CSS):

<table style="width:100%">
  <tr>
    <th>kuukausi</th>
    <th>säästöt</th>
  </tr>
  <tr>
    <td>kuu</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>helmikuu</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

Kokeile itse

Esimerkki 3

Kuinka lisätä taustaväri taulukon soluihin (käyttämällä CSS):

<table>
  <tr>
    <th>kuukausi</th>
    <th>säästöt</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">kuu</td>
    <td style="background-color:#00FF00">￥3400</td>
  </tr>
 </table>

Kokeile itse

Esimerkki 4

Kuinka asettaa taulukon solujen korkeus (käyttäen CSS):

<table>
  <tr>
    <th>kuukausi</th>
    <th>säästöt</th>
  </tr>
  <tr>
    <td style="height:100px">kuu</td>
    <td style="height:100px">￥3400</td>
  </tr>
</table>

Kokeile itse

Esimerkki 5

Kuinka määrätä taulukon soluun ei-vaihda rivejä (käyttäen CSS):

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

Kokeile itse

Esimerkki 6

Kuinka tasata vaakasuoraan <td> sisältöä (käyttäen CSS):

<table style="width:50%;">
  <tr>
    <th>kuukausi</th>
    <th>säästöt</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">kuu</td>
    <td style="vertical-align:bottom">￥3400</td>
  </tr>
</table>

Kokeile itse

Esimerkki 7

Kuinka asettaa taulukon solujen leveys (käyttäen CSS):

<table style="width:100%">
  <tr>
    <th>kuukausi</th>
    <th>säästöt</th>
  </tr>
  <tr>
    <td style="width:70%">kuu</td>
    <td style="width:30%">￥3400</td>
  </tr>
</table>

Kokeile itse

Esimerkki 8

Kuinka luoda taulukon otsikko:

<table>
  <tr>
    <th>姓名</th>
    <th>电邮</th>
    <th>puhelin</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Kokeile itse

Esimerkki 9

Kuinka luoda otsikkollinen taulukko:

<table>
  <caption>kuukausien säästöt</caption>
  <tr>
    <th>kuukausi</th>
    <th>säästöt</th>
  </tr>
  <tr>
    <td>kuu</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>helmikuu</td>
    <td>￥4500</td>
  </tr>
</table>

Kokeile itse

Esimerkki 10

Kuinka määritellä usean rivin tai sarakkeen ylittävät taulukon solut:

<table>
  <tr>
    <th>姓名</th>
    <th>电邮</th>
    <th colspan="2">电话</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>

Kokeile itse

Ominaisuus

Ominaisuus Arvo Kuvaus
colspan Luku Määritä solun tulvaavat sarakkeet.
headers header_id Määritä yksi tai useampi soluun liittyvä otsikkosolu.
rowspan Luku Aseta solun tulvaavat rivit.

Globaalit ominaisuudet

<td> Tunniste tukee myös HTML - globaalit ominaisuudet.

tapahtumien ominaisuudet

<td> Tunniste tukee myös HTML - tapahtumien ominaisuudet.

Oletusarvoiset CSS-asetukset

Useimmat selaimet käyttävät seuraavia oletusarvoja näyttämiseen <td> Elementti:

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

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki