Obramowania tabeli HTML
Tabele HTML mogą mieć obramowania o różnych stylach i kształtach.
Jak dodać obramowanie
Dodając obramowanie do tabeli, dodajesz również obramowanie wokół każdej komórki tabeli:
Aby dodać obramowanie, użyj border
właściwości CSS na
elementach table
, th
i
:td
Przykład
table, th, td
{
border: 1px solid black;
}
Zwinięte obramowania stołu
Aby uniknąć podwójnych obramowań, jak w powyższym przykładzie, ustaw border-collapse
właściwość CSS na collapse
.
To sprawi, że granice zapadną się w jedną granicę:
Przykład
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Style obramowań tabeli
Jeśli ustawisz kolor tła każdej komórki i nadasz obramowaniu biały kolor (taki sam jak tło dokumentu), odniesiesz wrażenie niewidzialnego obramowania:
Przykład
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Obramowania okrągłego stołu
Z border-radius
nieruchomością granice zyskują zaokrąglone rogi:
Przykład
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
Pomiń ramkę wokół stołu, opuszczając table
selektor CSS:
Przykład
th, td {
border: 1px solid
black;
border-radius: 10px;
}
Kropkowane obramowania stołu
Za pomocą border-style
właściwości można ustawić wygląd granicy.
Dozwolone są następujące wartości:
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
Przykład
th, td {
border-style: dotted;
}
Kolor ramki
Za pomocą border-color
właściwości możesz ustawić kolor obramowania.
Przykład
th, td {
border-color: #96D4D4;
}