Tabell Kolonner HTML Tutorial

HTML-tabeller tillate websidene til å vise data på en lett lesbart format. De er relativt enkle å sette opp, men de kan være forvirrende for en nybegynner fordi mens radene i en tabell er klart definert i koden, kolonnene er det ikke. Ikke bekymre deg. Bare mestre et par grunnleggende begreper, og du vil være "skrive kolonner" på kort tid.

Basic Elements

Start med å sette opp grunnstammen. HTML-tabeller begynner og slutter med <table> koder. Informasjonen i tabellene er ordnet i rader, som hver er merket med <tr> tags (på "table row"). Kolonner er opprettet av <td> ( "table data") koder innenfor radene. Hvert sett med <td> -koder kalles en "celle". La oss sette opp en enkel tabell med de første og siste navnene på de tre første amerikanske presidenter:

<Table>
<Tr> <td> Nei. </ Td> <td> Fornavn </ td> <td> etternavn </ td> </ tr>
<Tr> <td> 1 </ td> <td> George </ td> <td> Washington </ td> </ tr>
<Tr> <td> 2 </ td> <td> John </ td> <td> Adams </ td> </ tr>
<Tr> <td> 3 </ td> <td> Thomas </ td> <td> Jefferson </ td> </ tr>
</ Table>

Merk at denne tabellen ikke definerer noen kolonner, i motsetning til hvordan radene er definert med <tr> koder. Antall kolonner er definert ved antallet <td> celler. Her har hver rad tre celler, så vil det være tre kolonner. Alltid ha det samme antall celler i hver rad, selv om man ikke har en verdi for å sette inn en bestemt celle; dette er hvordan nettleseren holder kolonnene justert.

Innstilling Bredder

Juster størrelsen på tabellen, og de enkelte kolonner i det, med "width" eiendom. Man kan definere en tabell største bredde, enten som et fast antall piksler eller som en prosent av bredden av det omgivende element. (Hvis det ikke er rundt element, så er det bredden på nettleservinduet.) Så hvis du ønsker at tabellen skal være halvparten av bredden på vinduet, vil den første linjen lese:

<Table width = "50%">

Hvis du ønsket å være 650 piksler, vil du skrive:

<Table width = "650 piksler">

Hvis man angi ingen bredder, så leseren vil sette seg selv ved hjelp av lengden av dataene i cellene.

Du angir bredden på kolonner på samme måte - som et fast antall piksler, eller som en prosentandel. Gjør dette ved å legge til en bredde eiendom til cellene i den øverste raden. Fra vårt eksempel:

<Table width = "50%">
<Tr> <td width = "20%"> Nei. </ Td> <td width = "40%"> Fornavn </ td> <td width = "40%"> etternavn </ td> </ tr>

Merk at disse prosenter er i forhold til bredden av bordet, ikke det omgivende element. Denne tabellen vil ta opp halvparten (50 prosent) av bredden på nettleservinduet. Kolonnene vil da være 20, 40 og 40 prosent av den bredde. Hvis du unnlater å angi bredden for en kolonne, vil nettleseren ganske enkelt tilordne den resten av brukbar plass; Hvis mer enn en kolonne ha udefinerte bredder, vil nettleseren splitte resten likt. Hvis du velger å sette kolonner med piksler, enten sørge for at alle kolonner legge opp til bredden på tabellen, eller la en kolonne udefinert og la leseren sette den.

Colspans

Slå sammen celler over kolonner med "colspan" eiendom. La oss si at for noen merkelig grunn, ville at du skulle erstatte John Adams i vårt eksempel med "Massachusetts 'favoritt sønn John Adams", og du ville ha det til span plass for både "Fornavn" og "Etternavn". Bare definere hans "fornavn" celle som strekker seg over to kolonner:

<Tr> <td> 2 </ td> <td colspan = "2"> Massachusetts 'store sønn John Adams </ td> </ tr>