<tr>
Wiersz tabeli, który zawiera komórki `<th>` i `<td>`.
- Wyświetlanie
- table-row
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Komórki
<th>i<td>
Przykład
#<style>
table { border-collapse: collapse; }
th, td { padding: 4px 12px; text-align: left; }
tbody tr:nth-child(even) { background: #8883; }
tr.me { background: #8b5cf655; font-weight: bold; }
</style>
<table>
<thead>
<tr><th scope="col">Miejsce</th><th scope="col">Uczeń</th><th scope="col">Punkty</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Ola</td><td>980</td></tr>
<tr><td>2</td><td>Kuba</td><td>870</td></tr>
<tr class="me"><td>3</td><td>Ty</td><td>845</td></tr>
<tr><td>4</td><td>Maja</td><td>790</td></tr>
</tbody>
</table>Definicja i zastosowanie
#Element <tr> (od table row) tworzy jeden wiersz tabeli. W środku umieszczasz komórki: <th> dla nagłówków i <td> dla danych. Wiersz może stać w <thead>, <tbody>, <tfoot> albo bezpośrednio w <table>, choć w tym ostatnim przypadku przeglądarka i tak doda wokół niego <tbody>.
Liczba komórek w wierszach powinna odpowiadać liczbie kolumn. Gdy komórka ma zająć kilka kolumn albo wierszy, użyj atrybutów colspan i rowspan na <td> lub <th>, zamiast wstawiać puste komórki.
Wiersz to wygodny punkt zaczepienia dla CSS: kolor co drugiego wiersza (tr:nth-child(even)), podświetlenie po najechaniu kursorem (tr:hover) albo wyróżnienie wiersza z bieżącym użytkownikiem w rankingu.
Składnia
#<tr>
<td>…</td>
<td>…</td>
</tr>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
tr {
display: table-row;
vertical-align: inherit;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Tekst wpisany bezpośrednio w
<tr>, poza komórką, przeglądarka przeniesie przed tabelę. Wszystko, co ma się wyświetlić w wierszu, umieść w<td>lub<th>. - Marginesy (
margin) nie działają na wierszach tabeli. Odstępy ustawisz przezborder-spacingna tabeli albopaddingw komórkach.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.