Výchozí tabulky HTML vypadají dost neohroženě – oživte je dobře vypadajícími efekty CSS.
Přidání tabulky na váš web je užitečný způsob, jak přehledně prezentovat velké množství informací. Tabulky také poskytují efektivní využití prostoru a umožňují snadněji číst a porovnávat složitá data.
Pomocí CSS můžete navrhnout tabulky tak, aby byly vizuálně přitažlivější. Pokud tak učiníte, můžete také zlepšit celkový uživatelský dojem z vašeho webu.
Moderní design jednotlivých řádků a sloupců
Můžete přidat jednoduchý návrh tabulky s jednotlivými řádky a sloupci a bez sloučených buněk. Styl tabulky také zajistí, že vaše webová stránka bude pro uživatele poutavá. Kromě stylingu stolu existují i jiné skvělé HTML efekty a CSS zobrazení rozložení webových stránek můžete přidat na svůj web.
Kód tohoto cvičení si můžete prohlédnout v něm úložiště GitHub.
- Do nového souboru HTML přidejte základní strukturu kódu HTML:
html>
<html>
<hlava>
<titul>Můj jednoduchý stůltitul>
hlava>
<tělo>
tělo>
html> - Uvnitř těla přidejte značky tabulky:
<stůl>
stůl> - Element tabulky HTML by měl obsahovat řádek tabulky značky pro každý řádek v tabulce. Horní řádek se běžně používá pro nadpisy. Použití záhlaví tabulky HTML tagy reprezentující každý sloupec v tabulce:
<tr>
<čt>Záhlaví 1čt>
<čt>Záhlaví 2čt>
<čt>Záhlaví 3čt>
tr> - Přidejte další řádky pod řádek záhlaví. Použití data tabulky HTML tagy pro přidání dat do každé buňky v tabulce:
<tr>
<td>Řádek 1, sloupec 1td>
<td>Řádek 1, sloupec 2td>
<td>Řádek 1, sloupec 3td>
tr>
<tr>
<td>Řádek 2, Sloupec 1td>
<td>Řádek 2, Sloupec 2td>
<td>Řádek 2, sloupec 3td>
tr>
<tr>
<td>Řádek 3, sloupec 1td>
<td>Řádek 3, sloupec 2td>
<td>Řádek 3, sloupec 3td>
tr>
<tr>
<td>Řádek 4, sloupec 1td>
<td>Řádek 4, sloupec 2td>
<td>Řádek 4, sloupec 3td>
tr>
<tr>
<td>Řádek 5, sloupec 1td>
<td>Řádek 5, sloupec 2td>
<td>Řádek 5, sloupec 3td>
tr> - Přidejte značku stylu do značky hlavy. Přidejte do tabulky nějaké obecné styly, jako jsou stíny, zaoblené rohy tabulky, písma a okraje:
<styl>
stůl {
border-kolaps: kolaps;
šířka: 100%;
barva: #333;
rodina písem: Arial, sans-serif;
velikost písma: 14px;
zarovnání textu: vlevo, odjet;
hraniční poloměr: 10px;
přetékat: skrytý;
box-shadow: 0 0 20pxrgba(0, 0, 0, 0.1);
okraj: auto;
margin-top: 50px;
okraj-dole: 50px;
}
styl> - Upravte styl záhlaví tabulky tak, aby měla barvu pozadí a zarovnaný text:
stůlčt {
barva pozadí: #ff9800;
barva: #fff;
tloušťka písma: tučně;
vycpávka: 10px;
textová transformace: velká písmena;
mezery mezi písmeny: 1px;
okraj-top: 1pxpevný#fff;
hranice-dole: 1pxpevný#ccc;
} - Upravte styl řádků tabulky tak, aby se střídaly šedé a bílé barvy a abyste přidali efekt při najetí myší na řádek:
stůltr:n-té dítě (sudé)td {
barva pozadí: #f2f2f2;
}stůltr:vznášet setd {
barva pozadí: #ffedcc;
} - Upravte styl dat uvnitř buněk tabulky:
stůltd {
barva pozadí: #fff;
vycpávka: 10px;
hranice-dole: 1pxpevný#ccc;
tloušťka písma: tučně;
} - Otevřete svůj soubor HTML a zobrazte tabulku ve webovém prohlížeči:
Design Multi-Line Cell Table
Některé tabulky obsahují sloupce se sloučenými řádky do víceřádkové buňky.
- Odeberte všechny aktuální řádky tabulky a ponechte pouze horní s nadpisy:
<stůl>
<tr>
<čt>Záhlaví 1čt>
<čt>Záhlaví 2čt>
<čt>Záhlaví 3čt>
tr>
stůl> - Vytvořte víceřádkovou buňku pomocí atributu rowspan. Tím se buňka rozšíří přes zadaný počet řádků.
Sekce 1
<tr>
<tdrozpětí řádků="2">Víceřádková buňkatd>
<td>Řádek 1, sloupec 2td>
<td>Řádek 1, sloupec 3td>
tr>
<tr>
<td>Řádek 2, Sloupec 2td>
<td>Řádek 2, sloupec 3td>
tr> - Při přidávání dalšího vícebuněčného řádku s jinou hodnotou rozpětí řádků přidejte odpovídající počet řádky tabulky HTML tagy. To má odpovídat výšce nebo počtu řádků, přes které se buňka rozprostírá. Pokud má například buňka rozpětí řádků 3, budete muset přidat tři řádky do ostatních sloupců, aby se tabulka správně zarovnala.
Sekce 2
<tr>
<tdrozpětí řádků="3">Víceřádková buňkatd>
<td>Řádek 3, sloupec 2td>
<td>Řádek 3, sloupec 3td>
tr>
<tr>
<td>Řádek 4, sloupec 2td>
<td>Řádek 4, sloupec 3td>
tr>
<tr>
<td>Řádek 5, sloupec 2td>
<td>Řádek 5, sloupec 3td>
tr> - Otevřete svůj soubor HTML a zobrazte tabulku ve webovém prohlížeči:
Návrh sloučené řádkové tabulky
Podobně jako víceřádkové buňky mohou mít tabulky také řádky, které se slučují do více sloupců.
- Odeberte všechny aktuální řádky tabulky a ponechte pouze horní s nadpisy:
<stůl>
<tr>
<čt>Záhlaví 1čt>
<čt>Záhlaví 2čt>
<čt>Záhlaví 3čt>
tr>
stůl> - Přidejte do tabulky další řádky tabulky. Pomocí atributu colspan sloučte jeden z řádků ve 3 sloupcích:
Sekce 1
<tr>
<tdstyl="barva pozadí: #ffedcc"colspan="3">Q1td>
tr>
<tr>
<td>Řádek 2, Sloupec 1td>
<td>Řádek 2, Sloupec 2td>
<td>Řádek 2, sloupec 3td>
tr>
<tr>
<td>Řádek 3, sloupec 1td>
<td>Řádek 3, sloupec 2td>
<td>Řádek 3, sloupec 3td>
tr>
<tr>
<td>Řádek 4, sloupec 1td>
<td>Řádek 4, sloupec 2td>
<td>Řádek 4, sloupec 3td>
tr> - Přidejte další sloučený řádek, abyste oddělili části tabulky:
Sekce 2
<tr>
<tdstyl="barva pozadí: #ffedcc"colspan="3">Q2td>
tr>
<tr>
<td>Řádek 6, sloupec 1td>
<td>Řádek 6, sloupec 2td>
<td>Řádek 6, sloupec 3td>
tr>
<tr>
<td>Řádek 7, sloupec 1td>
<td>Řádek 7, sloupec 2td>
<td>Řádek 7, sloupec 3td>
tr>
<tr>
<td>Řádek 8, sloupec 1td>
<td>Řádek 8, sloupec 2td>
<td>Řádek 8, sloupec 3td>
tr> - Otevřete svůj soubor HTML a zobrazte tabulku ve webovém prohlížeči:
Využijte atraktivní tabulky a vytěžte ze svých dat maximum
HTML tabulky jsou skvělý způsob, jak zobrazit strukturovaná data na vašem webu. Můžete je upravit pomocí CSS, abyste zlepšili výchozí vzhled. Ujistěte se však, že se nenechte unést a pro rozvržení použijte tabulky – z důvodu usnadnění je ponechejte výhradně pro data.
Vytváření a aktualizace větších tabulek může být pracné, zvláště pokud používáte sloupce a řádky, které se rozkládají. Můžete napsat svůj vlastní kód pro generování značek nebo využít výhod přívětivější syntaxe, jako je Markdown.
