Nøstet Tabell HTML Tutorial

HTML er en grunnleggende språket nettside utvikling; den bruker et system med forhåndsdefinerte koder vedlagt innenfor "<" og ">" symboler. Hver linje med kode har åpnet tag og en lukket tag: <tag> </ tag>. Informasjonen du ønsker å vise på siden ligger mellom disse åpnes og lukkes koder. En av de avanserte funksjonene i HTML programmeringsspråk er bordet; det står i tabellen tag sett: <table> </ table>.

Opprette en tabell i HTML

Bruke åpnes og lukkes tabellkoder kan du lage en enkel tabell struktur; du kan bruke de mange andre tilgjengelige koder i familien av koder som brukes i din HTML-tabell for å lage noe veldig kompleks. Stilelementer definere størrelsen, posisjon, border og andre attributter av tabellen. Informasjonen stil ville bare legges til den åpnede tag; som et eksempel, for å legge en 1-piksel grensen til tabellen du vil bruke denne koden sett: <table border = "1"> </ table>.

Tabellen tag selv ikke produserer cellene for visning, skjønt. For å produsere celler, må du legge til en kode som ligger mellom de åpne og lukkede tabellkoder. TAG sett som brukes til å lage rader og kolonner er <tr> </ tr> og <td> </ td> tags; den "tr" -koden er for å lage en rad og "td" -koden er for å lage en kolonne. Du kan også bruke "th" tag i stedet for "td" tag å opprette en tabell header; dette automatisk stiler innholdet i cellen for å skille det som en topptekst.

Reglene for programmering av en tabell staten at du må legge ved de "td" tags innenfor "tr" tags innenfor "table" tags. En enkel en-celle tabell med en 1-piksel ramme rundt det ville se slik ut: <table border = "1"> <tr> <td> Rad 1, kolonne 1 </ td> </ tr> </ table> . For å opprette flere kolonner du vil bare plassere mer <td> </ td> koder i <tr> </ tr> tags, og å skape flere rader du vil legge til flere <tr> </ tr> koder i <table> </ bord> koder.

Hekkende HTML-tabeller

Hekkende tabeller betyr ganske enkelt å plassere en tabell i en celle i en annen tabell. Den nye tabellen vil bli plassert mellom <td> </ td> -kodene av den overordnede tabellen. En enkel en-celle tabell med en en-pixel grensen ligger innenfor en to-celle bord med en en-pixel grensen vil se slik ut: <table border = "1"> <tr> <td> Rad 1, kolonne 1 < / td> <td> <table border = "1"> <tr> <td> Rad 1, kolonne 2 - nestet tabell </ td> </ tr> </ table> </ td> </ tr> </ table>. Nestede tabellen i dette eksempel er plassert i den første raden og den andre kolonnen; du kan legge til mer "tr" og "td" tags til nestet tabell, legge til mer "tr" og "td" koder til den overordnede tabellen, eller til og med legge til flere nestede tabeller i cellene i den overordnede tabellen eller nestet tabell til skape en mer kompleks struktur.

Tips for Hekkende Tabeller

Når du begynner å lage tabeller og hekkende dem til å lage mer komplekse strukturer det kan bli ganske forvirrende. Det er en god idé å tegne et diagram av tabellene før du begynner, slik at du kan referere til det og gjøre notater mens du arbeider. Når du oppretter koden, bør hver ny tag sett har sin egen linje; satt i en vanskelig stopp (enter) etter hvert lukket kode, og deretter legge til kategoriene for å rykke hver tag sett. Denne typen strukturering vil gjøre tabeller lettere å lese.

Du kan også kommentere linjene i programmering ved hjelp av en spesiell kommentar tag sett; bruke "<! -" for å åpne kommentaren og "->" for å lukke det. Kommenterer kan plasseres hvor som helst i HTML-koding, og det er en god måte å legge til notater for å minne deg selv om hva du har kodet.

Lage din nestes fra bunnen opp er også en god måte å unngå forvirring. Du ønsker å starte med din dypeste sett tabellen (se diagrammet du har opprettet) og deretter legge den i din overordnede tabellen og fortsette å jobbe utover på denne måten. Lagre arbeidet ofte og laste siden i en nettleser for å sikre at strukturen er å snu seg slik du ser for deg.