HTML5: Wat is de vervanger van de <table>?
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
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
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/
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.
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
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)
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
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;
}
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)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div class="row">
<div class="tencol">
80%
</div>
<div class="twocol last">
20%
</div>
</div>
<div class="tencol">
80%
</div>
<div class="twocol last">
20%
</div>
</div>
Source: http://cssgrid.net/
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
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;
}
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)
1
2
3
4
5
6
7
8
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>
<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, 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
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.
Gewijzigd op 05/11/2014 03:00:21 door Frank Conijn
heb zelfs een bug topic voor geopend..
Gewijzigd op 16/11/2023 11:42:14 door - Ariën -
Dit topic is gesloten.