Přehledně se zaměříme na to, jak pracovat s výškou buňky <td> a textem uvnitř ní, bez nežádoucího zalamování, a jaké techniky použít pro konzistentní vzhled tabulek napříč prohlížeči. Probereme jednotky, vlastnosti a praktické postupy, včetně řešení s vysokou a nízkou výškou řádků.
Základní jednotky a jejich vztah k velikosti písma
Jednotky pro velikost textu v CSS zahrnují pixely (px) a jednotky relativní k velikosti písma rodiče, především em. Em se rovná aktuální velikosti písma a prohlížeč obvykle používá výchozí 16px, takže 1em = 16px na základě aktuálního kontextu. Přijetí em dle doporučení W3C znamená, že vzorec pro převod z pixelů na emy lze vyjádřit jako em = pixel / 16.
V praxi jsme si vytvořili dvě třídy s rozdílnou velikostí textu a zaměříme se na jejich použití pro nastavení různých stylů písma a kurzívy. Vlastnost font-family a color často spolupracují s height a line-height při definování vzhledu textu uvnitř <td>.
Kurzíva, text-transform a line-height
Dalšími důležitými vlastnostmi jsou:
- font-style pro kurzívu (např. italic), případně oblique pro šikmé písmo.
- text-transform pro převod textu na velká písmena, malé písmena či každé slovo na začátek velkým písmenem.
- line-height určuje výšku řádku textu; syntaxe je podobná jako u ostatních uvedených vlastností. Uvnitř tabulky je line-height měřítkem výšky řádku, nikoli celkové výšky buňky.
V ukázkách často uvádíme <p>Lorem ipsum...</p> a varianty s třídou .line-height pro demonstraci rozestupů mezi řádky. Žádoucí je udržet line-height konzistentní a nepřekračovat výšku buňky, pokud to není cílené záměrně.
Řešení problémů s výškou buňky a zalamováním textu
Pokud chceme, aby text v buňce neex Společnostem zalamoval nechtěně, můžeme použít:
- práci s white-space (např. white-space: nowrap; pro zabránění zalomení na více řádcích),
- zvýšení kontextu tak, aby text nepřekračoval výšku buňky,
- či nastavení výšky buňky přes kombinaci height, min-height a max-height s appropriate overflow.
Pro tabulky je často užitečné specifikovat výšku jednotlivých řádků nebo celkové výšky buňky. Příznivý efekt má kombinace line-height a height na buňku, a to zejména u víceřádkových dat.
Praktické postupy a ukázky
Jednotkové a styly pro text uvnitř tabulky lze demonstrovat následovně:
HTML úryvek (zjednodušený):
<table> <tr> <td style="height: 60px; line-height: 20px;">Krátký text</td> </tr> <tr> <td class="tall" style="white-space: nowrap;">Dlouhý text bez zalomení</td> </tr></table>
Vzor CSS pro kontrolu výšky a zalomení:
td { font-family: Arial, sans-serif; color: #333; }td.tall { height: 40px; line-height: 40px; white-space: nowrap; }td.small { font-size: 0.875em; line-height: 1.2; }td.medium { font-size: 1em; line-height: 1.4; }Tabulky a podporované techniky v různých prohlížečích
Edge/Internet Explorer a další prohlížeče někdy vyžadují specifické postupy kvůli interpretaci box modelu a výšky řádků. Pro zajištění konzistence je vhodné:
- zachovat box-sizing v rámci tabulek (např. box-sizing: border-box;),
- pracovat s height a line-height pro soulad výšky řádků i buňky,
- testovat vizuál napříč prohlížeči a používat fallbacky pro starší verze.
V praxi se často řeší, jak dosáhnout, aby tabulka vyplnila celou výšku stránky (height: 100%) a zajistila konstantní vizuál bez ohledu na obsah. V takových situacích se hodí shrnout, že tabulka může mít 100% výšku a obsah buňky se přizpůsobí, pokud použijeme vhodný box model a overflow nastavení.
Praktické poznámky k vloženým videím a obrázkům
V článku lze vizuálně doplnit infografikami a ukázkami kódu. Následující tagy slouží pro vložení multimédií na vhodná místa bez narušení textu:
Vkládání obrázků:
Vkládání videa:
Line Height CSS: Cara Mengatur Spasi Antar Baris Teks (Pemula)
Pokud bude vhodné, může následovat tabulka s daty ukazujícími konkrétní výšky řádků a jejich vliv na čitelnost tabulky.
Praktické tipy pro tvorbu robustních tabulek
- Používejte jednotky em a px pro flexibilitu a konzistenci, zejména při responsivním designu.
- Nastavte line-height na vhodné hodnoty, aby text nebyl buď přeplněný, nebo naopak příliš roztáhnutý.
- Aplikujte white-space: nowrap jen na text, který skutečně nechceme zalomit, jinak umožněte smysluplné zalování.
- Otestujte chování tabulky v různých prohlížečích a s různými daty, včetně více řádků a delších textů.
- Uvažujte o overflow: auto pro dynamické obsahy buňky, pokud je potřeba zobrazit obsah uvnitř buňky scrollováním bez změny výšky tabulky.
Krátký technický souhrn
Vlastnosti pro práci s výškou textu v tabulkách zahrnují height, line-height, font-size, font-family, color, text-transform a volitelně white-space. Kombinace těchto vlastností umožňuje zajistit, že text v <td> nebude nežádoucím způsobem zalamován, a že vizuální rozložení tabulky bude konzistentní napříč prohlížeči a zařízeními.
tags: #td #height #bez #zalamovani