03. HTML

Tabeller på hemsidan

2010-10-16 14:13 #0 av: IdaL

I denna artikeln tänkte jag ta upp lite om tabeller så kan vara väldigt bra att ha på sin hemsida om man vill rada upp något speciellt

Vad är en tabell?

En tabell är en spalt kan man säga, Du kan lägga den för att rada upp olika spalter på din sida t.ex. om du ska skriva en prislista.

Tabeller är väldigt bra och man kan hitta på myckt med dom, man ska dock inte bygga upp en hemsida på enbart tabeller utan använd då heller CSS-boxar och använd tabellerna för att finslipa innehållet på sidan.

Börja koda

En tabell är en HTML kod och ser ut såhär:

<table>
<tr>
<td>Spalt 1</td>
<td>Spalt 2</td>
</tr>
</table>

<table> - Anger att det är här tabellen börjar respektive slutar.
<tr> - Anger att detta är en ny rad
<td> - Anger att detta är en egen spalt.

Sparar vi detta ser det alltså ut såhär:

Oformaterad tabell
Nu ser det ju inte så "proffsigt" ut och du tänker säkert "det där skulle man kunna göra med bara ett mellanslag och lite radbrytningar ju. Men nu kommer vi till det finurliga med tabeller, du kan nämligen formatera dom med lite CSS för att få ett fint utseende.

Man kan t.ex. lägga till en ram runt sin tabell. då ser koden ut såhär:

<table border="1">
<tr>
<td>Spalt 1</td>
<td>Spalt 2</td>
</tr>
</table>

Du kan ändra siffran utöver hur stor ram du vill ha. När man gör detta ser tabellen ut såhär:

Tabell med ram

Man kan enkelt ändra färg på ramen genom att lägga in koden bordercolor="#hexkod" i <table>.

Man kan även lägga in koden bgcolor="#hexkod", då ändrar man bakgrundsfärgen i tabellen, du kan lägga koden i <table>-taggen om du vill ha hela tabellen i den färgen, <tr>-taggen om du vill ha en hel rad i den färgen eller i <td>-taggen om du bara vill ha färgen i en speciell spalt.

Du kan även bestämma bredden på din tabell detta gör du genom att lägga in width="300px" i <table>-taggen i din tabell. Om du inte vill använda dig utav pixlar (px) kan du också använda dig utav procent (%). Då kommer tabellen se ut såhär:

Formaterad tabell

 

Det var lite grundläggande om vad man kan hitta på med tabeller. Texten formaterar du sen med vanlig HTML som du kan läsa HÄR om hur man gör. Givetvis finns det mycket mer man kan göra med tabeller men detta är själva grunden till hur en tabell formas.

Anmäl
2010-11-28 18:22 #1 av: [Beavis]

Hej ida. Trevlig lite tutorial.

Jag tror jag skrivit det tidigare? men det verkar borta. <rowspan ="siffra"> och <colspan="siffra"> för att slå ihop rader och kolumner är en användbar kod  i tabeller också som man kan testa.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl

Bli medlem på iFokus

För att kunna delta i diskussionen måste du bli medlem på iFokus. Det går snabbt, enkelt, och kostar ingenting. Medlemskapet ger dig tillgång till över 300 sajter.