site logo

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 najdete návod jak formátovat pevnou velikost tabulky, jak nastavit jednoduché ohraničení buněk, jak zvýraznit řádek v tabulce, jak oříznout dlouhý text v buňce a zakončit jej znakem výpustka (ellipsis, tři tečky). Zkrácená ukázka následující tabulky pochází z aplikace údržba.

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. 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 je zobrazena samostatná tabulka. Když listujeme v databázi a každá stránka si nastaví šířku sloupců podle aktuálních délek textů, výsledek je "poskakující" tabulka. Cílem je nastavit pevnou šířku tabulky tak, aby při stránkování tabulka zůstala na místě a měnil se jen obsah buněk. Navíc chceme zachovat šířky sloupců tabulky ve všech běžných browserech.

Fixní rozměry tabulky se uplatní při nastavené CSS vlastnosti table-layout: fixed; a při současně nastavené celkové šířce tabulky. Šířka sloupců je nastavena pomocí elementů <col>  ale nelze použít atribut width, protože je nepovinný a v browserech založených na webkitu je ignorován. Musíme použít inline styl, tak jak je doporučeno podle W3C. Šířku posledního sloupce necháme dopočítat browserem.


<table style="table-layout: fixed; width: 580px;">
<col style="width: 36px;">
<col style="width: 70px;">
...
<col style="width: auto">

<tr>
<th>obj.</th>
<th>ze dne</th>
...
</table>

Jiný způsob jak vytvořit pevný layout tabulky s definovanou šířkou sloupců a se stejnými rozměry v různých prohlížečích využívá definice šířky sloupců v prvním řádku tabulky (obvykle v elementech th). Šířka sloupců se pak zafixuje při průchodu prvního řádku. Elementy col  v tomto případě nemůžeme použít.

Při stanovení šířky sloupců se uplatní box model. Browsery s renderovacím jádrem webkit vykreslí šířku th podle tradičního box modelu (border-box), ostatní browsery podle W3C box modelu (content-box). Model musíme sjednotit (viz. sekce CSS pro element th). Z toho je jasné, že tento způsob pevného formátování tabulky bude pracovat jen v moderních browserech které umí zpracovat CSS vlastnost box-sizing.


<style type="text/css">
th {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box; 
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}
</style>

<body>

<table style="table-layout: fixed; width: 580px;">
<tr>
<th style="width: 36px;">obj.</th>
<th style="width: 70px;">ze dne</th>
...
</table>

</body>

Ořezání dlouhého textu v buňce tabulky

Dlouhý text, který je delší něž šířka buňky, browser zalomí do více řádků, dlouhá souvislá slova bez mezery "přetečou" v pevně formátované tabulce mimo buňku. Často stačí zobrazit jen začátek velmi dlouhého textu a zalomení textu do více řádků je nežádoucí. V takovém případě je vhodné text ořezat tak, aby nepřetekl za hranici buňky a zakončit viditelnou část textu znakem ellipsis (výpustka). Je to jeden speciální znak, který vykreslí tři tečky.

Pro element td nastavíme vlastnost white-space: nowrap která zamezí zalomení textu do více řádků a další vlastnost overflow: hidden zajistí skrytí přebývajícího textu. Dále přidáme vlastnost text-overflow: ellipsis která přidá na konec viditelné části textu znak ellipsis a navíc zajistí ořezání textu na hranici písmene.


td {white-space: nowrap; overflow: hidden;
 text-overflow: ellipsis;
 -o-text-overflow: ellipsis;
 -ms-text-overflow: ellipsis;
}

Ořezání textu a zakončení znakem výpustka se podaří ve všech moderních browserech, kromě Firefoxu3, který nemá implementovánu vlastnost text-overflow.  Zde nastane ořezání textu na konci buňky bez ohledu na hranici znaku (viditelná zůstane jen část písmena). Tuto metodu můžeme použít jen pro jednořádkový text, není tedy možné přidat znak ellipsis do víceřádkového textu. Zkrácený text ale nemusí být jen v buňce tabulky, je možné použít element div, který bude mít výše uvedené vlastnosti CSS.

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. Nejjednodušší způsob jak dosáhnout orámování buňek rámečkem šířky 1 pixel je využít vlastnost tabulky border-collapse: collapse se současně nastaveným border: 1px.


table, th, td {border-collapse: collapse; border: 1px solid #ccc;}

Jiný způsob je nastavit cellspacing="1px" a současně nastavit šedé pozadí tabulky. Pak jednotlivé buňky th a td mají nastaven okraj border="0" a bílou barvu pozadí. Můžete také zkusit tenké, světlé ohraničení buněk, tak jak je naznačeno v ukázce tabulky v úvodu tohoto článku.


table  {border: 0; border-left:  1px solid #aaa; border-top:    1px solid #aaa;}
td, th {border: 0; 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;
}

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í a navíc mají levý a pravý okraj, který vytváří pseudo 3D efekt. Pozor na atribut tabulky cellspacing="0", ten musíme nastavit na nulu, jinak bude mřížka rozhozená.

Rámeček okolo prázdné buňky se nezobrazuje. Nastavení stylu table {empty-cells: show;}  zajistí zobrazení rámečku i okolo prázdné buňky. Pro starší browsery (IE6 a IE7), které uvedenou vlastnost neznají je třeba prázdnou buňku naplnit znakem pevná mezera (&nbsp;). HTML entita pro znak pevná mezera komplikuje kopírování obsahu HTML tabulky do Excelu. Přímé vložení znaku s ASCII hodnotou 160 umožní kopírování a také zachová datové typy tabulky, ale znemožní kódování stránky podle utf-8.

rozdíly ve vykreslování rámečku

Pokud potřebujete nastavit různé barvy rámečků, pak se uplatní způsob vykreslování okrajů v browserech a tabulka může vypadat rozdílně. 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. Poslední buňka na obrázku má okraj šířky 6 pixelů, a je zde pro ilustraci jak se rendrují okraje širší než 1 pixel.

Zvýraznění řádku

Možná jste zaregistrovali změnu barvy pozadí řádku tabulky při přejíždění myší přes ukázkovou tabulku. To je jakési ukazovátko ke čtení řádku v širokých tabulkách. Zvýraznění řádku nad kterým se nachází myš je v moderních browserech je velmi jednoduché, nevyžaduje nic víc něž následující CSS kód. Nesmíme ovšem předepsat barvu pozadí, pak se předpis hover neuplatní (to je vidět na prvním řádku th).


<style type="text/css">
tr:hover {background: #eef;}
</style>

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.


<style type="text/css">
.normRow {background: #fff;}
.cursRow {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>

Kopírování obsahu tabulky

Obsah webových tabulek s procesními, technologickými, nebo laboratorními daty (na intranetu zvláště) je někdy potřeba přenést do Excelu a provést specifické úpravy, nebo vytvořit graf pro prezentaci. Je to snadné metodou copy & paste. Obsah celé tabulky označíme a zkopírujeme do schránky, přepneme do Excelu a vložíme pomocí kontextového menu, nebo pomocí Ctrl+V. To je ale možné jen s browsery IE a Opera, které zachovají rozdělení dat do buněk, ostatní browsery vloží obsah celé tabulky do jedné buňky.

Pro uchovávání produkčních dat excelovské tabulky nejsou vhodné. Správné je ukládat data do databáze na server a zobrazení, ukládání dat i navigaci řešit pomocí webové aplikace. Takový způsob je jednoduchý a spolehlivý. Excel je nástroj osobní produktivity, vhodný pro analýzu dat, nikoli nástroj pro sdílení dat.

updated 18.08.2010