Första sidan

Webbdesign

Bildgallerier

Uppsatser

Länksamling

Struktur med tabeller

Webbdesignens grunder »
Namngivna färger »

Färger


  • Om du tycker det blir fult att texten hamnar så långt ut i marginalerna kan du använda dig av en tabell. Tabeller är också mycket användbara i samband med att man bygger upp layouten. Den enklaste tabellen kodar man så här:

<table>
<tr>
<td>
</td>
</tr>
</table>

  • Sedan skriver du in hela din text mellan <td> och </td>. Du behöver inte ens använda <p> (om du inte vill göra flera separata stycken förstås...).
  • Om du vill att tabellen skall hamna mitt på sidan kan du centrera den genom att skriva <center> före alla de andra taggarna. Efter </table> bör du i så fall komma ihåg att avsluta med </center>. 
  • Tabeller är jättebra att ha om man vill göra ett bildgalleri. Tänk på att <tr> betyder ny rad och <td> betyder ny kolumn. Om du vill ha en tabell med 2 x 3 bilder kan du alltså skriva:

<center>
<table border= 1 width="80%" bgcolor=lavender>
<tr>
<td>   </td>
<td>   </td>
<td>   </td>
</tr>
<tr>
<td>   </td>
<td>   </td>
<td>   </td>
</tr>
</table>
</center>

  • Resultatet ser ut ungefär så här - men då måste du skriva &nbsp; mellan varje <td> och </td>, ifall du inte har lagt in någon annan text eller några bilder i tabellen. "&nbsp;" används för att få mer "luft" och motsvarar alltså space-tangenten på din dator. När du sedan lägger in bilder förändras rutnätet och anpassar sig automatiskt efter bildernas storlek.
     
     
  • Här har jag också valt att ge rutorna en viss färgnyans för att exemplet skall bli tydligare. Om du använder en lite mörkare bakgrundfärg eller en något brokig bakgrundsbild kan texten ibland blir för svår att urskilja. Ett bra knep om man vill att innehållet i tabellen skall synas bättre är att ge hela tabellen en vit bakgrund. Så här kan du i så fall skriva:

<table border=1 width="80%" bgcolor=white>

Upp

Ing-Marie Hassel förbehåller sig upphovsrätten till materialet. Alla bilder leder vidare till ytterligare information.

 

Senast uppdaterad 2011-05-29.

eXTReMe Tracker

© Ing-Marie Hassel