Vormgeving tabellen met veel data

[Verwijderd]

Ik vraag me af,

Zijn er voorschriften over hoe het beste een grote tabel met data (datums, namen, nummers en dergelijke) vorm te geven?
Ik denk dat aan afmetingen, uitleningen kleurverschillen en verhoudingen en lettergrote ?
Ik ben voor een project een aantal "tabular data" tabellen aan het maken, maar vraag me erg af of hier geen richtlijnen en of standaarden voor zijn?
Ik kon er op de rest van het internet niet erg veel over vinden namelijk ...

[André]

Tja, borders om de cellen, leesbare letters, misschien de rijen om en om kleuren. Ik snap niet wat je bedoelt, hier zijn geen richtlijnen voor, als de tabel maar leesbaar is.

[intermusic]

Ik ben sowieso altijd een voorstander van kleine kleurverschillen in de verschillende regels.
regel 1: wit
regel 2: licht grijs
regel 3: wit

Kijkt erg makkelijk.
Ook kan je er voor kiezen dat als je een tabel hebt niet de verticale lijntjes te laten zien in één record. Dus alleen lijn boven, onder, links en rechts en niet ertussen.
_{edit: dus geen randjes links en recht van de cellen, maar alleen van de gehele row}

[ Voor 13% gewijzigd door intermusic op 14-09-2004 13:55 ]

[BtM909]

Ik ben het zelf niet helemaal eens met de implementatie, maar wellicht kan je hier wat ideeen vandaan halen:
• http://www.alistapart.com/articles/zebratables/
• http://www.alistapart.com/articles/tableruler/

Ik zou sowieso proberen die tabel een beetje op te hakken in meerdere tabellen, omdat sommige IE versies (ik weet niet of IE tegenwoordig nog steeds zo rendered) pas de tabel renderen na een </table>-tag.

[Verwijderd]

Ok,.dank voor de suggesties.
Ik weet wel hoe ik een tabel in elkaar zet, en waar ik ong. voor kan kiezen.
Wat ik me alleen af vraag is of er geen onderzoeken naar gedaan zijn, rapporten over wat wel en niet prettig leest, waarom je bijvoorbeeld de ene kolom ,et cijfers wel links uit lijnt en de andere niet ,..
Ik ben dus op zoek naar documentatie, niet naar tips en meningen van mensen die iets vinden. Die dingen had ik me namelijk zelf ook allemaal al bedacht

[ Voor 8% gewijzigd door Verwijderd op 14-09-2004 14:07 ]

[RM-rf]

intermusic schreef op 14 september 2004 @ 13:54:
Ik ben sowieso altijd een voorstander van kleine kleurverschillen in de verschillende regels.
regel 1: wit
regel 2: licht grijs
regel 3: wit

Kijkt erg makkelijk.
Ook kan je er voor kiezen dat als je een tabel hebt niet de verticale lijntjes te laten zien in één record. Dus alleen lijn boven, onder, links en rechts en niet ertussen.
_{edit: dus geen randjes links en recht van de cellen, maar alleen van de gehele row}

ik heb er zelf nog een lichte toevoeging aan:
het is mijn gewoonte om niet alleen de TR-achtergrond kleine wisselingen in kleur te laten kennen, maar daarbij ook de tekst-kleur eveneens licht te laten wisselen, waarbij de tekstkleur op de donkere kleur ook altijd net iets donkerder is dan de tekstkleur op de lichtere achtergrond.

het idee heb ik van het werken met inktdrukken, waar vaak de extra drukinkt voor het donkere stuk vaak ook de inkt van de letters net wat donkerder maakt

voorbeeld:

blahblah

foo bar

tradelie

domptiedom

het effect is erg minimaal, maar het geeft ook net wat meer 'body' aan zo'n structuur.

Verder altijd net met table-headers (TH) werken, caption, tbody, zodat je informatie erg toegankelijk blijft, en juist die tags kunnen ook weer als guidelines werken in je layout-design

[ Voor 23% gewijzigd door RM-rf op 14-09-2004 14:19 ]

[Verwijderd]

RM-rf schreef op 14 september 2004 @ 14:10:
[...]
ik heb er zelf nog een lichte toevoeging aan:
het is mijn gewoonte om niet alleen de TR-achtergrond kleine wisselingen in kleur te laten kennen, maar daarbij ook de tekst-kleur eveneens licht te laten wisselen, .......

Wow,
Das nou wel weer een hele goeie tip !!!
Die had ik niet zelf bedacht denk ik

[ Voor 58% gewijzigd door Verwijderd op 14-09-2004 14:14 ]

[André]

Oh, en qua leesbaarheid in de breedte is wel onderzoek gedaan, het is hier laatst al eens langsgekomen. Volgens mij was het maximaal 500px per kolom, dat was nog prettig leesbaar.

[Verwijderd]

heb een tijdje geleden een klein onderzoekje gedaan onder gebruikers.

tabellen moesten ook aan een huisstijl voldoen, uiteindelijk zien ze er ongeveer zo uit:
http://w3.tue.nl/nl/diensten/csc/tue_web/web_test_page/#7273

let vooral op
- zebrastriped
- lijntjes tussen kolommen
- colspanned cells staat de text in het midden (in echte browsers)
- let op scope attribuut
- footer erbij

eigenlijk zegt de css alles (stripped)

Cascading Stylesheet:

.contenttable-html {
    background-color: #EFEFEF;
    border-collapse: collapse;
    empty-cells: show;
}

/* ok, we are ready for the future. Browserbuilders: please, please implement this */
.contenttable-html tr:nth-child(odd) {
    background-color: #E7E7E7;
}

.contenttable-html tr.tr-odd {
    background-color: #E7E7E7;
}

.contenttable-html caption {
    color: #2D2286;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
}

.contenttable-html tfoot th, .contenttable-html tfoot td {
    border-top: 1px solid #003366;
}

.contenttable-html tfoot th {
    background-color: #DDDDDD;
    font-style: italic;
    text-align: right;
    font-weight: normal;
}

.contenttable-html tfoot td {
    font-style: italic;
}
    
.contenttable-html thead th {
    background-color: #003366;
    font-weight: bold;
    color: white;
    text-align: left;
}

.contenttable-html tbody th {
    background-color: #DDDDDD;
    border-right: none;
    font-weight: normal;
    text-align: right;
}

/* ok, the following does not work in ie, but it's a nice extra for other browsers */
.contenttable-html tbody td[colspan] {
    text-align: center;
}

.contenttable-html tbody td[rowspan] {
    vertical-align: middle;
}

.contenttable-html tbody th[colspan] {
    text-align: center;
}

.contenttable-html th[scope=rowgroup] {
    font-weight: bold;
}

.contenttable-html tbody td {
    border-right: 1px solid white;
}

edit: nog een tip (moet ik hier eigenlijk ook in verwerken)

geef de tabel een border="1" oid mee (het attribuut ja) en overrule de boel vervolgens met je css zoals je wilt, dan is de tabel echt een stuk beter leesbaar in noncss browsers (die wel de border gerenderd krijgen)

[ Voor 21% gewijzigd door Verwijderd op 14-09-2004 17:03 ]