<!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" xml:lang="nl" lang="nl"><head>
<title>HTML Cursus: Werken met tabellen: tags <TABLE>, <TR>, <TD>, attributen cellpadding, cellspacing, colspan en rowspan.</title>
<meta name="Description" content="Uitleg over het werken met tabellen in html. Maak rijen en kolommen in de tabel, met verschillende cellen in de rijen." />
<meta name="Keywords" content="tabellen,pagina,maken,html,rijen,kolommen,tr,td,table,cellen,cel,attributen,bouwen,cellspacing,cellpadding" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="/mijn.css" type="text/css" />
<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.homepage-maken.nl/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
</head>
<body>
<div>
<p class="klein"><span class="centered"><a name="top" id="top" class="linkklein" href="http://www.homepage-maken.nl/">Terug naar beginpagina Homepage-Maken.nl</a></span><br />
<!-- Banner 468x60 -->
<a href="http://www.starthosting.nl/mijnhomepage-sh.html" target="_blank"><img src="http://www.starthosting.nl/banners/468-60.gif" width="468" height="60" alt="Starthosting Webhosting" /></a>
<!-- Einde Banner 468x60 -->
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7593424689199966";
/* H-M rechtsboven */
google_ad_slot = "2313374928";
google_ad_width = 234;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
</div>
<!-- google_ad_section_start -->
<div class="content">
<h1>Les 7</h1>
<div class="rechts">
<script type="text/javascript"><!--
google_ad_client = "pub-7593424689199966";
/* 336x280 */
google_ad_slot = "2070178342";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<h2>Werken Met Tabellen</h2>
<p>In deze les gaat het over tabellen. Dit is waarschijnlijk het moeilijkste gebied van HTML dat je tegen
zult komen.<br />Je zult wel gauw in staat zijn eenvoudige tabellen te maken, maar de echte complexe tabellen
vergen gewoon veel oefening en ervaring.<br />Ook is het gebruik van tabellen een van de handigste functies in HTML.
Practisch iedere webmaster krijgt er vroeg of laat mee te maken. Ook de pagina die je nu bekijkt is
opgebouwd uit verschillende tabellen.</p>
<p>Dit vooraf. Nu kun je lezen over de <strong>TABLE</strong> tags en de verschillende <em>attributen</em>.</p>
<h2>De <TABLE> <TR> en <TD> tags</h2>
<p>Een tabel is een systeem van <em>rijen</em> (horizontaal) en <em>kolommen</em> (verticaal).<br />In de rijen staan
verschillende <em>cellen</em>. In de cellen komt de informatie die je wilt opnemen. Het aantal kolommen
wordt bepaald door het aantal cellen in de rijen.</p>
<p>Je begint de tabel met de <strong><TABLE></strong> tag.<br />Vervolgens begin je een <em>rij</em> met de tag:
<strong><TR></strong> (Table Row).<br />Hierna plaats je een <em>cel</em> met de tag: <strong><TD></strong> (Table Data).
<br />Na deze tag plaats je de informatie die je in de cel op wilt nemen.<br />De eindtags: <strong></TD></strong> en
<strong></TR></strong> zijn niet verplicht.<br />Een nieuwe cel begin je dan weer met: <strong><TD></strong>.
<br />Heb je alle cellen binnen een rij ingevuld, dan begin je de volgende rij met: <strong><TR></strong>.<br />
Zo vul je de hele tabel in. Uiteindelijk sluit je de tabel met de eindtag: <strong></TABLE></strong>.</p>
<h2>Attributen van de <TABLE> tag:</h2>
<p><strong>width</strong>: hiermee stel je de breedte in van de tabel. Dit kun je doen in pixels of in een percentage.
Ik zou zoveel mogelijk percentages gebruiken, want dan ben je minder afhankelijk van de browserinstellingen
van je bezoekers.</p>
<p><strong>border</strong>: met dit attribuut stel je de dikte van de rand van de tabel in. De waarde <strong>0</strong> betekent:
geen rand.</p>
<p><strong>cellpadding</strong>: hiermee kun je een witruimte creëren tussen de rand van de cel en de inhoud van de cel instellen.
De waarde die je opgeeft, is in pixels. De standaardwaarde is 1.</p>
<p><strong>cellspacing</strong>: dit stelt een ruimte in tussen de verschillende cellen in een tabel. Ook nu is de
waarde weer in aantallen pixels. De standaardwaarde is hier 2.</p>
<p><strong>bgcolor</strong>: hiermee stel je de achtergrondkleur in van de hele tabel. Over kleuren hebben we het al
eerder gehad in deze cursus. Klik <a href="kleuren.php">hier</a> om de verschillende kleuren en
kleurwaarden te bekijken.</p>
<p><strong>align</strong>: regelt de uitlijning voor de hele tabel. Mogelijke waarden zijn: <strong>left,center</strong> en
<strong>right</strong>.</p>
<h2>Attributen van de <TR> tag:</h2>
<p><strong>align</strong>: hiermee kun je de inhoud van de hele rij uitlijnen, de waarden zijn: <strong>left, center</strong> en
<strong>right</strong>.</p>
<p><strong>valign</strong>: hiermee kun je de verticale uitlijning van de inhoud van de rij bepalen. Mogelijke waarden:
<strong>top, center</strong> en <strong>bottom</strong>.</p>
<p><strong>bgcolor</strong>: bepaalt de achtergrondkleur van de hele tabelrij.</p>
<h2>Attributen van de <TD> tag</h2>
<p><strong>width</strong>: stelt de breedte in van de cel. Je kunt de waarden opgeven in pixels en percentages.</p>
<p><strong>colspan</strong>: bepaalt het aantal kolommen dat de cel inneemt. Soms moet je dit attribuut gebruiken.
Bijvoorbeeld: je eerste rij van je tabel heeft vier cellen, maar je wilt maar drie cellen in je tweede
rij. Je moet dan het attribuut <strong>colspan</strong> gebruiken om dit effect te bereiken. Als je dit niet doet
dan maakt de browser zelf een vierde - lege - cel.</p>
<p><strong>rowspan</strong>: bepaalt het aantal rijen dat de cel inneemt. Stel, de eerste cel gebruikt een rij, maar
je wilt dat de tweede cel twee rijen inneemt. Dan moet je het attribuut <strong>rowspan</strong> gebruiken.</p>
<p><strong>align</strong>: hiermee lijn je de inhoud van de cel uit. Mogelijke waarden: <strong>left, center</strong> of
<strong>right</strong>.</p>
<p><strong>valign</strong>: regelt de verticale uitlijning van de inhoud van de cel. De waarden die je hier kunt
invullen zijn: <strong>top, center</strong> of <strong>bottom</strong>.</p>
<p><strong>bgcolor</strong>: hier kun je een achtergrondkleur voor de cel invullen.</p><br />
<p align="center"><strong>Tijd voor een voorbeeld van een tabel met gebruik van een aantal attributen:</strong></p>
<p class="klein">
<TABLE bgcolor="lightblue" border="2" width="100%"><br />
<TR><br /> <TD align="center" colspan="4" bgcolor="red"><B><FONT size="+2">Dieren</FONT></B></TD></TR><br />
<TR><br /> <TD align="center" colspan="2"><B>Honden</B></TD><br /> <TD align="center" colspan="2"><B>Vogels</B></TD></TR><br />
<TR align="center"><br /> <TD width="25%"><U>Jack Russell Terriër</U></TD><br /> <TD width="25%"><U>Spaniël</U></TD><br /> <TD width="25%"><U>Mus</U></TD><br /> <TD width="25%"><U>Spreeuw</U></TD></TR><br />
<TR align="center"><br /> <TD width="25%"><U>Golden Retriever</U></TD><br /> <TD width="25%"><U>Teckel</U></TD><br /> <TD width="25%"><U>Merel</U></TD><br /> <TD width="25%"><U>Ekster</U></TD></TR><br />
</TABLE>
</p>
<p><strong><u>Dit is het resultaat op het scherm:</u></strong></p>
<table bgcolor="lightblue" border="2" class="tabelkaal">
<tr>
<td align="center" colspan="4" bgcolor="red"><strong><font size="+2">Dieren</font></strong>
</td>
</tr>
<tr>
<td align="center" colspan="2"><strong>Honden</strong></td>
<td align="center" colspan="2"><strong>Vogels</strong></td>
</tr>
<tr align="center">
<td width="25%"><u>Jack Russell Terriër</u></td>
<td width="25%"><u>Spaniël</u></td>
<td width="25%"><u>Mus</u></td>
<td width="25%"><u>Spreeuw</u></td>
</tr>
<tr align="center">
<td width="25%"><u>Golden Retriever</u></td>
<td width="25%"><u>Teckel</u></td>
<td width="25%"><u>Merel</u></td>
<td width="25%"><u>Ekster</u></td>
</tr>
</table>
<br />
<p>Nu kun je zien wat de code voor gevolgen heeft op het scherm. Bekijk de code rij voor rij. Een rij
wordt aangegeven met de tag: <strong><TR></strong>.<br />Zoals je ziet zijn er vier rijen: <strong>Dieren, Honden/Vogels</strong>
en <strong>twee rijen met honden en vogels</strong>, ze staan allen een plaats ingesprongen in de code.<br />
Iedere cel <strong>(<TD>)</strong> staat twee plaatsen ingesprongen.<br />Dit is natuurlijk maar een hele simpele
tabel, er is veel meer mogelijk, maar dat gaat nog wat te ver voor deze beginnerscursus.</p>
<h2>Einde Les Zeven</h2>
<p>Hiermee weet je de basisbeginselen van het maken van tabellen. Er zijn vele mogelijkheden met het
gebruik van tabellen. Vooral door het zelf uitproberen en het kijken naar andere pagina's op het web, leer
je steeds mooiere en betere tabellen te maken.</p>
<ul>
<li><a href="les8.php">Verder naar Les 8!</a></li>
<li><a href="lessenoverzicht.php">Terug Naar het Lessenoverzicht!</a></li>
<li><a href="htmlboeken.php">Bekijk boeken over HTML</a></li>
</ul>
<p class="centered">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7593424689199966";
/* H-M Beneden 336x280 */
google_ad_slot = "2231151038";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<!-- google_ad_section_end -->
<h2>Homepage-Maken Tip</h2>
<div class="ad">
<p class="centered"><a href="http://www.argeweb.nl/webhosting/?referer=3048540" target="_blank">Heb je genoeg van je hostingprovider?</a><br />
Neem dan een host die wel de kwaliteit kan bieden die je zoekt. Breng je site bijvoorbeeld onder bij <strong>Argeweb</strong>. Deze host heeft een goede reputatie en de reacties van klanten zijn over het algemeen heel positief. Verder bieden ze een 'niet goed geld terug'-garantie van 30 dagen.</p>
<p class="centered"><a href="http://www.argeweb.nl/webhosting/?referer=3048540" target="_blank">Argeweb Hosting</a> biedt uitgebreide <strong>support</strong> door middel van uitgebreide FAQ's en documentatie, een online helpdesk en is ook telefonisch bereikbaar voor vragen.</p>
<p class="centered">Het <a href="http://www.argeweb.nl/webhosting/?referer=3048540" target="_blank">Startup hostingpakket</a> is voor veel mensen het meest geschikte pakket. Je krijgt het volgende:</p>
<ul>
<li><strong>1000 MB schijfruimte</strong></li>
<li><strong>10 GB dataverkeer</strong></li>
<li><strong>een eigen domeinnaam</strong></li>
<li>50 e-mailaccounts</li>
<li><span class="groenetekst">Actietarief:</span> eerste 6 maanden slechts <strong>€4,49</strong> per maand, daarna het normale tarief van €8,95</li>
</ul>
<p class="centered">Al met al is dit een <a href="http://www.argeweb.nl/webhosting/?referer=3048540" target="_blank">prima pakket</a> voor nog geen €9 per maand. Er zijn natuurlijk ook nog andere pakketten beschikbaar, mocht je een uitgebreider of beperkter hostingpakket zoeken.</p>
</div>
</div>
<div class="content centered">
<h1>Zoekfunctie en Overige Info</h1>
<div align="center">
<!-- SiteSearch Google -->
<form action="http://www.google.nl/cse" id="cse-search-box" target="_blank"> <div> <input type="hidden" name="cx" value="partner-pub-7593424689199966:2ipwx-z7krl" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Zoeken" /> </div></form><script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=nl"></script>
<!-- SiteSearch Google -->
</div>
<br />
<p><strong>Copyright © Homepage-Maken.nl 2000-2013</strong> · <a rel="nofollow" href="http://www.homepage-maken.nl/privacy.php">Privacybeleid</a></p>
<p>
<a rel="nofollow" href="http://validator.w3.org/check/referer" target="_blank"><img width="88" height="31" src="http://www.w3.org/Icons/valid-xhtml10" alt="Deze pagina voldoet aan de XHTML 1.0 richtlijnen" /></a>
<a rel="nofollow" href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.homepage-maken.nl/mijn.css" target="_blank">
<img width="88" height="31" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Deze pagina voldoet aan de CSS richtlijnen" /></a>
</p>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-74544-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<p>[<a href="#top">Naar boven</a>] [<a href="http://www.homepage-maken.nl/">Home</a>]</p>
</div>
<div id="menulinks">
<h3>Voorpagina</h3>
<ul>
<li><a href="http://www.homepage-maken.nl/index.php" title="Ga naar de homepage">Home</a></li>
</ul>
<h3>Artikelen</h3>
<ul>
<li><a href="http://www.homepage-maken.nl/artikelen/archief.php" title="Alle eerder verschenen artikelen">Alle artikelen</a></li>
<li><a href="http://www.homepage-maken.nl/google/index.php" title="The Google files">The Google files</a></li>
</ul>
<h3>Populaire artikelen</h3>
<ul>
<li><a href="http://www.homepage-maken.nl/artikelen/internet/virusscanners.php" title="Overzicht van gratis virusscanners">Gratis virusscanners</a></li>
<li><a href="http://www.homepage-maken.nl/artikelen/wd/animatedgifs.php" title="GIF Animaties Maken">GIF animaties maken</a></li>
<li><a href="http://www.homepage-maken.nl/artikelen/wd/favicon.php" title="Favicon maken voor je website">Favicon maken</a></li>
</ul>
<h3>Tutorials</h3>
<ul>
<li><a href="http://www.homepage-maken.nl/htmlcursus/lessenoverzicht.php" title="HyperText Markup Language cursus">HTML</a></li>
<li><a href="http://www.homepage-maken.nl/xhtml/index.php" title="Extensible HyperText Markup Language cursus">XHTML</a></li>
<li><a href="http://www.homepage-maken.nl/csscursus/csslessenoverzicht.php" title="Cascading Style Sheets cursus">CSS</a></li>
<li><a href="http://www.homepage-maken.nl/htaccess/index.php" title=".htaccess cursus">.Htaccess</a></li>
<li><a href="http://www.homepage-maken.nl/javascript/index.php" title="JavaScript cursus">JavaScript</a></li>
<li><a href="http://www.homepage-maken.nl/joomla/index.php" title="Joomla cursus">Joomla!</a></li>
<li><a href="http://www.homepage-maken.nl/rss/index.php" title="RSS cursus">RSS</a></li>
<li><a href="http://www.homepage-maken.nl/ssi/index.php" title="Server Side Includes cursus">SSI</a></li>
<li><a href="http://www.homepage-maken.nl/weblog/index.php" title="Cursus Weblog Maken">Weblog maken</a></li>
</ul>
<h3>Boeken</h3>
<ul>
<li><a href="http://www.homepage-maken.nl/htmlcursus/htmlboeken.php" title="HTML boeken">HTML</a></li>
<li><a href="http://www.homepage-maken.nl/boeken/javascript-boeken.php" title="JavaScript boeken">JavaScript</a></li>
<li><a href="http://www.homepage-maken.nl/boeken/php-boeken.php" title="PHP boeken">PHP</a></li>
<li><a href="http://www.homepage-maken.nl/boeken/windows-8-boeken.php" title="Windows 8 boeken">Windows 8</a></li>
<li><a href="http://www.homepage-maken.nl/boeken/index.php" title="Overige boeken">Overzicht boeken</a></li>
</ul>
<h3>Overig</h3>
<ul>
<li><a href="http://www.homepage-maken.nl/contact.php" title="Contact opnemen en veel gestelde vragen">Contact & FAQ</a></li>
<li><a href="http://www.homepage-maken.nl/funstuff.php" title="Leuke dingen">Fun stuff</a></li>
<li><a href="http://www.homepage-maken.nl/linksite.php" title="Steun ons: plaats een link">Link naar ons</a></li>
<li><a href="http://www.homepage-maken.nl/linkpartners.php" title="Onze linkpartners">Linkpartners</a></li>
<li><a href="http://www.homepage-maken.nl/myguests.php" title="Ons gastenboek">Ons gastenboek</a></li>
<li><a href="http://www.homepage-maken.nl/oversite.php" title="Over deze site">Over deze site</a></li>
</ul>
</div>
<div id="menurechts">
<h3>Webtools</h3>
<ul>
<li><a href="http://www.homepage-maken.nl/afbeelding.php" title="Plaatjes">Afbeeldingen</a></li>
<li><a href="http://www.homepage-maken.nl/animaties.php" title="Animaties">Animaties</a></li>
<li><a href="http://www.homepage-maken.nl/chat.php" title="Chatrooms en shoutboxen">Chat & Shoutboxen</a></li>
<li><a href="http://www.homepage-maken.nl/domeinnaam.php" title="Domeinnamen">Domeinnamen</a></li>
<li><a href="http://www.homepage-maken.nl/forum.php" title="Forums">Forums</a></li>
<li><a href="http://www.homepage-maken.nl/ftp.php" title="FTP software">FTP programmas</a></li>
<li><a href="http://www.homepage-maken.nl/guestbooks.php" title="Gastenboeken">Gastenboeken</a></li>
<li><a href="http://www.homepage-maken.nl/editors.php" title="HTML editors">HTML editors</a></li>
<li><a href="http://www.homepage-maken.nl/logo.php" title="Logo's en knoppen">Logo's, knoppen</a></li>
<li><a href="http://www.homepage-maken.nl/mailform.php" title="Mailforms">Mailforms</a></li>
<li><a href="http://www.homepage-maken.nl/mailinglist.php" title="Nieuwsbrieven">Mailinglist</a></li>
<li><a href="http://www.homepage-maken.nl/polls.php" title="Polls">Polls</a></li>
<li><a href="http://www.homepage-maken.nl/recommenders.php" title="Recommenders">Recommenders</a></li>
<li><a href="http://www.homepage-maken.nl/testprogrammas.php" title="Site testen">Site testen</a></li>
<li><a href="http://www.homepage-maken.nl/sitestats.php" title="Trackers">Statistieken</a></li>
<li><a href="http://www.homepage-maken.nl/tellers.php" title="Tellers">Tellers</a></li>
<li><a href="http://www.homepage-maken.nl/homepage.php" title="Webruimte">Webruimte</a></li>
<li><a href="http://www.homepage-maken.nl/zoekmachines.php" title="Zoekmachines">Zoekmachines</a></li>
</ul>
<h3>Extra's</h3>
<ul>
<li><a href="http://www.homepage-maken.nl/awards.php" title="Awards en sitekeuringen">Awards & keuringen</a></li>
<li><a href="http://www.homepage-maken.nl/bannerswap.php" title="Banner exchanges">Banner exchanges</a></li>
<li><a href="http://www.homepage-maken.nl/content.php" title="Content">Content</a></li>
<li><a href="http://www.homepage-maken.nl/email.php" title="Email aanbieders">Email providers</a></li>
<li><a href="http://www.homepage-maken.nl/promotie.php" title="Website promotie">Website promotie</a></li>
<li><a href="http://www.homepage-maken.nl/verdien.php" title="Geld verdienen met je website">Verdienen</a></li>
</ul>
<h3>Scripts & Codes</h3>
<ul>
<li><a href="http://www.homepage-maken.nl/asp-scripts.php" title="ASP scripts">ASP scripts</a></li>
<li><a href="http://www.homepage-maken.nl/cgi-scripts.php" title="CGI scripts">CGI scripts</a></li>
<li><a href="http://www.homepage-maken.nl/dhtml-scripts.php" title="DHTML scripts">DHTML scripts</a></li>
<li><a href="http://www.homepage-maken.nl/flash-movies.php" title="Flash movies">Flash movies</a></li>
<li><a href="http://www.homepage-maken.nl/java-applets.php" title="Java applets">Java applets</a></li>
<li><a href="http://www.homepage-maken.nl/javascripts.php" title="JavaScripts">JavaScripts</a></li>
<li><a href="http://www.homepage-maken.nl/php-scripts.php" title="PHP scripts">PHP scripts</a></li>
</ul>
<br />
<p><script type="text/javascript"><!--
google_ad_client = "pub-7593424689199966";
google_ad_width = 120;
google_ad_height = 90;
google_ad_format = "120x90_0ads_al_s";
//2007-02-01: Adlinks Homepage-Maken
google_ad_channel = "4951248924";
google_color_border = "CC9966";
google_color_bg = "E5E0D4";
google_color_link = "CC9966";
google_color_text = "CC9966";
google_color_url = "0000CC";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
</div>
</body>
</html>