HTML5: Wat is de vervanger van de <table>?

Overzicht

Sponsored by: Vacatures door Monsterboard

George van Baasbank

George van Baasbank

16/03/2012 19:23:54
Anchor link
Hallo allemaal,

In het tijdperk van HTML4 gebruikte ik een <table> om bijv. een pagina van bijv 80% breed te maken. Teksten en afbeeldingen konden op een (eenvoudige) manier worden geplaatst en uitgelijnd.
Nu met de komst van HTML5 dreigt de <table> uit de gratie te geraken. Dus moet ik mij gaan verdiepen in de wereld die HTML5 heet.

Mijn eerste uitdaging is om de <table> te vervangen door een HTML5-component. Alleen, hoe heet dat ding???? En hoe gaan we om met de voorwaarde dat ik bijv. 3 kolommen naast elkaar wil?

De koppeling met CSS3 denk ik wel onder de knie te hebben.

Wie kan mij een hint geven met welke componenten ik e.e.a. kan realiseren?
Wie weet een goede Nederlandstalige uitleg van HTML5 op het internet te vinden? Mijn Engels is nl. niet wat het wezen moet.

Ik dank iedereen alvast voor de gebodenn hulp.


George van Baasbank
 
PHP hulp

PHP hulp

29/03/2024 14:28:00
 
Eddy E

Eddy E

16/03/2012 19:27:00
Anchor link
HTML 5 doet het toch met <nav>, <article> en <aside> ?
 
Reshad F

Reshad F

16/03/2012 20:21:40
Anchor link
george tabellen gebruiken moet je nooit doen. gebruik hier divjes voor.


verder voor html5 gebruik je hetgeen wat eddy aangeeft en <section> dat zijn de belangrijkste volgens mij en dan heb je nog <header> <footer> etc etc.. en nog veel meer voor meer uitleg is dit een goede link

link
 

16/03/2012 20:24:34
Anchor link
Reshadd, wie zegt er nou dat je nooit een tabel kunt gebruiken? Een tabel gebruik je wanneer je bijvoorbeeld een prijsvoorstelling van de producten wilt doen.

Natuurlijk moet je geen berichten in een tabel gaan zetten. Even twee links naar tutorials of reviews naar tabellen in webdesign.
1. http://www.noupe.com/design/data-tables-in-modern-web-design.html,
2. http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/

Nog een link: http://www.quackit.com/html_5/tags/
Gewijzigd op 16/03/2012 20:35:48 door
 
Reshad F

Reshad F

16/03/2012 20:33:59
Anchor link
@aaron
George van Baasbank op 16/03/2012 19:23:54:
Hallo allemaal,

In het tijdperk van HTML4 gebruikte ik een <table> om bijv. een pagina van bijv 80% breed te maken. Teksten en afbeeldingen konden op een (eenvoudige) manier worden geplaatst en uitgelijnd.


en je gebruikt geen tabel om een site op te maken
Gewijzigd op 16/03/2012 20:34:42 door Reshad F
 

16/03/2012 20:37:56
Anchor link
Reshadd farid op 16/03/2012 20:21:40:
george tabellen gebruiken moet je nooit doen. gebruik hier divjes voor.

Tabellen gebruik je dus wel op een site als ze nodig zijn. Niet om een site breed te maken, daarvoor heb je liquid templates etc.

Om een liquid template te maken: http://www.tinyfluidgrid.com/ . Dan kun je dus met 80% breed werken etc.

Voorbeeld CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}

.row .onecol {
width: 4.85%;
}

.row .twocol {
width: 13.45%;
}

.row .threecol {
width: 22.05%;
}

.row .fourcol {
width: 30.75%;
}

.row .fivecol {
width: 39.45%;
}

.row .sixcol {
width: 48%;
}

.row .sevencol {
width: 56.75%;
}

.row .eightcol {
width: 65.4%;
}

.row .ninecol {
width: 74.05%;
}

.row .tencol {
width: 82.7%;
}

.row .elevencol {
width: 91.35%;
}

.row .twelvecol {
width: 100%;
float: left;
}

.last {
margin-right: 0px;
}


Om dan 80% te nemen doe je het volgende:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<div class="row">
    <div class="tencol">
        80%
    </div>
    <div class="twocol last">
        20%
    </div>
</div>

Source: http://cssgrid.net/
Gewijzigd op 16/03/2012 20:44:23 door
 
Klaas van Wijngaarden

Klaas van Wijngaarden

17/03/2012 14:38:07
Anchor link
Hallo George,

Je kunt ook, (en dat is mijn favoriete 'tabellen opmaak vorm', gebruik maken van een div waarbij je in je CSS bestand aangeeft hoe het moet worden getoond (display:) op het scherm.

Dit doe je door als attribuut: 'display: table;' in je css in te stellen.

een klein voorbeeldje is hier wel op zijn plaats:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
div.tabel {
display:table;
width: 500px;
height:300px;
border: 1px solid #000;
}
div.tablecell {
display: table-cell;
width: 160px;
height: 288px;
border: 2px solid #f00;
float:left;
}

en in je html zet je dan:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<body>
<div class="tabel"> Tabel
<div class="tablecell">Tabelcell 1</div>
<div class="tablecell">Tablecell 2</div>
<div class="tablecell">Tabelcell 3</div>
</div>
</body>
</html>


Er zijn genoeg mogelijkheden voor het display attribuut:
table, table-row, table-cell, etc.. alle mogelijkheden die je bij table hebt zijn ook aanwezig als je een div met een bepaalde inhoud wilt tonen. Wanneer je bv een afbeelding wilt laten zien dan zet je gewoon een img in je div.

Wanneer je deze manier gebruikt, dan heb je niet de nadelen van de 'normale' tabel functie. Je laat nl. een div zien waarvan je opgeeft dat deze zich dient te gedragen als een table, maar het is dus geen echte tabel.

Klaas
Gewijzigd op 17/03/2012 15:07:24 door Klaas van Wijngaarden
 
George van Baasbank

George van Baasbank

17/03/2012 16:27:58
Anchor link
Iedereen die gereageerd heeft: Bedankt. Ik ga e.e.a. uitproberen
 
Wouter J

Wouter J

17/03/2012 18:08:10
Anchor link
Aiaiai, de laatste reactie (voor die van George) zijn erg slecht en zou ik niet gebruiken. Tabellen zijn niet voor het opmaken van een site en dus moet je ze ook niet via een omweg toch gebruiken.


George, als ik je een tip mag geven: Ga eerst in HTML4 aan de slag met het weggooien van de table elementen en die vervangen met divjes en andere, daarvoor geschikte, HTML tags als <span>, <h1> t/m <h6>, <p>, <small>, <address>, enz. Een goede tutorial daarover: http://sceneone.nl/ (de hele site is 1 tutorial over HTML4)

Vervolgens, als je dit onder de knie hebt, ga je kijken wat er allemaal voor nieuws is in HTML5 en ga je dit veranderen. Kijk dan bijv. naar sites als http://html5doctor.com/

Dat lijkt me nu de beste oplossing om tot het juist leren van een oplossing te komen.


Aron,
Dat wat jij laat zien is geen tabel, maar een grid systeem. Dat is iets totaal anders en zou ik zeker aanraden om te gebruiken.
Gewijzigd op 17/03/2012 18:12:27 door Wouter J
 
Frank Conijn

Frank Conijn

03/11/2014 16:27:57
Anchor link
Wouter, ten aanzien van je laatste zin: daarmee bedoel je toch niet dat voor tabellaire data een gridsysteem zou aanraden?
 
Eddy E

Eddy E

03/11/2014 17:15:43
Anchor link
Klaas: ik vind jouw HTML niet echt duidelijker, beter of korter of zo.
Als je data wilt tonen: pak een tabel.
Als je wat blokjes wilt tonen: dat kan met <div>'s of <section>'s etc. Maar we gaan toch geen tabel nabouwen met <div>, want dat is niet sematisch.
 
Wouter J

Wouter J

03/11/2014 17:27:25
Anchor link
Dit topic is 2 jaar oud, het heeft geen zin meer om hier reacties op te plaatsen. Mocht je een nieuwe vraag hebben, dan kun je daarvoor een nieuw topic openen. Alvast bedankt!
 
Frank Conijn

Frank Conijn

05/11/2014 02:56:15
Anchor link
Wouter, ik weet niet hoe het komt, gezien de data van de reacties, maar de draad stond al bijna een week op de 'voorpagina' van XHTML/CSS vóórdat ik er op reageerde. Daarbij kun je op die 'voorpagina' niet zien hoe oud het originele bericht is.
Gewijzigd op 05/11/2014 03:00:21 door Frank Conijn
 
Bart V B

Bart V B

05/11/2014 08:11:32
Anchor link
Dit bericht stond inderdaad van de week ZONDER dat er gereageerd was in de recente topic lijst.
heb zelfs een bug topic voor geopend..
 
Wouter J

Wouter J

05/11/2014 09:47:49
Anchor link
Dit kwam doordat een spammer hier een reactie had geplaatst die vervolgens verwijderd was. De lijst met recente topics wordt dan niet geupdate. Ik neem het ook niemand kwalijk dat hier nog op gereageerd werd (behalve de spammer), ik wou alleen voorkomen dat er nog inhoudelijk op de topicvraag in werd gegaan. Excuses voor het ongemak :)
 
Adam Stack

Adam Stack

16/11/2023 11:28:18
Anchor link
** spam **
Gewijzigd op 16/11/2023 11:42:14 door - Ariën -
 
 

Dit topic is gesloten.



Overzicht

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.