Formátování tabulek a CSS
Prakticky všechny ukázky intranetových aplikací na tomto webu používají na některé stránce formátování dat do HTML tabulky. V článku chci uvést některé užitečné tipy pro práci s tabulkami. Nebude to o tabulkách pro layout stránky, pro tento účel se tabulky opravdu nehodí. Naopak tabulky jsou potřebné pro zobrazení dat z databází.
Základ následujícího příkladu tabulky pochází z aplikace údržba. Na příkladu si ukážeme principy nastavení fixní velikosti tabulky, šířky buněk, ohraničení buněk a řádkový kurzor.
| obj. | ze dne | popis práce | požaduje | termín | stav |
|---|---|---|---|---|---|
| 4266 | 11.5.2006 | Prosím o opravu dámského WC v přízemí adm. budovy. Děkuji. |
Chytilová | 12.5.2006 |  hotovo |
| 4265 | 4.5.2006 | Žádám opravu páskovačky-trhá pásky a nepravideně svařuje. |
Válek | 18.5.2006 |  dělá se |
| 4264 | 4.5.2006 | Prosím o výměnu vodovodní baterie v krytu. |
Camfrla | 10.5.2006 | hotovo |
| 4263 | 3.5.2006 | Oprava protipožárních bezpečnostních dveří v krčku. |
Benedíková | 17.5.2006 | dělá se |
| 4262 | 27.4.2006 | Oprava klimatizace v zasedací místnosti zásobování. |
Maňák | 11.5.2006 | hotovo |
Fixní velikost tabulky
Šířka tabulky i jednotlivých sloupců není podstatná pokud zobrazujeme samostatné tabulky. Když budeme listovat stránkami databáze a každá stránka si nastaví šířku sloupců podle aktuálních délek textů, výsledek bude "poskakující" tabulka. Pokusíme se nastavit pevnou šířku tabulky i sloupců tak, aby při stránkování sloupce tabulky zůstaly na místě a měnil se jen jejich obsah. Navíc zkusíme nastavit totožný rozměr tabulky pro všechny běžné browsery.
Pro nastavení šířky sloupců by měly sloužit elementy col, a colgroup. Bohužel IE připočítává šířku border k šířce col, a to i ve standardním módu. Šířka sloupců i celé tabulky pak bude v IE větší než ve FF a Opeře. Proto používám definici šířky sloupců přímo v prvním řádku tabulky, tedy v řádku hlavičky. Aby se uplatnila nastavená šířka sloupců musí být ještě nastaven styl tabulky table-layout: fixed;. Průchodem prvního řádku tabulky se šířka sloupců zafixuje a tabulka bude zobrazena v běžných browserech totožně.
<style type="text/css">
table {
table-layout: fixed;
}
div.CUT {
margin: 0; padding: 0; width: 248px; text-align: left;
overflow: hidden; white-space: nowrap;
}
/* th, td { --- IE only --- */
/* overflow: hidden; white-space: nowrap; text-overflow: ellipsis; */
/* } */
</style>
<body>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th style="width: 36px; border-left: 0;">obj.</th>
<th style="width: 70px;">ze dne</th>
<th style="width:251px;">popis práce</th>
...
</tr>
<tr>
<td class="tdR">4266</td>
<td class="tdR">11.5.2006</td>
<td class="tdL"><div class="CUT">Prosím o opravu dámského WC...</div></td>
...
</table>
</body>
Ořezání dlouhého textu v buňce tabulky
Sebepečlivěji připravená pevná šířka tabulky nám nebude nic platná, když do buňky vložíme text delší než je šířka buňky. Pak se šířka, nebo výška buňky zvětší tak, aby byl zobrazen celý text. Pro čísla a datumy lze dopředu určit potřebnou šířku buňky, v případě obecných textů to možné není a takové texty musíme ořezat.
Abychom dosáhli univerálního řešení ořezání textu, umístíme do buňky td element div s připravenou třídou .CUT Šířka této třídy musí být menší nebo rovná šířce buňky minus její padding. Vlastnost overflow: hidden; zajistí skrytí přebývajícího textu a vlastnost white-space: nowrap; zamezí zalomení textu do řádků. V ukázce je toto ořezání vidět ve sloupci popis práce.
Ořezání textu je velmi hezky vyřešeno v IE (viz listing CSS kódu). Potřebné CSS vlastnosti nastavíme přímo pro prvky tabulky th, td a pomocný tág div můžeme vynechat. Vlastnost text-overflow: ellipsis; v kombinaci s ořezáním zobrazí tři tečky napovídající, že text pokračuje, navíc ořezání je na hranici písmene. Výsledný text vypadá velmi přirozeně.
Podobně se bude chovat i Opera, ale vyžaduje specifický prefix vlastnosti: -o-text-overflow: ellipsis;. Takové řešení zdaleka není ideální, protože chybová konzole prohlížečů bude hlásit chybu v CSS kódu vždy pro kód jiný než vlastní. Následuje živá ukázka ořezání textu ve Vašem aktuálním browseru.
<div style="width: 580px; border: 1px solid #aaa; background: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis;" > Ukázka ořezání textu s doplněním znaku ellipsis na konci. Funguje v IE, Opera a Safari. Ve FF je text ořezán, ellipsis chybí. </div>
Pro omezení šířky dlouhého textu je možné použít i formulářový prvek input type="text" s parametrem readonly, který umístíme do buňky tabulky a nastavíme mu požadovanou šířku. Výhodou je možnost zobrazení skryté části textu posouváním kurzorovými klávesami. Formulářové prvky ale nejsou navrženy pro takové použití a tento způsob se mi nezdá příliš čistý.
Ohraničení tabulky
Nejlepší ohraničení tabulky je žádné (bez mřížky). S tím nemusí souhlasit všichni Vaši uživatelé a tak někdy potřebujeme vytvořit tabulku s mřížkou. Můžete zkusit tenké, světlé ohraničení buněk, tak jak je naznačeno v ukázce.
<style type="text/css">
table {
border: 0;
border-left: 1px solid #aaa;
border-top: 1px solid #aaa;
}
th, .tdL, .tdR {
text-align: center;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}
th {
background: url(/at/files/bg_table.png);
border-left: 1px solid #cff;
border-right: 1px solid #358;
}
.tdL {text-align: left; padding-left: 4px;}
.tdR {text-align: right; padding-right: 4px;}
}
</style>
Všechny okraje tabulky i buněk nastavíme na nulu, potom nastavíme jen požadované okraje. Pro tabulku nastavíme okraje levý a horní. Pro každou buňku pak okraje pravý a dolní. Buňky hlavičky tabulky th jsou zde vyplněny obrázkem na pozadí. Pro buňky těla tabulky td definujeme dvě třídy: .tdL pro zarovnání textu vlevo a .tdR pro zarovnání čísel a datumů vpravo. Pozor na atribut tabulky cellspacing="0", ten musíme nastavit na nulu, jinak bude mřížka rozhozená.
Na obrázku je buňka tabulky s barevnými okraji šířky 1 pixel zvětšená 6x tak, aby byla vidět návaznost okrajů v různých prohlížečích. Při experimentování s tímto typem rámečků mějte na paměti, že okraje které nejsou kresleny musí mít nastavenu šířku okraje na nulu. Poslední buňka na obrázku má okraj 6 pixelů, je zde jen pro ilustraci jak se rendrují okraje širší než 1 pixel.
Jiný způsob jak dosáhnout rámování šířky 1 pixel je nastavit atribut tabulky cellspacing="1px" a současně nastavit šedé pozadí tabulky. Jednotlivé buňky th a td mají nastaven okraj border="0" a bílou barvu pozadí. Renderování takové tabulky je pomalejší. Tento způsob je použit pro formulář v následujícím článku.
Řádkový kurzor
Možná jste zaregistrovali změnu barvy pozadí řádku tabulky při přejíždění myší přes ukázkovou tabulku. Je to velmi užitečná pomůcka při širokých tabulkách. Implementace řádkového kurzoru v browserech IE7, FF, Opera je velmi primitivní, nevyžaduje nic víc něž definici v CSS sekci: tr:hover {background: #...}.
<style type="text/css">
.normRow {background: #fff;}
.cursRow {background: #eef;}
/* tr:hover {background: #eef;} */
</style>
<script type="text/javascript">
function rowOn(row) {
row.className="cursRow";
}
function rowOff(row) {
row.className="normRow";
}
</script>
<body>
<table>
<tr onmouseover="rowOn(this)" onmouseout="rowOff(this)">
<td class="tdR">4266</td>
...
</tr>
...
</table>
</body>
Abychom stejného efektu dosáhli i v IE6 budeme potřebovat dvě CSS třídy (.normRow a .cursRow) a dvě funkce v javascriptu. V každém řádku tabulky musíme navázat dvě události onmouseover a onmouseout od pohybu myši, tak jak je ve výpisu kódu.
updated 8.02.2007