HTML <th> znacznik

Definicja i użycie

<th> Tag <th> definiuje komórkę tytułową tabeli HTML.

HTML tabela ma dwa rodzaje komórek:

  • Komórka tytułowa - zawiera informacje tytułowe (używając <th> tworzenie elementu)
  • Komórka danych - zawiera dane (używając <td> tworzenie elementu)

Domyślnie:<th> Tekst w elemencie jest pogrubiony i wycentrowany.

Domyślnie, tekst w elemencie <td> jest zwyczajny i wycentrowany do lewej.

Zobacz również:

Kurs HTML:HTML tabela

Podręcznik referencyjny HTML DOM:Obiekt TableHeader

Kurs CSS:Ustawienie stylu formularza

Przykład

Przykład 1

Prosta tabela HTML zawierająca trzy wiersze, dwie komórki tytułowe i cztery komórki danych:

<table>
  <tr>
    <th>miesiąc</th>
    <th>oszczędności</th>
  </tr>
  <tr>
    <td>stycznia</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>lutego</td>
    <td>￥4500</td>
  </tr>
</table>

Spróbuj sam!

Przykład 2

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

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

Spróbuj sam!

Przykład 3

Jak dodać kolor tła do komórki tytułowej tabeli (używając CSS)?

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

Spróbuj sam!

Przykład 4

Jak ustawić wysokość komórki tytułowej tabeli (używając CSS)?

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

Spróbuj sam!

przykład 5

Jak określić, że komórka tytułowa tabeli nie powinna przechodzić do nowej linii (używając CSS)?

<table>
  <tr>
    <th>miesiąc</th>
    <th style="white-space:nowrap">oszczędności na nowe auto</th>
  </tr>
  <tr>
    <td>stycznia</td>
    <td>￥3400</td>
  </tr>
</table>

Spróbuj sam!

przykład 6

Jak wyrównać pionowo? <th> zawartość (używając CSS):

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

Spróbuj sam!

przykład 7

Jak ustawić szerokość komórki tytułowej tabeli (używając CSS)?

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

Spróbuj sam!

przykład 8

Jak utworzyć tytuł 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łó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</td>
  </tr>
  <tr>
    <td>lutego</td>
    <td>￥4500</td>
  </tr>
</table>

Spróbuj sam!

przykład 10

Jak zdefiniować komórkę tabeli przechodzącą 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
abbr tekst Zdefiniować skróconą wersję treści komórki tytułowej.
colspan liczba Zdefiniować liczbę kolumn, które ma obejmować komórka tytułowa.
headers header_id Zdefiniować jedną lub kilka komórek tytułowych związanych z komórką.
rowspan liczba Zdefiniować liczbę wierszy, które ma obejmować komórka tytułowa.
scope
  • col
  • colgroup
  • row
  • rowgroup
 Komórka nagłówkowa to nagłówek kolumny, wiersza, czy grupa nagłówków kolumn lub wierszy.

Globalne atrybuty

<th> Znacznik obsługuje również Globalne atrybuty HTML.

Atrybuty wydarzeń

<th> Znacznik obsługuje również Atrybuty wydarzeń w HTML.

Domyślne ustawienia CSS

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

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

Obsługa przeglądarek

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