Tabeller

Det finns så mycket du kan göra med tabeller och så många inställningar, så det är svårt att veta var man ska börja. Här nedan kommer vi att gå igenom grunderna och några inställningar men inte alla. Bästa rekommendationen är att pröva och testa och experimentera.
Det är bra om du använder Firefox när du jobbar med tabeller. Den webbläsaren upplevs oftast som att det blir lite enklare. Det kan se lite annorlunda ut med Internet Explorer om du känner att instruktionerna här i manualen inte riktigt stämmer överens med hur det ser ut hos dig.
En liten varning här. Det är lite bökigt att hålla på med tabeller, men det blir väldigt bra slutresultat. Så det är helt klart värt att sitta och trixa lite extra.

 

Infoga Tabell

För att infoga en tabell i textrutan så ställ markören där du vill ha din tabell och klicka på knappen för att infoga tabell:

Då kommer den här rutan upp:


Välj hur många kolumner och rader du behöver. Inställningen Justering är till för att tillåta texter och bilder till höger eller till vänster om tabellen (samma inställning som för infogade bilder). Om du kan undvika att använda den funktionen så är det bra. Den kan krångla lite extra. Det är för att tabellen blir "flytande" för att kunna tillåta texter och bilder bredvid sig. Samtidigt är det en jättebra inställning för just det ändamålet om det inte går att lösa på något annat sätt. Det är bra att var lite restriktiv och fundera på om du verkligen behöver den inställningen innan du lägger in den.

Sen ett litet tips för att fortsättningsvis lättare kunna jobba med tabellen.
Precis när du lagt in den så klicka på knappen Spara för den textrutan du jobbar i. När du går in i redigeringsläget igen så har det lagt sig ett mellanslag i alla celler som gör att de blir lite större och det blir lättare att komma åt cellerna och jobba i tabellen.

 

Tabell istället för flera mellanslag och tab

Det allra första användningsområde för tabeller är att de är mycket bättre att använda i stället för många mellanslag, och tab går inte alls på en hemsida. HTML-koden i bakgrunden vet inte vad tab är för något. Om du tex har en lista med flera kolumner så gör en tabell och ställ upp informationen i den. Det kan vara en prislista, produktinformation, meny, adresslista mm.

Varning för flera mellanslag. Använd inte det, det kan bli så knasigt. I HTML-kod så blir det en helt egen kod som kallas för non-breaking-space (fritt översatt: inte-bryta-raden-alls). Den koden kan ställa till mycket besvär.
Därför är det mycket bättre och använda tabell istället.

Här är ett exempel:

namn:   Fritiof Andersson
adress:   Grönagatan 5
111 50 Grönköping
telefon:   012-34 567
mobil:   070-89 01 234
e-post:   fritiof@gronkoping.com

 

Tabellen har 3 kolumner och 5 rader. Det är en tom kolumn i mitten är för att lätt kunna justera avståndet mellan texterna.
Det ligger en svag grå ram på cellerna för att du lättare ska se hur tabellen ser ut. När du gör din tabell för en sådan här uppställning så behöver du inte ha ram på cellerna.

Nu vill vi snygga till den lite.

Kolla på "adress:". Den ligger i mitten av cellen på höjden. Det är standard när du lägger in en tabell. Du kan ställa in en justering i tabellen som gör att texter och bilder lägger sig i överkanten. Högerklicka i någon cell och gå ner till Cell och sen ut på pilen till Tabellcellsinställningar. Där ställer du in Toppen under Vertikal justering. Sen går du ner och sätter att det ska gälla alla celler i tabellen. Sen klickar du på knappen Uppdatera.

Inställningen att det ska gälla alla celler i tabellen är jättefiffig. Men använd den bara i början när du bygger upp tabellen. Fundera på vilka inställningar som ska gälla för alla celler, eller de flesta celler och gör sådan inställningar så tidigt du kan i tabellen. För den kopierar verkligen allt som gäller för den cellen du högerklickat i och lägger in det i övriga celler. Så om du har lagt in special-saker med bredder, höjder, typsnitt mm så följer det också med. Därför är det viktigt att du bara gör det i början innan du börjat göra de individuella inställningarna för olika celler.

namn:   Fritiof Andersson
adress:   Grönagatan 5
111 50 Grönköping
telefon:   012-34 567
mobil:   070-89 01 234
e-post:   fritiof@gronkoping.com

 

Kanske är det snyggare om kolon-tecknen står rakt under varandra. Ställ markören i respektive cell för namn, adress, telefon osv och klicka på högerjusteringsknappen på verktygsfältet. Då ser det ut så här istället.

namn:   Fritiof Andersson
adress:   Grönagatan 5
111 50 Grönköping
telefon:   012-34 567
mobil:   070-89 01 234
e-post:   fritiof@gronkoping.com

 

Sen kan det bli snyggt om namn, adress, telefon osv var lite tjockare text.
Slutresultatet blir så här (nu är den gråa ramen borttagen):

 

namn:   Fritiof Andersson
adress:   Grönagatan 5
111 50 Grönköping
telefon:   012-34 567
mobil:   070-89 01 234
e-post:   fritiof@gronkoping.com

 

 

Det kan också bli snyggt att lägga in ett kort på personen framför uppgifterna. Gör då en tabell med 5 kolumner. Tänk dig två kolumner framför ovanstående tabell. Första kolumnen för bilden och sen en för mellanrum och sen kommer resten.

För att lägga ihop alla celler i första kolumnen till en enda cell så markera alla celler i kolumn 1, högerklicka och gå ner till Cell och sen ut till alternativet Sammanfoga tabellceller.

Du infogar bilden i den nya stora cellen (kolumn 1) genom att klicka på knappen Infoga Bild:
 Läs mer här.

 

  namn:   Fritiof Andersson
  adress:   Grönagatan 5
111 50 Grönköping
  telefon:   012-34 567
  mobil:   070-89 01 234
  e-post:   fritiof@gronkoping.com

 

 

Här är fyra andra exempel där det är toppen att använda sig av tabeller.

Bilder och text bredvid varandra

Bakgrundsfärg på text

Väggalmanacka / Kalender

Stamtavla / Släktträd