HTML <tr> - rivi

Määritelmä ja käyttö

<tr> tagi määrittää HTML-taulukon rivin.

<tr> elementti sisältää yhden tai useamman <th> tai <td> elementti.

Lisäksi:

HTML-opas:HTML - taulukot

HTML DOM -viittausTableRow-objekti

CSS-opas:Taulukon tyyliä asetetaan

Esimerkki

Esimerkki 1

Yksinkertainen kolme rivin HTML-taulukko; otsikkorivi ja kaksi tietoriviä:

<table>
  <tr>
    <th>Kuukausi</th>
    <th>Säästöt</th>
  </tr>
  <tr>
    <td> tammikuu</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td> helmikuu</td>
    <td>￥4500</td>
  </tr>
</table>

Kokeile itse

Esimerkki 2

Miten tasataan: <tr> sisältöä (käyttämällä CSS):

<table style="width:100%">
  <tr>
    <th>Kuukausi</th>
    <th>Säästöt</th>
  </tr>
  <tr style="text-align:right">
    <td> tammikuu</td>
    <td>￥3400</td>
  </tr>
</table>

Kokeile itse

Esimerkki 3

Miten taustaväri lisätään taulukon riviin (käyttämällä CSS):

<table>
  <tr style="background-color:#FF0000">
    <th>Kuukausi</th>
    <th>Säästöt</th>
  </tr>
  <tr>
    <td> tammikuu</td>
    <td>￥3400</td>
  </tr>
 </table>

Kokeile itse

Esimerkki 4

Miten vertikaalinen tasaus tehdään: <tr> sisältöä (käyttämällä CSS):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>Kuukausi</th>
    <th>Säästöt</th>
  </tr>
  <tr style="vertical-align:bottom">
    <td> tammikuu</td>
    <td>￥3400</td>
  </tr>
</table>

Kokeile itse

Esimerkki 5

Miten luoda taulukon otsikko：

<table>
  <tr>
    <th>Nimi</th>
    <th>Elektroninen posti</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 6

Miten luoda otsikoitu taulukko：

<table>
  <caption>Kuukausi säästöt</caption>
  <tr>
    <th>Kuukausi</th>
    <th>Säästöt</th>
  </tr>
  <tr>
    <td> tammikuu</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td> helmikuu</td>
    <td>￥4500</td>
  </tr>
</table>

Kokeile itse

Esimerkki 7

Miten määritellään monirivinen tai monisarakkeinen taulukkol单元格：

<table>
  <tr>
    <th>Nimi</th>
    <th>Elektroninen posti</th>
    <th colspan="2">Puhelin</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

Globaalit ominaisuudet

<tr> Tunnisteet tukevat myös HTML - globaalit ominaisuudet.

tapahtumamäärittelyominaisuudet

<tr> Tunnisteet tukevat myös HTML - tapahtumamäärittelyominaisuudet.

Oletusarvoiset CSS-asetukset

Useimmat selaimet näyttävät seuraavat oletusarvot <tr> Elementti:

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

Selaimen tuki

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