CSS => tabellen

Syntaxis

tabelindeling: auto | gemaakt;
border-collapse: scheiden | ineenstorting;
border-spacing: <lengte> | <lengte> <lengte>;
lege cellen: show | verbergen;
bijschrift-zijde: top | bodem;

Opmerkingen

Deze eigenschappen zijn van toepassing op zowel <table> -elementen (*) als HTML-elementen die worden weergegeven als display: table of display: inline-table

(*) <table> -elementen worden uiteraard weergegeven door UA / browsers als display: table

HTML-tabellen zijn semantisch geldig voor tabelgegevens. Het wordt afgeraden om tabellen te gebruiken voor de lay-out. Gebruik in plaats daarvan CSS.

table-layout

De eigenschap table-layout wijzigt het algoritme dat wordt gebruikt voor de indeling van een tabel.

Hieronder een voorbeeld van twee tabellen die beide op width: 150px :

De tabel links heeft een table-layout: auto terwijl de table-layout: fixed rechts een table-layout: fixed . De eerste is breder dan de opgegeven breedte (210 px in plaats van 150 px), maar de inhoud past. De laatste neemt de gedefinieerde breedte van 150 px, ongeacht of de inhoud overloopt of niet.

Waarde	Beschrijving
auto	Dit is de standaardwaarde. Het definieert de lay-out van de tabel die moet worden bepaald door de inhoud van de cellen.
gemaakt	Met deze waarde wordt de tabellay-out bepaald door de eigenschap width aan de tabel. Als de inhoud van een cel deze breedte overschrijdt, wordt de grootte van de cel niet gewijzigd, maar laat u de inhoud overlopen.

border-collapse

De border-collapse eigenschap bepaalt of de randen van een tabel moeten worden gescheiden of samengevoegd.

Hieronder een voorbeeld van twee tabellen met verschillende waarden voor de eigenschap border-collapse :

De tabel links heeft border-collapse: separate terwijl de tabel rechts border-collapse: collapse .

Waarde	Beschrijving
scheiden	Dit is de standaardwaarde. Het maakt de randen van de tabel gescheiden van elkaar.
ineenstorting	Met deze waarde worden de randen van de tabel samengevoegd in plaats van dat ze afzonderlijk zijn.

border-spacing

De eigenschap border-spacing bepaalt de afstand tussen cellen. Dit heeft geen effect tenzij border-collapse is ingesteld om te separate .

Hieronder een voorbeeld van twee tabellen met verschillende waarden voor de eigenschap border-spacing :

De tabel aan de linkerzijde heeft border-spacing: 2px (standaard), terwijl de een aan de rechterkant heeft border-spacing: 8px .

Waarde	Beschrijving
<Lengte>	Dit is het standaardgedrag, hoewel de exacte waarde tussen browsers kan variëren.
<lengte> <lengte>	Met deze syntaxis kunt u afzonderlijke horizontale en verticale waarden opgeven.

leeg-cellen

De eigenschap empty-cells bepaalt of cellen zonder inhoud moeten worden weergegeven of niet. Dit heeft geen effect tenzij border-collapse is ingesteld om te separate .

Hieronder een voorbeeld met twee tabellen met verschillende waarden ingesteld op de eigenschap empty-cells :

De tabel links heeft empty-cells: show terwijl de tabel rechts empty-cells: hide . De eerste geeft de lege cellen weer, de tweede niet.

Waarde	Beschrijving
tonen	Dit is de standaardwaarde. Het toont cellen zelfs als ze leeg zijn.
verbergen	Deze waarde verbergt een cel helemaal als er geen inhoud in de cel is.

Meer informatie:

bijschrift-side

De eigenschap caption-side bepaalt de verticale positionering van het element <caption> in een tabel. Dit heeft geen effect als een dergelijk element niet bestaat.

Hieronder een voorbeeld met twee tabellen met verschillende waarden ingesteld op de eigenschap caption-side :

De tabel aan de linkerkant heeft de caption-side: top terwijl de tabel rechts de titelzijde heeft caption-side: bottom .

Waarde	Beschrijving
top	Dit is de standaardwaarde. Het plaatst het bijschrift boven de tafel.
bodem	Deze waarde plaatst het bijschrift onder de tabel.

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

CSS
tabellen

Zoeken…