Při používání tabulek TABLE se začátečníci v HTML produkci setkají s tím, jak změnit tloušťku hran, protože výchozí nastavení hran v TABLE je velmi silné, i když je to 1px. Proto existují i jiné metody pro vytváření tenkých řádků a zde je metoda použití CSS pro implementaci tenkých čar, která je velmi efektivní a kompatibilní se všemi prohlížeči.
Pokud jednoduše nastavíte okraj pro tabulku tenkých řádků, je obtížné zajistit, že je prohlížeč kompatibilní. Běžnou praxí je využití CSS2 "border-collapse:collapse;" hranice tabulky pro slučování atributů; A nastavte levý a horní okraj pro prvky tabulky a pravý a dolní okraj pro prvky th a td.
HTML:
<table> <tr> <th>Tabulka hlava (řádek 1, sloupec 1)</th> <th>hlava tabulky (řádek 1, sloupec 2)</th> <th>hlava tabulky (řádek 1, sloupec 3)</th> </tr> <tr> <td>data tabulky (řádek 1, sloupec 1)</td> <td>Tabulková data (řádek 1, sloupec 2)</td> <td>Tabulková data (řádek 1, sloupec 3)</td> </tr> <tr> <td>Tabulková data (řádek 2, sloupec 1)</td> <td>Tabulková data (řádek 2, sloupec 2)</td> <td>Tabulková data (řádek 2, sloupec 3)</td> </tr> CSS</table>:
table{border-collapse:collapse; rozestupy mezi hranicemi:0; Levý okraj: 1 px pevný #888; okraj nahoře: 1px pevný #888; Pozadí:#efefef; } th,td{okraj-vpravo:1px solid #888; spodní okraj: 1 px pevný #888; výplně: 5px 15px; } th{font-weight:bold; Pozadí:#ccc; } |