Tabele - CSS
Obramowanie tabeli {border-collapse, border}
Jak dodać efektowne obramowanie tabeli i jej komórek? Jak wprowadzić nowy, estetyczny model obramowania w tabeli za pomocą pojedynczych linii?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 4, Safari 1.2)
Model obramowania tabeli {border-collapse}
selektor { border-collapse: model }Natomiast jako "model" należy podać:
- collapse - pojedyncze obramowanie
- separate - komórki są od siebie odseparowane
Polecenie określa model wyświetlania obramowania tabeli pomiędzy komórkami. Możliwe jest użycie obramowania w postaci pojedynczej linii (collapse) albo obramowania dla każdej komórki osobno, które będą od siebie odseparowane (separate).
Przykład {border-collapse}
| komórka1 | komórka2 | komórka3 |
| komórka4 | komórka5 | komórka6 |
| komórka7 | komórka8 | komórka9 |
| komórka1 | komórka2 | komórka3 |
| komórka4 | komórka5 | komórka4 |
| komórka7 | komórka8 | komórka9 |
Styl, szerokość i kolor obramowania tabeli {border}
Do tabel (<table>...</table>) oraz ich komórek (<td>...</td>) można stosować wszystkie parametry dotyczące obramowania.
Przykład {border}
| komórka1 | komórka2 |
| komórka3 | komórka4 |
| komórka1 | komórka2 |
| komórka3 | <td style="border: 3mm ridge yellow"> |
Pytania i odpowiedzi {border, border-collapse}
Jak dodać obramowanie do tabeli CSS?
Aby dodać obramowanie do tabeli w CSS, użyj właściwości border na selektorze tabeli lub jej komórek. Na przykład, aby dodać obramowanie do wszystkich komórek tabeli: table { border: 1px solid black }. Możesz dostosować grubość, kolor i styl obramowania według własnych preferencji.
Co robi "border-collapse"?
W CSS, właściwość border-collapse jest używana do określenia, czy obramowania komórek w tabeli mają się stykać, czy zachować odstęp między sobą. Wartość collapse powoduje, że obramowania komórek są zlepione razem, eliminując odstępy między nimi, podczas gdy wartość separate zachowuje odstępy między obramowaniami komórek.