Značka HTML <table>


Příklad

Jednoduchá HTML tabulka obsahující dva sloupce a dva řádky:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Další příklady „Vyzkoušejte si to sami“ níže.


Definice a použití

Značka <table>definuje tabulku HTML.

HTML tabulka se skládá z jednoho <table>prvku a jednoho nebo více prvků <tr> , <th> a <td> .

Element <tr> definuje řádek tabulky, element <th> definuje záhlaví tabulky a element <td> definuje buňku tabulky.

HTML tabulka může také obsahovat prvky <caption> , <colgroup> , <thead> , <tfoot> a <tbody> .


Podpora prohlížeče

Element
<table> Yes Yes Yes Yes Yes

Globální atributy

Značka <table>také podporuje globální atributy v HTML .


Atributy události

Značka <table>také podporuje atributy událostí v HTML .



Další příklady

Příklad

Jak přidat sbalené okraje do tabulky (pomocí CSS):

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

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

Příklad

Jak zarovnat tabulku vpravo (pomocí CSS):

<table style="float:right">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Příklad

Jak zarovnat tabulku na střed (pomocí 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>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Příklad

Jak přidat barvu pozadí do tabulky (pomocí CSS):

<table style="background-color:#00FF00">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Příklad

Jak přidat výplň do tabulky (pomocí CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}

th, td {
  padding: 10px;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

Příklad

Jak nastavit šířku tabulky (pomocí CSS):

<table style="width:400px">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Příklad

Jak vytvořit záhlaví tabulky:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
  </tr>
</table>

Příklad

Jak vytvořit tabulku s titulkem:

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Příklad

Jak definovat buňky tabulky, které zahrnují více než jeden řádek nebo jeden sloupec:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
  </tr>
</table>

Související stránky

HTML tutoriál: HTML tabulky

HTML DOM reference: Table Object

Kurz CSS: Styling tabulek


Výchozí nastavení CSS

Většina prohlížečů zobrazí <table>prvek s následujícími výchozími hodnotami:

Příklad

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