Menu 

> Begin

> Animaties


 

 Meer 

> Avatars

> Smilies

> M-Cards

> Themes

> GSM wallpapers

> Diddle plaatjes

> Scripts

> Games

> Cursus html

> Contact

 

 

 Advertenties 
 


 

  Animatiegifjes.stophier.nl alles voor de webmaster !!

Werken Met Tabellen

In deze les gaat het over tabellen. Dit is waarschijnlijk het moeilijkste gebied van HTML dat je tegen zult komen.
Je zult wel gauw in staat zijn eenvoudige tabellen te maken, maar de echte complexe tabellen vergen gewoon veel oefening en ervaring.
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.

Dit vooraf. Nu kun je lezen over de TABLE tags en de verschillende attributen.

De <TABLE> <TR> en <TD> tags

Een tabel is een systeem van rijen (horizontaal) en kolommen (verticaal).
In de rijen staan verschillende cellen. In de cellen komt de informatie die je wilt opnemen. Het aantal kolommen wordt bepaald door het aantal cellen in de rijen.

Je begint de tabel met de <TABLE> tag.
Vervolgens begin je een rij met de tag: <TR> (Table Row).
Hierna plaats je een cel met de tag: <TD> (Table Data).
Na deze tag plaats je de informatie die je in de cel op wilt nemen.
De eindtags: </TD> en </TR> zijn niet verplicht.
Een nieuwe cel begin je dan weer met: <TD>.
Heb je alle cellen binnen een rij ingevuld, dan begin je de volgende rij met: <TR>.
Zo vul je de hele tabel in. Uiteindelijk sluit je de tabel met de eindtag: </TABLE>.

Attributen van de <TABLE> tag:

width: 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.

border: met dit attribuut stel je de dikte van de rand van de tabel in. De waarde 0 betekent: geen rand.

cellpadding: hiermee kun je een witruimte creren 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.

cellspacing: 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.

bgcolor: hiermee stel je de achtergrondkleur in van de hele tabel. Over kleuren hebben we het al eerder gehad in deze cursus. Klik hier om de verschillende kleuren en kleurwaarden te bekijken.

align: regelt de uitlijning voor de hele tabel. Mogelijke waarden zijn: left,center en right.

Attributen van de <TR> tag:

align: hiermee kun je de inhoud van de hele rij uitlijnen, de waarden zijn: left, center en right.

valign: hiermee kun je de verticale uitlijning van de inhoud van de rij bepalen. Mogelijke waarden: top, center en bottom.

bgcolor: bepaalt de achtergrondkleur van de hele tabelrij.

Attributen van de <TD> tag

width: stelt de breedte in van de cel. Je kunt de waarden opgeven in pixels en percentages.

colspan: 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 colspan gebruiken om dit effect te bereiken. Als je dit niet doet dan maakt de browser zelf een vierde - lege - cel.

rowspan: 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 rowspan gebruiken.

align: hiermee lijn je de inhoud van de cel uit. Mogelijke waarden: left, center of right.

valign: regelt de verticale uitlijning van de inhoud van de cel. De waarden die je hier kunt invullen zijn: top, center of bottom.

bgcolor: hier kun je een achtergrondkleur voor de cel invullen.


 

Tijd voor een voorbeeld van een tabel met gebruik van een aantal attributen:

<TABLE bgcolor="lightblue" border="2" width="100%">
 <TR>
  <TD align="center" colspan="4" bgcolor="red"><B><FONT size="+2">Dieren</FONT></B></TD></TR>
 <TR>
  <TD align="center" colspan="2"><B>Honden</B></TD>
  <TD align="center" colspan="2"><B>Vogels</B></TD></TR>
 <TR align="center">
  <TD width="25%"><U>Jack Russell Terrir</U></TD>
  <TD width="25%"><U>Spanil</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>

Dit is het resultaat op het scherm:

Dieren
Honden Vogels
Jack Russell Terrir Spanil Mus Spreeuw
Golden Retriever Teckel Merel Ekster

 

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: <TR>.
Zoals je ziet zijn er vier rijen: Dieren, Honden/Vogels en twee rijen met honden en vogels, ze staan allen een plaats ingesprongen in de code.
Iedere cel (<TD>) staat twee plaatsen ingesprongen.
Dit is natuurlijk maar een hele simpele tabel, er is veel meer mogelijk, maar dat gaat nog wat te ver voor deze beginnerscursus.

Einde Les Zeven

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.

 

 

 

 Linkpartners 
Gifs.nl
Animatieplaatjes.nl
Animatiesite.nl
Bewegende Plaatjes

 

 
2007 © copyright stophier.nl en partners


 

 

hier vind je van alles voor je website, animatieplaatjes, winks voor msn, muggins, achtergronden, dynamische achtergronden, dynamische schermafbeeldingen, emoticons, bewegende plaatjes voor msn, foto's, packs,  msn plaatjes, leuke plaatjes, gratis, plaatjes, animatiegifjes, gifplaatjes, cliparts, gifs, gifjes, animatie, animaties, plaatjes, bewegendeplaatjes, afbeeldingen, mini movies, animatiegifs, animated, kerst plaatjes, kerst emoticons, kerst gifjes, kerstplaatjes, emoticons, msn, avatars, knoppen, jpeg, gif, emailgifs, valentijn, photoshop, html hulp, website hulp, games, online games, php, website, frontpage, dhtml, cgi, css, homepage, internet, schnappi wallpapers, schnappi, diddl plaatjes, pokemon plaatjes, money, drop, chips, beroemd, artiesten, babes, regenboog, sesamstraat, winnie the pooh, kauwgom, olifanten, diamanten, gefeliciteerd, mobiel, gsm, cupido, ezels, straaljagers, vliegtuigen, leger, army, uilen, lieveheersbeestje, stophier, grappige plaatjes, emoticons, schnappi, vraagtekens, hartjes, wietblaadje, wiet plaatjes, astma, disney, katten, carnival, paarden, glitter, blade trinity, roller, rollerskates, snow, fantasy, vuurwerk, javascript, download, poll, opa, knoppen, frontpage,  oma, vader, moeder, pimboli, ogen, vingers, oren, haren, kam, borstel, shampoo, douche, poppetjes, artikelen, jpeg, zeehonden, voetbal, klokken, neon, merken, vuur, wiskunde, hulpmiddelen, lijnen, turnen, gymnastiek, strand, zee, palmen, reizen, baby, kinderen, skateboarden, auto, m-cards, wallpapers, themes, rugby, tips, trucs, beltoon, badminton, zeehonden, wapens, waterval, beltonen, mini movies, true tones, wallpapers, screensavers, monofoon, polyfoon, anoniem sms, bijbel, feest, zwanger, hamsters, kappers, vuurwerk, firework, disco, yahoo, free, create avatar, anime, high, neopets, letters, wereldbol, nieuw, new, jarig, pinkpanter, skeletten, doodskop, skelet, poll, international, chat, kerst, love, nl, pagina, romantische plaatjes, hardcore, naam, beren, groeps sms, rozen, ridders, icoontjes, slapen, opstaan, bed, wekker, kaars, koffie, melk, dressuur, downloads, icon, generator, gekke, sneeuw, sint nicolaas, bloemen, tiener, lonsdale, treiter sms, gsm, chipz plaatje, dynamo, id, cu2, webmaster, frontpage, links, tips, truuks, html, popup, frames, comic, mms, outlook, logo, ringtone, polyph, inuyasha, avatarmagic, evil,  avatar maker, contest, gaia, secret, puma, games, pop, up, popup, pop-up, window, java, java script,messenger, javascript, javascripts, html, lessen, tutorials, gratis, PHP, ASP, MSQL, MySQL, SQL, PHP, wallpapers, bewegende msn plaatjes,stophier gifs, movie, kappers, rozen,  film, bioscoop,  avatars, bewegende avatars,  Animaties, bewegende plaatjes, afbeeldingen, fantasy, welkom, humor, msn, vieze, cadeautjes, animatieplaatjes, gifplaatjes,  smilies, smileys, adelaars, animaties, patat, snacks, kroket, limonade, koelkast, pen, monitor, muis, kabels, stoep, straat, stranden, palmen, dobberen, luchtband, brood, champagne, aansteker, sigaretten, pucca, shag, animatieplaatjes, graphics, art, bewegende plaatjes, avatars, bewegende avatars, babyplaatjes, barby, barbie, picture, boten, anne geddes, badminton, baby, badkamer, icon, buddy,  lasergun, millitair, licht, merken, beeldvenster, beren, gitaren, jip en janneke, kabouters, naam animaties, animaties alfabet, zwanger, spel, honden, icoontjes, achtergronden, tekst, aim smileys, ridders, emoticons,  sexy, snoopy, bijen, ballen, bloemen, boerderij, bomen, clowns, dakpannen, computer, hartjes, zonnebloem, zwaailichten, korfbal, manga, winter, wit zwart, sexy, waterval, buro, dc shoes, sports, pic, bureau, aladdin, bier, wijn, animaties polly, dhtml script, dieren, alcohol, drank, drinkbekers, babys, auto, auto's, fietsen, fiets, files, ambulance, diversen, dobbelstenen, draken, editors, email, eten en drinken, adult,  eyoor, favicon, feest, feestdagen, flowerpower, napoleon, girl, kalki, rate, press, doll maker, help,  fruit, vraagtekens,  live, journal, cute, music,  garfield, gastenboek, gereedschap, giraffen, giraf, groot, hotdog, elfjes, engeltjes, info, hello_kitty, honden, hotdog, htlm cursus, html tekens, pirate, car,  ijsje, ijsjes, insecten, insect, junglebook, jungle boek, button, gezichten, mensen, dvd, audio, dvdspeler, radio, tv, boxen, camera, rekenmachine, plakband, batterij, petje, laptop, kinderen, animated, moving, reptielen, pijlen, pizza, regen, wind, tornado, storm, neerslag,  toetsenbord, poster, stopkontakt, scanner, kerstmis, weerplaatje, stoel, sokken, broek, crying, huilen, trui, nagels, printer, rolstoel, rollator, scootmobiel, zaklamp, tent, vakantie, reizen, bungalow, caravan, spaarpot, pop, doll, lamp, bank, vloer, planken, timmerman, beroep, metselaar, verkoper, kantoor, 3d plaatjes, tattoo, stoplicht, bouwvakker, ambtenaar,  nijntje, tijgers, indianen, xxx, liefdes, verjaardag, haaien, harry potter, beweegende, ajax, fijenoord, vitesse, utrecht, amsterdam, katten, kerst, keuken, kinderen, kippen, tennis, kleuren, klokken, knorretje, koeien, koe, koffie en thee, konijnen, kungfu, globes, ijs, liefde, lion king, looney tunes, luchtballonnen, maanden, man en vrouw, mensen, mickey mouse, monster, satelliet, schotel, kom, fyenoord, hamsters, diamanten, daimonds, food, nonfood, geschenken, antennes, gratis sex plaatjes,boerderij, cool, coca cola, monsters, muizen, muziek, dj, natuur, ogen, olifanten, paarden, paard, paddestoel, paddestoelen, partners, pasen, pinguin, duivel, devil, kiss, kus,  planeten, planeet, plant, planten, custom, jabber, pooh, poppetjes, redirect, rozen, schildpadden, metatag creator, hartjes, scrollbar, skateboard, sneeuwman, ferrari,  sneeuwpop, sneeuwpret, spijkerbed, sport, telefoon, telefoons, teller, tijgertje, troep, trouwen, tuinieren, uploaden, vakantie, valentijn, vervoer, vissen, vlaggen, vlinder, vogels, landen, water, strand, weblogo, ijsberen, welkom, werk, wormen, worm, ziekenhuis, zon, plaatjes voor mijn site, plaatjes voor een website, een website opvullen met plaatjes, en veel meer!!!