Standard HTML-tabeller ser ret undervældende ud – jazz dem med nogle flotte CSS-effekter.
Tilføjelse af en tabel til dit websted er en nyttig måde at præsentere store mængder information klart. Tabeller giver også en effektiv udnyttelse af pladsen og lader dig nemmere læse og sammenligne komplekse data.
Du kan designe tabeller til at være mere visuelt tiltalende ved hjælp af CSS. Det kan også forbedre den overordnede brugeroplevelse for dit websted.
Moderne design af enkelte rækker og søjler
Du kan tilføje et simpelt tabeldesign med enkelte rækker og kolonner og ingen flettede celler. At style tabellen sikrer også, at din webside er engagerende for brugeren. Udover bordstyling er der andre fede HTML-effekter og CSS viser hjemmesidelayouts du kan tilføje til din hjemmeside.
Du kan se koden til denne øvelse i dens GitHub repo.
- Tilføj den grundlæggende HTML-kodestruktur i en ny HTML-fil:
html>
<html>
<hoved>
<titel>Mit simple bordtitel>
hoved>
<legeme>
legeme>
html> - Tilføj tabeltags inde i brødteksten:
<bord>
bord> - HTML-tabelelementet skal indeholde tabel række tags for hver række inde i tabellen. Den øverste række bruges almindeligvis til overskrifter. Brug tabeloverskrift HTML-tags til at repræsentere hver kolonne i tabellen:
<tr>
<th>Overskrift 1th>
<th>Overskrift 2th>
<th>Overskrift 3th>
tr> - Tilføj flere rækker under overskriftsrækken. Brug tabeldata HTML-tags til at tilføje data til hver celle i tabellen:
<tr>
<td>Række 1, kolonne 1td>
<td>Række 1, kolonne 2td>
<td>Række 1, kolonne 3td>
tr>
<tr>
<td>Række 2, kolonne 1td>
<td>Række 2, kolonne 2td>
<td>Række 2, kolonne 3td>
tr>
<tr>
<td>Række 3, kolonne 1td>
<td>Række 3, kolonne 2td>
<td>Række 3, kolonne 3td>
tr>
<tr>
<td>Række 4, kolonne 1td>
<td>Række 4, kolonne 2td>
<td>Række 4, kolonne 3td>
tr>
<tr>
<td>Række 5, kolonne 1td>
<td>Række 5, kolonne 2td>
<td>Række 5, kolonne 3td>
tr> - Tilføj et stiltag inden i head-tagget. Tilføj noget generel stil til bordet, såsom skygger, afrundede bordhjørner, skrifttyper og marginer:
<stil>
bord {
grænse-kollaps: bryder sammen;
bredde: 100%;
farve: #333;
skrifttype-familie: Arial, sans serif;
skriftstørrelse: 14px;
tekstjustering: venstre;
grænse-radius: 10px;
flyde over: skjult;
kasse-skygge: 0 0 20pxrgba(0, 0, 0, 0.1);
margen: auto;
margin-top: 50px;
margin-bund: 50px;
}
stil> - Stil tabeloverskriften for at give den en baggrundsfarve og justeret tekst:
bordth {
baggrundsfarve: #ff9800;
farve: #fff;
skrifttype-vægt: fremhævet;
polstring: 10px;
tekst-transformation: store bogstaver;
bogstavmellemrum: 1px;
border-top: 1pxsolid#fff;
grænse-bund: 1pxsolid#ccc;
} - Style tabelrækkerne for at veksle mellem grå og hvide farver og for at tilføje en effekt, når du holder musemarkøren over rækken:
bordtr:nth-child (lige)td {
baggrundsfarve: #f2f2f2;
}bordtr:hovertd {
baggrundsfarve: #ffedcc;
} - Stil dataene inde i cellerne i tabellen:
bordtd {
baggrundsfarve: #fff;
polstring: 10px;
grænse-bund: 1pxsolid#ccc;
skrifttype-vægt: fremhævet;
} - Åbn din HTML-fil for at se tabellen i en webbrowser:
Multi-linet cellebord design
Nogle tabeller indeholder kolonner med flettede rækker for at danne en celle med flere linjer.
- Fjern alle de aktuelle tabelrækker, og behold kun den øverste med overskrifterne:
<bord>
<tr>
<th>Overskrift 1th>
<th>Overskrift 2th>
<th>Overskrift 3th>
tr>
bord> - Opret en celle med flere linjer ved hjælp af rowspan-attributten. Dette vil udvide cellen på tværs af det angivne antal rækker.
Afsnit 1
<tr>
<tdrækkevidde="2">Multi-line celletd>
<td>Række 1, kolonne 2td>
<td>Række 1, kolonne 3td>
tr>
<tr>
<td>Række 2, kolonne 2td>
<td>Række 2, kolonne 3td>
tr> - Når du tilføjer endnu en flercellet linje med en anden rækkeviddeværdi, skal du tilføje det tilsvarende antal tabel rækker HTML tags. Dette er for at matche højden eller antallet af rækker, som cellen spænder over. For eksempel, hvis en celle har et rækkevidde på 3, skal du tilføje tre rækker til de andre kolonner for at justere tabellen korrekt.
Afsnit 2
<tr>
<tdrækkevidde="3">Multi-line celletd>
<td>Række 3, kolonne 2td>
<td>Række 3, kolonne 3td>
tr>
<tr>
<td>Række 4, kolonne 2td>
<td>Række 4, kolonne 3td>
tr>
<tr>
<td>Række 5, kolonne 2td>
<td>Række 5, kolonne 3td>
tr> - Åbn din HTML-fil for at se tabellen i en webbrowser:
Sammenlagt rækkebordsdesign
I lighed med celler med flere linjer kan tabeller også have rækker, der flettes over flere kolonner.
- Fjern alle de aktuelle tabelrækker, og behold kun den øverste med overskrifterne:
<bord>
<tr>
<th>Overskrift 1th>
<th>Overskrift 2th>
<th>Overskrift 3th>
tr>
bord> - Tilføj flere tabelrækker til tabellen. Brug attributten colspan til at flette en af rækkerne på tværs af 3 kolonner:
Afsnit 1
<tr>
<tdstil="baggrundsfarve: #ffedcc"colspan="3">Q1td>
tr>
<tr>
<td>Række 2, kolonne 1td>
<td>Række 2, kolonne 2td>
<td>Række 2, kolonne 3td>
tr>
<tr>
<td>Række 3, kolonne 1td>
<td>Række 3, kolonne 2td>
<td>Række 3, kolonne 3td>
tr>
<tr>
<td>Række 4, kolonne 1td>
<td>Række 4, kolonne 2td>
<td>Række 4, kolonne 3td>
tr> - Tilføj endnu en flettet række for at adskille sektionerne i tabellen:
Afsnit 2
<tr>
<tdstil="baggrundsfarve: #ffedcc"colspan="3">Q2td>
tr>
<tr>
<td>Række 6, kolonne 1td>
<td>Række 6, kolonne 2td>
<td>Række 6, kolonne 3td>
tr>
<tr>
<td>Række 7, kolonne 1td>
<td>Række 7, kolonne 2td>
<td>Række 7, kolonne 3td>
tr>
<tr>
<td>Række 8, kolonne 1td>
<td>Række 8, kolonne 2td>
<td>Række 8, kolonne 3td>
tr> - Åbn din HTML-fil for at se tabellen i en webbrowser:
Brug attraktive tabeller til at få det bedste ud af dine data
HTML-tabeller er en fantastisk måde at vise strukturerede data på din hjemmeside. Du kan style dem med CSS for at forbedre standardudseendet. Sørg dog for, at du ikke lader dig rive med, og brug tabeller til layout – af tilgængelighedsgrunde skal du opbevare dem udelukkende til data.
Større tabeller kan være besværlige at oprette og opdatere, især hvis du gør brug af kolonner og rækker, der spænder over. Du kan skrive din egen kode for at generere markeringen eller drage fordel af venligere syntakser som Markdown.
