Toon posts:

[HTML] Tabellen

Pagina: 1
Acties:
  • 533 views sinds 30-01-2008

woensdag 27 juli 2005 15:51

Acties:

Verwijderd

Topicstarter
Ik heb een opzet gerealiseerd waarbij ik geprobeerd heb om zo goed mogelijk de W3C-aanbevelingen toe te passen. Graag zou ik jullie mening hebben over mijn opzet. Vooral bij het juist toepassen van de aanbevelingen aangaande de tabel ben ik benieuwd wat jullie er van vinden.

Voorbeeld:

Afbeeldingslocatie: http://home.planet.nl/~kempe433/thomas/5a.png

Code:
HTML:
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
        <div class="structure">
            <map name="navigation">
                <p>
                    <select>
                        <option>Selecteer woningtype</option>
                    </select>
                </p>
                <p>
                    <a href="javascript://">Home</a> | <a href="javascript://">Aanbod</a> | <a href="javascript://">Ons team</a> | <a href="javascript://">Contact</a> | <a href="javascript://">Disclaimer</a> | <a href="javascript://">Terug</a>
                </p>
            </map>
        </div>
        <table summary="Tabel met objecten">
            <caption>Objecten</caption>
            <colgroup span="3" width="50">
            <thead>
                <tr>
                    <th colspan="3">Objecten</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td abbr="Object">
                        <p>[img]"../../images/objects/image.png"[/img]</p>
                        <h1>Hanenburg 54</h1>
                        <div class="status">VERKOCHT</div>Vraagprijs<div class="price">354.000,- kk</div>
                    </td>
                    <td abbr="Object">
                        <p>[img]"../../images/objects/image.png"[/img]</p>
                        <h1>Hanenburg 54</h1>
                        <div class="status">VERKOCHT</div>Vraagprijs<div class="price">354.000,- kk</div>
                    </td>
                    <td abbr="Object">
                        <p>[img]"../../images/objects/image.png"[/img]</p>
                        <h1>Hanenburg 54</h1>
                        <div class="status">VERKOCHT</div>Vraagprijs<div class="price">354.000,- kk</div>
                    </td>
                </tr>
                <tr>
                    <td abbr="Object">
                        <p>[img]"../../images/objects/image.png"[/img]</p>
                        <h1>Hanenburg 54</h1>
                        <div class="status">VERKOCHT</div>Vraagprijs<div class="price">354.000,- kk</div>
                    </td>
                    <td abbr="Object">
                        <p>[img]"../../images/objects/image.png"[/img]</p>
                        <h1>Hanenburg 54</h1>
                        <div class="status">VERKOCHT</div>Vraagprijs<div class="price">354.000,- kk</div>
                    </td>
                    <td abbr="Object">
                        <p>[img]"../../images/objects/image.png"[/img]</p>
                        <h1>Hanenburg 54</h1>
                        <div class="status">VERKOCHT</div>Vraagprijs<div class="price">354.000,- kk</div>
                    </td>
                </tr>
                <tr>
                    <td abbr="Object">
                        <p>[img]"../../images/objects/image.png"[/img]</p>
                        <h1>Hanenburg 54</h1>
                        <div class="status">VERKOCHT</div>Vraagprijs<div class="price">354.000,- kk</div>
                    </td>
                    <td abbr="Object">
                        <p>[img]"../../images/objects/image.png"[/img]</p>
                        <h1>Hanenburg 54</h1>
                        <div class="status">VERKOCHT</div>Vraagprijs<div class="price">354.000,- kk</div>
                    </td>
                    <td abbr="Object">
                        <p>[img]"../../images/objects/image.png"[/img]</p>
                        <h1>Hanenburg 54</h1>
                        <div class="status">VERKOCHT</div>Vraagprijs<div class="price">354.000,- kk</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
Opmerkingen bij de tabel:

1. Ik geef een breedte door bij de colgroup omdat volgens het W3C bepaalde UA de tabelrijen dan alvast op een 'oplopende manier' kunnen renderen.
width = multi-length [CN]

This attribute specifies a default width for each column in the current column group. In addition to the standard pixel, percentage, and relative values, this attribute allows the special form "0*" (zero asterisk) which means that the width of the each column in the group should be the minimum width necessary to hold the column's contents. This implies that a column's entire contents must be known before its width may be correctly computed. Authors should be aware that specifying "0*" will prevent visual user agents from rendering a table incrementally.

This attribute is overridden for any column in the column group whose width is specified via a COL element.
Edit:

Even wat fouten uit de HTML verwijderd.

[ Voor 167% gewijzigd door Verwijderd op 27-07-2005 16:08 ]

woensdag 27 juli 2005 16:12

Acties:
  • SchizoDuckie
  • Registratie: April 2001
  • Laatst online: 18-02-2025

SchizoDuckie

Kwaak

Umm jah, ziet er leuk uit. Wat wil je voorderest dat we er van zeggen :?

Stop uploading passwords to Github!

woensdag 27 juli 2005 16:16

Acties:

Verwijderd

een tabel gebruiken heeft inderdaad bijzonder veel voordelen hier, toch is de structuur geen tabulaire structuur, elke cel heeft namelijk precies dezelfde functie, kolommen en rijen hebben geen enkele semantische betekenis. Wat ik zou doen is een rijtje divs floaten in een container met vaste breedte

als je toch een tabel doet: het abbr attribuut kan je nu net zo goed weglaten, het zegt elke keer hetzelfde en heeft absoluut geen toegevoegde waarde, de thead zegt ook absoluut niets.

overigens kan je de width van een <col> ook beter met css regelen eigenlijk

[ Voor 8% gewijzigd door Verwijderd op 27-07-2005 17:19 ]

woensdag 27 juli 2005 16:20

Acties:
  • SchizoDuckie
  • Registratie: April 2001
  • Laatst online: 18-02-2025

SchizoDuckie

Kwaak

Verwijderd schreef op woensdag 27 juli 2005 @ 16:16:
Wat ik zou doen is een rijtje divs floaten in een container met vaste breedte/
Ik zou zelfs de vaste breedte van de container misschien nog weglaten. Zo kan iemand met een hoge resolutie meer gegevens naast elkaar te zien krijgen :)

Stop uploading passwords to Github!

woensdag 27 juli 2005 16:21

Acties:

Verwijderd

Topicstarter
Verwijderd schreef op woensdag 27 juli 2005 @ 16:16:
een tabel gebruiken heeft inderdaad bijzonder veel voordelen hier, toch is de structuur geen tabulaire structuur, elke cel heeft namelijk precies dezelfde functie, kolommen en rijen hebben geen enkele semantische betekenis. Wat ik zou doen is een rijtje divs floaten in een container met vaste breedte

als je toch een tabel doet: het abbr attribuut kan je nu net zo goed weglaten, het zegt elke keer hetzelfde en heeft absoluut geen toegevoegde waarde, de thead zegt ook absoluut niets.
Bedankt voor de tips! Ik begin het idee van HTML nu eindelijk een beetje door te krijgen. :)

woensdag 27 juli 2005 16:39

Acties:

Verwijderd

Topicstarter
Aangepaste code:

HTML:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
        <div class="structure">
            <map name="navigation">
                <p>
                    <select>
                        <option>Selecteer woningtype</option>
                    </select>
                </p>
                <p>
                    <a href="javascript://">Home</a> | <a href="javascript://">Aanbod</a> | <a href="javascript://">Ons team</a> | <a href="javascript://">Contact</a> | <a href="javascript://">Disclaimer</a> | <a href="javascript://">Terug</a>
                </p>
            </map>
        </div>
        <div id="overview">
            <div class="objects">
                <p>[img]"../../images/objects/image.png"[/img]</p>
                <h1>Hanenburg 54</h1>
                <div class="status">VERKOCHT</div>Vraagprijs<div class="price">354.000,- kk</div>
            </div>
            <div class="objects">
                <p>[img]"../../images/objects/image.png"[/img]</p>
                <h1>Hanenburg 54</h1>
                <div class="status">VERKOCHT</div>Vraagprijs<div class="price">354.000,- kk</div>
            </div>
            <div class="objects">
                <p>[img]"../../images/objects/image.png"[/img]</p>
                <h1>Hanenburg 54</h1>
                <div class="status">VERKOCHT</div>Vraagprijs<div class="price">354.000,- kk</div>
            </div>
            <!-- etc. -->
        </div>
    </body>
</html>

Ik heb de buitenste paragraaf het ID 'overview' meegegeven om consistentie met mijn andere template te behouden. Tevens heb ik aan de paragrafen die de objecten omsluiten de klasse 'objects' gegeven. Dit heb ik gedaan omdat ik dat duidelijker vind. Vooral als je rekening houdt met z.g.n. speachbrowsers vind ik het duidelijker als men eerst te horen krijgt dat de betreffende paragraaf een object + info weergeeft.

[ Voor 72% gewijzigd door Verwijderd op 27-07-2005 16:41 ]

woensdag 27 juli 2005 17:15

Acties:

Verwijderd

jups, alleen zou ik in die overview div een h1 "objecten" zetten (in je tabel had je ook een caption en een thead met "objecten" erin) en al die huisjes h2 maken, dan komt dat ook wat logischer op me over.

de laatste regel van elk object zou ik nog even naar kijken:
<div class="status">VERKOCHT</div>Vraagprijs<div class="price">354.000,- kk</div>

ik zou eigenlijk iets doen als
code:
1
2

<p>Vraagprijs<span class="price">354.000,- kk</span></p>
<p class="status">Verkocht</p>

note de volgorde omgedraait, je kan je "verkocht" toch wel met css op de goede plaats krijgen denk ik (ff absoluut positioneren) en dit lijkt me handiger lezen zonder css, maar dat zal verder jouw keuze zijn denk ik
heb ook het woord in kleine letters gedaan, als het geen afkorting is, doe dan geen hoofdletters in je code, maar regel dat met css.

woensdag 27 juli 2005 18:16

Acties:
  • m.w
  • Registratie: Juli 2005
  • Laatst online: 21-09-2024

m.w

Misschien zou je er ook nog voor kunnen kiezen om een unordered list te gebruiken voor het structereren van die objecten.

vrijdag 29 juli 2005 11:44

Acties:

Verwijderd

Topicstarter
m.w schreef op woensdag 27 juli 2005 @ 18:16:
Misschien zou je er ook nog voor kunnen kiezen om een unordered list te gebruiken voor het structereren van die objecten.
Is dat semantisch correcter? In principe spreek je over een lijst/opsomming met huizen dus w.d.b. zou ik zeggen dat je gelijk hebt. Ik ben benieuwd hoe Mophor hier over denkt.

Edit:
HTML:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <link href="../../styles/objects/style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="structure">
            <map name="navigation">
                <p>
                    <select>
                        <option>Selecteer woningtype</option>
                    </select>
                </p>
                <p>
                    <a href="javascript://">Home</a> | <a href="javascript://">Aanbod</a> | <a href="javascript://">Ons team</a> | <a href="javascript://">Contact</a> | <a href="javascript://">Disclaimer</a> | <a href="javascript://">Terug</a>
                </p>
            </map>
        </div>
        <div id="overview">
            <div class="objects">
                <ul>
                    <li>
                        <h1>Objecten</h1>
                        <p>[img]"../../images/objects/image.png"[/img]</p>
                        <h2>Hanenburg 54</h2>
                        <p>Vraagprijs<span class="price">354.000,- kk</span><span class="status">Verkocht</span></p>
                        <!-- etc. -->
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

[ Voor 60% gewijzigd door Verwijderd op 29-07-2005 11:48 ]

vrijdag 29 juli 2005 12:02

Acties:
  • coubertin119
  • Registratie: Augustus 2002
  • Laatst online: 29-04 17:12

coubertin119

Meestal wordt een H1 gebruikt als paginatitel, en niet als repeterend element in een tabel. Je kan beter opteren voor een iets minder hoge titel, een H3 of H4, al hangt dat natuurlijk af van je paginastructuur.

Skat! Skat! Skat!

vrijdag 29 juli 2005 12:03

Acties:

Verwijderd

/me denkt dat je alles wel kan zien als een lijst, een reeks hoofdstukken in een boek is ook een lijst toch?

ul is voor compacte structuren, waar de namen van hoofdstukken opgesomt staan in een inhoudsopgave is het een lijst maar iets als:
HTML:
1
2
3
4
5

<ul id="book">
  <li><div><h1>Chapter1<h1><!-- content --></div></li>
  <li><div><h1>Chapter2<h1><!-- content --></div></li>
  <!-- etc -->
</ul>

is klets imho, ik denk dat dat hier ook het geval is, hoewel je natuurlijk altijd randgevallen hebt.

ergo: lijsten alleen gebruiken voor compacte structuren zou ik zeggen

vrijdag 29 juli 2005 12:28

Acties:
  • Genoil
  • Registratie: Maart 2000
  • Laatst online: 12-11-2023

Genoil

Verwijderd schreef op vrijdag 29 juli 2005 @ 12:03:
..
ergo: lijsten alleen gebruiken voor compacte structuren zou ik zeggen
Anders krijgt je opmaak last van listitis :)

vrijdag 29 juli 2005 12:45

Acties:

Verwijderd

Topicstarter
Genoil schreef op vrijdag 29 juli 2005 @ 12:28:
[...]


Anders krijgt je opmaak last van listitis :)
;)

vrijdag 29 juli 2005 12:47

Acties:

Verwijderd

Topicstarter
HTML:
1
2
3
4
5
6
7
8
9

<div id="overview">
    <div class="objects">
        <h1>Objecten</h1>
        <p>[img]"../../images/objects/image.png"[/img]</p>
        <h2>Hanenburg 54</h2>
        <p>Vraagprijs<span class="price">354.000,- kk</span><span class="status">Verkocht</span></p>
        <!-- etc. -->
    </div>
</div>


Zo zou het dan moeten kloppen..

vrijdag 29 juli 2005 13:05

Acties:

Verwijderd

[rml]deprogrammeur in "[ HTML] Tabellen"[/rml]

daar laat je zien dat je die .objects steeds gaat herhalen, dan zou die h1 logischerwijs in #overview moeten imho

vrijdag 29 juli 2005 13:21

Acties:

Verwijderd

Topicstarter
Verwijderd schreef op vrijdag 29 juli 2005 @ 13:05:
[rml]deprogrammeur in "[ HTML] Tabellen"[/rml]

daar laat je zien dat je die .objects steeds gaat herhalen, dan zou die h1 logischerwijs in #overview moeten imho
Je hebt gelijk! Ik zat weer helemaal niet op te letten. 8)7

zaterdag 30 juli 2005 18:01

Acties:

Verwijderd

Wat is het nut van elke <div> de class object mee te geven?

code:
1
2
3

#overview div {
..
}


Scheelt weer wat, of staar ik me nu blind op verkeerde details?

[ Voor 20% gewijzigd door Verwijderd op 30-07-2005 18:01 ]

zaterdag 30 juli 2005 19:45

Acties:
  • m.w
  • Registratie: Juli 2005
  • Laatst online: 21-09-2024

m.w

Verwijderd schreef op zaterdag 30 juli 2005 @ 18:01:
Wat is het nut van elke <div> de class object mee te geven?

code:
1
2
3

#overview div {
..
}


Scheelt weer wat, of staar ik me nu blind op verkeerde details?
Daarmee zou je alle onderliggende DIV elementen stylen, wat vast niet de bedoeling is.

Daarom zei ik overigens dat het gebruik van een unordered list een optie is omdat je dan wat meer aanhaakpunten hebt voor je CSS.

donderdag 4 augustus 2005 10:47

Acties:
  • Michali
  • Registratie: Juli 2002
  • Laatst online: 22-03 18:12

Michali

Kleine kick, maar wil het toch even kwijt.

Ik zou hier:
HTML:
1
2
3

<p>
    <a href="javascript://">Home</a> | <a href="javascript://">Aanbod</a> | <a href="javascript://">Ons team</a> | <a href="javascript://">Contact</a> | <a href="javascript://">Disclaimer</a> | <a href="javascript://">Terug</a>
</p>

wel een lijstje van maken.

Iets in de zin van:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13

<ul>
    <li class="link"><a href="javascript://">Home</a></li>
    <li class="separator">|</li>
    <li class="link"><a href="javascript://">Aanbod</a></li>
    <li class="separator">|</li>
    <li class="link"><a href="javascript://">Ons team</a></li>
    <li class="separator">|</li>
    <li class="link"><a href="javascript://">Contact</a></li>
    <li class="separator">|</li>
    <li class="link"><a href="javascript://">Disclaimer</a></li>
    <li class="separator">|</li>
    <li class="link"><a href="javascript://">Terug</a></li>
</ul>

Je zou zelfs dat streepje direct na een linkje kunnen zetten, maar zo heb je iets meer vrijheid met opmaken.

Hoe denken jullie hier over?

Nog een vraagje. Waarom gebruik je eigenlijk een map element? Dat is toch puur voor image maps of heb ik het verkeerd?

Noushka's Magnificent Dream | Unity

donderdag 4 augustus 2005 10:53

Acties:

Verwijderd

1) heb je gelijk in, maar maak van de separators geen li, gooi ze helemaal in de css als dat mogelijk is (border-left en de li:first-child niet)

2) [rml]mophor in "[ CSS] Correcte schrijfwijze"[/rml]

[ Voor 9% gewijzigd door Verwijderd op 04-08-2005 11:09 ]

donderdag 4 augustus 2005 11:13

Acties:
  • Michali
  • Registratie: Juli 2002
  • Laatst online: 22-03 18:12

Michali

Verwijderd schreef op donderdag 04 augustus 2005 @ 10:53:
1) heb je gelijk in, maar maak van de separators geen li, gooi ze helemaal in de css als dat mogelijk is (border-left en de li:first-child niet)
Dat is waar, alleen probeerde ik nog rekening te houden met IE ;) Het moet ook nog geimplementeerd worden natuurlijk.

Noushka's Magnificent Dream | Unity

donderdag 4 augustus 2005 13:49

Acties:
  • Annie
  • Registratie: Juni 1999
  • Laatst online: 25-11-2021

Annie

amateur megalomaan

Verwijderd schreef op zaterdag 30 juli 2005 @ 18:01:
Wat is het nut van elke <div> de class object mee te geven?

code:
1
2
3

#overview div {
..
}


Scheelt weer wat, of staar ik me nu blind op verkeerde details?
Als de div van de klasse "object" is, dan kan dat nuttig zijn (je brengt structuur aan in je data).
Het toekennen van een class aan een element heeft niets te maken met hoe je dit element van een bepaalde style wil voorzien (het kan je daar wel bij helpen natuurlijk).

Today's subliminal thought is:

zaterdag 20 augustus 2005 16:47

Acties:
  • alver
  • Registratie: Augustus 2005
  • Laatst online: 20-01-2024

alver

test

zaterdag 20 augustus 2005 18:08

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 28-04 11:43

André

Analytics dude

test 2

Alver, welkom op GoT, zou je alvorens te testen eens de volgende zaken door kunnen nemen?:
[FAQ]Algemene GoT FAQ[/FAQ]
[rml][ W&G FAQ] W&G Policy & Beleid[/rml]

[ Voor 93% gewijzigd door André op 20-08-2005 18:09 ]

Pagina: 1

Dit topic is gesloten.