Introducerande övningar i HTML

8. Tabeller
Medieteknik
En tabell skapas på samma sätt som en lista, fast med en table-tagg som omger hela tabellen. Sedan
har man en tr-tagg för varje rad (table row) och en td-tagg för varje cell i raden (table data).
• Skriv in följande kod i ditt HTML-dokument:
Stad
Antal invånare
Kalmar
36.000
Växjö
60.000
Använd tabeller till data som ska spaltas upp
• Tabeller i HTML använder man för data som ska räknas upp som t.ex. ovanstående tabell eller ett
schema.
• Man kan också skapa en tabell inuti en tabell, men det bör undvikas, eftersom koden blir väldigt
rörig och omfattande.
• Förr var det vanligt att man använde en tabell för att skapa en layout för en sida. Man skapade då
en stor tabell som täckte hela dokumentet och fick rutor där man placerade logo, navigeringsmeny,
Sidans innehåll, etc. Det ska man dock också undvika, eftersom sidans kod då blir komplex och
svårtillgänglig för sökrobotar och personer med speciella webbläsare, t.ex. för synskadade. En
layout skapar man istället på annat sätt och det kommer vi in på i samband med att vi studerar
CSS.
9. Bilder
Nu ska du också ta med några bilder på din webbsida. Bilderna ligger lagrade som separata filer, så i
HTML-koden lägger man in en img-tagg (image) där man vill att bilden ska visas. I img-taggen har
man ett attribut kallat src (source), där man anger vilken bildfil som ska användas.
På webbsidan för denna laboration kan du ladda ner en zip-fil med ett par bilder, så om du inte redan
gjort det, laddar du ner den nu. Efter uppackning av zip-filen får du en mapp kallad bilder. Lägg den
mappen på samma plats som du sparat ditt HTML-dokument.
Inkludera en bild
• Lägg in följande kod någonstans i innehållet på din webbsida:
En bild mitt i texten.
o Bilden hamnar då på samma rad som texten.
2012-08-22 – Rune Körnefors (rune.kornefors@lnu.se) 6