CSS
tabeller
Sök…
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:
- https://www.w3.org/TR/CSS21/tables.html#empty-cells
- https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells
- http://codepen.io/SitePoint/pen/yfhtq
- https://css-tricks.com/almanac/properties/e/empty-cells/
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. |