Hvordan bruke CSS Skjermegenskaper for Grid utforminger

CSS-skjerm egenskapen kan du sette opp regler for visning som gjør innholdet vises som et rutenett eller som om det var en tabell, når det faktisk materialet er ikke en tabell. Ved hjelp av CSS for å lage et rutenett gir deg kontroll over oppsettet uten å sette noen tabellkoder i HTML. Displayet egenskaper som er knyttet til en tabell-lignende utseende, inkludert hver mulig eiendom og verdi, vil bli beskrevet i denne artikkelen.

Bruksanvisning

1 display: table gjør elementet oppfører seg som en tabell element. Hvis du reir rader eller kolonner med rutenett innenfor dette elementet, bør du bruke en eller flere av de egenskapene som er beskrevet neste.

2 display: table-rad gjør elementet oppfører seg som en tabell rad element. Det er mulig å bruke display: table-rad effektivt uten å ha det heilt et element satt til display: table. Dette er fordi nettleseren forutsetter eksistensen av en "anonym" table element og oppfører seg som om den var der. (Se tips nedenfor for mer om "anonyme" elementer.) Husk at du ikke lage en faktisk tabell over tabelldata; du er bare å lage et rutenett-lignende skjerm.

3 display: table-cell gjør elementet oppfører seg som en tabellcelle element. Det er mulig å bruke display: table-cell effektivt uten å ha element nestet i et element satt til display: table-rad eller display: table.

4 display: table-rad-gruppe gjør elementet oppfører seg som en tabell rad gruppe element. Bruk den for et element som grupper én eller flere rader. Det er CSS måte å uttrykke hva tbody gjør i HTML.

5 display: table-header-gruppen gjør elementet oppfører seg som en tabell header rad gruppe element. Det er CSS måte å uttrykke hva thead gjør i HTML. Med CSS, er tabellen-header-gruppen alltid vises før alle andre rader og rowgroups og etter noen topp bildetekster.

6 display: table-footer-gruppen gjør elementet oppfører seg som en tabell bunntekstrad gruppe element. Med CSS, gjør bordet-footer-gruppen hva TFOOT gjør i HTML. Tabellen-footer-gruppen vises alltid etter at alle andre rader og rowgroups og før noen bunntekster. Skrivere kan gjenta bunnrader på hver side spredt av en tabell.

7 display: table-bildetekst gjør elementet oppfører seg som en tabell bildetekst element.

8 display: table-kolonne gjør elementet oppfører seg som en tabellkolonne element. Det er CSS måte å uttrykke hva col gjør i HTML.

9 display: table-kolonne-gruppen gjør elementet oppfører seg som en tabellkolonne gruppe. Bruk den til gruppen en eller flere kolonner. Det er CSS måte å uttrykke hva colgroup gjør i HTML.

Hint

• Enhver display: table element vil automatisk generere nødvendige anonym tabellobjekter rundt seg selv.
• Enhver velger i stil satt til en av disse skjermegenskaper kan bli stylet med hele spekteret av CSS-regler, inkludert padding, margin, border, bakgrunn og font-familiens eiendommer.
• CSS visningsegenskaper støttes ikke av Internet Explorer-versjoner under versjon 8.