table in het midden

Status
Niet open voor verdere reacties.

jappertjeh

Gebruiker
Lid geworden
2 jan 2006
Berichten
432
Hallo,

Ik had al wel wat kennis van html en het veranderen van kleine dingetjes in bestaande websites, maar een eigen bouwen vanaf het begin is mij nog vreemd. Heb daarom de komende tijd denk ik heel wat (hele simpele) vragen en hier is mijn eerste: ik heb onderstaande code als test ingevoerd. Ik heb een linker, midden en rechter kolom van 20, 40 en 20% breedte gemaakt. Bij elkaar tachtig, zodat ik nog 10% overhoud aan beide kanten van de middelste tabel (dacht ik). Wat nu gebeurt is dat mijn middelste tabel tegen de rechter wordt aangeplant, en er dus 20% tussen links en midden zit. Hoe verhelp ik dit?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
</head>

<body bgcolor="#666666">
<h1 align="center"> Welkom op de site </h1>
<table bgcolor="#ADD8E6" border="0" width="20%" align="left">
<tr>
<td align="center">linker kolom</td>
</table>

<TABLE border="0" width="40%" align="center">
 <TR>
  <TD align="center" bgcolor="#00FF66">midden</TD></TR>
</TABLE> 

<table bgcolor="#ADD8E6" border="0" width="20%" align="right">
<tr align="center">
<td align="center" >rechter kolom</td>
</tr>
</table>


</body>
</html>
 
Tabellen gebruiken voor de vormgeving van je site is géén goed idee. Aangezien je net begonnen bent mete leren zou ik je toch willen aanraden een degelijke tutorial te lezen, waarin zowel HTML (te gebruiken voor de inhoud van een site) als CSS (voor de vormgeving) behandeld worden. Deze, in het Nederlands, schijnt goed te zijn. Van deze, in het engels, kan ik je uit eigen ervaring vertellen dat 'ie nuttig is.

Het is beter eerst een sluitend verhaal te lezen dan iedere keer dat je een probleem tegenkomt een vraag te stellen.s
 
Hallo,

Ik zou je zeker die door Naarling genoemde cursussen aanraden. Tabellen voor iets anders dan getallen en zo worden al zo'n tien jaar afgeraden. Vroeger was er geen andere mogelijkheid, tegenwoordig zijn er veel betere. Waar die cursussen je wegwijs in maken.
Tabellen zijn ongelooflijk moeilijk te wijzigen. Ze zijn volstrekt ontoegankelijk voor spraakbrowsers e.d. Ze garanderen min of meer 'n (veel) lagere plaats in 'n zoekmachine. Enz. Als je eenmaal aan de nieuwe manier bent gewend, is die veel flexibeler en makkelijker.
Als je nieuw begint, is het beter om niet 'n tien jaar oude manier te gaan leren.

Je vraag is 'n aardige illustratie van verouderde tags. Je gebruikt voor de linkertabel align="left". Dat heeft allerlei vervelende bijwerkingen, omdat het wat betreft subtiliteit en precisie redelijk goed te vergelijken is met 'n op hol geslagen bulldozer met whisky in de benzinetank. En dan zeg ik het nog subtiel. (Nee, ik overdrijf nooit :D )
Met de nieuwe manier kan dit ook, maar dan zoals 'n chirurg z'n scalpel hanteert.

Hier zorgt dat align="left" ervoor dat de linker tabel niet meer meetelt voor de breedte van het scherm, dus de middelste tabel wordt in het midden van het venster-minus-linkertabel gezet.
Omdat alles van nature links staat, is dat align="left" niet nodig. Haal het weg en je middelste tabel staat goed.

Ik zou je aanraden om 'n doctype van strict te gebruiken. Dat keurt heel veel van de tags die jij gebruikt af. Maar die worden al zo'n tien jaar afgeraden. O.a. align, center, bgcolor.
Inmiddels wordt langzaamaan 'n nieuwe versie van html, html5, ingevoerd. In die versie kunnen dat soort tags gewoon helemaal niet meer. Door nu nog 'n site te maken met dat soort verouderde tags, maak je het onmogelijk straks de vele leuke nieuwe dingen van html5 te gebruiken.

@Naarling: ik heb die cursus van Opera weer 'ns bekeken. Die is eigenlijk nog net iets beter dan die Belgische. Ik ga ze voortaan ook beide noemen.
 
Laatst bewerkt:
Super bedankt voor jullie uitgebreide antwoorden. Ik kwam het gebruiken van tabellen inderdaad tegen in een andere cursus, maar zal die links van jullie eens goed bekijken. Nog 1 vraagje: dat doctype strict, hoe zet ik dat er precies in? Dit is wat dreamweaver er bij mij automatisch inzette.
Bedankt!
 
Aangenomen dat je html4 gebruikt zet je dan het volgende bovenaan je pagina.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan