HTML

Tabeller

För att lägga in lite data om Nike skapar vi en tabell. En tabell kan beskrivas som en hållare för celler där man kan lägga text och annan information.


Mer bestämt består en tabell av 

	Tabellkropp - TABLE

	Tabellrader - TR

	Tabellhuvud - TH

	Tabellceller - TD. 

En tabell har som sitt grundmärke TABLE. En TABLE innehåller sedan tabellrader, precis som i vilken tabell som helst. Varje rad delas upp i tabellceller. En tabellcell kan vara antingen tabelldata (TD) eller tabellhuvud (TH). I TD ligger själva informationen och i TH en förklaring till den aktuella kolumnen/raden.

Det här kan verka lite krångligt men ett enkelt exempel på sidan illustrerar hur det är tänkt.


<TABLE BORDER="1">

	<TR>

		<TH>Leksak</TH>

		<TH>Antal</TH>

	</TR>

	

	<TR>

		<TD>Tuggben</TD>

		<TD>3</TD>

	</TR>



	<TR>

		<TD>Bollar</TD>

		<TD>5</TD>

	</TR>



</TABLE>

Tabellen som består av tre rader och två kolumner beskriver de leksaker som Nike har och hur många av varje sort. Överst i tabellen vill vi ha en rubrik för varje kolumn och det är det den första (översta) raden är till för. Kolumnnamnen sätter vi inne i elementet TH. Man måste inte ha med TH men ofta blir det snyggt och korrekt att ha det.

Efter detta ska vi fylla på med data och lägger till två rader med vardera två stycken celler i. Inom elementen TD skriver vi in det data som ska finnas i tabellen.

Sidan får nu följande utseende.

Resultat

Resultat

Övning

ÖvningDu ska nu själv lägga till nya rader i tabellen. Utöka med leksakerna skor och katter. Nike kan t ex ha 4½ skor och en katt. Skriv in koden och prova sedan i din webbläsare. I CSS-avsnittet kommer dessa två leksaker att finnas med och om du inte lägger till dem nu går det bra att göra det senare.

Listor

Det går också att skapa olika slags listor i HTML. Vi ska inte skapa några listor i exemplet om Nike men titta på ett par olika varianter. Det finns två olika typer av listor, ordnade och oordnade. De ordnade har automatisk uppräkning med någon slags siffra som man själv kan välja.

Ordnade listor heter UL och oordnade OL. Varje rad i en lista heter i sin tur LI (List Item). Ett exempel på en lista är

som i kod blir

<UL>

	<LI>Sverige</LI>

	<LI>Danmark<LI>

	<LI>Italien</LI>

	<LI>Bulgarien</LI>

</UL>

Den runda pricken är det som utmärker varje rad om man inte väljer ett annat alternativ. För fler listor titta på det här exemplet med tillhörande kod om du vill veta hur respektive lista skapas.

Resultat

Kod