|
Width / breedte.
Een voorbeeld van de syntax:
<table width="60%"> De tabel neemt 60% van de beschikbare schermbreedte in beslag.
<table width="600"> De tabel neemt 600px van de beschikbare schermbreedte in beslag.
<td width="50%">Deze cel neemt 50% van de beschikbare tabelbreedte in beslag.
<td width="300">Deze cel neemt 300px van de beschikbare tabelbreedte in beslag.
Zie voor meer inlichtingen het einde van de pagina.
Voorbeeld
<table border="1" width="60%">
<tr>
<td width="50%" height="100">Amsterdam</td>
<td>Volendam</td>
<td>Edam</td>
</tr>
<tr>
<td>Damrak</td>
<td>Dijk</td>
<td>Kaasmarkt</td>
</tr>
<tr>
<td>Patat</td>
<td>Paling</td>
<td>Kaas</td>
</tr>
</table>
<h3>Breed en hoog met CSS</h3>
<table border="1" style="width:60%">
<tr>
<td style="width:50%; height:100px">Amsterdam</td>
<td>Volendam</td>
<td>Edam</td>
</tr>
<tr>
<td>Damrak</td>
<td>Dijk</td>
<td>Kaasmarkt</td>
</tr>
<tr>
<td>Patat</td>
<td>Paling</td>
<td>Kaas</td>
</tr>
</table>
Zo ziet het er in het echt uit!
Als op jouw scherm met jouw browser (in het echt) de onderste tabel er niet zo uitziet als de bovenste, is het misschien tijd om een nieuwere versie te installeren?
Toelichting
De waarde die je bij <td width="..."> invult werkt alleen zolang de inhoud van de cel kleiner is, zodat er "ruimte" rond de inhoud ontstaat.
Indien de "inhoud" groter (breder) is houdt de browser er geen rekening meer mee en dimensioneert de tabel zo dat de gehele inhoud kan worden getoond.
Indien je aan de bovenste cel in een kolom een breedte toekent, krijgen alle cellen eronder (in dezelfde kolom) automatisch dezelfde breedte
De overblijvende tabelbreedte wordt in bovenstaand voorbeeld gelijk verdeeld over de twee cellen die op dezelfde regel staan.
Waarschuwing
Veel browsers reageren onvoorspelbaar als je "procenten" en een "vaste px-waarde" door elkaar gebruikt.
Het is dus geen goed idee om de ene celbreedte in procenten op te geven en de cel eronder of ernaast een vaste px-waarde te geven. Dat gaat gegarandeerd (meestal) fout.
Zoals al besproken bestaat op het moment de mogelijkheid tabelkolommen te definiëren met
<colgroup><col></colgroup>.
Het bovenin beschreven voorbeeld heeft het voordeel dat ook oude(re) browsers ermee overweg kunnen.
|
Over bgcolor.
Attributen.