Tag <td> HTML

Definicja i użycie

<td> Tag <td> definiuje standardowe komórki danych w tabeli HTML.

HTML tabeli ma dwa rodzaje komórek:

  • Komórki tytułowe - zawierają informacje tytułowe (używając <th> Tworzenie elementu)
  • Komórki danych - zawierają dane (używając <td> Tworzenie elementu)

Domyślnie:<td> Tekst w elemencie jest zwyczajowy i wyjustowany do lewej.

Tekst w elemencie <th> domyślnie jest pogrubiony i wyśrodkowany.

Zobacz również:

Kurs HTML:Tabela HTML

Podręcznik referencyjny HTML DOM:Obiekt TableData

Kurs CSS:Ustawienie stylu tabeli

Przykład

Przykład 1

Prosta tabela HTML, z dwoma wierszami i czterema komórkami tabeli:

<table>
  <tr>
    <td>Komórka A</td>
    <td>Komórka B</td>
  </tr>
  <tr>
    <td>Komórka C</td>
    <td>Komórka D</td>
  </tr>
</table>

Spróbuj sam

Przykład 2

Jak wyprostować <td> zawartość (używając CSS):

<table style="width:100%">
  <tr>
    <th>miesiąc</th>
    <th>oszczędności</th>
  </tr>
  <tr>
    <td>stycznia</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>lutego</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

Spróbuj sam

Przykład 3

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

<table>
  <tr>
    <th>miesiąc</th>
    <th>oszczędności</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">styczeń</td>
    <td style="background-color:#00FF00">3400 RMB</td>
  </tr>
 </table>

Spróbuj sam

Przykład 4

Jak ustawić wysokość komórki tabeli (używając CSS):

<table>
  <tr>
    <th>miesiąc</th>
    <th>oszczędności</th>
  </tr>
  <tr>
    <td style="height:100px">styczeń</td>
    <td style="height:100px">3400 RMB</td>
  </tr>
</table>

Spróbuj sam

Przykład 5

Jak określić, że komórka tabeli nie będzie się rozciągać (używając CSS):

<table>
  <tr>
    <th>poemat</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">Oddaję się białemu cesarzowi między barwnymi chmurami, tysiąc mil w Jiangling wracam w jeden dzień. Głosy małp na obu brzegach nie przestają się krzyczeć, a mała łódź już minęła tysiące wzgórz.</td>
  </tr>
</table>

Spróbuj sam

Przykład 6

Jak wyrównać wertykalnie: <td> zawartość (używając CSS):

<table style="width:50%;">
  <tr>
    <th>miesiąc</th>
    <th>oszczędności</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">styczeń</td>
    <td style="vertical-align:bottom">3400 RMB</td>
  </tr>
</table>

Spróbuj sam

Przykład 7

Jak ustawić szerokość komórek tabeli (używając CSS):

<table style="width:100%">
  <tr>
    <th>miesiąc</th>
    <th>oszczędności</th>
  </tr>
  <tr>
    <td style="width:70%">styczeń</td>
    <td style="width:30%">3400 RMB</td>
  </tr>
</table>

Spróbuj sam

Przykład 8

Jak utworzyć nagłówek tabeli:

<table>
  <tr>
    <th>imię</th>
    <th>email</th>
    <th>telefon</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 9

Jak utworzyć tabelę z nagłówkiem:

<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 10

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

<table>
  <tr>
    <th>imię</th>
    <th>email</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

Atrybut

Atrybut Wartość Opis
colspan Numer Określa liczbę kolumn, które komórka ma przeciągać.
headers header_id Określa jedną lub więcej komórek nagłówkowych związanych z komórką.
rowspan Numer Ustawia liczbę wierszy, które komórka ma przeciągać.

Globalne atrybuty

<td> Tagi te obsługują również Globalne atrybuty HTML.

Atrybuty zdarzeń

<td> Tagi te obsługują 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 <td> Element:

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

Obsługa przeglądarek

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