Standard HTML-tabeller ser ganske underveldende ut – jazz dem med noen flotte CSS-effekter.
Å legge til en tabell på nettstedet ditt er en nyttig måte å presentere store mengder informasjon tydelig på. Tabeller gir også en effektiv bruk av plass, og lar deg lettere lese og sammenligne komplekse data.
Du kan designe tabeller for å være mer visuelt tiltalende ved å bruke CSS. Å gjøre det kan også forbedre den generelle brukeropplevelsen for nettstedet ditt.
Moderne design av enkeltrader og kolonner
Du kan legge til en enkel tabelldesign med enkeltrader og kolonner og ingen sammenslåtte celler. Å style tabellen sikrer også at nettsiden din er engasjerende for brukeren. Annet enn bordstyling er det andre kule HTML-effekter og CSS-visning av nettstedsoppsett du kan legge til på nettstedet ditt.
Du kan se koden for denne øvelsen i sin GitHub repo.
- I en ny HTML-fil legger du til den grunnleggende HTML-kodestrukturen:
html>
<html>
<hode>
<tittel>Mitt enkle bordtittel>
hode>
<kropp>
kropp>
html> - Legg til tabellkoder inne i brødteksten:
<bord>
bord> - HTML-tabellelementet skal inneholde tabellrad koder for hver rad inne i tabellen. Den øverste raden brukes vanligvis til overskrifter. Bruk tabelloverskrift HTML-koder for å representere hver kolonne i tabellen:
<tr>
<th>Overskrift 1th>
<th>Overskrift 2th>
<th>Overskrift 3th>
tr> - Legg til flere rader under overskriftsraden. Bruk tabelldata HTML-koder for å legge til data i hver celle i tabellen:
<tr>
<td>Rad 1, kolonne 1td>
<td>Rad 1, kolonne 2td>
<td>Rad 1, kolonne 3td>
tr>
<tr>
<td>Rad 2, kolonne 1td>
<td>Rad 2, kolonne 2td>
<td>Rad 2, kolonne 3td>
tr>
<tr>
<td>Rad 3, kolonne 1td>
<td>Rad 3, kolonne 2td>
<td>Rad 3, kolonne 3td>
tr>
<tr>
<td>Rad 4, kolonne 1td>
<td>Rad 4, kolonne 2td>
<td>Rad 4, kolonne 3td>
tr>
<tr>
<td>Rad 5, kolonne 1td>
<td>Rad 5, kolonne 2td>
<td>Rad 5, kolonne 3td>
tr> - Legg til en stil-tag i head-taggen. Legg til litt generell stil på bordet, for eksempel skygger, avrundede bordhjørner, fonter og marger:
<stil>
bord {
grensekollaps: kollapse;
bredde: 100%;
farge: #333;
font-familie: Arial, sans serif;
skriftstørrelse: 14px;
tekstjustering: venstre;
grense-radius: 10px;
flyte: skjult;
boks-skygge: 0 0 20pxrgba(0, 0, 0, 0.1);
margin: auto;
margin-topp: 50px;
marg-bunn: 50px;
}
stil> - Stil tabelloverskriften for å gi den en bakgrunnsfarge og justert tekst:
bordth {
bakgrunnsfarge: #ff9800;
farge: #fff;
font-vekt: dristig;
polstring: 10px;
tekstforvandling: stor bokstav;
avstand mellom bokstavene: 1px;
border-top: 1pxfast#fff;
grense-bunn: 1pxfast#ccc;
} - Stil tabellradene for å veksle mellom grå og hvite farger, og for å legge til en effekt når du holder musepekeren over raden:
bordtr:nth-child (til og med)td {
bakgrunnsfarge: #f2f2f2;
}bordtr:svevetd {
bakgrunnsfarge: #ffedcc;
} - Stil dataene inne i cellene i tabellen:
bordtd {
bakgrunnsfarge: #fff;
polstring: 10px;
grense-bunn: 1pxfast#ccc;
font-vekt: dristig;
} - Åpne HTML-filen for å se tabellen i en nettleser:
Multi-lined cellebord design
Noen tabeller inkluderer kolonner med sammenslåtte rader for å danne en celle med flere linjer.
- Fjern alle gjeldende tabellrader, behold bare den øverste med overskriftene:
<bord>
<tr>
<th>Overskrift 1th>
<th>Overskrift 2th>
<th>Overskrift 3th>
tr>
bord> - Opprett en celle med flere linjer ved å bruke rowspan-attributtet. Dette vil utvide den cellen over det angitte antallet rader.
Seksjon 1
<tr>
<tdradspenn="2">Multi-linje celletd>
<td>Rad 1, kolonne 2td>
<td>Rad 1, kolonne 3td>
tr>
<tr>
<td>Rad 2, kolonne 2td>
<td>Rad 2, kolonne 3td>
tr> - Når du legger til en annen flercellet linje med en annen radspennverdi, legger du til det tilsvarende antallet tabellrader HTML-tagger. Dette er for å matche høyden eller antallet rader som cellen spenner over. For eksempel, hvis en celle har et radspenn på 3, må du legge til tre rader i de andre kolonnene for å justere tabellen riktig.
Seksjon 2
<tr>
<tdradspenn="3">Multi-linje celletd>
<td>Rad 3, kolonne 2td>
<td>Rad 3, kolonne 3td>
tr>
<tr>
<td>Rad 4, kolonne 2td>
<td>Rad 4, kolonne 3td>
tr>
<tr>
<td>Rad 5, kolonne 2td>
<td>Rad 5, kolonne 3td>
tr> - Åpne HTML-filen for å se tabellen i en nettleser:
Sammenslått radborddesign
I likhet med celler med flere linjer, kan tabeller også ha rader som smelter sammen over flere kolonner.
- Fjern alle gjeldende tabellrader, behold bare den øverste med overskriftene:
<bord>
<tr>
<th>Overskrift 1th>
<th>Overskrift 2th>
<th>Overskrift 3th>
tr>
bord> - Legg til flere tabellrader i tabellen. Bruk colspan-attributtet for å slå sammen en av radene på tvers av tre kolonner:
Seksjon 1
<tr>
<tdstil="bakgrunnsfarge: #ffedcc"colspan="3">Q1td>
tr>
<tr>
<td>Rad 2, kolonne 1td>
<td>Rad 2, kolonne 2td>
<td>Rad 2, kolonne 3td>
tr>
<tr>
<td>Rad 3, kolonne 1td>
<td>Rad 3, kolonne 2td>
<td>Rad 3, kolonne 3td>
tr>
<tr>
<td>Rad 4, kolonne 1td>
<td>Rad 4, kolonne 2td>
<td>Rad 4, kolonne 3td>
tr> - Legg til en ny sammenslått rad for å skille delene av tabellen:
Seksjon 2
<tr>
<tdstil="bakgrunnsfarge: #ffedcc"colspan="3">Q2td>
tr>
<tr>
<td>Rad 6, kolonne 1td>
<td>Rad 6, kolonne 2td>
<td>Rad 6, kolonne 3td>
tr>
<tr>
<td>Rad 7, kolonne 1td>
<td>Rad 7, kolonne 2td>
<td>Rad 7, kolonne 3td>
tr>
<tr>
<td>Rad 8, kolonne 1td>
<td>Rad 8, kolonne 2td>
<td>Rad 8, kolonne 3td>
tr> - Åpne HTML-filen for å se tabellen i en nettleser:
Bruk attraktive tabeller for å få det beste ut av dataene dine
HTML-tabeller er en flott måte å vise strukturerte data på nettstedet ditt. Du kan style dem med CSS for å forbedre standardutseendet. Pass imidlertid på at du ikke lar deg rive med og bruk tabeller for oppsett – av tilgjengelighetsgrunner, hold dem kun for data.
Større tabeller kan være arbeidskrevende å lage og oppdatere, spesielt hvis du benytter deg av kolonner og rader som spenner over. Du kan skrive din egen kode for å generere markeringen eller dra nytte av vennligere syntakser som Markdown.
