CSS

Mer tabeller

Tabellen med leksaker ska också få ett nytt utseende. Som det ser ut nu så har den endast de egenskaper som kommer från grundreglerna för TABLE, TR och TD. Det först vi ska göra är att ta bort den formatering som gjordes i HTML-märket TABLE. Där hade vi angett att attributet BORDER skulle vara satt till vädet 1 för att tabellkanter skulle visas. Denna rad ersätts nu av endast grundmärket för tabellen :

<TABLE>

För att börja formatera det som ligger i tabellen lägger vi till en regel som beskriver TH:

TH{	background : white;	font-size : 18px;	font-weight : bold;	border : thin dotted green} 

Regeln beskriver hur tabellhuvudet ska se ut. Vi sätter bakgrunden till vit, textstorleken till 18 pixlar och dessutom en ram (kantlinjer). Ramen har här tre attribut och dessa säger vilken tjocklek den ska ha, vilken typ av ram det är samt ramens färg. Tjockleken kan sättas antingen i absoluta mått (t ex pixlar) eller relativa (thin, thick osv). Dotted är en ram som består av prickar, men det finns även solid (heldragen), dashed (streckad) och flera andra.

Vi vill ha lite mer information om Nikes leksaker och utökar tabellen med en kolumn som ska ha överskriften Kommentar. Alltså läggs ytterligare en TH till och varje tabellrad fylls på med en TD. För att förstärka tabellen ska vi låta kommentaren vara lite mer utstående och gör detta genom att färga den röd och göra den till fetstil.

Själva regeln i stilmallen ser ut enligt följande :

TD.kommentar {	color : red;	font-weight : bold} 

I dokumentet leksaker.html måste vi nu bestämma vilka tabellceller som ska formateras med regeln. Tabellen hade tidigare (iaf om du lagt till leksakerna sko och katt) koden :

<TABLE><TR>	<TH>Leksak</TH>	<TH>Antal</TH></TR><TR>	<TD>Tuggben</TD>	<TD>3</TD></TR><TR>	<TD>Bollar</TD>	<TD>5</TD></TR><TR>	<TD>Skor</TD>	<TD>4½</TD></TR><TR>	<TD>Katter</TD>	<TD>1</TD></TR></TABLE>
De nya tabellcellerna vi lägger till får koden
<TD CLASS="kommentar">En kommentar om leksaken</TD>
och varje tabellrad får nu följande kodstruktur.

<TR>	<TD>Bollar</TD>	<TD>5</TD>	<TD CLASS="kommentar">Tuggar sönder</TD></TR>

Efter att ha lagt till passande kommentarar för varje leksak kan vi nu titta på resultatet :

Resultat

Och koden för leksaker.html

Kod

Notera att det här är en tabell i dess riktiga mening. Det är en tabell för att beskriva data, inte för att bara lägga in saker som egentligen inte har med varandra att göra. Tidigare har vi fuskat lite, t ex med menyn, för att få saker att ligga snyggt på sidan. Notera igen att det alltså inte är det helt korrekta sättet att göra detta på och vi ska ta upp andra sätt att göra det på i nästa avsnitt.

Vi är nu framme vid det mål vi satte upp att göra med webbsidan (i Styra HTML - ett exempel). Det går givetvis att göra många fler saker med sidan och du får gärna göra det som en övning. Förmodligen tycker du att flera av de designsteg som gjorts på sidan ser konstiga eller felaktiga ut. Prova att göra om sidan så att du tycket att den ser snygg och korrekt ut. Eller gör en egen sida som du testar teknikerna på.

I nästföljande två avsnitt tas några andra bitar av css upp, som dock inte kommer att användas på Nikes webbsida. Det vi ska titta på är layout (design) i ren css och hur man kan styra muspekarens utseende med css.

Stilmallen har nu följande utseende vilket vi kommer att ta med till den andra lektionerna.

Resultat