ilj@flowsim.se
stylesheets på svenska 16
dynamiska tabeller

Ner till texten!


 
Det finns gott om buggar när det gäller stilmallar så här följer först en beskrivning av hur det hela ser ut och fungerar i standardföljande webbläsaren Mozilla 1.6 + (Linux och Windows):
Exemplet består av 31 tabellceller ordnade i 5 rader och 7 kolumner. Tabellcellerna i kolumnen längst till höger har röd bakgrund, de övriga grå. Den cell som innehåller dagens datum har en gul ram.
När man för muspekaren över "visa söndagar" ändras bakgrundsfärgen i kolumnen längst till höger till blå och textfärgen till vit. Samma sak händer om man för muspekaren över någon av dagarna i denna kolumn.
När man för muspekaren över "visa endast återstående veckor" fösvinner de tabellrader som inte hör dit. Är dagens datum 1-7 händer ingenting.
 
Mozilla finns för övrigt även för Windows och Mac och kan hämtas på adressen www.mozilla.org.
 
Så här kan HTML-taggen för en tabell se ut:
 
<TABLE ID="tabellen"
   BORDER="1"
   STYLE=" border: outset 6px;border-color:black;border-collapse: separate;border-spacing: 6px">
<TR ID="first">
<TD ID="1" CLASS="grey">1</TD>
<TD ID="2" CLASS="grey">2</TD>
<TD ID="3" CLASS="grey">3</TD>
<TD ID="4" CLASS="grey">4</TD>
<TD ID="5" CLASS="grey">5</TD>
<TD ID="6" CLASS="grey">6</TD>
<TD ID="7" CLASS="red">7</TD>
</TABLE>
 
Tabellens utseende bestäms efter STYLE:
border:outset 6px;
border-color:black;
border-collapse:separate;
border-spacing:6px
 
Tabellcellerna kopplas till en stilmall genom CLASS-taggen. I exemplet finns det celler av två olika klasser: grey och red. Stilmallen kan se ut så här:
 
<STYLE>
td.grey
{
background-color:#cccccc;
width:20px;
font-size:12px;
padding:3px;
font-weight:bold;
text-align:center;
border:groove;
border-color:#000000;
border-width:3px;
}
td.red
{
background-color:red; //bakgrundsfärg
width:20px; //tabellcellens bredd
padding:3px; //avstånd mellan innehåll o ram
font-size:12px; //textstorlek
border:groove; //ramtyp
font-weight:bold; //fetstil
text-align:center; //texten centreras i cellen
border-width:3px; //rambredd
}
</STYLE>
 

 
Markeringen av tabellcellen som innehåller dagens datum (t ex <TD ID="2">2<TD> för den 2:a i månaden) sker med hjälp av ett JavaScript som ser ut så här:
 
 function startingup()
{
iljdat = new Date()
dag = iljdat.getDate()
dag=dag.toString()
document.getElementById(dag).style.color='black'
document.getElementById(dag).style.background='yellow'
}
 
 Funktionen anropas när sidan laddats klart:
<BODY ONLOAD="startingup()">
 
Mer om hur man plockar fram datum finns under JAVASCRIPT.
 
För att dölja eller visa en tabelldel (tabellcell,tabellrad etc) sätter man dess visibility till antingen hidden eller visible. Om man har en tabellrad <TR ID="first"> och vill plocka bort den kan man skriva:
 
 document.getElementById('first').style.visibility='hidden'
 
 Vill man göra den synlig igen skriver man så här:
 
 document.getElementById('first').style.visibility='visible'
 
 Om man har ett antal tabellceller som tillhör klassen "celler1" (CLASS="celler1") och vill ändra bakgrundsfärg på dem när muspekare förs över en länk kan man skriva så här:
 
 function aendra_bakgrund()
{
if(document.getElementsByTagName('td')[i].className =="celler1")
{
document.getElementsByTagName('td')[i].style.background = "blue"
}
]
 
 Från länktaggen anropar man sedan funktionen så här:
 
<A HREF="url"
ONMOUSEOVER="aendra_bakgrund()">länken<A>
 
Om man vill ändra bakgrundsfärg på tabellraden <TR ID="sec"> skriver man så här:
 
 document.getElementById('sec').style.background='white'
 

 
MER om TABELLER:
tabell - enklaste varianten
tabell - rowspan el. kolumner som spänner över flera rader
tabell - rowspan el. rader som spänner över flera kolumner
tabeller 2
tabeller 3 - typ tidningssida
tabeller 3 - typ schema
 
FLER EXEMPEL PÅ STiLMALLAR:
stilmallar & listor
stilmallar & länkar
stilmallar & tabeller
bilder/färgändring
cursor/muspekare
stilmallsknappar
stilmall & TEXTAREA
stilmall & textrutor
dynamiska tabeller
första rad/bokstav
listor/egna bilder
IFRAME/ram
rubriker/H-taggar
rita med stilmallar - "skuggor"
visa/gömma ytor t ex julkalender
text-align
bredd & höjd

 

 

 
Sidan gjordes av
 
ilj@flowsim.se
 

 
Senast ändrad 11 maj 2004.

Den här sidan hör hemma i ett ramsystem hos:
www.flowsim.se
Stilmallar på svenska