HTML Tabeller
Vad är tabeller
Tabeller innehållande kolumner och rader användes tidigare till att designa layouten på en webbsida. Detta har blivit ett föråldrat verktyg för att göra detta. Det finns nu bättre vektyg (html-kod) för detta men i en del fall kan det vara bra att redovisa text och/eller tal på ett strukturerat sätt. Det kan då vara användbart att använda html-tabeller.
Vi ska titta på hur man bygger en tabell med html-taggar och sedan ska vi se hur man kan göra vissa designinställningar med hjälp av stilmall.
När används det
För att strukturera information som hör ihop på webbsidor. Definitivt inte som grundlayout för webbsidor.
Start
Nya taggar är <table> för start av hela tabellen. Vi har
<tr> för start av en rad och i varje rad så anger vi <td> för start av en cell. Vi måste logiskt ha lika många celler på varje rad för att det ska bli raka kolumner och tabellen ska se ordentlig ut.
Ett tips är att man alltid tänker efter innan hur många rader och kolumner man behöver som minimum och sen skapar en grundkod för den layouten. Därefter börjar man arbeta med mer layoutmässig design vilket vi kommer återkomma till.
table {
margin:auto;
border:1px black solid;
}
td {
border:1px black solid;
}
...
...
<table>
<tr>
<td>AJAJAJ</td>
<td>X</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Lite mer inställningar
Vi ställer in önskad bredd på tabellen, ser till att det blir lite luft runt innehållet i varje cell. Vi styr också utseendet så att kolumnerna blir lika breda. Detta fungerar så länge som vi inte stoppar in något i en cell som är större än den önskade kolumnen bredd för då anpassar sig kolumnen efter innehållet och vå design börjar krackelera.
table {
width:300px;
margin:auto;
border:1px black solid;
}
td {
border:1px black solid;
padding:25px;
}
.femtioprocent {
width:50%;
}
...
...
<tr>
<td class="femtioprocent">AJAJAJ</td>
<td>X</td>
</tr>
<tr>
<td>Y</td>
<td>Z</td>
</tr>
</table>
...
Hur styr vi innehållet i cellerna (vänster, mitten, höger, upp, ner) och hur slår vi ihop celler
Vi ställer in önskad bredd på tabellen, ser till att det blir lite luft runt innehållet i varje cell. Vi styr också utseendet så att kolumnerna blir lika breda. Detta fungerar så länge som vi inte stoppar in något i en cell som är större än den önskade kolumnen bredd för då anpassar sig kolumnen efter innehållet och vå design börjar krackelera.
Vi passar på att använda tabellrubrikceller, th, som automatiskt gör att innehållet i dessa celler centreras. Används normalt endast på första raden.
<th class="bg_blue sjuttioprocent">LEKTION</th>
Ifall vi vill
ange information från flera klasser till ett html-element så radar vi upp klasserna bakom "class"-attributet med ett mellanslag mellan varje klass.
class="bg_blue sjuttioprocent"
Vi kan inte skriva attributet flera gånger i ett och samma html-element.
Ibland vill vi att en cell ska vara större och täcka flera kolumner eller kanske flera rader. Med egenskaperna rowspan och colspan fixar vi det men vi måste plocka bort lika många celler i vår grundstruktur som vi slår ihop med andra celler.
För att styra innehållet i cellerna så använder vi text-align (left, center, right) och vertcal-align (top, middle, bottom).
table {
margin:auto;
border:1px black solid;
width:800px;
background-color:#090;
color:#fff;
}
td {
border:1px black solid;
padding:5px;
}
.bg_blue {
background-color:#000080;
}
.bg_red {
background-color:#f00;
}
.bg_silver {
background-color:silver;
}
.mitten {
text-align:center;
}
.hoger {
text-align:right;
}
.upp {
vertical-align:top;
}
.ner {
vertical-align:bottom;
}
.sjuttioprocent {
width:70%;
}
img {
border-width:0px;
width:300px;
}
.stortext {
font-size:36px;
}
...
...
<table>
<tr>
<th class="bg_blue sjuttioprocent">LEKTION</th>
<th>MOMENT</th>
</tr>
<tr>
<td>1</td>
<td>Grunder HTML<br>Olika märkord<br>och annat</td>
</tr>
<tr>
<td class="hoger">2</td>
<td class="mitten">Form och färg<br>Teckensnitt<br>bakgrundsfärger</td>
</tr>
<tr>
<td class="mitten ner">3</td>
<td>Om bilder<br>GIF<br>JPG</td>
</tr>
<tr>
<td class="upp">4</td>
<td class="bg_silver">Listor<br>Listor i listor i listor<br />
Ordnade och oordnade</td>
</tr>
<tr>
<td colspan="2" class="bg_red mitten"><span class="stortext">PROV PÅ ALLT</span></td>
</tr>
<tr>
<td rowspan="2" class="mitten"><img src="bilder/skolanbild.gif" alt="Skolan"></td>
<td>Friluftsdag</td>
</tr>
<tr>
<td>Lovdag</td>
</tr>
</table>
...
Osynliga kanter är effektfullt
...
body {
font-family:Verdana, sans-serif;
}
h1 {
text-align:center;
}
.tabell1 {
margin:auto;
border-width:0px;
width:600px;
}
.femtiopx {
width:50px;
}
...
...
<tr>
<td><strong>Musikaler</strong></td>
<td class="femtiopx"> </td>
<td><strong>Kompositörer</strong></td>
</tr>
<tr>
<td>Phantom of the Opera</td>
<td> </td>
<td>Andrew Lloyd Webber</td>
</tr>
<tr>
<td>Mamma Mia</td>
<td> </td>
<td>Björn Ulveaus/Benny Andersson</td>
</tr>
<tr>
<td>West Side Story</td>
<td> </td>
<td>Leonard Bernstein</td>
</tr>
</table>
Designtips för tabeller
Här finns lite css-tips för olika typer av kantlinjer, heldraget, streckat och varannan rad design.
Ta bort mellanrum mellan celler med stilmall
Detta går att skriva i html-koden i table taggen med cellspacing=0 men vi vill ha all design i stilmallen och då skriver vi i stilmallen på lämpligt ställe, antingen för taggen table eller en egen klass som används av table i html-koden.
• "border-collapse" Definition of W3C: property sets the way in which the borders among adjacent cells will be rendered. A value of "collapse" will merge the adjacent borders and a value of "seperate" will render both the borders.
• "border-spacing" Definition of W3C: Sets the distance between adjacent borders if the "border-collapse" property is set to "seperate". The spacing for horizontal and vertical can be defined seperately.
border-spacing: 0px 0px; /* Första värdet för horisontellt avstånd och andra för vertikalt*/
Tabellrubrik, th-td, border-collapse
Vi tittar även på hur vi får dit en rubrik som hör till tabellen, tabellrubrik.
<table>
<caption>Matpengar</caption>
<tr>
...
Källor
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
Filmer
XHTML and CSS Tutorial - 11 - Tables (thenewboston 5 min)
XHTML and CSS Tutorial - 12 - Table Headers and Movie Stars! (thenewboston 4 min)
XHTML and CSS Tutorial - 13 - colspan & Annoying People (thenewboston 5 min)
XHTML and CSS Tutorial - 14 - Table width, cellpadding, and cellspacing (thenewboston 6 min)
XHTML and CSS Tutorial - 26 - Styling Tables (thenewboston 5 min)
Kommentar: Design sköter vi med silmallen. Till exempel border, cellpadding, cellspacing, bredd. Skapa en klass och använd den där du vill ha inställningarna.