Hoofdcategorieën

[RSS] Forum » Devschuur® » Webdesign, Markup & Clientside Scripting » [HTML] Tabellen

Topicacties

[HTML] Tabellen

Pagina: 1

Nieuw Topic

offline Geplaatst op woensdag 27 juli 2005 15:51

Acties: [view]

Door: deprogrammeur
Berichten: 170
Reg. datum: 20 januari 2004
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:

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.

deprogrammeur wijzigde dit bericht 27-07-2005 16:08 (167%)

 

offline Geplaatst op woensdag 27 juli 2005 16:12

Acties: [view]

Door: SchizoDuckie
Nog steeds geen boomknuffelaar
Berichten: 4.704
Reg. datum: 16 april 2001
Umm jah, ziet er leuk uit. Wat wil je voorderest dat we er van zeggen :?

Stop de papieren telefoongids
Pork.dbObject
*kwaak*

offline Geplaatst op woensdag 27 juli 2005 16:16

Acties: [view]

Door: mophor
zie 23648
Berichten: 5.427
Reg. datum: 27 juli 2000
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

mophor wijzigde dit bericht 27-07-2005 17:19 (8%)

var _ = {_: 'unreadable code detected!'};
alert(_._);

offline Geplaatst op woensdag 27 juli 2005 16:20

Acties: [view]

Door: SchizoDuckie
Nog steeds geen boomknuffelaar
Berichten: 4.704
Reg. datum: 16 april 2001
quote:
mophor 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 de papieren telefoongids
Pork.dbObject
*kwaak*

offline Geplaatst op woensdag 27 juli 2005 16:21

Acties: [view]

Door: deprogrammeur
Berichten: 170
Reg. datum: 20 januari 2004
quote:
mophor 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. :)
 

offline Geplaatst op woensdag 27 juli 2005 16:39

Acties: [view]

Door: deprogrammeur
Berichten: 170
Reg. datum: 20 januari 2004
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.

deprogrammeur wijzigde dit bericht 27-07-2005 16:41 (72%)

 

offline Geplaatst op woensdag 27 juli 2005 17:15

Acties: [view]

Door: mophor
zie 23648
Berichten: 5.427
Reg. datum: 27 juli 2000
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

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

var _ = {_: 'unreadable code detected!'};
alert(_._);

offline Geplaatst op woensdag 27 juli 2005 18:16

Acties: [view]

Door: m.w
Berichten: 11
Reg. datum: 19 juli 2005
Misschien zou je er ook nog voor kunnen kiezen om een unordered list te gebruiken voor het structereren van die objecten.
 

offline Geplaatst op vrijdag 29 juli 2005 11:44

Acties: [view]

Door: deprogrammeur
Berichten: 170
Reg. datum: 20 januari 2004
quote:
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>

deprogrammeur wijzigde dit bericht 29-07-2005 11:48 (60%)

 

online Geplaatst op vrijdag 29 juli 2005 12:02

Acties: [view]

Door: coubertin119
Banaan
Berichten: 1.740
Reg. datum: 21 augustus 2002
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!

offline Geplaatst op vrijdag 29 juli 2005 12:03

Acties: [view]

Door: mophor
zie 23648
Berichten: 5.427
Reg. datum: 27 juli 2000
* mophor 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

var _ = {_: 'unreadable code detected!'};
alert(_._);

offline Geplaatst op vrijdag 29 juli 2005 12:28

Acties: [view]

Door: Genoil
zie .sig
Berichten: 2.605
Reg. datum: 17 maart 2000
quote:
mophor 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 :)

__w__
a | s | d

offline Geplaatst op vrijdag 29 juli 2005 12:45

Acties: [view]

Door: deprogrammeur
Berichten: 170
Reg. datum: 20 januari 2004
quote:
Genoil schreef op vrijdag 29 juli 2005 @ 12:28:
[...]


Anders krijgt je opmaak last van listitis :)
;)
 

offline Geplaatst op vrijdag 29 juli 2005 12:47

Acties: [view]

Door: deprogrammeur
Berichten: 170
Reg. datum: 20 januari 2004

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

offline Geplaatst op vrijdag 29 juli 2005 13:05

Acties: [view]

Door: mophor
zie 23648
Berichten: 5.427
Reg. datum: 27 juli 2000
deprogrammeur in "[HTML] Tabellen"

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

var _ = {_: 'unreadable code detected!'};
alert(_._);

offline Geplaatst op vrijdag 29 juli 2005 13:21

Acties: [view]

Door: deprogrammeur
Berichten: 170
Reg. datum: 20 januari 2004
quote:
mophor schreef op vrijdag 29 juli 2005 @ 13:05:
deprogrammeur in "[HTML] Tabellen"

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
 

offline Geplaatst op zaterdag 30 juli 2005 18:01

Acties: [view]

Door: Wexs
Berichten: 113
Reg. datum: 30 november 2004
Wat is het nut van elke <div> de class object mee te geven?
code:
1
2

#overview div {
..
}

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

Wexs wijzigde dit bericht 30-07-2005 18:01 (20%)

 

offline Geplaatst op zaterdag 30 juli 2005 19:45

Acties: [view]

Door: m.w
Berichten: 11
Reg. datum: 19 juli 2005
quote:
Wexs schreef op zaterdag 30 juli 2005 @ 18:01:
Wat is het nut van elke <div> de class object mee te geven?


code:
1
2

#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.
 

offline Geplaatst op donderdag 04 augustus 2005 10:47

Acties: [view]

Door: Michali
Berichten: 5.296
Reg. datum: 10 juli 2002
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?

Music is an expression of pure emotion

offline Geplaatst op donderdag 04 augustus 2005 10:53

Acties: [view]

Door: mophor
zie 23648
Berichten: 5.427
Reg. datum: 27 juli 2000
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) mophor in "[CSS] Correcte schrijfwijze"

mophor wijzigde dit bericht 04-08-2005 11:09 (9%)

var _ = {_: 'unreadable code detected!'};
alert(_._);

offline Geplaatst op donderdag 04 augustus 2005 11:13

Acties: [view]

Door: Michali
Berichten: 5.296
Reg. datum: 10 juli 2002
quote:
mophor 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.

Music is an expression of pure emotion

online Geplaatst op donderdag 04 augustus 2005 13:49

Acties: [view]

Door: Annie
amateur megalomaan
Berichten: 5.220
Reg. datum: 16 juni 1999
quote:
Wexs schreef op zaterdag 30 juli 2005 @ 18:01:
Wat is het nut van elke <div> de class object mee te geven?


code:
1
2

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

offline Geplaatst op zaterdag 20 augustus 2005 16:47

Acties: [view]

Door: alver
Berichten: 1
Reg. datum: 20 augustus 2005
test
 

offline Geplaatst op zaterdag 20 augustus 2005 18:08

Acties: [view]

Door: André
Moderator WEB/GFX
Berichten: 19.922
Reg. datum: 11 maart 2002
test 2

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

André wijzigde dit bericht 20-08-2005 18:09 (93%)

andrescholten.nl, SEO en Web Analytics blog

Pagina: 1

Dit topic is gesloten.

VNU Media logo Powered by True

© 1998 - 2009 Tweakers.net - Alle rechten voorbehouden - Uw Privacy - Algemene Voorwaarden

Uitgever van: