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 borderwłaściwości CSS na
elementach table, thi
: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-radiusnieruchomoś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 tableselektor CSS:
Przykład
th, td {
border: 1px solid
black;
border-radius: 10px;
}
Kropkowane obramowania stołu
Za pomocą border-stylewłaściwości można ustawić wygląd granicy.
Dozwolone są następujące wartości:
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
Przykład
th, td {
border-style: dotted;
}
Kolor ramki
Za pomocą border-colorwłaściwości możesz ustawić kolor obramowania.
Przykład
th, td {
border-color: #96D4D4;
}