CSS tabulky
Vzhled HTML tabulky lze výrazně zlepšit pomocí CSS:
| Společnost | Kontakt | Země |
|---|---|---|
| Alfrédova krabička na krmení | Marii Andersovou | Německo |
| Berglundův supermarket | Christina Berglundová | Švédsko |
| Nákupní centrum Montezuma | Francisco Chang | Mexiko |
| seriózní obchod | Roland Mendel | Rakousko |
| Ostrovní obchodování | Helen Bennett | Spojené království |
| Královské jídlo | Philip Cramer | Německo |
| Smějící se Bacchus Vinné sklepy | Yoshi Tannamuri | Kanada |
| Shromážděné sklady potravin | Giovanni Rovelli | Itálie |
Hranice stolu
Chcete-li určit okraje tabulky v CSS, použijte bordervlastnost.
Níže uvedený příklad specifikuje černý okraj pro prvky <table>, <th> a <td>:
Příklad
table, th, td {
border: 1px solid black;
}
Stůl s plnou šířkou
Výše uvedená tabulka se může v některých případech zdát malá. Pokud potřebujete tabulku, která by měla pokrývat celou obrazovku (celou šířku), přidejte width: 100%do prvku <table>:
Příklad
table {
width: 100%;
}
Dvojité hranice
Všimněte si, že tabulka ve výše uvedených příkladech má dvojité ohraničení. Je to proto, že jak tabulka, tak prvky <th> a <td> mají samostatné ohraničení.
Chcete-li odstranit dvojité okraje, podívejte se na příklad níže.
Sbalit okraje tabulky
Vlastnost border-collapsenastavuje, zda mají být ohraničení tabulky sbaleno do jednoho ohraničení:
Příklad
table
{
border-collapse: collapse;
}
Pokud chcete pouze ohraničení kolem tabulky, zadejte pouze bordervlastnost pro <table>:
Příklad
table
{
border: 1px solid black;
}