CSS => Stoły

Składnia

układ tabeli: auto | naprawiony;
zwinięcie granicy: osobne | zawalić się;
odstępy między krawędziami: <długość> | <długość> <długość>;
puste komórki: pokaż | ukryć;
podpis: u góry | Dolny;

Uwagi

Te właściwości dotyczą zarówno elementów <table> (*), jak i elementów HTML wyświetlanych jako display: table lub display: inline-table

(*) Elementy <table> są oczywiście natywnie stylizowane przez UA / przeglądarki jako display: table

Tabele HTML są semantycznie poprawne dla danych tabelarycznych. Nie zaleca się używania tabel do układu. Zamiast tego użyj CSS.

układ stołu

Właściwość table-layout zmienia algorytm używany do układu tabeli.

Poniżej przykład dwóch tabel ustawionych na width: 150px :

Tabela po lewej ma table-layout: auto a ta po prawej ma table-layout: fixed . Ten pierwszy jest szerszy niż określona szerokość (210 pikseli zamiast 150 pikseli), ale zawartość pasuje. Ta ostatnia ma zdefiniowaną szerokość 150 pikseli, niezależnie od tego, czy zawartość się przepełnia, czy nie.

Wartość	Opis
automatyczny	To jest wartość domyślna. Określa układ tabeli, który ma być określony przez zawartość jego komórek.
naprawiony	Ta wartość określa układ tabeli, który ma być określony przez właściwość width dostarczoną do tabeli. Jeśli zawartość komórki przekroczy tę szerokość, komórka nie zmieni rozmiaru, ale zamiast tego pozwoli przepełnić zawartość.

zawalenie się granicy

Właściwość border-collapse określa, czy granice tabel powinny być oddzielone, czy scalone.

Poniżej przykład dwóch tabel o różnych wartościach do właściwości border-collapse :

Tabela po lewej stronie ma border-collapse: separate a tabela po prawej stronie ma border-collapse: separate border-collapse: collapse .

Wartość	Opis
oddzielny	To jest wartość domyślna. To sprawia, że granice tabeli oddzielają się od siebie.
zawalić się	Ta wartość określa, że granice tabeli łączą się ze sobą, a nie są odrębne.

odstępy między krawędziami

Właściwość border-spacing określa odstępy między komórkami. Nie ma to żadnego efektu, chyba że border-collapse jest ustawione na separate .

Poniżej przykład dwóch tabel o różnych wartościach do właściwości border-spacing :

Tabela po lewej ma border-spacing: 2px (domyślnie), a tabela po prawej stronie ma border-spacing: 2px border-spacing: 8px .

Wartość	Opis
<długość>	Jest to zachowanie domyślne, chociaż dokładna wartość może się różnić w różnych przeglądarkach.
<długość> <długość>	Ta składnia umożliwia określenie osobnych wartości odpowiednio poziomej i pionowej.

puste komórki

Właściwość empty-cells określa, czy komórki bez zawartości powinny być wyświetlane, czy nie. Nie ma to żadnego efektu, chyba że border-collapse jest ustawione na separate .

Poniżej przykład z dwiema tabelami z różnymi wartościami ustawionymi na właściwość empty-cells :

Tabela po lewej ma empty-cells: show podczas gdy tabela po prawej ma empty-cells: hide . Pierwsza wyświetla puste komórki, a druga nie.

Wartość	Opis
pokazać	To jest wartość domyślna. Pokazuje komórki, nawet jeśli są puste.
ukryć	Ta wartość całkowicie ukrywa komórkę, jeśli nie ma w niej żadnej zawartości.

Więcej informacji:

podpis

Właściwość po caption-side określa pionowe ustawienie elementu <caption> w tabeli. Nie ma to efektu, jeśli taki element nie istnieje.

Poniżej przykład z dwiema tabelami z różnymi wartościami ustawionymi na właściwość po caption-side :

Tabela po lewej stronie ma caption-side: top a ta po prawej stronie ma caption-side: bottom .

Wartość	Opis
Top	To jest wartość domyślna. Umieszcza podpis nad stołem.
Dolny	Ta wartość umieszcza podpis pod tabelą.

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

CSS
Stoły

Szukaj…