naar onze homepage
 HTML
Home
HTML
Block.html
Inline.html
De structuur
Caption / Kopje
Row groups / Regels
Col groups / Kolommen
De tr-tag
De th- en td-tags
Colspan + Rowspan
Border / Frame / Rules
Links of rechts
Spacing + Padding
Over bgcolor
Width / breedte
Attributen

CSS
Algemeen
Caption
Table-layout
Border-collapse
Border-spacing
Eigenschappen

Tips + Tricks
Tips
 Tables:

staat de tabel links of rechts.

<table border="1" align="left"> zorgt ervoor dat de "tabel", op je scherm, links staat.
<table border="1" align="right"> zorgt ervoor dat de "tabel" rechts staat.

Zie de source-code hieronder, waar we ook nog "na" de twee <table>...</table>-elementen nog wat extra (fantasie)tekst hebben toegevoegd.

In het eerste geval align="left" zetten we de tabel links (=left), het gevolg daarvan is dat de fabntasie-tekst die onder de tabel staat nu rechts van de tabel komt te staan.
In het tweede geval zetten we de tabel met align="right" rechts, dus blijft er voor de tekst, links van de tabel plaats over.

Let op:
Het mag duidelijk zijn dat zoiets alleen maar werkt indien de tabel kleiner is dan de beschikbare schermbreedte, omdat er anders geen tekst meer naast of voor gezet kan worden.

Voorbeeld

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>De structuur van een tabel</title>
</head>
<body>
<h3>Een tabel met kader</h3>

<table border="1" align="left">
<tr>
<th>Amsterdam</th>
<th>Volendam</th>
<th>Edam</th>
</tr><tr>
<td>Damrak</td>
<td>Dijk</td>
<td>Kaasmarkt</td>
</tr><tr>
<td>Patat</td>
<td>Haring</td>
<td>Kaas</td>
</tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
<h3>Een tabel met kader</h3>

<table border="1" align="right">
<tr>
<th>Amsterdam</th>
<th>Volendam</th>
<th>Edam</th>
</tr><tr>
<td>Damrak</td>
<td>Dijk</td>
<td>Kaasmarkt</td>
</tr><tr>
<td>Patat</td>
<td>Haring</td>
<td>Kaas</td>
</tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</body>
</html>

Dat ziet er dan zo uit.

top
- - ©2002 www.webcel.nl - -