Hvordan lage 2 kolonner på en webside

Hvordan lage 2 kolonner på en webside


Når nettsurfing begynte å bli mer utbredt, og gikk inn i kommersiell mainstream i slutten av 1990 og begynnelsen av 2000-tallet, var det svært vanlig å se tre og fire kolonner på et nettsted. Som industrien har modnet og vesentlige studier har blitt gjort på brukbarheten av innhold vs. forbruker handling, de fleste resultatene indikerer at enklere tilnærminger av web forfattere er mer effektive i å få nettstedet budskapet til sluttbrukeren. For å hjelpe brukerne å finne det de ønsker å se på nettsiden, har design standarder utviklet seg til å bruke to kolonner i nettstedet formater og generelt ikke mer enn tre i dagens webdesign. Opprette kolonner i en nettside lar nettet forfatteren å representere relasjoner mellom data, og kan videre endre presentasjonen av data gjennom bruk av brus regneark (CSS).

Bruksanvisning

Lage to kolonner i en webside

1 Åpne en eksisterende nettside eller ny web-side mal i en HTML-editor eller tekst editor.

2 Bestem antall kolonner og rader ønsket for tabellen. I dette eksempel vil to kolonner og fire rader bli vist.

3 Start HTML-kode for tabellen med <table> -taggen. Etter tabellen koden vil være overskriften av tabellen. Bildeteksten er inngått mellom åpningen <caption> og lukking </ caption> HTML-koder.
<TABLE>
<Caption> Tabell Bildetekst settes inn her </ caption>

4 Skriv rad- kodene <TR id = "ROW1">, etterfulgt av den tilsvarende overskriften koden med etiketten etter den <TH> tag.
Etter overskriften koden, blir celle kodene listet <td> Cell 1 <td> Cell 2
<TR id = "ROW1">
<TH> First Header <td> Cell 1 <td> Cell 2
<TR id = "ROW2">
<TH> Second Header <td> Cell 3 <td> Cell 4
<TR id = "row3">
<TH> Tredje Header <td> Cell 5 <td> Cell 6

5 Når celle oppføringer for tabellen er fullført, lukker tabellen oppføring </ TABLE>.
Kontroller at dataene er oppført i tabellen er riktig.

Formatering HTML Table Data med CSS

6 Juster tekst til venstre for hver celle med en fet skrift med følgende CSS-regel:
TH {text-align: center; font-weight: bold}

7 Rett tittelcellen teksten på grunnlinjen, med teksten vertikalt sentrert i hver celle.
TH {vertikal-align: baseline}
TD {vertikal-align: middle}

8 Legg grenser til bordet. Følgende regler skal sikre at den øverste raden er omgitt av en 3-pixel svart ramme, og de andre radene av en 1-px blå ramme.
TABLE {border-kollaps: kollaps}
TR # ROW1 {border-top: 3px solid svart}
TR # ROW2 {border-top: 1px solid blått}
TR # row3 {border-top: 1px solid blått}

9 Plasser bordet bildetekst over tabellen.
TEKST {bildetekst-side: top}

Hint

  • Sørg for at de viktige biter av informasjon er markert på venstre og toppen av en søyle, for å trekke leserens eye.Place tomrom i mellom kuler og under kuler.
  • Opprette en nettside med mer enn tre kolonner kan redusere brukbarheten og redusere totale website trafikk \ Lys ordene ved å gi linker til relatert innhold i teksten på nettsiden.