Tag <table> HTML

Definicja i użycie

<table> Tagi definiują HTML-tabele.

Tabela HTML składa się z jednego <table> element i jeden lub więcej <tr>,<th> i <td> Składniki:

Tabela HTML może zawierać również następujące elementy:

Zobacz również:

Kurs HTML:Tabela HTML

Podręcznik referencyjny HTML DOM:Obiekt Tabela

Kurs CSS:Ustawianie stylu tabeli

Przykład

Przykład 1

Prosta tabela HTML, zawierająca dwie kolumny i dwie wiersze:

<table>
  <tr>
    <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 2

Jak dodać złożone krawędzie do tabeli (używając CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<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>
</body>
</html>

Spróbuj sam

Przykład 3

Jak wyprostować tabelę na prawo (używając CSS):

<table style="float:right">
  <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 4

Jak wyśrodkować tabelę (używając CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table.center {
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<table class="center">
  <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 5

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

<table style="background-color:#00FF00">
  <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 6

Jak dodać wewnętrzną margines do tabeli (używając CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
th, td {
  padding: 10px;
}
</style>
</head>
<body>
<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>
</body>
</html>

Spróbuj sam

Przykład 7

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

<table style="width:400px">
  <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 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łó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 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

Globalne atrybuty

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

Atrybuty wydarzeń

<table> Tagi te również wspierają 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 <table> Element:

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

Spróbuj sam

Obsługa przeglądarek

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