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 border
na
prvcích table
, th
a
: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-radius
vlastností 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-style
vlastnosti můžete nastavit vzhled ohraničení.
Jsou povoleny následující hodnoty:
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
Příklad
th, td {
border-style: dotted;
}
Barva ohraničení
Pomocí border-color
vlastnosti můžete nastavit barvu ohraničení.
Příklad
th, td {
border-color: #96D4D4;
}