Hoe voeg je een kader/tabel toe op je website?

Status
Niet open voor verdere reacties.

IkHebEenVraag00

Gebruiker
Lid geworden
27 mei 2013
Berichten
98
Hallo iedereen,

Ik ben momenteel bezig met het ontwikkelen van een website, maar wat is de code voor een kader op je website? Zie de afbeelding hieronder voor meer info:

Website-Layout.jpg

Welke HTML code moet ik dus gebruiken om zo'n kader in te voegen en dan te centreren op de afgebeelde positie?



Alvast heel erg bedankt! :thumb::thumb:
 
Wat ik eigenlijk bedoel, is precies wat die website heeft. Waar die tabel instaat, is dat ook gewoon simpelweg een tabel?
 
Het zou een tabel kunnen zijn, maar ook iets anders.
Heb je het website adres zodat we kunnen kijken hoe het gedaan is ?

Groeten Marcel
 
Dit is de complete code die de website gebruikt:
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" xml:lang="nl" lang="nl"><head>
<title>HTML Cursus: Werken met tabellen: tags &lt;TABLE&gt;, &lt;TR&gt;, &lt;TD&gt;, 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 -->&nbsp;&nbsp;  
  <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 &lt;TABLE&gt; &lt;TR&gt; en &lt;TD&gt; 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>&lt;TABLE&gt;</strong> tag.<br />Vervolgens begin je een <em>rij</em> met de tag:
          <strong>&lt;TR&gt;</strong> (Table Row).<br />Hierna plaats je een <em>cel</em> met de tag: <strong>&lt;TD&gt;</strong> (Table Data).
	      <br />Na deze tag plaats je de informatie die je in de cel op wilt nemen.<br />De eindtags: <strong>&lt;/TD&gt;</strong> en
	      <strong>&lt;/TR&gt;</strong> zijn niet verplicht.<br />Een nieuwe cel begin je dan weer met: <strong>&lt;TD&gt;</strong>.
	      <br />Heb je alle cellen binnen een rij ingevuld, dan begin je de volgende rij met: <strong>&lt;TR&gt;</strong>.<br />
	      Zo vul je de hele tabel in. Uiteindelijk sluit je de tabel met de eindtag: <strong>&lt;/TABLE&gt;</strong>.</p>
				
		  <h2>Attributen van de &lt;TABLE&gt; 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 &lt;TR&gt; 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 &lt;TD&gt; 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">
	      &lt;TABLE bgcolor=&quot;lightblue&quot; border=&quot;2&quot; width=&quot;100%&quot;&gt;<br />
	      &nbsp;&lt;TR&gt;<br />&nbsp;&nbsp;&lt;TD align=&quot;center&quot; colspan=&quot;4&quot; bgcolor=&quot;red&quot;&gt;&lt;B&gt;&lt;FONT size=&quot;+2&quot;&gt;Dieren&lt;/FONT&gt;&lt;/B&gt;&lt;/TD&gt;&lt;/TR&gt;<br />
          &nbsp;&lt;TR&gt;<br />&nbsp;&nbsp;&lt;TD align=&quot;center&quot; colspan=&quot;2&quot;&gt;&lt;B&gt;Honden&lt;/B&gt;&lt;/TD&gt;<br />&nbsp;&nbsp;&lt;TD align=&quot;center&quot; colspan=&quot;2&quot;&gt;&lt;B&gt;Vogels&lt;/B&gt;&lt;/TD&gt;&lt;/TR&gt;<br />
	      &nbsp;&lt;TR align=&quot;center&quot;&gt;<br />&nbsp;&nbsp;&lt;TD width=&quot;25%&quot;&gt;&lt;U&gt;Jack Russell Terriër&lt;/U&gt;&lt;/TD&gt;<br />&nbsp;&nbsp;&lt;TD width=&quot;25%&quot;&gt;&lt;U&gt;Spaniël&lt;/U&gt;&lt;/TD&gt;<br />&nbsp;&nbsp;&lt;TD width=&quot;25%&quot;&gt;&lt;U&gt;Mus&lt;/U&gt;&lt;/TD&gt;<br />&nbsp;&nbsp;&lt;TD width=&quot;25%&quot;&gt;&lt;U&gt;Spreeuw&lt;/U&gt;&lt;/TD&gt;&lt;/TR&gt;<br />
	      &nbsp;&lt;TR align=&quot;center&quot;&gt;<br />&nbsp;&nbsp;&lt;TD width=&quot;25%&quot;&gt;&lt;U&gt;Golden Retriever&lt;/U&gt;&lt;/TD&gt;<br />&nbsp;&nbsp;&lt;TD width=&quot;25%&quot;&gt;&lt;U&gt;Teckel&lt;/U&gt;&lt;/TD&gt;<br />&nbsp;&nbsp;&lt;TD width=&quot;25%&quot;&gt;&lt;U&gt;Merel&lt;/U&gt;&lt;/TD&gt;<br />&nbsp;&nbsp;&lt;TD width=&quot;25%&quot;&gt;&lt;U&gt;Ekster&lt;/U&gt;&lt;/TD&gt;&lt;/TR&gt;<br />
	      &lt;/TABLE&gt;
	      </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>&lt;TR&gt;</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>(&lt;TD&gt;)</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&amp;lang=nl"></script>
<!-- SiteSearch Google -->
</div>
	
<br />	
	   
	<p><strong>Copyright © Homepage-Maken.nl 2000-2013</strong> &middot; <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>
	 &nbsp;&nbsp;&nbsp; <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>]&nbsp;&nbsp;[<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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>

En de stylesheet:
Code:
a.linkklein { font-size: 11px; font-family: arial, serif; font-weight: bold; text-decoration: none;}
a.linkklein:link {  color: #f00; background-color: transparent;}
a.linkklein:visited { color: #808080; background-color: transparent;}
a.linkklein:hover { color: #f0c; background-color: transparent;}
a.linkklein:active { color: #cff; background-color: transparent;}

a {
	color:#006;
	background-color:transparent;
	font-size:13px;
	font-family:helvetica, arial, sans-serif;
	font-weight:bold;
	text-decoration:underline;
	}
a:link {color:#006; background-color: transparent;}
a:visited {color:#339; background-color: transparent;}
a:hover {color:#966; background-color: transparent; text-decoration:none;}

abbr, acronym, .verklaring {
    border-bottom: 1px dotted #000;
    cursor: help;
	}

body {
	color:#333;
	background-color:#cc9;
	margin:10px;
	padding:0px;
	font:11px verdana, arial, helvetica, sans-serif;
	}
h1 {    
    font:22px trebuchet ms, arial, helvetica, sans-serif;
	letter-spacing: -1px;
	margin:0px 0px 10px 0px;
	padding:0px;	
	color:#c96;
	background-color:transparent;
	text-align:center;
	}
h2 {
    font:19px trebuchet ms, arial, helvetica, sans-serif;
	letter-spacing: -1px;
	margin:0px 0px 10px 0px;
	padding:0px;	
	color:#fc9;
	background-color:transparent;
	text-align:center;
	}	
h3 {
    background-color:transparent;
	color:#635F57;
	font-family: trebuchet ms;
	font-size: 120%;
	margin: 0 0 6px 0;
	padding: 0;	
	text-align:center;	
	}
p {
	font-family: trebuchet ms, verdana, sans-serif;
    font-size: 1.2em;
    line-height: 1.5em; 
    color: #333; 
	margin:0px 0px 16px 0px;
	padding:0px;
	}

img {
    border:0px;
	}

.content {	
	width:520px;	
	margin:0px 200px 15px 180px;
	border:1px solid black;
	color:#333;
	background-color:#FFFBDF;
	padding:10px;
	z-index:3;
	}
	
#menulinks {
	position:absolute;
	width:140px;	
	top:110px;
	left:15px;
	border:1px dashed #7F7A6E;
	color:#333;
	background-color:#E5E0D4;
	padding:10px;
	z-index:2;	
	}
	
#menulinks  ul {
list-style-type: disc;
margin:5px; padding:6px;
}

#menulinks li {
margin-bottom: 5px;
}

#menulinks li a:link
{ 
color: #c96;
border-bottom: none;
}

#menulinks li a:visited
{
color: #c96;
border-bottom: none;
}

#menulinks li a:hover
{
color: #963;
}
	
body>#menulinks {width:128px;}
		
#menurechts {
	position:absolute;
	width:140px;
	top:110px;
	right:15px;
	left:760px;
	border:1px dashed #7F7A6E;
	color:#333;
	background-color:#E5E0D4;
	padding:10px;
	z-index:1;	
	}
	
#menurechts  ul {
list-style-type: disc;
margin:5px; padding:6px;
}

#menurechts li {
margin-bottom: 5px;
}

#menurechts li a:link
{ 
color: #c96;
border-bottom: none;
}

#menurechts li a:visited
{
color: #c96;
border-bottom: none;
}

#menulrechts li a:hover
{
color: #963;
}
	
body>#menurechts {width:168px;}

.tabel {
	width:100%; border-top: #000 1px solid; border-bottom: #000 1px solid; border-right:#000 1px solid; border-left:#000 1px solid; margin: 0px;text-align:center;
         }
		
 th.overzicht {
	font: bold 12px verdana, sans-serif; background: #fc0; color: #000; text-align: center; padding-left: 3px; padding-right: 3px; padding-bottom: 4px; padding-top: 4px; border-left: #000 1px solid;  border-right: #000 1px solid; border-bottom: #000 1px solid; border-top: #000 1px solid; margin: 0px;   
         }
		
 td.overzicht { 
 font: 12px verdana, sans-serif; background: #9cf; color: #000; text-align: center; padding-left: 3px; padding-right: 3px; padding-bottom: 4px; padding-top: 4px; border-left: #000 1px solid;  border-right: #000 1px solid; border-bottom: #000 1px solid; border-top: #000 1px solid; margin: 0px;    
         }
		 
.archief {
	width:100%; border-top: #000 1px solid; margin-top: 10px; margin-bottom: 10px; border-bottom: #000 1px solid
        }
		
    .archief th {
	font: bold 12px verdana, sans-serif; background: #06c; color: #fff; text-align: center; padding-left: 3px; padding-right: 3px; padding-bottom: 4px; padding-top: 4px; border-left: #000 1px solid; border-bottom: #000 1px solid; border-top: #000 1px solid; border-right: #000 1px solid; margin: 0px;   
        }
		
    .archief td {
	font: 12px verdana, sans-serif; background: #fff; color: #000; text-align: center; padding-left: 3px; padding-right: 3px; padding-bottom: 4px; padding-top: 4px; border-left: #000 1px solid; border-bottom: #000 1px solid; border-top: #000 1px solid; border-right: #000 1px solid; margin: 0px;    
        }
		
    .nr {
	width: 9%
        }
		
    .titel {
	width: 40%
        }
    
	.kort {
	width: 51%
	    }		 

.tabelkaal { 
    border: 1px solid #000;
	}

.indent {
    text-indent:50px;
	}	 
		 
.centered {
    text-align: center;
	}

.ad {
    font-family: Arial, sans-serif; font-size: 12px; color:#333; background-color: #FAEEC5; padding:4px; border: 2px solid #fc3; 
	}

.alert {
	font-family: Arial, sans-serif; font-size: 12px; color:#333; padding:4px; border: 2px solid red; 
	}
	
.moerstaalimg {    
    border: 1px solid #000;
	}

.code {
	border-style: dotted;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	background-color: #DFF3FF;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	font-family: "Courier New", Courier, mono;
	font-size: 11px;
    }
	
.bold {
    font-weight:bold;
	}
	
.rodetekst {
    color:red;
	background-color:transparent;
	font-weight:bold;
	}

.groenetekst {
    color:green;
	background-color:transparent;
	font:bold 12px verdana;	
	}
	
.klein {
    font-family: Arial, serif; font-size: 11px; font-weight: bold; color: #000000; background-color:transparent;
	}
	
.styletekst {
    font-family: Arial, serif; font-size: 11px; font-weight: bold; color: #FF8C00; background-color:transparent;
	}
	
.zoekfunctie {    
    border: 1px solid #999;	
	margin:0px 100px 0px 100px;
	}

.rechts {
float:right;
}
De combinatie van de website hml code met de stylesheet zorgen ervoor dat het in tabellen staat.

Maar je kunt ook zoals het op de pagina beschreven staat een tabel maken en daar een beetje
mee experimenteren.
Dan heb je nog niet zo'n stylesheet nodig.

Je gebruikt toch wel een HTML editor of zit je echt gewoon codes te typen ?

Groeten Marcel
 
Laatst bewerkt:
Ik gebruik Notepad++ en de HTML Editor van W3Schools om gemakkelijk het resultaat steeds te bekijken. Maar mijn oplossing is nu gewoon om tabellen als afbeelding in de website te zetten en dan de tekst erin centreren? ;)
 
Dit is de opbouw van mijn website:

</body>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>







<left>



<div id="tekst1">
<span style="font-family:Verdana;font-size:28px;font-style:normal;font-weight:bold;text-decoration:none;text-transform:none;color:000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Excisting user&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; New user
</span>
</div>


</left>

<br></br>







<style>


html {
background: url(http://i43.tinypic.com/2vkjcdh.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 
Hoi ikhebeenvraag00.
Ik zat naar je code te kijken, maar soory, ik kan er geen chocola van bakken. Maar je moet ergens beginnen. Ook ik ben ooit begonnen met doen en kijken wat er gebeurt :) Zoals hoogteijling al aangaf zijn tabellen achterhaald, maar ze worden wel nog steeds als valide html gezien (en alleen gebruikt voor platte data-tabellen). Het is om te beginnen misschien handig omdat iedereen weet hoe een tabel eruit ziet, maar bij grotere tabellen waarbij tekst en plaatjes op diverse plekken moeten staan wordt de html al gauw een rijstebrij.

Mijn tip: Begin met de voorbeelden in de basis lessen van html met css te maken (overal op internet te vinden). Dat is de snelste manier.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan