Ollies HTML-skola för nybörjare.
Hur vi gör en enkel websida.
Lektion 3
Tabeller
|
Tabeller låter för oss som var väl inte så jätteintresserade av matematik i skolan som tråkigt, det behöver inte vara så när det gäller websidor. Med hjälp av tabeller kan man förutom just göra enkla tabeller, göra snygga layout till websidor. Genom tabeller kan man få textavsnitt anpassad till en lättare läsning genom att göra avsnitten smalare. Om du vill placera bilder vid sidan av text är det tabeller som gäller. Ett exempel ser du på placering av text och bild av undertecknad i den första lektionen. |
| <TABLE> | Varje tabell börja med denna tag |
| <TR> | Varje tabellrad börjar med denna tag |
| <TH> | Anger rubrik i en datacell. |
| <TD> | Anger ett nytt datacell. |
Glöm inte att varje datacell, tabellrad och själva tabellen måste avslutas!
När du inte är van med att jobba med tabeller eller känner du dig osäker,lägg till en border till tabellen. Det gör en eventuell felsökning lättare.
Ska vi göra en enkel tabell i två rader?
Vi lägger in följande ord i egen tabellcell; Präst, Morgontåget, Lunch, VVS kontrollör, fika, bil.
Jag vet att VVS kontrollör är två ord, men det struntar jag blankt i...
Skriv följande:
<table border=5>
<tr><td>Präst</td><td>Morgontåget</td><td>Lunch</td></tr>
<tr><td>VVS kontrollör</td><td>fika</td><td>bil</td></tr>
</table>
Har du gjort det rätt så ser den ut så här:
| Präst | Morgontåget | Lunch |
| VVS kontrollör | fika | bil |
Som du ser så anpassas cellerna med de dataceller som är brevid,
och så som du ser så får du en vänsterställd text automatiskt.
Vi gör om tabellen lite grann. Vi tar bort två och ersätter det med en bild,
en länk och lägger en bakgrundsfärg i cell.
<table border=5>
<tr><td>Präst</td><td>Morgontåget</td><td>img src="bilder/"anielg.gif";/td></tr>
<tr><td bgcolor="#ffa500">VVS kontrollör</td><td><a href="index.html">klicka här</a></td><td>bil</td></tr>
</table>
Nu har jag ingen index.sida på den här kursen så jag har länkat till en annan. Du ska länka den till index.html"
| Präst | Morgontåget |  |
| VVS kontrollör | klicka här | bil |
<table width=75% border=3 cellspacing=3 cellpadding=5>
<caption align=top><h1>Testabell</h1></caption>
<tr align=center valign=middle>
<th colspan=3>En liten underrubrik</th>
<tr align=center valign=middle>
<td rowspan=2> Här används ROWSPAN=2</td>
<td>text</td><td>mer text</td>
<tr align=center valign=middle>
<td>Förstår du?</td><td>ännu mera text</td></tr>
</table>
| En liten underrubrik | ||
|---|---|---|
| Här används ROWSPAN=2 | text | mer text |
| Förstår du? | ännu mera text | |
Ska vi kika närmare på de nya taggarna och hur de på verkar tabellen ovan.
Vi börjar med table-taggen som kan med delkommandon fås att anpassa till websidan.
| <table width=75% border=3 cellspacing=3 cellpadding=5> |
width=70% anpassar tabellen till fönstrets bredd. Oavsett skärmstorlek, skärmbredd så behåller sidan sin layout. border=3 visar en ram runt tabellen cellspacing bestämmer avståndet mellan cellerna cellpadding bestämmer avståndet i bildpunkter från tabellcellens kant till cellens innehåll. |
|
<caption align=top> <h1>Testabell</h1></caption> |
Placerar här rubriken ovanför tabellen om du vill placera den under byter du align=top till align=bottom |
| <tr align=center valign=middle> | Man kan placera deltaggar både i tr och tdd taggarna. Med align taggen placerar du cell innehållet lodrätt med valign vågrätt. |
| <th colspan=3>En liten underrubrik</th> <td rowspan=2> Här används ROWSPAN=2</td> | Med delkommandot colspan
kan du göra en tabellcell täcka över ett antal celler vågrätt i detta fall över 3 celler. Med rowspan gör du det samma lodrätt. I detta fall över 2 celler. |
Slut på Lektion 3
Till Överkurs Lär dig göra en sida med frames!
Webdesign:Ollie Ahokas, e-mail:Olliehokas@.yahoo.se