CSS => tabeller

Syntax

tabell-layout: auto | fast;
gräns-kollaps: separat | kollaps;
gränsavstånd: <längd> | <längd> <längd>;
tomma celler: visa | Dölj;
bildtext: topp | botten;

Anmärkningar

Dessa egenskaper gäller både <table> -element (*) och HTML-element som visas som display: table eller display: inline-table

(*) <table> -element är uppenbarligen inbyggda av UA / webbläsare som display: table

HTML-tabeller är semantiskt giltiga för tabelldata. Det rekommenderas inte att använda tabeller för layout. Använd istället CSS.

tabell-layout

Egenskapen för table-layout ändrar algoritmen som används för en tabells layout.

Nedanför ett exempel på två tabeller som båda är inställda på width: 150px :

Tabellen till vänster har table-layout: auto medan den till höger har table-layout: fixed . Den förstnämnda är bredare än den angivna bredden (210px istället för 150px) men innehållet passar. Den senare tar den definierade bredden 150px, oavsett om innehållet flyter över eller inte.

Värde	Beskrivning
bil	Detta är standardvärdet. Den definierar layouten på tabellen som ska bestämmas av innehållet i dess celler.
fast	Detta värde ställer in tabelllayouten som ska bestämmas av breddegenskapen som tillhandahålls till tabellen. Om innehållet i en cell överstiger denna bredd kommer cellen inte att ändra storlek utan istället låta innehållet flyta över.

border-kollaps

Egenskapen border-collapse avgör om tabellernas gränser ska separeras eller slås samman.

Nedanför ett exempel på två tabeller med olika värden för egenskapen border-collapse :

Tabellen till vänster har border-collapse: separate medan den till höger har border-collapse: collapse .

Värde	Beskrivning
separat	Detta är standardvärdet. Det gör bordets gränser åtskilda från varandra.
kollaps	Detta värde sätter bordets gränser att smälta samman, snarare än att vara distinkta.

border-avstånd

Egenskapen border-spacing bestämmer avståndet mellan celler. Detta har ingen effekt om border-collapse är inställd på att separate .

Nedanför ett exempel på två tabeller med olika värden för egenskapen border-spacing :

Tabellen till vänster har border-spacing: 2px (standard) medan den till höger har border-spacing: 8px .

Värde	Beskrivning
<längd>	Detta är standardbeteendet, även om det exakta värdet kan variera mellan webbläsare.
<längd> <längd>	Denna syntax gör det möjligt att specificera separata horisontella respektive vertikala värden.

tömma-celler

Egenskapen med empty-cells avgör om celler utan innehåll ska visas eller inte. Detta har ingen effekt om border-collapse är inställd på att separate .

Nedanför ett exempel med två tabeller med olika värden inställd på empty-cells :

Tabellen till vänster har empty-cells: show medan den till höger har empty-cells: hide . Den förstnämnda visar inte de tomma cellerna medan den senare inte gör det.

Värde	Beskrivning
visa	Detta är standardvärdet. Den visar celler även om de är tomma.
Dölj	Detta värde döljer en cell helt om det inte finns något innehåll i cellen.

Mer information:

bildtext-side

Egenskaperna för caption-side bestämmer den vertikala positioneringen av <caption> -elementet i en tabell. Detta har ingen effekt om ett sådant element inte finns.

Nedanför ett exempel med två tabeller med olika värden inställd på caption-side :

Tabellen till vänster har caption-side: top medan den till höger har caption-side: bottom .

Värde	Beskrivning
topp	Detta är standardvärdet. Den placerar bildtexten ovanför bordet.
botten	Detta värde placerar bildtexten under tabellen.

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

CSS
tabeller

Sök…