u0026 lt; td u0026 gt; kolonne3 u0026 lt; / tr u0026 gt;
u0026 lt; / table u0026 gt;

4. >

Brug attributten 'colspan'. For at opretholde en ensartet og korrekt visning med dine tabeller skal hver tabelrække enten indeholde et lige antal kolonner eller bruge 'colspan' -attributten til at tillade en celle i en række at optage pladsen i to kolonner. Tabellen nedenfor har tre rækker med tre kolonner i de to første rækker og to kolonner i den sidste række, herunder en celle, der strækker sig over to af de andre rækker 'kolonner'.

u0026 lt; table u0026 gt; < kolonne 1, række 1 u0026 lt; td u0026 gt; kolonne2, række 1 u0026 lt; td u0026 gt; kolonne3, række 1 u0026 lt; / tr u0026 gt; < br /> u0026 lt; tr u0026 gt; td> kolonne 1, række2 u0026 kolonne2, række2 u0026 gt; kolonne3, række2 u0026 tr> gt; u0026 lt; tr u0026 gt; td u0026 gt; kolonne 1, række3 u0026 lt; / td u0026 gt; td colspan = '2' u0026 gt; kolonne2, rad3 u0026 lt; / tr>
u0026 lt; / table u0026 gt;

5.

Brug attributten 'rowspan'. Som 'colspan' -attributten tillader 'rowspan' en celle at strække sig over elementer i bordgitteret. I tabellen nedenfor er den første celle strækker sig over de to første rækker. For at få plads har den anden række kun to celler.

u0026 lt; table border = '1' u0026 gt;
u0026 lt; tr u0026 gt; = '2'> kolonne 1, række 1 u0026 lt; td> kolonne2, række 1 ; td> kolonne 3, række 1 u0026 tr> gt> kolonne2, række2 u0026 gt; kolonne3, række2 u0026 lt; / td u0026 gt; u0026 lt; / tr u0026 gt; ;
u0026 lt; tr u0026 gt; u0026 lt; td u0026 gt; kolonne 1, rad3 u0026 td colspan = '2'> kolonne2, rad3

6.

Brug cellepadding og cellespacing. Egenskaben 'cellpadding' giver dig mulighed for at angive, hvor meget hvidt rum der skal vises omkring dataene i hver af dine celler. Attributtet 'cellespacing' angiver mængden af ​​mellemrum mellem celler. I eksemplet nedenfor hæves cellepaddering fra standard, mens cellespacing er reduceret, hvilket begrænser grænsen.


u0026 lt; table border = '1' cellpadding = '10' cellespacing = '1' u0026 gt;
u0026 lt; tr u0026 gt; u0026 lt; td rowspan = '2' u0026 gt; kolonne 1, række 1 u0026 lt; td> kolonne 2, række 1 u0026 lt; td> kolonne3, række 1 u0026 tr> gt> u0026 tr> gt> kolonne2, række2 u0026 lt; td> kolonne3, række2 u0026 tr> gt> u0026 tr> gt> kolonne 1, rad3 u0026 td colspan = '2'> kolonne2, rad3 u0026 table>

7.

Angiv andre attributter på bordet og dets celler. Et bord kan justere sin bredde og have stilark påført det til særlige effekter. Ligeledes kan dataene i en celle justeres lodret eller vandret og kan også have specifikke stilarter, der er anvendt på den. Tabellen nedenfor har sin bredde indstillet til 600px, indeholder en stilattribut, der ombryder bordet i rød kant og justerer teksten til den øverste venstre celle til højre.

u0026 lt; table border = '1' cellpadding = '10' cellespacing = '1' width = '600' style = 'grænse: 1px solid rød' u0026 gt;
u0026 lt; tr u0026 gt; td rowspan = '2' align = 'right' u0026 gt; kolonne 1, række 1 u0026 lt; td> kolonne 2, række 1 u0026 lt; td> kolonne3, række 1 u0026 tr> gt> u0026 tr> gt> kolonne2, række2 u0026 lt; td> kolonne3, række2 u0026 tr> gt> u0026 tr> gt> kolonne 1, rad3 u0026 td colspan = '2'> kolonne2, rad3 u0026 lt; / tr>
u0026 lt; / table u0026 gt;

Med mange nye standarder og tilgange til webdesign tilgængelig (CSS, DHTML, DOM, XML) har brugen af ​​tabeller været ude af favør hos mange webdesignere. Stadig er den gamle skole metode til at oprette tabeller med kolonner, rækker og celler dets anvendelser og er undertiden den nemmeste måde at opnå et bestemt layout på. Moderigtigt eller ej, enhver webdesigner, der arbejder i dag, bør have en forståelse af tabeller.

Sådan designes websider med tabeller

Indlæg af Hanne Mølgaard Plasc

 

1.

Opret en grundlæggende tabel. Opret først dine åbnings- og lukningstabellkoder som følger:
u0026 lt; table border = '1' u0026 gt;
u0026 lt; / table u0026 gt;

Bemærk grænsenattributten i bord ovenfor. Ved at indstille grænsen lig med en, viser browseren en simpel grænse omkring hver celle. Dette vil hjælpe dig med at se, hvordan tabellen danner sine kolonner og rækker. Synlige grænser kan hjælpe dig med at designe en bordbaseret side. Hvis i dit endelige design du vil skjule grænserne, kan du fjerne attributten eller sætte den som nul

2.

Tilføj rækker til din tabel. Et bord består af tabel rækker, defineret med tr-taggen.

u0026 lt; table border = '1' u0026 gt;
u0026 lt; tr u0026 gt; / tr u0026 gt;
u0026 lt; / table u0026 gt;

Hvis du skulle forsøge at vise denne tabel i en webbrowser, ville du ikke se noget. En tabelrække kræver tabelceller, som indeholder data.

3.

Tilføj celler til dine rækker. En celle, der er defineret af 'td' -tagget, indeholder de specifikke data, du vil have vist i din tabel. Hver celle vil blive indeholdt i en enkelt kolonne. Koden nedenfor vil oprette en tabel med en række og tre kolonner. Tabelceller kan indeholde tekst og ethvert HTML-element, herunder billeder, tekstbokse og knapper.

u0026 lt; table u0026 gt;
u0026 lt; tr u0026 gt; u0026 lt; td u0026 gt; kolonne 1 u0026 lt; / td u0026 gt; td u0026 gt; kolonne2