Vill du ha en speciell egenskap för flera avsnitt eller element på sidan får vi avgränsa egenskaperna med selektorer. Vill du, exempelvis, ha en speciell bakgrund för bara en viss tabell kan du använda selektorn id men vill du ha samma kommando på fler ställen blir du tvungen att använda kommandot class. Du skriver i din css-fil, exempelvis:

.class {background-image:url(http://www.dinhemsida.se/bilder/top.jpg); background-color:#00FFFF;}

Du byter ut adressen till var du lagt bilden. Har även lagt till background-color som gör att du även har en bakgrundsfärg. Detta gör att fler webbläsare klarar att läsa din sida.

Vi vill även att tabellen skall ha en border och en viss bredd. Detta ordnar vi med en annan class:

.table {border:thick; border-color:#0000FF; width:80%}

Där vi skriver att bordern runt denna tabell skall ha en thick(tjock) linje och att färgen på border skall vara blå(border-color:#0000FF) Vi skriver också width:80% vilket gör bredden till 80% . Fördelen med class-elementet är att du kan använda denna på flera ställen i koden. Vi anger ju vilken egenskap ett visst element i din tabell skall ha genom att ange class="namnet på .class" i den tagg som skall förändras.

När du använder class i din tabell så använder du denna typ av kod. Lägge märke till class efter table-taggen och class efter td-taggen :

<table class="table"><tr><td colspan="2" class="class"><a href="http://www.drivrutiner.net"><img src="knapp1.gif" width="200" height="66" alt="knapp1" border="0" /></a><a href="http://www.drivrutiner.net"><img src="knapp2.gif" width="200" height="66" alt="knapp 2" border="0" /></a><a href="http://www.drivrutiner.net"><img src="knapp3.gif" width="200" height="66" alt="knapp 3" border="0" /></a><a href="http://www.drivrutiner.net"><img src="knapp4.gif" width="200" height="66" alt="knapp 4" border="0" /></a><a href="http://www.drivrutiner.net"></a></td></tr>
<tr>
<td width="12%" class="left" valign="top"><a href="http://www.drivrutiner.net">översta länken </a>
<br/>
<a href="http://www.gbghtml.se">HTML-skolan</a>
<br/>
<a href="http://www.webbgbg.se">Webbhotell</a>
<br/>
<a href="http://www.drivrutiner.net">Drivrutiner</a>
<br/>
<a href="http://www.drivrutiner.net/host/money/index.php">Inkomster</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/books/index.php">Böcker</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/antivirus.php">Antivirus</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/dlink.php">Nätverk</a>
<br/>
<a href="http://www.drivrutiner.net/program/gratis.php">Gratis program</a>
<br/>
<a href="http://www.drivrutiner.net/program/download.php">Download</a>
<br/>
<a href="http://www.drivrutiner.net/program/bil/spel.php">Colin McRae</a>
<br/>
<a href="http://www.drivrutiner.net/program/flyg/cfs.php">MS CFS</a>
<br/>
<a href="http://www.drivrutiner.net/program/flyg/red.php">Red Baron</a>
<br/>
<a href="http://www.drivrutiner.net/program/online/spel.php">Online spel</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/datorbygg/index.php">Bygg dator</a>
<br/>
<a href="http://www.drivrutiner.net/program/kontor/office/index.php">Officemallar</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/sok.php">Språklexikon</a></td>
<td><img src="../kodtabell.gif" width="601" height="768" alt="" /></td></tr>
</table>

Och i vår css-fil :

.table {border:thick; border-color:#0000FF; width:80%}
.class {background-image:url(../top.jpg); background-color:#00FFFF;}
.left {background-image:url(../left.jpg); background-color:#00FFFF;}

Detta sätt är nästan som vår tabell med bilder som bakgrund på denna sidan.

Kolla resultatet . Titta här.