CSS / Tabele
Obramowanie {BORDER-COLLAPSE}
Jak dodać efektowne obramowanie tabeli i jej komórek? Jak wprowadzić nowy, estetyczny model obramowania w tabeli za pomocą pojedynczych linii?
Model obramowania
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).
UWAGA! MSIE 4 oraz Netscape 6 nie interpretują tego polecenia. W MSIE 5 mogą wystąpić pewne trudności przy przewijaniu tabeli z modelem collapse (czasem znikają linie obramowania). Natomiast w MSIE 6, Netscape 7 oraz Operze 6 wszystko jest w porządku.
Poza tym Opera 7 w przypadku collapse całkowicie ukrywa obramowanie poszczegółnych komórek tabeli (można je pokazać określając obramowanie przy użyciu selektora TD).
Przykład:
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
Do tabel (<table>...</table>) oraz ich komórek (<td>...</td>
) można stosować wszystkie parametry dotyczące obramowania.
Przykład:
komórka1 | komórka2 |
komórka3 | komórka4 |
komórka1 | komórka2 |
komórka3 | <td style="border: 3mm ridge yellow"> |