Heddas logga

Webb­utveckling

Heddas logga

Tabeller på webben

Tabeller är fruktansvärt bra sätt att presentera information på, särskilt information i sifferform och när den beror på två saker. Typ en tidtabell där det beror på dag och tid.

Mitt schema
Måndag Tisdag Onsdag Torsdag Fredag
08 Web Pro Möte Web Ledig
09 Web Pro/Mat Möte/Pro Web/Mat Mat
10 Planera Mat Mat Mat Mat
11 Mat Web Lunch Lunch Lunch
12 Mat/Lunch Web Planera Planera Planera
13 Planera Ledig Planera Planera Planera/Pro
14 Planera Ledig Planera Planera Pro
15 Möte Ledig Web Pro Ledig
16 Möte Ledig Web Pro Ledig

Eller en resultattabell:

Tärningskast
Siffra 100 1 000 1 000 000
1 15 171 166096
2 20 176 166474
3 13 176 167309
4 21 176 167289
5 16 176 166528
6 15 176 166314

Skapa en tabell

En tabell innehåller ett antal rader och ett antal kolumner. Rader är horizontella och kolumner är vertikala. Varje ruta i en tabell kallas för cell. Så en tabell med 3 rader och 4 kolumner har som regel 3×4=12 celler.

När du skapar en tabell så börjar du som med allt annat i HTML att du öppnar och stänger elementet: 

<table>
	
</table>

Sen skapar du en tabell i HTML rad för rad med elementet: <tr> som står för "table row". 

<table>
	<tr>
	
	</tr>
	<tr>
	
	</tr>
	<tr>
	
	</tr>
</table>
<!-- En tabell med tre rader -->

Nu har du en tom tabell med tre rader. För att fylla dem med innehåll så skapar du inte en hög med kolumner, utan istället skapar du celler till raderna. Du skapar en cell med elementet <td> som står för "table data". 

<table>
	<tr>
		<td> </td>
		<td> </td>
		<td> </td>
		<td> </td>
	</tr>
	<tr>
		<td> </td>
		<td> </td>
		<td> </td>
		<td> </td>	
	</tr>
	<tr>
		<td> </td>
		<td> </td>
		<td> </td>
		<td> </td>
	</tr>
</table>
<!-- En tabell med tre rader och fyra kolumner-->

Nu när du har skapat tabellen så kan du fylla den med data genom att skriva text mellan varje <td> och </td>-par. 

<table>
	<tr>
		<td>Norge</td>
		<td>Ryssland</td>
		<td>Kanada</td>
		<td>Tyskland</td>
	</tr>
	<tr>
		<td>Tyskland</td>
		<td>Norge</td>
		<td>Tyskland</td>
		<td>USA</td>	
	</tr>
	<tr>
		<td>Kanada</td>
		<td>Kanada</td>
		<td>USA</td>
		<td>Österrike</td>
	</tr>
</table>
<!-- En tabell över topp tre i de fyra senaste olympiska vinterspelen-->
Norge Ryssland Kanada Tyskland
Tyskland Norge Tyskland USA
Kanada Kanada USA Österrike

Rubriker

En tabell är dock väldigt svårläst utan rubriker. För att skapa en rubrik så använder du elementet <th>. För att få in rubriker över kolumnerna korrekt behöver du lägga dem på en egen rad med <tr>. För att få in dem rätt bredvid raderna så lägger du till dem som om de vore en ny cell. 

<table>
	<tr> <!-- Den nya raden med rubriker-->
		<th scope="col">2018</th>
		<th scope="col">2014</th>
		<th scope="col">2010</th>
		<th scope="col">2006</th>
	</tr>
	<tr>
		<td>Norge</td>
		<td>Ryssland</td>
		<td>Kanada</td>
		<td>Tyskland</td>
	</tr>
	<tr>
		<td>Tyskland</td>
		<td>Norge</td>
		<td>Tyskland</td>
		<td>USA</td>	
	</tr>
	<tr>
		<td>Kanada</td>
		<td>Kanada</td>
		<td>USA</td>
		<td>Österrike</td>
	</tr>
</table>
<!-- En tabell över topp tre i de fyra senaste olympiska vinterspelen-->
2018 2014 2010 2006
Norge Ryssland Kanada Tyskland
Tyskland Norge Tyskland USA
Kanada Kanada USA Österrike

scope

Notera att du bör skriva om rubriken sitter över en kolumn eller vid en rad med attributet scope. 

<table>
	<tr>
		
		<th scope="col">2018</th>
		<th scope="col">2014</th>
		<th scope="col">2010</th>
		<th scope="col">2006</th>
	</tr>
	<tr>
		<th scope="row">1</th> <!--Rubrik för raden-->
		<td>Norge</td>
		<td>Ryssland</td>
		<td>Kanada</td>
		<td>Tyskland</td>
	</tr>
	<tr>
		<th scope="row">2</th> <!--Rubrik för raden-->
		<td>Tyskland</td>
		<td>Norge</td>
		<td>Tyskland</td>
		<td>USA</td>	
	</tr>
	<tr>
		<th scope="row">3</th> <!--Rubrik för raden-->
		<td>Kanada</td>
		<td>Kanada</td>
		<td>USA</td>
		<td>Österrike</td>
	</tr>
</table>
<!-- En tabell över topp tre i de fyra senaste olympiska vinterspelen-->
2018 2014 2010 2006
1 Norge Ryssland Kanada Tyskland
2 Tyskland Norge Tyskland USA
3 Kanada Kanada USA Österrike

Nu när du har lagt till en rubrik på varje rad så har vi i praktiken 5 kolumner. Då behöver vi justera antalet celler i den översta raden och lägga till en rubrik för kolumnen med rad-rubriker. 

<table>
	<tr>
		<th scope="col">Placering</th>
		<th scope="col">2018</th>
		<th scope="col">2014</th>
		<th scope="col">2010</th>
		<th scope="col">2006</th>
	</tr>
	<tr>
		<th scope="row">1</th> 
		<td>Norge</td>
		<td>Ryssland</td>
		<td>Kanada</td>
		<td>Tyskland</td>
	</tr>
	<tr>
		<th scope="row">2</th>
		<td>Tyskland</td>
		<td>Norge</td>
		<td>Tyskland</td>
		<td>USA</td>	
	</tr>
	<tr>
		<th scope="row">3</th>
		<td>Kanada</td>
		<td>Kanada</td>
		<td>USA</td>
		<td>Österrike</td>
	</tr>
</table>
<!-- En tabell över topp tre i de fyra senaste olympiska vinterspelen-->
Placering 2018 2014 2010 2006
1 Norge Ryssland Kanada Tyskland
2 Tyskland Norge Tyskland USA
3 Kanada Kanada USA Österrike

Tabelltitel

Om du vill lägga till en titel eller en caption på sin tabell använder du dig utav elementet <caption> inuti tabellen. 

<table>
	<caption>Medaljplaceringar i vinter-OS</caption>
	<tr>
		<th scope="col">Placering</th>
		<th scope="col">2018</th>
		<th scope="col">2014</th>
		<th scope="col">2010</th>
		<th scope="col">2006</th>
	</tr>
	<tr>
		<th scope="row">1</th> 
		<td>Norge</td>
		<td>Ryssland</td>
		<td>Kanada</td>
		<td>Tyskland</td>
	</tr>
	<tr>
		<th scope="row">2</th>
		<td>Tyskland</td>
		<td>Norge</td>
		<td>Tyskland</td>
		<td>USA</td>	
	</tr>
	<tr>
		<th scope="row">3</th>
		<td>Kanada</td>
		<td>Kanada</td>
		<td>USA</td>
		<td>Österrike</td>
	</tr>
</table>
<!-- En tabell över topp tre i de fyra senaste olympiska vinterspelen-->
Medaljplaceringar i vinter-OS
Placering 2018 2014 2010 2006
1 Norge Ryssland Kanada Tyskland
2 Tyskland Norge Tyskland USA
3 Kanada Kanada USA Österrike

Semantik

För att hjälpa personer med skärmuppläsning så kan du använda dig utav elementen <thead>, <tbody> samt <tfoot> för att förtydliga strukturen på din tabell.

<thead>

I det här elementet lägger du in rubriker och annan information som beskriver tabeller, lite som <head>. Det här elementet har ingen inverkan på utseendet som standard, men det kan man ändra på med CSS. 

<table>
	<caption>Medaljplaceringar i vinter-OS</caption>
	<thead>
		<tr>
			<th scope="col">Placering</th>
			<th scope="col">2018</th>
			<th scope="col">2014</th>
			<th scope="col">2010</th>
			<th scope="col">2006</th>
		</tr>
	</thead>
	<tr>
		<th scope="row">1</th> 
		<td>Norge</td>
		<td>Ryssland</td>
		<td>Kanada</td>
		<td>Tyskland</td>
	</tr>
	<tr>
		<th scope="row">2</th>
		<td>Tyskland</td>
		<td>Norge</td>
		<td>Tyskland</td>
		<td>USA</td>	
	</tr>
	<tr>
		<th scope="row">3</th>
		<td>Kanada</td>
		<td>Kanada</td>
		<td>USA</td>
		<td>Österrike</td>
	</tr>
</table>
<!-- En tabell över topp tre i de fyra senaste olympiska vinterspelen-->

<tbody>

Precis som i <body> så är det här själva innehållet ska vara. Så all data ska in i <tbody>. 

<table>
	<caption>Medaljplaceringar i vinter-OS</caption>
	<thead>
		<tr>
			<th scope="col">Placering</th>
			<th scope="col">2018</th>
			<th scope="col">2014</th>
			<th scope="col">2010</th>
			<th scope="col">2006</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th> 
			<td>Norge</td>
			<td>Ryssland</td>
			<td>Kanada</td>
			<td>Tyskland</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Tyskland</td>
			<td>Norge</td>
			<td>Tyskland</td>
			<td>USA</td>	
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Kanada</td>
			<td>Kanada</td>
			<td>USA</td>
			<td>Österrike</td>
		</tr>
	</tbody>
</table>
<!-- En tabell över topp tre i de fyra senaste olympiska vinterspelen-->

<tfoot>

En footer som du kan använda om du har någon sorts avslutande information i botten av din tabell. Till exempel om du räknar ut någon summa av alla värdena ovanför.

Sammanslagna celler

Ibland vill du slå ihop celler så att de sträcker sig över flera rader eller kolumner. Då kan du lägga till attributen colspan eller rowspan beroende på om de ska sträcka sig över kolumner eller rader. 

<table>
	<tr>
		<td>1 cell</td>
		<td colspan="2">2 cell</td>
		<td rowspan="2">2 cell</td>
	</tr>
	<tr>
		<td rowspan="3">3 cell</td>
		<td>1 cell</td>
		<td>1 cell</td>
	</tr>
	<tr>
		<td rowspan="2" colspan="2">4 cell</td>
		<td>1 cell</td>
	</tr>
	<tr>
		<td>1 cell</td>
	</tr>
</table>
1 cell 2 cell 2 cell
3 cell 1 cell 1 cell
4 cell 1 cell
1 cell

När man slår samman celler så gäller det att hålla tungan rätt i mun så att man faktiskt får rätt på antalet celler och deras placering.

Övningar

  1. Ladda ner filen tabell-uppgifterna.html från Vklass under mappen Material.
  2. Skapa en tabell med fem rader och två kolumner.
    1. I första kolumnen ska du skriva efternamnet på fem i klassen.
    2. I andra kolumnen ska du skriva deras förnamn
  3. Skapa en tabell med fyra rader och fyra kolumner
    1. Översta raden ska ha rubrikerna: "Hand", "Sten" "Sax" och "Påse"
    2. Den första kolumnen ska ha samma rubriker
    3. Fyll i tabellen så att man ser om rubriken i raden vinner över rubriken i kolumnen
    4. CSS (frivillig): gör rutan grön om raden vinner, röd om den förlorar och svart om de är lika
  4. Skapa en tabell som visar den nuvarnade ställningen i SHL
    1. Första kolumnen ska visa placering
    2. Andra kolumnen ska visa lagets logga
    3. Tredje kolumnen ska visa lagnamnet
    4. Fjärde kolumnen ska visa spelade matcher
    5. Femte kolumnen ska visa målstatistik (+/-)
    6. Sjätte kolumnen ska visa poängen
    7. Tabellen ska ha titeln "SHL ställningen 2021–02–03"
    8. CSS (frivillig): gör färgen på ditt favoritlag grönt
  5. Gör en tabell som ser ut exakt så här:
    En bild med en knasig tabell
    Använd den tabell som jag skapat som grund så får du med kanterna.