CSS3 styling for datatabeller

Et av de fine alternativene med CSS3 er muligheten til å tilordne tbody styling til tabellrader og kolonner; Du kan også spesifisere enten jevne eller rare rader ved å bruke egenskapen nth-child, som vil bli demonstrert i det andre eksemplet. Dette er en velsignelse for styling av tabeller med data som vanligvis vil kreve enten manuell fargekoding for alternative rader eller bruke tabellformateringsfunksjoner i tekstredigerere som Dreamweaver, som tildeler styling direkte til HTML. Oppretting av stylingsregler i CSS-en din gir større alternativer for forskjellige typer bordpresentasjoner.

For denne demonstrasjonen vil vi bruke statiske data, og dette vil være basistabellstrukturen for bruk i begge eksempler; data fra dynamiske databasekilder fungerer imidlertid like enkelt:

 Engros- og utsalgspriser for populære produkter på flere bondemarkeder 
Lokal fersk beets Brokkoli Gulrøtter Bladesalat Reddik tomater
Gjennomsnittlig rabatt$ 0, 75$ 0, 90$ 0, 90$ 85, 00$ 0, 90$ 0, 90
engros$ 0, 75$ 85, 000, 30 dollar$ 0, 95$ .651, 25 dollar
Detaljhandel$ 1.501, 45 dollar$ 85, 001, 95 dollar1, 35 dollar$ 2, 65
rabatter
Regional fersk beets Brokkoli Gulrøtter Bladesalat Reddik tomater
engros0, 70 dollar$ .82$ 0, 27$ .88$ .621, 18 dollar
Detaljhandel1, 40 dollar1, 35 dollar$ 0, 751, 75 dollar1, 25 dollar2, 25 dollar
rabatter

Jeg har også lagt til noen få tilgjengelighetselementer i tabellen (dvs. sammendraget og bildeteksten). Imidlertid vil dette stykket konsentrere seg mer om CSS3-funksjonalitet enn tilgjengelighet, som vil være et tema for et annet innlegg.

I dette eksemplet har vi alle elementene som en typisk datatabell trenger, inkludert en topptekst, et organ og bunntekst. I denne opplæringen vil vi bruke flere sammenligninger av ferskvaremarkedspriser som inkluderer populære grønnsaker til bordet. Følgende to stiler kan brukes på denne tabellen ved å endre klassen til tabell_1 og tabell_2 .

Fargeskema for blå gradienttabell (tabell 1)

Den første tabellen vil være utformet i blå fargetoner med noen gradueringer for de beskrivende cellene og "th" -elementene. For at tabellen skal ha et lite mellomrom mellom cellene, har jeg lagt til den separate egenskapen med grensekollaps som du ser nedenfor.

 table.table_1 { 
 font-familie: Cambria, serif; 
 skriftstørrelse: 17px; 
 font-vekt: normal; 
 linjehøyde: 1, 4 em; 
 font-stil: normal; 
 tekst-transform: normal; 
 grense-kollaps: separat; 
 } 

I stylingen for "th" -elementene har jeg lagt til en bakgrunn med tre gradient-stylingfarger med rgb-fargestopp for -webkit- og rgb-prosent for -moz-prefikser; Jeg la til en avrundet kantradius for øverste venstre og øverste høyre hjørne, sammen med en beskjeden 5px polstring for å holde innholdet godt mellom hverandre, og la deretter til en solid bunnfarge i bunnen med en høyde på 3 piksler.

 .tabel_1 th { 
 padding: 5 px; 
 farge: #fff; 
 tekstskygge: 1px 1px 1px # 3B4545; 
 grense: 1px solid # 3799CE; 
 border-bottom: 3px solid # 6B81B1; 
 background-color: # 2B4478; 
 bakgrunn: 
 -webkit-gradient (lineær, venstre bunn, venstre topp, 
 fargestopp (0, 02, rgb (13, 33, 76)), 
 fargestopp (0, 51, rgb (87, 116, 177)), 
 fargestopp (0, 87, rgb (107, 129, 177)) 
 ); 
 bakgrunn: 
 -moz-lineær gradient (midt nederst, 
 rgb (13, 33, 76) 2%, 
 rgb (87, 116, 177) 51%, 
 rgb (107.129.177) 87% 
 ); 
 -webkit-border-top-venstre-radius: 5px; 
 -webkit-border-top-right-radius: 5px; 
 -moz-border-radius: 5px 5px 0px 0px; 
 border-top-venstre-radius: 5 px; 
 border-top-right-radius: 5px; 
 } 

Deretter må vi ta opp de tomme "th" -delene i tabellen. Med CSS3 har vi lov til å velge et tomt "th" og bruke styling på det, som i dette eksemplet:

 .table_1 th: tom { 
 bakgrunn: gjennomsiktig; 
 border: none; 
 } 

For bunnteksten "td" vil skriften være 20px, justert midt, med en 1xx tekstskygge for en enestående effekt, polstring av 5px og 10px, en litt mørkere blå bakgrunn, kantradius på 3px på alle hjørner, og for bunnteksten, "th", vil skriftfargen være en lysbrun fargetone:

 .table_1 tfoot td { 
 farge: # D4B476; 
 font-size: 20 piksler; 
 tekst-Justering: center; 
 polstring: 5px 10px; 
 tekstskygge: 1px 1px 1px # 3B352B; 
 background-color: # 6B81B1; 
 -moz-border-radius: 3px; 
 -webkit-border-radius: 3px; 
 } 
 .table_1 tfoot th { 
 color: # D4B476; 

}

De indre cellene med prisinnholdet vil ha en lyseblå bakgrunn med en lys tekstskygge for en annen utpreget effekt, en 2px kant og avrundet 2px radius i alle hjørner, noe som vil skape en skyggeeffekt:

 .table_1 tbody td { 
 padding: 10px; 
 tekst-Justering: center; 
 background-color: # CAE2F3; 
 kant: 2px solid # E0E6EF; 
 -moz-border-radius: 2 piksler; 
 -webkit-border-radius: 2 piksler; 
 border-radius: 2 piksler; 
 color: # 666; 
 tekstskygge: 1px 1px 1px #fff; 
 } 

Og for å indikere hvilke grønnsaker som kan diskonteres på hvert marked, har jeg lagt til et spenn med en "sjekk" -klasse, dvs. til alle cellene for grønnsaker som ville bli indikert med en rabatt. Denne stylingegenskapen gjør det mulig å legge til spesifikt innhold, for eksempel avmerkingsbilde i dette eksemplet, og :: før eller :: etter at indikasjonen angir hvor det skal settes inn - enten før eller etter annet innhold i elementet - dette er alle representert med følgende CSS for å kalle stilen:

 .table_1 tbody span.check :: før { 
 innhold: url (bilder / Check_01.png) 
 } 
Den blå bakgrunnstabellen for blå farge vises i figur A nedenfor som vist i Firefox 7.0.1:

Vekslende rader Elfenben og rød fargeskjema (tabell 2)

For det andre eksemplet vil jeg legge til styling for vekslende radfargeeffekter. I tillegg til nth-child-egenskapen som vises nederst i dette eksemplet, har jeg også oppdatert flere av stilene fra det første eksemplet.

For grunnleggende tabellstil har jeg endret skriftfamilien til Courier New, størrelsen til 18px, og grensen kollapser for å kollapse, slik at det blir lite mellomrom mellom cellene. Alle stylinger i dette eksemplet blir referert til ved å endre klassen til "tabell_2".

 table.table_2 { 
 font-family: "Courier New", Courier; 
 skriftstørrelse: 18px; 
 font-vekt: normal; 
 linjehøyde: 1, 2em; 
 font-stil: normal; 
 tekst-transform: normal; 
 grense-kollaps: kollaps; 
 } 

Tabellen "th" er også oppdatert med nye farger for gradienten, og kantene som representerer flere nyanser av og elfenbenfargevalg.

 .tabel_2. { 
 padding: 5 px; 
 farge: #fff; 
 tekstskygge: 1px 1px 1px # 999481; 
 kant: 1px solid # D7D5CE; 
 border-bottom: 3px solid # D7D5CE; 
 background-color: # 2B4478; 
 bakgrunn: 
 -webkit-gradient (lineær, venstre bunn, venstre topp, 
 fargestopp (0, 02, rgb (153, 148, 129)), 
 fargestopp (0, 51, rgb (215 213 206)), 
 fargestopp (0, 87, rgb (248, 248, 248)) 
 ); 
 bakgrunn: 
 -moz-lineær gradient (midt nederst, 
 rgb (153, 148, 129) 2%, 
 rgb (215 213 206) 51%, 
 rgb (248 248 248) 87% 
 ); 
 -webkit-border-top-venstre-radius: 5px; 
 -webkit-border-top-right-radius: 5px; 
 -moz-border-radius: 5px 5px 0px 0px; 
 border-top-venstre-radius: 5 px; 
 border-top-right-radius: 5px; 
 } 

Den tomme "th" stylingen igjen:

 .tabel_2: tom { 
 bakgrunn: gjennomsiktig; 
 border: none; 
 } 

Nedenfor er tfoot "td" og "th" stiler med en oppdatert farge for innhold, tekst-skygge og bakgrunnsfarge:

 .table_2 tfoot td { 
 farge: # D4B476; 
 font-size: 22 pikslene; 
 tekst-Justering: center; 
 polstring: 5px 10px; 
 tekstskygge: 1px 1px 1px # 999481; 
 background-color: # D7D5CE; 
 } 
 .table_2 tfoot th { 
 color: # D4B476; 
 } 

Tbody-stilen med en oppdatert tekstskygge og grensradiustilene utelatt:

 .table_2 tbody td { 
 padding: 5 px; 
 tekst-Justering: center; 
 color: # 666; 
 tekstskygge: 1px 1px 1px # 5E553E; 
 } 

Og sjekkbildene spenner over styling for dette eksempelet:

 .table_2 tbody span.check :: før { 
 innhold: url (bilder / check_2.png); 
 } 

Legg merke til bruken av nth-child (odd) og nth-child (even) for de vekslende radene som fortsetter i elfenbenfargeskjemaet med disse CSS3-stilene.

 .table_2 tbody td { 
 bakgrunn: RGB (176, 172, 158); 
 padding-top: 4 piksler; 
 } 
 .table_2 tbody tr: nth-child (odd) td { 
 bakgrunn: RGB (153, 148, 129); 
 farge: RGB (248, 248, 248); 
 } 
 .table_2 tr: nth-child (even) td { 
 bakgrunn :: RGB (215, 213, 206); 
 farge: RGB (51, 51, 51); 
 } 

Med denne stylingen tilbakestilles de vekslende, jevne og rare radene med hver "tråd", og vil fortsette gjennom resten av tabellen.

Den resulterende tabellen med elfenben og rød fargeskjema vises i figur B nedenfor som vist i Firefox 7.0.1:

Det er mange måter datatabeller kan utformes med CSS3, slik at ubegrensede alternativer for datavisningsdesign på nettsteder. Kildekoden og tilhørende CSS- og bildefiler er tilgjengelige for nedlasting og vises best i Firefox (pakker ut filer til en mappe og klikker på HTML-filen).

© Copyright 2021 | pepebotifarra.com