Jump to content

OWN

Een blog van OWN

  • artikelen
    5186
  • reacties
    17587
  • bezichtigingen
    1582004

Editie 167 - HTML-cursus

OWN

Artikel geplaatst door OWN

442 bezichtigingen

 Share

Hoeveel procent heb je GTA Vice City uitgespeelt?  

91 leden hebben gestemd

  1. 1. Hoeveel procent heb je GTA Vice City uitgespeelt?

    • 10%
      5
    • 20%
      6
    • 30%
      1
    • 40%
      2
    • 50%
      11
    • 60%
      6
    • 70%
      4
    • 80%
      7
    • 90%
      40
    • 100%
      0

This poll is closed to new votes

gallery_108553_47_10996.gif

Deze rubriek is geschreven door Kloep!

Hallo, en welkom bij de HTML-cursus van OWN. In deze rubriek gaan wij (VWO-er en Kloep) zaken vertellen die handig zijn om te weten als je met HTML aan de slag gaat. Later zullen we HTML verder gaan uitwerken, dit ook onder andere met behulp van CSS. Als we dit allemaal hebben gehad, gaan we over naar PHP in combinatie met MySQL. Later zullen we ook steeds meer Javascript bereiken. In het begin zullen we dus met de basis beginnen, maar zonder deze basis kun je niet verder komen. In deze cursus zul niet alleen lappen tekst te zien krijgen, maar alles zal worden uitgelegd door middel van afbeeldingen. Hierdoor zullen het geen saaie lange verhalen worden, maar zal alles in kleine stappen worden uitgelegd.

In deze rubriek maken we gebruik van het programma Notepad++ en Firefox. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Firefox de codes anders weer als bijvoorbeeld Internet Explorer of Netscape. Veel plezier met deze nieuwe rubriek!

Welkom bij les nummer 10. Een kleine mijlpaal voor deze rubriek. We beginnen nu met tabellen.

Eenvoudige tabellen maken

Een tabel maken is niet moeilijk. Je begint met het openen met TABLE. Daarna geef je de rijen aan met TR, en de cellen in die rij geef je aan met TD. Hieronder een voorbeeld:

<table>
<tr><td>tekst 1</td><td>tekst 2</td></tr>
<tr><td>tekst 3</td><td>tekst 4</td></tr>
</table>



Dit geeft het volgende resultaat:

[table=simple]tekst1|tekst2

tekst3|tekst4[/table]

Dit is het resultaat, alleen dan zonder de border. Je ziet dus dat TR voor de rij staat, en TD voor de kolom.

Randen toevoegen

In het bovenstaande voorbeeld kreeg je in BB-codes wel een border. In HTML is dit niet het geval, en moet je dit dus nog aangeven. Dit doe je door het BORDER attribuut toe te voegen aan de TABLE-tag. Zie hieronder:

<table border="10">
<tr><td>tekst 1</td><td>tekst 2</td></tr>
<tr><td>tekst 3</td><td>tekst 4</td></tr>
</table>



Dit geeft als resultaat een behoorlijk dikke border. Als je geen border wilt, kun je dit aangeven met de waarde "0".

Breedte instellen

Om de breedte van je tabel aan te geven, voeg je wederom een attribuut toe. Dit keer been je WIDTH. Zie hieronder:

<table width="200">
<tr><td>tekst 1</td><td>tekst 2</td></tr>
<tr><td>tekst 3</td><td>tekst 4</td></tr>
</table>



De 200 in het voorbeeld staat voor 200 pixels. Meestal geef ik zelf geen breedte aan, in dit geval past hij zichzelf aan aan de breedte van je tekst in de tabel.

Tabel centreren

Om je tabel te centreren (of juist links of rechts weer te geven), voeg je weeral een attribuut toe. Nu gebruik je het eerder gebruikte ALIGN. Toch hieronder nog even een voorbeeld:

<table align="center">
<tr><td>tekst 1</td><td>tekst 2</td></tr>
<tr><td>tekst 3</td><td>tekst 4</td></tr>
</table>



Ik gebruik hier CENTER, dus centreert hij mijn tabel. Indien ik RIGHT of LEFT gebruik, zet hij mijn tabel links of rechts neer.

En dat was les nummer 10. Volgende keer komt les 11, waarin we verdergaan met tabellen. Hopelijk tot de volgende keer!

 Share

0 reacties

Recommended Comments

Er zijn geen reacties om weer te geven.

Gast
Reactie toevoegen...

×   Je hebt text geplaatst met opmaak.   Opmaak verwijderen

  Only 75 emoji are allowed.

×   Je link is automatisch ingevoegd.   In plaats daarvan weergeven als link

×   Je vorige bewerkingen zijn hersteld.   Alles verwijderen

×   You cannot paste images directly. Upload or insert images from URL.

×
×
×
  • Create New...