Vi gör tabeller!

Här får du lära dig vad de olika attributen innebär när du ska bygga dina tabeller. Sist får du tips om du hur kan formatera tabellerna med css.

Det första man bör tänka på är i vilken upplösning din sida ska visas. Väljer du att använda procent så anpassar sig tabellen till de olika upplösningarna. Men – det beror också helt på hur innehållet i tabellerna är formaterade. En tabell i upplösningen 100% kan ändå bli för stor för en upplösning på 600×800 om man använder sig av stora bilder/tabellceller som tillsammans överstiger 800/600px. Tänk på det!

Enkelt kan man säga att en upplösning i ca 700 px width är max om du inte vill använda procent för att alla ska se din sida på ett bra och kvalitativt vis. Då har jag räknat från lägsta optimering från 600×800 px inklusive det utrymme som scroll-listen tar. Samma sak gäller naturligtvis höjden. Det är lika viktigt om man inte vill att någon ska behöva scrolla upp och ned hela tiden, framförallt om sidan dessutom redan innehåller en scrollande iframe.

Grundkoden och tabellens betydelse är denna – och den ger en tabell med en rad:

<table startattribut för en tabell >
<tr ger en tabellcell>
<td ger en tabellrad>
</td avslutar tabellraden>
</tr avslutar tabellcellen>
</table avslutar tabellen>

När man skriver all html-kodning är det viktigt att veta att man inte korsar värdeelementen eller attributen. Att korsa menas när man exempelvis först skriver <tr> <td> och sedan avslutar i samma ordning – </tr></td>. Tittar Ni noga i html-koden så är det precis tvärtom! Det sista attributvärdet man anger, ska man först börja med när man avslutar. Enkelt uttryckt – man kodar baklänges när man avslutar en html-kod.

Tabeller med två rader och fler kolumner

Vill du ha fler tabellceller bredvid varandra? Då upprepar du meta – taggen <td> —> <td>cell 1 </td><td>ny cell bredvid</td>

Detta gav en tabell med 2 celler bredvid varandra. För varje tabellcell du vill lägga till så upprepar du koden ovanför. Men du kanske vill ha 4 tabellceller? Två rader och två kolumner? Det är samma princip som gäller här, istället för att enbart upprepa <td></td> så gör du det också med <tr></tr>. Det som är viktigt att tänka på är att inte glömma att bryta tabellraden. Det gör du så här:

<tr><td>cell1</td><td>cell2</td></tr> här avslutar du tabellraden med 2 celler

<tr>här börjar en ny rad med ytterligare 2 celler<td>cell 3</td><td>cell 4</td></tr>

Här är koden:

<table>
<tr>
<td>cell1 </td>
<td>cell2 </td>
</tr>
<tr>
<td>cell3 </td>
<td>cell4 </td>
</tr>
</table>

Och så här ser tabellen ut:

cell 1
cell2
cell3 cell4

TIPS!

Visste Du att du kan formatera dina tabellceller med css?

Genom att använda class och DIV attributen kan du formatera varje enskild tabellcell, om du vill. Genom att lägga in dessa attribut kan du till skillnad från en vanlig bild få bilden till att bli en bakgrundsbild som är exakt formaterad beroende på om du använder en sömlös bakgrundsbild eller en med fasta pixlar. Dessutom – använder du dessa attribut går det att få en löpande text ovanpå bilden istället för under, över eller vid sidorna.

Här är några exempel

Låt oss säga att du vill ha attributen på några enskilda sidor. Då lägger du in denna
css-kod i < head >
<style type=”text/css”>
<!–
.bild1 { background: transparent url(‘bg.jpg’) no-repeat;}
–>
< /style >

Sedan – för de tabellceller som du vill ha denna bakgrundsbild lägger du in denna css-kod i <td>

<div class=”bild1″>alternativt <class=”bild1″>

Väljer du att lägga in attributet i din css-mall skriver du in detta i den:
.bild1 { background: transparent url(‘bg.jpg’) no-repeat;}

När du använder css-mall måste du lägga till ditt class-attribut så det ser ut så här:
<td class=”bild1″> Glöm bara inte att om du vill ha olika bilder så måste du döpa varje bild och attribut med ett likadant egna unika namn som .bild1 – .bild2. osv.

En hel kod kan då se ut som följande:

<html>
<head>
<title>
</title><style type=”text/css”>
<!–
.bild1 { background: transparent url(‘bg.jpg’) no-repeat;}
–>
</style>
</head>

Och i själva tabellen:

<table>
<tr>
<td class=”bild1″ (du ställer själv in storleken på bilden i din cssmall beroende på hur stor den är eller om den är sömlös) >
</td>
</tr>
</table>

Liknande poster:

Leave a Reply

Your email address will not be published. Required fields are marked *