På denna hemsida beskrivs punktlistor och tabeller. Här beskrivs också hur man kan använda tabeller för att skapa ett rutnät för design, s.k. platshållare.
Punktlistor kan fås antingen som numrerade eller onumrerade listor. Exempel på en onumrerad punktlista är t.ex. innehållsförteckningen ovan för denna hemsida.
CSS-ramverk, så som Materialize som används för denna underwebb, har åsikter om hur listor (och andra element) bör visas, vilket brukar vara att inte visa punkt och eller ha ett indrag till vänster (så som innehållsförteckningen uppe till höger i denna sida).
Taggen för de onumrerade listorna är <ul>
(eng. unordered list) och varje punkt får då standard
en ifylld cirkel först på
raden (precis som i innehållsförteckningen ovan). ul-taggen används
för att avgränsa listan, d.v.s. tala om var den börjar och slutar,
och varje punkt i listan markeras med taggen <li> (eng. list
item).
<ul>
<li>Punkt 1 i listan</li>
<li>Punkt 2 i listan</li>
</ul>Listor är tillåtna inom andra listor, s.k. nästlade listor.
Den inre listan ska placeras mellan öppnande och avslutande li-tagg.
Vanligtvis visas den inre listan med en annan typ av utseende på punkterna.
<ul>
<li>Punkt 1 i yttre lista
<ul>
<li>Punkt 1.1 i inre lista</li>
<li>Punkt 1.2 i inre lista</li>
</ul>
</li>
<li>Punkt 2 i yttre lista</li>
</ul>Tidigare kunde man ändra punktens utseende genom att använda
attributet type, men numera får (bör) man använda CSS-egenskapen
list-style-type med något av värdena circle,
disc, none eller square.
(Exampel till höger/nedan visar på applicering av
stil m.h.a attributet style - något som bör undvikas!)
<ul type="square">
<li>Punkt nummer ett</li>
</ul>
<ul style="list-style-type: square;">
<li>Annan punkt nummer ett</li>
</ul>Numrerade listor fungera som de onumrerade med skillnaden att man
använder taggen <ol> (eng. ordered list) istället
för <ul> och att punkterna ersätts med siffror.
Till skillnad från onumrerade listor så ges inte den inre listan en annan typ av numrering.
<ol>
<li>Punkt 1 i yttre lista
<ol>
<li>Punkt 1.1 i inre lista</li>
<li>Punkt 1.2 i inre lista</li>
</ol>
</li>
<li>Punkt 2 i yttre lista</li>
</ol>Som standard visas de numrerade listorna med (arabiska) siffror. Vill
vi använda en annan typ av numrering så kan vi använda attributet
type i ul-taggen för att ändra formatet på numreringen. Nedanstående tabell
visar vilket värde type ska ha för att ge respektive typ av numrering.
| Typ av numrering | Värde på attributet type |
|---|---|
| arabiska (1, 2, 3, ...) | 1 (standard) |
| små romerska (i, ii, iii, ...) | i |
| stora romerska (I, II, III, ...) | I |
| små bokstäver (a, b, c, ...) | a |
| stora bokstäver (A, B, C, ...) | A |
Önskas annan typ av numrering, t.ex. armenisk eller georgisk, så kan man istället använda CSS för att ändra den (se exempel 4.1.2 nedan).
<ol type="i">
<li>Punkt 1 i en lista
med romerska siffror</li>
<li>Punkt 2 i en lista
med romerska siffror</li>
<li>Punkt 3 i en lista
med romerska siffror</li>
<li>Punkt 4 i en lista
med romerska siffror</li>
<li>Punkt 5 i en lista
med romerska siffror</li>
</ol>Problemet med numrerade listor är att punkterna måste ingå i samma
lista för att kontinuerlig numrering ska fungera. Om vi t.ex. vill ha
en tabell mitt i en lista så måste listan delas i två delar. För att
fortsätta numreringen från en annan lista kan vi använda attributet start
i ol-taggen för att ange startvärde i lista två. Värdet för attributet start
måste vara ett positivt tal. Koden för en lista som börjar numrera
från 6 blir följande:
<ol start="6">
<li>Punkt 6</li>
<li>Punkt 7</li>
<li>Punkt 8</li>
</ol>
<ol start="5" type="i">
<li>Punkt 5</li>
<li>Punkt 6</li>
</ol>Tabeller är till för att presentera data i tabellform.
(Tabeller har tidigare, innan CSS, används för att designa webbsidor, något som bör göras med CSS istället.)
Tabeller i HTML består främst av tre taggar
<table><tr><td>För att skapa en tabell så börjar vi med att ange start och slut på tabellen med <table>. Därefter märker vi upp raderna (med <tr>) inom tabellen och sist cellerna (med <td>) i raderna. När vi skapar en tabell måste (bör) antalet celler vara desamma i varje rad för att tabellen ska visas på ett riktigt sätt. (Sist i detta avsnitt ska vi se hur vi kan sammanfoga celler för att få olika antal celler i raderna.)
Antalet rader i en tabell motsvaras alltså av antalet tr-taggar
och antalet kolumner motsvaras av antalet td-taggar.
Enkel tabell med två rader och två kolumner. (Ordet kolumn har förkortats till "kol." i två celler för att visa hur webbläsare presenterar celler med olika längd. Utseende på exempel nedan har, eller kan ha, påverkats av CSS-ramverk som används för sida.)
Tabellens bredd (och höjd) anpassas, som standard, automatiskt till den cell med bl.a. längst (resp. flest rader) text i en kolumn (rad). Även de kolumnernas bredd anpassas individuellt till den text som är längst i cellerna. Bredden på de olika kolumnerna anpassa alltså till innehållet i respektive kolumns celler. Längre ner ska vi se hur man kan styra bredden (och höjden) på tabeller och celler (rader).
(Olyckligtvis har jag valt ett CSS-ramverk, Materialize, som är "åsiktsfullt" för denna webbsida/underwebb, d.v.s. ramverket anger som standard hur något bör se ut, så som tabeller. :-S Se exempel 4.2.0 nedan för hur tabeller ser ut utan formatering.)
<table>
<tr>
<td>[Rad 1 - kol. 1]</td>
<td>[Rad 1 - kolumn 2</td>
</tr>
<tr>
<td>[Rad 2 - kolumn 1]</td>
<td>[Rad 2 - kol. 2]</td>
</tr>
</table>| [Rad 1 - kol. 1] | [Rad 1 - kolumn 2] |
| [Rad 2 - kolumn 1] | [Rad 2 - kol. 2] |
Tidigare fanns attribut för att ange tjocklek på kantlinjer för tabell
och celler, mellanrum mellan celler (både kolumner och rader), utfyllnad -
d.v.s. avstånd mellan cellens innehåll och dess kantlinje - samt positionering
av innehåll i celler, men dessa attribut har numera utgått (d.v.s. attributen
border, cellspacing, cellpadding
samt align och valign).
Använd CSS för att ändra dessa egenskaper i tabeller.
Webbläsare brukar anpassa tabellers bredd efter bredden på webbläsaren och innehållet i tabellerna. Även cellernas innehåll styr bredden på tabeller och bredden på respektive kolumn. Tabellerna i exemplen på denna webbsida är inte så breda då de innehåller ganska lite text. Nedan visas samma tabell som ovan fast med flera rader med text i cell 1 i första raden.
(Se exempel 4.2.3. för bättre exempel.)
Ibland kan det vara trevligt att vet lite mer exakt hur en tabell
eller cell kommer ta sig ut. Bredden och höjden på tabeller och
celler kan styras med attributen width respektive height.
Attributen kan anges för både table- och td-taggen
(även om inte attributet är standard i
den senare) och värdena kan ges i procent eller bildpunkter.
| [Rad 1 - kol. 1] I denna cell har mer text infogats för att visa hur webbläsare brukar anpassa bredden på tabeller och kolumner efter cellernas innehåll. Eftersom denna cell innehåller mycket text så kommer kolumnen med denna cell att vara ganska bred medan kolumnen till höger kommer vara smal då cellerna i den kolumnen inte innehåller så mycket text. | [Rad 1 - kolumn 2] |
| [Rad 2 - kolumn 1] | [Rad 2 - kol. 2] |
Genom att använda bildpunkter som mått så kan vi styra hur bred en tabell och dess celler kommer att vara. Oberoende av besökarens upplösning (antal punkter horisontellt och vertikalt på skärmen) så kommer tabellerna och cellerna att ha denna bred. Besökarens upplösning kommer dock att avgöra hur mycket av besökarens skärm som kommer upptas av tabellerna. Vanliga upplösningar på datorer med Windows är 1024x600 (s.k. Netbooks), 1024x768, 1280x800 och 1366x768. Vi bör alltså försöka att anpassa våra hemsidor till max 900-1000 bildpunkters bredd för att passa på de flesta besökares skärmar (några bildpunkter går bort för ramar och rullningslister i webbläsarens fönster!).
Upplösning brukar anges som antal punkter horisontellt x vertikalt. Desto högre värden, desto högre är upplösning, och desto mer får plats på skärmen. Men det som visas på skärmen, bl.a. text, blir också mindre ju högre upplösning.
Vi skulle kunna göra en tabell med bredden 300 punkter och sen fördela bredden på kolumnerna till 75, 100 respektive 125 punkter. Koden blir då följande:
<table
style="width: 300px; border: solid red 1px">
<tr>
<td style="width: 75px">Kolumn 1</td>
<td style="width: 100px">Kolumn 2</td>
<td style="width: 125px">Kolumn 3</td>
</tr>
<tr>
<td style="width: 75px">75</td>
<td style="width: 100px">100</td>
<td style="width: 125px">125</td>
</tr>
</table>| Kolumn 1 | Kolumn 2 | Kolumn 3 |
| 75 | 100 | 125 |
Observera att man bör ange bredden för varje cell (d.v.s. varje td-tagg)
som ingår i kolumnen. Ibland räcker det dock att ange det för celler i
första raden då celler i resterande rader (eventuellt) kommer att anpassas
efter den första.
Om vi istället använder procent för att ange bredden på
en tabell så anges bredden relativt till webbläsarens bredd på
besökarens skärm. En tabell med attributet width satt till
"100%" kommer att spänna från vänster till höger i
besökarens webbläsare. Bredden på kolumner för celler är relativt
bredden på hela tabellen.
I exemplet nedan är tabellens bredd fortfarande 300 bildpunkter men respektive kolumn har fått en procentsats som värde på bredden istället (värdena ska motsvara de bredder vi fick i exemplet med bildpunkter ovan - t.ex. 75 är 25% av 300).
Attributet height bör inte användas - låt webbläsaren
anpassa höjden på tabell och rader i tabell! Olika webbläsare
tenderar nämligen att använda olika typsnitt och lite olika storlek
på (samma) typsnitt. Även besökare med försämrad syn kan ha
anpassat typsnitt och storlek på typsnitt i sin webbläsare för att se
bättre. Om man anger höjden på en rad eller tabell så kan det
tänkas att texten inte får plats i cellen och då visar webbläsaren
endast den text som får plats i cellerna. (Det finns dock undantag,
t.ex. för design, då höjd kan vara lämpligt att ange. Detta
behandlas dock inte på dessa hemsidor.)
<table style="width: 100%">
<tr>
<td style="width: 25%">Kolumn 1</td>
<td style="width: 33%">Kolumn 2</td>
<td style="width: 42%">Kolumn 3</td>
</tr>
<tr>
<td style="width: 25%">25%</td>
<td style="width: 33%">33&</td>
<td style="width: 42%">42%</td>
</tr>
</table>| Kolumn 1 | Kolumn 2 | Kolumn 3 |
| 25% | 33% | 42% |
Tabeller kan ges en rubrik genom att använda taggen caption
och som placeras mellan öppnande och avslutande table-tagg. Rubriken
placeras som standard centrerat ovanför tabellen men kan även placeras
nedanför m.h.a. värdet "bottom" i attributet align i
caption-taggen.
<table>
<caption>Rubrik för tabell</caption
...
</table>| Rad 1 - kolumn 1 | Rad 1 - kolumn 2 |
| Rad 2 - kolumn 1 | Rad 2 - kolumn 2 |
Även kolumner kan få rubriker, vilka oftast visas med fet stil.
Rubrikerna markeras med taggen th (eng. table header) och
används istället för td-taggen i den rad man vill ha rubrikerna. I
exemplet nedan har tabellen fått en rubrik, som visas under tabellen,
och första raden är rubriker för kolumnerna
<table>
<caption>Rubrik för tabell</caption>
<tr>
<th>Rubrik kolumn 1</th>
<th>Rubrik kolumn 2</th>
</tr>
<tr>
<td>Rad 1 - kolumn 1</td>
<td>Rad 1 - kolumn 2</td>
</tr>
...
</table>| Rubrik kolumn 1 | Rubrik kolumn 2 |
|---|---|
| Rad 1 - kolumn 1 | Rad 1 - kolumn 2 |
| Rad 2 - kolumn 1 | Rad 2 - kolumn 2 |
Som nämnt ovan så bör alla rader i en tabell ha lika många kolumner (celler). Men vi har möjligheten att låta en cell spänna över två kolumner eller rader.
För att låta en cell spänna över två kolumner använder vi attributet colspan
i td-taggen. Om vi sammanfogar två celler så ska td-taggen
förekomma en gång mindre mindre på denna rad!
I exemplet nedan så består tabellen av två kolumner och
två rader. I den första raden har cellerna sammanfogats för att
spänna över bägge kolumner. Observera att det endast finns en td-tagg
i första raden då cellerna i denna rad har sammanfogats! (har
markerats med en kommentar där taggen skulle varit).
Den kan vara praktiskt att visa att en td-tagg utelämnats med en
kommentar som i exemplet ovan (speciellt om man skriver koden för
hand). Och givetvis kan en cell spänna över fler kolumner än 2 -
antalet begränsas av antalet kolumner i tabellen. :-)
<table>
<tr>
<td colspan="2">Sammanfogad cell</td>
<!-- td-tagg 2 utelämnad -->
</tr>
<tr>
<td>Cell 1 rad 2</td>
<td>Cell 2 rad 2</td>
</tr>
</table>| Sammanfogad cell | |
| Cell 1 rad 2 | Cell 2 rad 2 |
På motsvarande sätt, som för celler som spänner över kolumner, fungerar celler
som spänner över två rader istället . Skillnaden är att vi använder attributet
rowspan i td-taggen istället. I exemplet nedan har
cellerna i kolumn ett sammanfogats. Observera att vi utelämnar en td-tagg
i rad två! (har markerats med en kommentar där taggen skulle varit).
Även här kan celler spänna över fler rader än 2.
<table>
<tr>
<td rowspan="2">Sammanfogad cell</td>
<td>Cell 2 rad 1</td>
</tr>
<tr>
<!-- td-tagg 1 utelämnad -->
<td>Cell 2 rad 2</td>
</tr>
</table>| Sammanfogad cell | Cell 2 rad 1 |
| Cell 2 rad 2 |
Tabeller användes tidigare (innan CSS utvecklats till vad det är idag) för att skapa design. Eftersom detta sätt att använda tabeller inte är det ästa så har jag valt att ta bort detta avsnitt.