CSS3-stijl voor gegevenstabellen

Een van de leuke opties met CSS3 is de mogelijkheid om tbody- stijl toe te wijzen aan rijen en kolommen in de tabel; u kunt ook even of oneven rijen opgeven met de eigenschap nth-child, die in het tweede voorbeeld wordt getoond. Dit is een zegen voor het stileren van gegevenstabellen waarvoor meestal ofwel handmatige kleurcodering nodig is voor alternatieve rijen of het gebruik van functies voor tabelopmaak in teksteditors zoals Dreamweaver, die stijl rechtstreeks aan de HTML toewijzen. Door stijlregels in uw CSS te maken, hebt u meer opties voor verschillende soorten tafelpresentaties.

Voor deze demonstratie zullen we statische gegevens gebruiken, en dit zal de basistabelstructuur zijn voor gebruik in beide voorbeelden; gegevens uit dynamische databasebronnen zouden echter net zo gemakkelijk werken:

 Groothandels- en detailhandelsprijzen voor populaire producten op verschillende boerenmarkten 
Lokaal vers Beets Broccoli Wortels Blad sla Radijs tomaten
Gem. Korting$ .75$ .90$ .90$ .85$ .90$ .90
Groothandel$ .75$ .85$ .30$ 0, 95$ .65$ 1, 25
Kleinhandel$ 1.50$ 1, 45$ .85$ 1, 95$ 1, 35$ 2, 65
Kortingen
Regionaal vers Beets Broccoli Wortels Blad sla Radijs tomaten
Groothandel$ .70$ .82$ .27$ .88$ .62$ 1, 18
Kleinhandel$ 1, 40$ 1, 35$ .75$ 1, 75$ 1, 25$ 2, 25
Kortingen

Ik heb ook een paar toegankelijkheidsitems aan de tabel toegevoegd (dat wil zeggen de samenvatting en het bijschrift), maar dit stuk zal zich meer concentreren op CSS3-functionaliteit dan toegankelijkheid, wat een onderwerp zal zijn voor een ander bericht.

In dit voorbeeld hebben we alle elementen die een typische gegevenstabel nodig heeft, inclusief een koptekst, een hoofdtekst en een voettekst. In deze zelfstudie gebruiken we verschillende vergelijkingen van de marktprijzen voor verse producten, waaronder populaire groenten voor de tafel. De volgende twee stijlen kunnen op deze tabel worden toegepast door de klasse te wijzigen in table_1 en table_2 .

Blauw kleurverloop tabel kleurenschema (tabel 1)

De eerste tabel wordt opgemaakt in blauwe kleurtinten met enkele gradiënten voor de beschrijvende cellen en de "th" -elementen. Om ervoor te zorgen dat de tabel een kleine ruimte tussen de cellen heeft, heb ik de afzonderlijke eigenschap border-collapse toegevoegd, zoals je hieronder ziet.

 table.table_1 { 
 lettertypefamilie: Cambria, serif; 
 lettergrootte: 17 px; 
 lettergewicht: normaal; 
 lijnhoogte: 1.4em; 
 lettertype: normaal; 
 text-transform: normaal; 
 border-collapse: gescheiden; 
 } 

In de styling voor de hoofd "th" elementen, heb ik een achtergrond toegevoegd met drie gradiëntstijlkleuren met RGB-kleurstops voor -webkit- en RGB-percentages voor -moz- voorvoegsels; Ik heb een afgeronde randradius toegevoegd voor de linkerboven- en rechterbovenhoek, samen met een bescheiden 5px opvulling om de inhoud goed op afstand te houden, en vervolgens een effen onderste randkleur toegevoegd met een hoogte van 3 pixels.

 .table_1 th { 
 padding: 5px; 
 color: # fff; 
 text-shadow: 1px 1px 1px # 3B4545; 
 border: 1px solid # 3799CE; 
 border-bottom: 3px solid # 6B81B1; 
 background-color: # 2B4478; 
 achtergrond: 
 -webkit-verloop (lineair, linksonder, linksboven, 
 kleurstop (0, 02, rgb (13, 33, 76)), 
 kleurstop (0, 51, rgb (87, 116, 177)), 
 kleurstop (0, 87, rgb (107, 129, 177)) 
 ); 
 achtergrond: 
 -moz-lineair-verloop (midden onderaan, 
 rgb (13, 33, 76) 2%, 
 rgb (87, 116, 177) 51%, 
 rgb (107, 129, 177) 87% 
 ); 
 -webkit-border-top-left-radius: 5px; 
 -webkit-border-top-right-radius: 5px; 
 -moz-border-radius: 5px 5px 0px 0px; 
 border-top-left-radius: 5px; 
 border-top-right-radius: 5px; 
 } 

Vervolgens moeten we de lege "e" secties van de tabel aanpakken. Met CSS3 mogen we een lege "th" selecteren en er stijl aan toevoegen, zoals in dit voorbeeld:

 .table_1 e: leeg { 
 background: transparent; 
 Rand: none; 
 } 

Voor de tabelvoettekst "td" is het lettertype 20 px, uitgelijnd midden, met een 1 px tekstschaduw voor een opvallend effect, opvulling van 5 px en 10 px, een iets donkerdere blauwe achtergrond, randradius van 3 px op alle hoeken en voor de voettekst, "th" de letterkleur zal een lichtbruine tint zijn:

 .table_1 tfoot td { 
 kleur: # D4B476; 
 font-size: 20px; 
 text-align: center; 
 vulling: 5 px 10 px; 
 tekstschaduw: 1px 1px 1px # 3B352B; 
 background-color: # 6B81B1; 
 -moz-border-radius: 3px; 
 -webkit-border-radius: 3px; 
 } 
 .table_1 tfoot th { 
 color: # D4B476; 

}

De binnencellen met de inhoud van prijsgegevens hebben een lichtblauwe achtergrond met een lichte tekstschaduw voor een ander opvallend effect, een rand van 2 px en een afgeronde straal van 2 px op alle hoeken, waardoor een schaduweffect ontstaat:

 .table_1 tbody td { 
 padding: 10px; 
 text-align: center; 
 background-color: # CAE2F3; 
 border: 2px solid # E0E6EF; 
 -moz-border-radius: 2px; 
 -webkit-border-radius: 2px; 
 border-radius: 2px; 
 color: # 666; 
 text-shadow: 1px 1px 1px #fff; 
 } 

En om aan te geven welke groenten op elke markt kunnen worden verdisconteerd, heb ik een reeks toegevoegd met een "check" -klasse, dat wil zeggen, naar alle cellen voor groenten die met korting zouden worden aangegeven. Met deze stijleigenschap kan specifieke inhoud worden toegevoegd, zoals de afbeelding met het vinkje in dit voorbeeld en de :: voor of :: na indicatie bepaalt waar deze wordt ingevoegd - voor of na andere inhoud in het element - dit is allemaal weergegeven met de volgende CSS om de stijl aan te roepen:

 .table_1 tbody span.check :: voor { 
 content: url (images / Check_01.png) 
 } 
De blauwe achtergrond met kleurverloop wordt weergegeven in Afbeelding A hieronder zoals weergegeven in Firefox 7.0.1:

Afwisselend rijen ivoor en rode kleurenschema (tabel 2)

Voor het tweede voorbeeld zal ik styling toevoegen voor afwisselende rijkleureffecten. Naast de eigenschap nth-child die onderaan dit voorbeeld wordt weergegeven, heb ik ook een aantal van de stijlen uit het eerste voorbeeld bijgewerkt.

Voor de basistabelstijl heb ik de lettertypefamilie gewijzigd in Courier New, de grootte in 18 px en de rand samengevouwen in samengevouwen zodat er weinig ruimte tussen cellen is. Aan alle stylings in dit voorbeeld wordt verwezen door de klasse te wijzigen in "table_2".

 table.table_2 { 
 font-family: "Courier New", Courier; 
 lettergrootte: 18 px; 
 lettergewicht: normaal; 
 lijnhoogte: 1.2em; 
 lettertype: normaal; 
 text-transform: normaal; 
 border-collapse: collapse; 
 } 

De tabel "th" is ook bijgewerkt met nieuwe kleuren voor het verloop en randen die verschillende tinten en ivoorkleurenschema vertegenwoordigen.

 .table_2 th { 
 padding: 5px; 
 color: # fff; 
 text-shadow: 1px 1px 1px # 999481; 
 border: 1px solid # D7D5CE; 
 border-bottom: 3px solid # D7D5CE; 
 background-color: # 2B4478; 
 achtergrond: 
 -webkit-verloop (lineair, linksonder, linksboven, 
 kleurstop (0, 02, rgb (153, 148, 129)), 
 kleurstop (0, 51, rgb (215, 213, 206)), 
 kleurstop (0, 87, rgb (248, 248, 248)) 
 ); 
 achtergrond: 
 -moz-lineair-verloop (midden onderaan, 
 rgb (153, 148, 129) 2%, 
 rgb (215, 213, 206) 51%, 
 rgb (248, 248, 248) 87% 
 ); 
 -webkit-border-top-left-radius: 5px; 
 -webkit-border-top-right-radius: 5px; 
 -moz-border-radius: 5px 5px 0px 0px; 
 border-top-left-radius: 5px; 
 border-top-right-radius: 5px; 
 } 

De lege "e" styling opnieuw:

 .table_2 th: empty { 
 background: transparent; 
 Rand: none; 
 } 

Hieronder staan ​​de tfoot "td" en "th" stijlen met een bijgewerkte kleur voor inhoud, tekstschaduw en achtergrondkleur:

 .table_2 tfoot td { 
 kleur: # D4B476; 
 font-size: 22px; 
 text-align: center; 
 vulling: 5 px 10 px; 
 text-shadow: 1px 1px 1px # 999481; 
 background-color: # D7D5CE; 
 } 
 .table_2 tfoot th { 
 color: # D4B476; 
 } 

De tbody "td" -stijl met een bijgewerkte tekstschaduw en de stijlen van de randradius zijn weggelaten:

 .table_2 tbody td { 
 padding: 5px; 
 text-align: center; 
 color: # 666; 
 text-shadow: 1px 1px 1px # 5E553E; 
 } 

En de selectievakjes omvatten stijl voor dit voorbeeld:

 .table_2 tbody span.check :: voor { 
 content: url (images / check_2.png); 
 } 

Let nu voor de afwisselende rijen in het ivoorkleurenschema met deze CSS3-stijlen op het gebruik van nth-child (oneven) en nth-child (even):

 .table_2 tbody td { 
 background: rgb (176.172.158); 
 padding-top: 4px; 
 } 
 .table_2 tbody tr: nth-child (oneven) td { 
 background: rgb (153.148.129); 
 color: rgb (248.248.248); 
 } 
 .table_2 tr: nth-child (even) td { 
 achtergrond :: rgb (215.213.206); 
 color: rgb (51, 51, 51); 
 } 

Met deze stijl worden de afwisselende even en oneven rijen gereset met elke "thead", en zullen alleen doorgaan in de rest van die tabelsectie.

De resulterende tabel met het ivoor en rode kleurenschema wordt weergegeven in Afbeelding B hieronder zoals weergegeven in Firefox 7.0.1:

Er zijn veel manieren waarop gegevenstabellen kunnen worden gestileerd met CSS3, waardoor onbeperkte opties voor het ontwerpen van gegevens op uw website mogelijk zijn. De broncode en bijbehorende CSS- en afbeeldingsbestanden kunnen worden gedownload en kunnen het beste in Firefox worden bekeken (pak bestanden in een map uit en klik op het HTML-bestand).

© Copyright 2020 | mobilegn.com