In de begindagen van webontwikkeling waren HTML-tabellen erg eenvoudig en ontbraken uitgebreide stylingopties. Tegenwoordig zijn de meeste tabellen echter gestileerd om een meer esthetische en functionele ervaring voor gebruikers te creëren.
CSS biedt een reeks tabelstijlkenmerken. Met deze attributen kunt u onder andere tabelcellen scheiden, tabelranden specificeren en tabelbreedte en -hoogte specificeren.
In deze zelfstudie wordt aan de hand van voorbeelden uitgelegd hoe u een tabel opmaakt met behulp van CSS . Aan het einde van deze tutorial ben je een expert.
HTML-tabellen
De HTML-code definieert de structuur van de tabellen. Gebruik de tag
en | specificeren respectievelijk rijen, tabelkoppen en inhoudscellen. 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 CSSCSS 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:
We zullen al deze onderwerpen in de onderstaande discussie behandelen. RandenStel 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 (
|
---|