Bilder som bakgrund i tabeller.
Du kan använda bilder som bakgrunder även i tabeller. I nästa sekvens skall vi använda en bild som bakgrund i den vänstra kolumnen av en tabell plus i en meny på ovansidan. Vi använder även här bilder för att få det att fungera i Internet Explorer. Vad vi gör då är att använda photoshop eller paint shop pro för att göra en smalare bild. Bilden repeterar sig själv över hela cellen. Till den vänstra kolumnen(eller cellen) har vi använt en 120 pixels bred och 4 pixels hög bild och på den kört med "gradient tool"(i photoshop). Till menyn på ovansidan har vi använt en längre smal bild. Närmare 800 pixels bred och 4 pixels hög. Denna repeterar sig själv nedåt. Vi har använt "gradient tool" även på denna för att få ett lite tuffare utseende. Koden till denna tabell ser ut så här:
<table border="1" width="80%">
<tr><td
colspan="2" background="top.jpg"><a
href="https://www.drivrutiner.net"><img src="knapp1.gif" width="200" height="66" alt="knapp1" border="0" /></a><a
href="https://www.drivrutiner.net"><img src="knapp2.gif" width="200" height="66" alt="knapp
2" border="0" /></a><a href="https://www.drivrutiner.net"><img
src="knapp3.gif" width="200" height="66" alt="knapp
3" border="0" /></a><a href="https://www.drivrutiner.net"><img
src="knapp4.gif" width="200" height="66" alt="knapp
4" border="0" /></a></td></tr>
<tr>
<td width="12%" background="left.jpg" valign="top"><a
href="https://www.drivrutiner.net">översta
länken </a>
<br/>
<a href="https://www.gbghtml.se">HTML-skolan</a>
<br/>
<a href="https://www.webbgbg.se">Webbhotell</a>
<br/>
<a href="https://www.drivrutiner.net">Drivrutiner</a>
<br/>
<a href="https://www.drivrutiner.net/host/money/index.php">Inkomster</a>
<br/>
<a href="https://www.drivrutiner.net/drivrutiner/books/index.php">Böcker</a>
<br/>
<a href="https://www.drivrutiner.net/drivrutiner/antivirus.php">Antivirus</a>
<br/>
<a href="https://www.drivrutiner.net/drivrutiner/dlink.php">Nätverk</a>
<br/>
<a href="https://www.drivrutiner.net/program/gratis.php">Gratis
program</a>
<br/>
<a href="https://www.drivrutiner.net/program/download.php">Download</a>
<br/>
<a href="https://www.drivrutiner.net/program/bil/spel.php">Colin
McRae</a>
<br/>
<a href="https://www.drivrutiner.net/program/flyg/cfs.php">MS
CFS</a>
<br/>
<a href="https://www.drivrutiner.net/program/flyg/red.php">Red
Baron</a>
<br/>
<a href="https://www.drivrutiner.net/program/online/spel.php">Online
spel</a>
<br/>
<a href="https://www.drivrutiner.net/drivrutiner/datorbygg/index.php">Bygg
dator</a>
<br/>
<a href="https://www.drivrutiner.net/program/kontor/office/index.php">Officemallar</a>
<br/>
<a href="https://www.drivrutiner.net/drivrutiner/sok.php">Språklexikon</a></td>
<td><img src="kodtabell.gif" width="601" height="768" alt="" /></td></tr>
</table>
I bodytaggen har jag nu använt en annan bild. Bodytaggen ser ut så här:
<body background="BirdsSAThumb.jpg"> . Du hämtar gratis bilder på https://www.atpm.com/
Som du ser har vi med width="80%" på tabellen gjort bredden till 80% av fönstret. I den vänstra kolumnen har vi skrivit width="12%" som background bilden left.jpg. Vi tittar på detta med bredd på celler i tabell på denna sidan. . Till knappar har jag använt en genomskinlig gif-bild som du enkelt fixar i photoshop.
Vi har även gjort bilden till bodytaggen större för att täcka hela sidan. Enklast gör du detta genom att öppna photoshop eller paint shop pro och göra bilden 1024x860 pixels stor. Texten ser lite underlig på vissa ställen. Exempelvis ett ä ser ut så här: ä . Detta för att göra bokstäverna synliga för alla webbläsare. Det är inte helt nödvändigt att var så här noga om sidan bara skall användas för enskilt bruk eller svenska besökare.
Prova att kopiera hela koden och lägg den mellan body-taggarna på din html-fil. Du kan själv ändra vilken bild du vill ha som bakgrund. Vill du använda dem som vi använder här så ladda gärna ner dem här>>> Prova dig gärna fram med olika bilder.
Detta med att använda bilder som bakgrund i tabeller går även att ordna med stylesheets. Vi går igenom stylesheets för tabell på denna sidan.
Du kan läsa lite mer om gradient tool på https://www.loriswebs.com
sxc.hu har bakgrundsbilder eller foton du kan ladda ner gratis
stockvault.net
Gratis bilder i alla genrer
