Leer Webbladontwerp


Hoofblad
Foto's
Aktiwiteite
Familieregister
Bybel Pakkette
Immigrasie
Verdien Geld
Webbladontwerp
Humor
Skakels
Kommentaar
Gunsteling Boeke


  1 Basiese Beginsels
2 Bronkode
3 Paragraaf
4 Kommentaar-merker
5 Hoofopskrifte
6 Skrifgrootte
7 Skrifkleur
8 Bold/Kursief
9 Geformateerde Teks
10 Masjienteks
11 Lynbreuk
12 Blokaanhalings
13 Belyn Teks
14 Genommerde Lyste
15 Ongeordende Lyste
16 Definisie Lyste
17 Agtergrondkleur
18 Agtergrondgrafika
19 Grafika
20 Grafika Rame
21 Teks en Grafika
22 Skakels
23 E-pos Skakels
24 Spesiale Karakters
25 Divisie
26 Horisontale Streep
27 Basiese Tabelle
28 Gevorderde Tabelle
29 Tabel Kleur en Rame

Ekstra's
Kleurkaart
Kleurberekenaar
HTML Naslaangids

Tabel Kleur en Rame


<table bgcolor="?"> stel die agtergrondkleur van die tabel
<tr bgcolor="?"> stel die agtergrondkleur van die ry
<td bgcolor="?"> stel die agtergrondkleur van die sel
<table bordercolor="?"> stel die raamkleur van die tabel
<table bordercolorlight="?"> stel die ligte raamkleur van die tabel
<table bordercolordark="?"> stel die donker raamkleur van die tabel
<table border="?"> stel die raamwydte van die tabel

Nou gaan die pret begin. Ons gaan jou tabel nou optower in 'n kleurvolle fantasiewęreld. Hou jy nie van 'n bontspul nie? Gaan speel dan bietjie rond met my kleurkaart en kleurberekenaar om die helder kleure te versag. Maar hierdie les is 'n moet as jy van 'n kleurvolle omgewing hou.

Tot nou toe het ons al die basiese dinge van 'n tabel gedek, ook heelwat oor die gevorderde kant van tabelle. Hier gaan ons al daardie dinge prakties toepas, maar met meer kleur. Kom ons begin...

As jy in jou HTML-dokument skryf:

 

<table bgcolor="#0000FF">
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
</tr>
<tr>
<td>Sel 3</td>
<td>Sel 4</td>
</tr>
</table>

 

Sal jy 'n tabel kry met 'n blou agtergrond wat soos volg lyk:

 

Sel 1 Sel 2
Sel 3 Sel 4

 

As jy skryf:

 

<table>
<tr bgcolor="#0000FF">
<td>Sel 1</td>
<td>Sel 2</td>
</tr>
<tr>
<td>Sel 3</td>
<td>Sel 4</td>
</tr>
</table>

 

Sal jou tabel soos volg lyk:

 

Sel 1 Sel 2
Sel 3 Sel 4

 

En as jy skryf:

 

<table>
<tr>
<td bgcolor="#0000FF">Sel 1</td>
<td>Sel 2</td>
</tr>
<tr>
<td>Sel 3</td>
<td bgcolor="#0000FF">Sel 4</td>
</tr>
</table>

 

Sal jou tabel soos volg lyk:

 

Sel 1 Sel 2
Sel 3 Sel 4

 

Jy kan die drie ook met mekaar kombineer:

 

<table bgcolor="#0000FF">
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
</tr>
<tr bgcolor="#FF0000">
<td>Sel 3</td>
<td>Sel 4</td>
</tr>
<tr>
<td>Sel 5</td>
<td bgcolor="#FFFF00">Sel 6</td>
</tr>
<tr>
<td>Sel 7</td>
<td>Sel 8</td>
</tr>
</table>

 

Sal jou tabel soos volg lyk:

 

Sel 1 Sel 2
Sel 3 Sel 4
Sel 5 Sel 6
Sel 7 Sel 8

 

Lekker bont, nę? Kom ons gaan verder. Tot dusver het ons nog net met agtergrondkleur gewerk. Nou gaan ons die tabel 'n raam gee en kyk wat kry ons.

As jy in jou HTML-dokument skryf:

 

<table border="10">
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
</tr>
<tr>
<td>Sel 3</td>
<td>Sel 4</td>
</tr>
</table>

 

Sal jou tabel soos volg lyk:

 

Sel 1 Sel 2
Sel 3 Sel 4

 

Jy kan daardie raam se kleur ook gaan aanpas soos volg:

 

<table border="10" bordercolor="#0000FF">
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
</tr>
<tr>
<td>Sel 3</td>
<td>Sel 4</td>
</tr>
</table>

 

En dan sal jou tabel soos volg lyk:

 

Sel 1 Sel 2
Sel 3 Sel 4

 

As jy egter weer na die vorige voorbeeld kyk, sal jy sien dat die raam 'n 3D effek het wat nou weggeval het met die kleur wat ons gespesifiseer het. Kom ons skep nou weer daardie 3D effek met kleur. As jy skryf:

 

<table border="10" bordercolorlight="#1E90FF" bordercolordark="#0000FF">
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
</tr>
<tr>
<td>Sel 3</td>
<td>Sel 4</td>
</tr>
</table>

 

Sal jou tabel soos volg lyk:

 

Sel 1 Sel 2
Sel 3 Sel 4

 

Hou moed, laaste stukkie wat jy moet weet. Jy kan 'n tabel binne 'n tabel plaas om iets soos die volgende te kry:

 

Sel 1 Sel 2
Sel 3
Sel 1 Sel 2
Sel 3 Sel 4

 

O ja, ek het jou nie die HTML-kode vir die tabel gewys nie. Probeer om dit self te doen sonder om na die bronkode van die blad te kyk.

Nou vir die laaste ding. Jy kan 'n tabel gebruik om jou gunsteling foto virtueel te raam. Kom ons gebruik weer daardie kat.gif grafika van ons, en plaas dit in 'n tabel wat in 'n ander tabel is, en dan lyk dit so:

Netjies, nę? Nog 'n ding... toemaar, toemaar, ek spot sommer. Dit is dan al vir tabel kleur en rame.

OM OP TE SOM:
  • <table bgcolor=?> stel die agtergrondkleur van die tabel
  • <tr bgcolor=?> stel die agtergrondkleur van die ry
  • <td bgcolor=?> stel die agtergrondkleur van die sel
  • <table bordercolor=?> stel die raamkleur van die tabel
  • <table bordercolorlight=?> stel die ligte raamkleur van die tabel
  • <table bordercolordark=?> stel die donker raamkleur van die tabel
  • <table border=?> stel die raamwydte van die tabel
  • Jy kan 'n tabel binne 'n tabel plaas

Indien jy voel jy het tabel kleur en rame onder die knie, sal jy nou geduldig moet wag vir die volgende lesse oor die <meta>-merker, "tips & tricks", kaskaderende stylblaaie, rame en nog 'n paar ander wat ek belpan en besig is om aan te werk. Boekmerk dus hierdie blad en kom maak gereeld 'n draai om te sien wanneer die volgende lesse beskikbaar is. Jy kan ook gerus vir my 'n e-pos stuur, dan laat weet ek jou wanneer ek die volgende lesse gereed het. Indien jy hierdie lesse van waarde gevind het, sal ek ook graag van jou wil hoor.


Terug na indeks

Terug na bo

Stuur vir my e-pos
Kliek hier om my te kontak

Site Meter

Hosted by www.Geocities.ws

1