Ohraničení tabulky HTML
Tabulky HTML mohou mít ohraničení různých stylů a tvarů.
Jak přidat ohraničení
Když přidáte ohraničení do tabulky, přidáte také ohraničení kolem každé buňky tabulky:
Chcete-li přidat ohraničení, použijte vlastnost CSS borderna
prvcích table, tha
:td
Příklad
table, th, td
{
border: 1px solid black;
}
Sbalené okraje stolu
Chcete-li se vyhnout dvojitému ohraničení jako ve výše uvedeném příkladu, nastavte vlastnost CSS border-collapse
na collapse.
Tím se hranice zhroutí do jediné hranice:
Příklad
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Styl ohraničení stolu
Pokud nastavíte barvu pozadí každé buňky a dáte ohraničení bílou barvu (stejnou jako pozadí dokumentu), získáte dojem neviditelného ohraničení:
Příklad
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Hranice kulatého stolu
S touto border-radiusvlastností mají okraje zaoblené rohy:
Příklad
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
Přeskočte ohraničení tabulky tím, tableže vynecháte selektor css:
Příklad
th, td {
border: 1px solid
black;
border-radius: 10px;
}
Tečkované okraje stolu
Pomocí border-stylevlastnosti můžete nastavit vzhled ohraničení.
Jsou povoleny následující hodnoty:
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
Příklad
th, td {
border-style: dotted;
}
Barva ohraničení
Pomocí border-colorvlastnosti můžete nastavit barvu ohraničení.
Příklad
th, td {
border-color: #96D4D4;
}