Standaard HTML-tabellen zien er behoorlijk teleurstellend uit - verfraai ze met een aantal mooie CSS-effecten.
Het toevoegen van een tabel aan uw website is een handige manier om grote hoeveelheden informatie duidelijk weer te geven. Tabellen bieden ook een efficiënt gebruik van de ruimte en laten u gemakkelijker complexe gegevens lezen en vergelijken.
U kunt tabellen ontwerpen om ze visueel aantrekkelijker te maken met behulp van CSS. Dit kan ook de algehele gebruikerservaring voor uw website verbeteren.
Modern ontwerp met enkele rijen en kolommen
U kunt een eenvoudig tabelontwerp toevoegen met enkele rijen en kolommen en geen samengevoegde cellen. Het stylen van de tabel zorgt er ook voor dat uw webpagina aantrekkelijk is voor de gebruiker. Behalve tafelstyling zijn er nog andere coole HTML-effecten En CSS geeft websitelay-outs weer u kunt toevoegen aan uw website.
Je kunt de code voor deze oefening bekijken in its GitHub-opslagplaats.
- Voeg in een nieuw HTML-bestand de basis-HTML-codestructuur toe:
html>
<html>
<hoofd>
<titel>Mijn eenvoudige tabeltitel>
hoofd>
<lichaam>
lichaam>
html> - Voeg in de body tabeltags toe:
<tafel>
tafel> - Het HTML-tabelelement moet bevatten tafel rij tags voor elke rij in de tabel. De bovenste rij wordt vaak gebruikt voor koppen. Gebruik koptekst van de tabel HTML-tags om elke kolom in de tabel weer te geven:
<tr>
<e>Kop 1e>
<e>Kop 2e>
<e>Kop 3e>
tr> - Voeg meer rijen toe onder de koprij. Gebruik tabel gegevens HTML-tags om gegevens toe te voegen aan elke cel in de tabel:
<tr>
<td>Rij 1, Kolom 1td>
<td>Rij 1, Kolom 2td>
<td>Rij 1, Kolom 3td>
tr>
<tr>
<td>Rij 2, Kolom 1td>
<td>Rij 2, Kolom 2td>
<td>Rij 2, Kolom 3td>
tr>
<tr>
<td>Rij 3, Kolom 1td>
<td>Rij 3, Kolom 2td>
<td>Rij 3, Kolom 3td>
tr>
<tr>
<td>Rij 4, kolom 1td>
<td>Rij 4, kolom 2td>
<td>Rij 4, kolom 3td>
tr>
<tr>
<td>Rij 5, kolom 1td>
<td>Rij 5, kolom 2td>
<td>Rij 5, kolom 3td>
tr> - Voeg een stijltag toe binnen de head-tag. Voeg wat algemene styling toe aan de tabel, zoals schaduwen, afgeronde tafelhoeken, lettertypen en marges:
<stijl>
tafel {
grens-ineenstorting: instorten;
breedte: 100%;
kleur: #333;
font-familie: Ariaal, schreefloos;
lettertypegrootte: 14px;
tekst uitlijnen: links;
grensradius: 10px;
overloop: verborgen;
doos-schaduw: 0 0 20pxRGBA(0, 0, 0, 0.1);
marge: auto;
marge-top: 50px;
marge-bodem: 50px;
}
stijl> - Stijl de tabelkop om deze een achtergrondkleur en uitgelijnde tekst te geven:
tafele {
Achtergrond kleur: #ff9800;
kleur: #fff;
lettertype dikte: vetgedrukt;
opvulling: 10px;
tekst-transformatie: hoofdletters;
letterafstand: 1px;
border-top: 1pxstevig#fff;
grens-bodem: 1pxstevig#ccc;
} - Stijl de tabelrijen om af te wisselen tussen grijze en witte kleuren en om een effect toe te voegen wanneer u met de muis over de rij beweegt:
tafeltr:n-kind (even)td {
Achtergrond kleur: #f2f2f2;
}tafeltr:zweventd {
Achtergrond kleur: #ffedcc;
} - Stijl de gegevens in de cellen van de tabel:
tafeltd {
Achtergrond kleur: #fff;
opvulling: 10px;
grens-bodem: 1pxstevig#ccc;
lettertype dikte: vetgedrukt;
} - Open uw HTML-bestand om de tabel in een webbrowser te bekijken:
Tafelontwerp met meerdere lijnen
Sommige tabellen bevatten kolommen met samengevoegde rijen om een cel met meerdere regels te vormen.
- Verwijder alle huidige tabelrijen en behoud alleen de bovenste met de koppen:
<tafel>
<tr>
<e>Kop 1e>
<e>Kop 2e>
<e>Kop 3e>
tr>
tafel> - Maak een cel met meerdere regels met behulp van het kenmerk rowspan. Hierdoor wordt die cel uitgebreid over het opgegeven aantal rijen.
Sectie 1
<tr>
<tdrijspanwijdte="2">Cel met meerdere regelstd>
<td>Rij 1, Kolom 2td>
<td>Rij 1, Kolom 3td>
tr>
<tr>
<td>Rij 2, Kolom 2td>
<td>Rij 2, Kolom 3td>
tr> - Bij het toevoegen van een andere meercellige lijn met een andere rowspan-waarde, voegt u het overeenkomstige aantal toe tabel rijen HTML-tags. Dit komt overeen met de hoogte of het aantal rijen waarover de cel zich uitstrekt. Als een cel bijvoorbeeld een rijbereik van 3 heeft, moet u drie rijen aan de andere kolommen toevoegen om de tabel goed uit te lijnen.
Sectie 2
<tr>
<tdrijspanwijdte="3">Cel met meerdere regelstd>
<td>Rij 3, Kolom 2td>
<td>Rij 3, Kolom 3td>
tr>
<tr>
<td>Rij 4, kolom 2td>
<td>Rij 4, kolom 3td>
tr>
<tr>
<td>Rij 5, kolom 2td>
<td>Rij 5, kolom 3td>
tr> - Open uw HTML-bestand om de tabel in een webbrowser te bekijken:
Samengevoegd rijtabelontwerp
Net als cellen met meerdere regels, kunnen tabellen ook rijen hebben die over meerdere kolommen worden samengevoegd.
- Verwijder alle huidige tabelrijen en behoud alleen de bovenste met de koppen:
<tafel>
<tr>
<e>Kop 1e>
<e>Kop 2e>
<e>Kop 3e>
tr>
tafel> - Voeg meer tabelrijen toe aan de tabel. Gebruik het kenmerk colspan om een van de rijen over 3 kolommen samen te voegen:
Sectie 1
<tr>
<tdstijl="achtergrondkleur: #ffedcc"colspan="3">Q1td>
tr>
<tr>
<td>Rij 2, Kolom 1td>
<td>Rij 2, Kolom 2td>
<td>Rij 2, Kolom 3td>
tr>
<tr>
<td>Rij 3, Kolom 1td>
<td>Rij 3, Kolom 2td>
<td>Rij 3, Kolom 3td>
tr>
<tr>
<td>Rij 4, kolom 1td>
<td>Rij 4, kolom 2td>
<td>Rij 4, kolom 3td>
tr> - Voeg nog een samengevoegde rij toe om de secties van de tabel te scheiden:
Sectie 2
<tr>
<tdstijl="achtergrondkleur: #ffedcc"colspan="3">Q2td>
tr>
<tr>
<td>Rij 6, kolom 1td>
<td>Rij 6, kolom 2td>
<td>Rij 6, kolom 3td>
tr>
<tr>
<td>Rij 7, kolom 1td>
<td>Rij 7, kolom 2td>
<td>Rij 7, kolom 3td>
tr>
<tr>
<td>Rij 8, kolom 1td>
<td>Rij 8, kolom 2td>
<td>Rij 8, kolom 3td>
tr> - Open uw HTML-bestand om de tabel in een webbrowser te bekijken:
Gebruik aantrekkelijke tabellen om het beste uit uw gegevens te halen
HTML-tabellen zijn een geweldige manier om gestructureerde gegevens op uw website weer te geven. U kunt ze stylen met CSS om het standaard uiterlijk te verbeteren. Zorg er echter voor dat u zich niet laat meeslepen en gebruik tabellen voor de lay-out. Houd ze om toegankelijkheidsredenen strikt voor gegevens.
Grotere tabellen kunnen tijdrovend zijn om te maken en bij te werken, vooral als u gebruik maakt van kolommen en rijen die zich uitstrekken. U kunt uw eigen code schrijven om de opmaak te genereren of profiteren van vriendelijkere syntaxen zoals Markdown.