Sql-gegevens weergeven in HTML-tabel Javascript

Laten we eens kijken naar een voorbeeld van een HTML-tabel. In het onderstaande voorbeeld hebben we een tabel met de top vijf van boeken op de New York Times bestsellerlijst voor de week van 23 maart 2020:

De code voor onze tabel is als volgt:

Deze tabel heeft drie kolommen en zes rijen, inclusief een rij met `on je geest.

Tabellen CSS

CSS wordt gebruikt om tabellen op te maken. Hoewel de bovenstaande tabel de gegevens op een georganiseerde manier weergeeft, is deze in gewone HTML geschreven (er zijn geen stijlen). Door CSS te gebruiken, kunt u tabellen er beter uit laten zien.

Er zijn veel CSS-functies die je kunt gebruiken om stijl een tafel. Met CSS kunt u:

• randen toevoegen
• randen comprimeren
• randafstand aanpassen
• de breedte en hoogte van een tabel
• opvulling toevoegen
• tekst horizontaal uitlijnen
• tekst verticaal uitlijnen
• jog mouse (hover)-functie toevoegen
• stel celkleuren in
• stel in hoe lege cellen worden weergegeven

We zullen al deze onderwerpen in de onderstaande discussie behandelen.

Randen

Stel dat we randen willen toevoegen rond de array of rond de elementen die deze bevat.

Om randen toe te voegen, kunnen we de eigenschap border gebruiken. Hier is een voorbeeld dat de eigenschap border gebruikt om randen toe te voegen aan een tabel en zijn cellen, inclusief kopcellen:

In onze code definiëren we een effen zwarte rand, 1 pixel breed. Hier is het resultaat van onze code:

Houd er rekening mee dat onze tabel dubbele randen Dit komt omdat we een rand hebben toegepast op de tabel zelf (

) en de cellen (	). dubbele randen naar enkele randen, we kunnen de eigenschap border-collapse gebruiken. De eigenschap border-collapse converteert de dubbele randen van een tabel naar enkele randen. De standaardwaarde van de border-collapse-eigenschap is samengevouwen. Als de eigenschap border-collapse de waarde collapse < krijgt /code>, randen rond een array worden samengevouwen. Hier is een voorbeeld van de b command-collapse eigenschap in actie: Onze code geeft als resultaat: Onze tabel en de inhoud ervan hebben nu een enkele rand. Border Spac nld U kunt de border-spacing-eigenschap gebruiken om de afstand tussen cellen in een tabel te definiëren. De border-spacing-eigenschap definieert de horizontale en verticale afstand tussen cellen - en het doet het in die volgorde. Hier is een voorbeeld met de eigenschap border-spacing in onze eerste tabel (degene zonder samengevouwen randen): Onze code geeft als resultaat: Elk van onze cellen heeft een afstand van 10px op de horizontale en verticale randen. Breedte en hoogte U kunt de breedte en hoogte van een tabel en de eigenschappen ervan specificeren met de attributen width en height . Stel dat we willen dat de breedte van onze tabel hierboven (die met de randen samengevouwen) de breedte is van de webpagina zelf, en stel dat we willen dat de hoogte van elke tabelkop 30 pixels hoog is. We kunnen dit doen met de volgende CSS-code: Onze code geeft als resultaat: Zoals je kunt zien, heeft onze tabel nu de breedte van de webpagina. Bovendien zijn de kolomkoppen in onze tabel 30 pixels hoog. Opvulling U kunt de eigenschap opvulling gebruiken om wat ruimte tussen de randen van cellen in een tabel en de inhoud van die cellen. De eigenschap padding kan worden gebruikt voor de tags	en	. Sup, laten we zeggen dat we 10px padding rond de cel willen toevoegen inhoud van onze tabel inclusief kopcellen. We kunnen dat doen met deze code: Onze code geeft als resultaat: De inhoud van elk van de regels en onze header-tabel nu hebben 10px opvulling aan alle randen. Horizontale tekstuitlijning U kunt de eigenschap text-align gebruiken om tekst uit te lijnen die is opgeslagen in een of	in een array. Standaard worden	-elementen gecentreerd uitgelijnd en	-elementen links uitgelijnd. De meest gebruikte waarden ‚Äã‚Äãvan het kenmerk voor tekstuitlijning zijn:< br> links, midden, rechts (ondersteund door alle browsers behalve Microsoft Edge en Internet Explorer) begin en einde (ondersteund door alle browsers behalve Microsoft Edge en Internet Explorer) ) Stel dat we de	-elementen in onze array willen centreren en de	-elementen links van elke cel willen uitlijnen. We kunnen het doen met deze code: Onze code geeft als resultaat: In dit voorbeeld hebben we de tekst buiten de cel gecentreerd. De cel d `header en header celtekst worden links uitgelijnd. Verticale tekstuitlijning CSS De vertical-align eigenschap wordt gebruikt om de verticale uitlijning van de inhoud in de	of	-tag. Standaard is de waarde van de eigenschap voor verticale uitlijning ingesteld op middle , wat betekent dat de inhoud verticaal in het midden van de cel wordt uitgelijnd. p> Stel dat we de tekst in onze cellen	willen uitlijnen met de onderkant van de cellen, dan doen we dat met deze code: Onze code geeft als resultaat: