HTML tahák

HTML table

HTML tabulky můžeme přizpůsobit pomocí CSS jako v kódu níže. Tabulku definujeme pomocí tagu <table>, přičemž důležité jsou také tagy <tr> (řádek tabulky) a tag <th> (sloupec tabulky).

HTML tabulka

Služby	Kontakt	Země
SEO	Smuton.cz	CZ
Tvorba webů	Smuton.cz	CZ
Tvorba e-shopů	Smuton.cz	CZ
Reklama na Facebooku	Smuton.cz	CZ
Reklama na Instagramu	Smuton.cz	CZ
SEO copywriting	Smuton.cz	CZ

<head>
<style> /*stylování tabulky provádět mezi tagy <style>*/
table {
  font-family: arial, sans-serif; /*Nastavení fontu*/
  border-collapse: collapse; /*Nastavení dvojitého rámečku na jednoduchý*/
  width: 100%; /*Nastavení šířky tabulky*/
}

td, th {
  border: 3px solid #343435; /*Nastavení rámečku*/
  text-align: center; /*Zarovnání textu v tabulce*/
  padding: 10px; /*Šířka vnitřního okraje*/
}

tr:nth-child(even) { 
  background-color: #b85151; /*Barva pozadí každého druhého řádku. Tmavě červená.*/
  color: white; /*Barva textu každého druhého řádku*/
}

tr:nth-child(odd) { 
 background-color: #E88E8E; /*Barva pozadí. Světle červená.*/
 color: #343435;
}

th {
  background-color: #343435; /*Barva hlavičky tabulky tagu <th>.*/
  color: white;
}
</style>
</head>
<body>

<h2>HTML tabulka</h2>

<table> <!--Začátek tabulky-->
  <tr> <!--První řádek tabulky-->
    <th>Služby</th> <!--První sloupec-->
    <th>Kontakt</th> <!--Druhý sloupec-->
    <th>Země</th> <!--Třetí sloupec-->
  </tr>
  <tr>
    <td>SEO</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
  <tr>
    <td>Tvorba webů</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
  <tr>
    <td>Tvorba e-shopů</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
  <tr>
    <td>Reklama na Facebooku</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
  <tr>
    <td>Reklama na Instagramu</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
  <tr>
    <td>SEO copywriting</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
</table>

Jednoduchá tabulka bez stylů.

<table>
  <tr>
    <th>Služby</th>
    <th>Kontakt</th>
    <th>Země</th>
  </tr>
  <tr>
    <td>SEO</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
  <tr>
    <td>Tvorba webů</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
  <tr>
    <td>Tvorba e-shopů</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
</table>

Jednoduchá tabulka s nastavením šířky.

<table style="width:50%">
  <tr>
    <th>Služby</th>
    <th>Kontakt</th>
    <th>Země</th>
  </tr>
  <tr>
    <td>SEO</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
  <tr>
    <td>Tvorba webů</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
  <tr>
    <td>Tvorba e-shopů</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
</table>

Mezera mezi okraji rámečku přidáním stylu "border-spacing: 15px"

<head>
<style>
table, th, td {
  border: 3px solid #B85151;
  border-spacing: 15px; /*Nastavení mezery mezi okraji rámečku*/
}
th, td {
  padding: 15px;
  text-align: center;
}
</style>
</head>

<body>
<h2>Mezera mezi okraji rámečku</h2>

<table style="width:100%">
  <tr>
    <th>Služby</th>
    <th>Kontakt</th>
    <th>Země</th>
  </tr>
  <tr>
    <td>SEO</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
</table>
</body>

Sloučení buněk v rámci řádku.

<head>
<style>
table, th, td {
  border: 3px solid #B85151;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: center;    
}
</style>
</head>

<body>
<h2>V prvním řádku sloupec sloučil dvě buňky</h2>
<p>To lze vytvořit pomocí "colspan" uvnitř tagu < th >.<p>

<table style="width:100%">
  <tr>
    <th>Služby</th>
    <th colspan="2">Telephone</th> <!--Číslo dva určuje, kolik buněk bude v tabulce sloučeno.-->
  </tr>
  <tr>
    <td>SEO</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
</table>
</body>

Sloučit buňky lze i v rámci sloupce.

<head>
<style>
table, th, td {
  border: 3px solid #B85151;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: center;    
}
</style>
</head>

<body>
<h2>V prvním sloupci jsou sloučeny dvě buňky</h2>
<p>To lze vytvořit pomocí "rowspan" uvnitř tagu < td >.<p>

<table style="width:100%">
  <tr>
    <th>Obor</th>
    <th>Služby</th>
    <th>Kontakt</th>
  </tr>
  <tr>
    <td rowspan="2">SEO</td> <!--Číslo dva určuje, kolik buněk bude v tabulce sloučeno. 2=následující dvě buňky budou sloučeny.-->
    <td>Analýza klíčových slov</td>
    <td>SEO copywriting</td>
  </tr>
  <tr>
    <td>Smuton.cz</td>
    <td>Smuton.cz</td>
  </tr>
</table>
</body>

K tabulce můžeme přidat titulek pomocí tagu <caption>.

<head>
<style>
table, th, td {
  border: 3px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Nadpis H1</h1>
<p>Pokud chceme přidat titulek k tabulce, použijeme tag < caption >.</p>

<table style="width:100%">
  <caption>Titulek tabulky</caption>
  <tr>
    <th>Služby</th>
    <th>Kontakt</th>
    <th>Země</th>
  </tr>
  <tr>
    <td>SEO</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
  <tr>
    <td>Tvorba webů</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
  <tr>
    <td>Tvorba e-shopů</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
</table>
</body>

Pokud je na stránce více tabulek, ale chceme stylovat pouze jednu konkrétní, použijeme identifikaci tabulky pomocí atributu "id".

<head>
<style>
table, th, td {
  border: 2px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
  text-align: left;
}
#tabulka01 { /*Stylování konkrétní tabulky pomocí ID*/
  width: 100%;    
  background-color: #81D9C1;
  border: 8px solid #0A5493;
}
</style>
</head>
<body>

<h2>Stylování konkrétní tabulky</h2>

<table style="width:100%">
  <tr>
    <th>Služby</th>
    <th>Kontakt</th>
    <th>Země</th>
  </tr>
  <tr>
    <td>SEO</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
</table>
<br>

<table id="tabulka01"> <!--Tabulka se specifickým stylováním.-->
  <tr>
    <th>Služby</th>
    <th>Kontakt</th>
    <th>Země</th>
  </tr>
  <tr>
    <td>SEO</td>
    <td>Smuton.cz</td>
    <td>CZ</td>
  </tr>
</table>
</body>

Hodnocení

HTML tahák

HTML table

HTML tabulka

MOHLO BY VÁS ZAJÍMAT:

HTML tahák