Tag <tr> HTML

Definicja i użycie

<tr> etykiety definiujące wiersze w tabeli HTML.

<tr> Element zawiera jeden lub kilka <th> lub <td> Element.

Zobacz również:

Kurs HTML:Tabela HTML

Podręcznik HTML DOM:Obiekt TableRow

Kurs CSS:Ustawianie stylu tabeli

Przykład

Przykład 1

Prosta trójwierszowa tabela HTML; wiersz tytułowy i dwa wiersze danych:

<table>
  <tr>
    <th>Miesiąc</th>
    <th>Oszczędności</th>
  </tr>
  <tr>
    <td>stycznia</td>
    <td>3400 RMB</td>
  </tr>
  <tr>
    <td>lutego</td>
    <td>4500 RMB</td>
  </tr>
</table>

Spróbuj sam

Przykład 2

Jak wyrównać <tr> Zawartość wewnętrzna (używając CSS):

<table style="width:100%">
  <tr>
    <th>Miesiąc</th>
    <th>Oszczędności</th>
  </tr>
  <tr style="text-align:right">
    <td>stycznia</td>
    <td>3400 RMB</td>
  </tr>
</table>

Spróbuj sam

Przykład 3

Jak dodać kolor tła do wiersza tabeli (używając CSS):

<table>
  <tr style="background-color:#FF0000">
    <th>Miesiąc</th>
    <th>Oszczędności</th>
  </tr>
  <tr>
    <td>stycznia</td>
    <td>3400 RMB</td>
  </tr>
 </table>

Spróbuj sam

Przykład 4

Jak wyrównać wertykalnie <tr> Zawartość wewnętrzna (używając CSS):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>Miesiąc</th>
    <th>Oszczędności</th>
  </tr>
  <tr style="vertical-align:bottom">
    <td>stycznia</td>
    <td>3400 RMB</td>
  </tr>
</table>

Spróbuj sam

Przykład 5

Jak utworzyć nagłówek tabeli:

<table>
  <tr>
    <th>Imię</th>
    <th>Poczta elektroniczna</th>
    <th>Tel.</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Spróbuj sam

Przykład 6

Jak utworzyć tabelę z nagłówkami:

<table>
  <caption>Oszczędności miesięczne</caption>
  <tr>
    <th>Miesiąc</th>
    <th>Oszczędności</th>
  </tr>
  <tr>
    <td>stycznia</td>
    <td>3400 RMB</td>
  </tr>
  <tr>
    <td>lutego</td>
    <td>4500 RMB</td>
  </tr>
</table>

Spróbuj sam

Przykład 7

Jak zdefiniować komórki tabeli rozciągające się przez wiele wierszy lub kolumn:

<table>
  <tr>
    <th>Imię</th>
    <th>Poczta elektroniczna</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>

Spróbuj sam

Globalne atrybuty

<tr> Tagi te wspierają również Globalne atrybuty HTML.

Atrybuty zdarzeń

<tr> Tagi te wspierają również Atrybuty zdarzeń w HTML.

Domyślne ustawienia CSS

Większość przeglądarek będzie używać następujących wartości domyślnych do wyświetlania <tr> Element:

tr {
  display: wiersz-tabeli;
  vertical-align: dziedziczyć;
  border-color: dziedziczyć;
}

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie