[CSS] Recordset formatten

Even Michali's post verbeteren qua toegankelijkheid

quote:

Michali schreef op woensdag 03 augustus 2005 @ 11:36:
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

<table summary="[Samenvatting van waar de tabel inhoudelijk over gaat..]">     <caption>[Gegevens]</caption>     <thead>         <tr>             <th>&nbsp;</th>             <th scope="col">Waarde 1</th>             <th scope="col">Waarde 2</th>             <th scope="col">Waarde 3</th>         </tr>     </thead>     <tbody>         <tr>             <th scope="row">Rij 1:</th>             <td>1</td>             <td>2</td>             <td>3</td>         </tr>         <tr>             <th scope="row">Rij 2:</th>             <td>4</td>             <td>5</td>             <td>6</td>         </tr>         <tr>             <th scope="row">Rij 3:</th>             <td>7</td>             <td>8</td>             <td>9</td>         </tr>     </tbody>     <tfoot>         <tr>             <th scope="row">Totaal:</th>             <td>12</td>             <td>15</td>             <td>18</td>         </tr>     </tfoot> </table>

Justice wijzigde dit bericht 03-08-2005 14:13 (45%)

quote:

Justice schreef op woensdag 03 augustus 2005 @ 14:00:
Even Michali's post verbeteren qua toegankelijkheid
[...]

Nice

Die scope kende ik nog niet. Vanwaar die blokhaken als ik vragen mag?

Omdat de inhoud vervangen moest worden, ik werd een beetje bang dat iemand de inhoud van de summary attribuut integraal ging overzetten verder onnodig hoor.

De scope is dus om de browser duidelijk te maken welke heading bij welke data hoort, vooraal screenreaders hebben hier dus profeit van. Sorry voor mijn gebrekkig nederengels

Trouwens je kan nog verder werken met <cols> en <colgroup> tags enzo, maar mijn ervaring is dat je deze lastig (niet - probeer maar eens een borderstyle mee te geven) kan stylen en dat de scope attribuut dezelfde semantische waarde heeft.

Voor verder onderzoek:
zoeken bij google naar 'accessible tables'

Justice wijzigde dit bericht 03-08-2005 14:16 (72%)

columns zijn gedeeltelijk te stylen:
http://www.w3.org/TR/CSS21/tables.html#q4

toch ongelooflijk dat er nog steeds mensen zijn die denken dat als ze css gebruiken ze geen tables mogen gebruiken, en vice versa. Het zijn echt geen alternatieven van elkaar hoor! Precies of 'tables' is een opmaaktaal!?!

Tabulaire data > gebruik een <table> tag
Opmaak > CSS (Ja, je kan er ook een tabel mee opmaken!!! )

bobken wijzigde dit bericht 03-08-2005 19:41 (16%)

Wat ik zo ongelofelijk vind is dat mensen zoals jij gewoon echt voor geen meter lezen en interperteren.
Er is hier helemaal niemand die beweert dat je geen tables mag gebruiken!

De hele vraagstelling van dit topic gaat over hoe je met css-only een recordset kan formatten. In deze vraagstelling gaat het niet over het feit dat je geen tabellen moet gebruiken maar enkel en alleen hoe je het doet zonder tabellen.

Het hele semantiek verhaal en de discussie erover is een goede toevoeging op het topic.

Maar on-topic,

Een forum topic listing, is dat nou data die je in tabellen zou plaatsen?
Ik bedoel, tabulaire data in een tabel = ok, maar als ik nou geen tabulaire data heb en wel visueel een tabel structuur wil neerzetten met daarin wat gegevens, zou ik tabellen dan volgens de semantische methode niet mogen gebruiken?

idd, als het geen tabulaire data is en je wilt het er wel als een dergelijke structuur uit laten zien, dan moet je dat oplossen met css, niet met tabellen

een topicoverzicht (als deze) is imho wel gewoon tabulaire data

iets als deprogrammeur in "[HTML] Tabellen" is geen tabulaire data en moet dus niet in een tabel gestopt worden, ook al wil je het er wel zo uit laten zien.

(dat topic is overigens ook wel een hele interessante in het kader semantiek)

mophor wijzigde dit bericht 03-08-2005 20:20 (36%)

quote:

Timz schreef op woensdag 03 augustus 2005 @ 20:07:
Wat ik zo ongelofelijk vind is dat mensen zoals jij gewoon echt voor geen meter lezen en interperteren.
Er is hier helemaal niemand die beweert dat je geen tables mag gebruiken!

...

Ik heb nog nooit een site gemaakt die geen gebruik maakt van tabellen en nu wil ik het wel proberen mbhv alléén css.

hieruit maak ik toch op dat je geen tables wilde gebruiken....

Alweer lees je niet nauwkeurig, ik citeer:

quote:

toch ongelooflijk dat er nog steeds mensen zijn die denken dat als ze css gebruiken ze geen tables mogen gebruiken, en vice versa.

ik geef toe, het is wat mierenneukerig maar reageer dan gewoon niet...

quote:

Timz schreef op woensdag 03 augustus 2005 @ 20:07:
De hele vraagstelling van dit topic gaat over hoe je met css-only een recordset kan formatten.

Je zult nooit met CSS toe kunnen. Je hebt altijd HTML-elementen nodig om je CSS aan op te hangen, dus voor een recordset altijd table, tr, td en aanverwanten of divs met style="display: table-row;" en aanverwanten.

Als je dan toch HTML-elementen nodig hebt, kun je toch net zo goed die mooie semantische table familie gebruiken?

Daar ben ik inmiddels achter, het is ook niet zo dat ik het persee met css wil doen. Ik vroeg me af of het css-only kon. Ik ben nog veel wijzer geworden want het hele semantisch html-en daar had ik nog nooit van gehoord terwijl het kennelijk al een aantal jaren erg wel aan de hand is.

Ik heb html/css de laatste jaren ook verwaarloosd omdat ik bezig was andere dingen te leren. Nu ben ik met andere mensen bezig om een website op internet te zetten waarmee geld verdient moet worden en die veel bezoekers moet gaan trekken, dus nu ben ik me er weer in aan het verdiepen.

Tijdens mijn gathering of information kwam ik langs sites die het helemaal te vet vonden om een css-only site te maken. Ik ben daarmee aan de gang gegaan en stuitte dus op het probleem waar deze thread over gaat. Gelukkig hebben vooral mophor en schizoeend me genoeg feedback (in welke toonaard ook) gegeven om weer helemaal bij te kunnen geraken.

quote:

Justice schreef op woensdag 03 augustus 2005 @ 14:00:
Even Michali's post verbeteren qua toegankelijkheid

[...]

Interessant, dit kende ik nog niet

Zoals gezegd ben ik geen tabellen racist. Ik gebruik op mijn site ook enkele tabellen. En ik had er nog niet echt bij stilgestaan, maar in het geval van pure tabulaire data gebruik ik ook geen lijsten en div's. Bijvoorbeeld bij een lijst van producten (foto, korte omschrijving, prijs, leverancier) gebruik ik lijsten en div's omdat ik dit mooi en gemakkelijk wil stylen (en beetje zoals topics op een forum), en omdat alle data op 1 rij veel te krap wordt.

Ik ben mijn mening iig geval aan het herzien. Kan de rest zich er in vinden als ik zeg dat je lijsten en/of div's gebruikt als er meer styling aan te pas komt of als 1 record meer dan 1 rij in beslag neemt. Terwijl tabellen best kunnen gebruikt worden bij het puur weergeven van data zoals het visueel in een database zou kunnen staan?


Is er iemand die zoiets als dit met tabellen zou maken? Ik moet toegeven dat ik deze discussie gevoerd heb terwijl ik aan dit bezig was.Dit is ook een lijst van allemaal records. Als iemand dit met tables zou maken zou ik graag weten waarom

Het switchen van kolommen waar ik het over had heeft ook met dit te maken. Zo wil ik voor pda's een net iets andere layout maken.

ik denk dat lijsten hier ook niet op z'n plaats zijn eigenlijk, hoewel een beetje op het grensgebied

ik denk dat ik hetzelfde betoog zou kunnen voeren als in mophor in "[HTML] Tabellen"

(lees allemaal [HTML] Tabellen en [CSS] Correcte schrijfwijze even door, want dat was grotendeels hetzelfde onderwerp. In dit geval ben ik heel erg wezen helpen en diep op alles ingegaan, maar dat ga ik natuurlijk geen 2 keer doen )

mophor wijzigde dit bericht 04-08-2005 10:28 (43%)

quote:

mr_star schreef op donderdag 04 augustus 2005 @ 00:13:
Is er iemand die zoiets als dit met tabellen zou maken? Ik moet toegeven dat ik deze discussie gevoerd heb terwijl ik aan dit bezig was.Dit is ook een lijst van allemaal records. Als iemand dit met tables zou maken zou ik graag weten waarom

Dit is geen tabulaire data. Tabulaire data zijn tabellen die je bij wiskunde hebt gehad, met rijen en kolommen. Zoiets doe je met divs, hx en span enzo.

quote:

chris schreef op donderdag 04 augustus 2005 @ 14:37:

Dit is geen tabulaire data. Tabulaire data zijn tabellen die je bij wiskunde hebt gehad, met rijen en kolommen. Zoiets doe je met divs, hx en span enzo.

De bovenstaande informatie zou prima in een tabel kunnen staan. Dat het net iets anders wordt vormgegeven (niet alle gegevens op een rij) doet er toch niet toe?

@ cheatah: heb je op zich wel gelijk in, ik denk dat het in dit geval zeker zou kunnen. Een lijst vind ik echt niet op z'n plaats:

daad bij woord:

code:

<style type="text/css">
* {
font-family: arial;
line-height: 1.2em;
}

thead {
display: none;
}

tr {
background-color: lightgray;
display: block;
margin: 1em;
overflow: auto;
width: 600px;
}

td, th {
float: left;
padding: 0;
}

th, .tool {
background-color: gray;
color: white;
text-align: left;
width: 500px;
}

.tool {
width: 50px;
}

.picture {
width: 98px;
height: 50px;
border: 1px solid;
}

.brand, .price {
background-color: silver;
width: 250px;
}

.price {
text-align: right;
}
</style>

<table>
<thead>
<tr>
<th>naam</th>
<th></th>
<th></th>
<th>figuur</th>
<th>Merk</th>
<th>prijs</th>
<th>Omschrijving</th>
</tr>
</thead>
<tbody>
<tr>
<th>CD 560</th>
<td class="tool">edit</td>
<td class="tool">delete</td>
<td class="picture">plaatje</td>
<td class="brand">JB systems</td>
<td class="price">€ 329.00</td>
<td class="desc">Dubbele CD Speler</td>
</tr>

<tr>
<th>CD 850</th>
<td class="tool">edit</td>
<td class="tool">delete</td>
<td class="picture">plaatje</td>
<td class="brand">JB systems</td>
<td class="price">€ 621.00</td>
<td class="desc">19" Dubbele CD Speler</td>
</tr>
</tbody>
</table>

mophor wijzigde dit bericht 04-08-2005 20:01 (24%)

Zouden jullie een overzicht als deze [CSS] Recordset formatten ook als tabulaire data typeren?

Ofwel gewoon het bekijken van een topic

Timz wijzigde dit bericht 05-08-2005 12:48 (14%)

quote:

Timz schreef op vrijdag 05 augustus 2005 @ 12:47:
Zouden jullie een overzicht als deze [CSS] Recordset formatten ook als tabulaire data typeren?

Ofwel gewoon het bekijken van een topic

Nee, theoretisch gezien zou je zelfs heel ver (moeten/kunnen) gaan en tags als <cite> voor een post en <blockquote> voor een qoute kunnen gebruiken voor als je deze ook nog semantisch wil beschrijven

Ik vraag me wel af wat dat zou doen met de google pageranks voor bijvoorbeeld GoT als dat hier in de templates ook doorgevoerd wordt ipv
code:

<div class="message-quote-div">

SchizoDuckie wijzigde dit bericht 05-08-2005 13:00 (19%)

quote:

SchizoDuckie schreef op vrijdag 05 augustus 2005 @ 12:58:
[...]


Nee, theoretisch gezien zou je zelfs heel ver (moeten/kunnen) gaan en tags als <cite> voor een post en <blockquote> voor een qoute kunnen gebruiken voor als je deze ook nog semantisch wil beschrijven

Ik vraag me wel af wat dat zou doen met de google pageranks voor bijvoorbeeld GoT als dat hier in de templates ook doorgevoerd wordt ipv
code:

<div class="message-quote-div">

Quotes staan hier al in een blockquote

quote:

crisp schreef op vrijdag 05 augustus 2005 @ 13:09:

[...]


Quotes staan hier al in een blockquote

sorry, lomp niet verder gekeken in de source had ook al zoiets van *hmm*

nee, dit hier is gewoon "hoofdstukken" werk, zelfde reden als ik hier aangaf, de structuren zijn hier imho te groot om nog als een tabel te kunnen zien.

Natuurlijk zit er een groot grijs overgangsgebied tussen, waar het voorbeeld van mr_star dus inzit. Imho mag die ook al met div's, maar icho dus nog met tabellen. Beiden is iets voor te zeggen

Als het semantisch niet correct is om met tabellen te doen moet het kennelijk wel anders kunnen maar ik krijg het niet voor elkaar:



Dit wil ik bereiken. Ik heb al met lists gewerkt, met lists in lists (kan dat zowiezo wel?).

Let op: ik wil dit wel vanuit een database bereiken zonder dynamisch stylesheets aan te passen.

Nu heb ik op mophor (rikkertkoppes) site het inline-box/block artikeltje gelezen en dat ook gerbuikt

http://www.depulz.nl/test.php

IE geeft het ok weer, maar mozilla dus niet...

De update werkt al helemaal niet want dan blijken er in een list geen elementen (wat dan ook) onder elkaar te kunnen staan

Waarom zou je daar een list voor gebruiken? Het is niet echt een opsomming.

Een tabel is het ook niet, dus een paar divjes zou het werk toch netjes moeten klaren lijkt me.
code:

<STYLE TYPE="text/css">
.post_container{width:450px; height:50px;background-color:#008000;}
.naam{position:absolute; margin:0px; width:50px; height:50px; border-right: thin solid #00C9FF;}
.datum{position:absolute; margin-top:0px; margin-left:50px; width:400px; height:25px; border-bottom: thin solid #00C9FF;}
.post_inhoud{position:absolute; margin-left:50px; margin-top:25px; width:400px; height:25px;}
</STYLE>

<div class="post_container">
    <div class="naam">Timz</div>
    <div class="datum">Geplaatst op 12-34-5678</div>
    <div class="post_inhoud">bla bloep</div>
</div>

Dit is natuurlijk geen probleem, maar het moet dus gebruikt worden om spul uit een database te halen, dat zou betekenen dat ik dynamisch de style zou moeten opmaken per div. Dus:

<div style="top: <? echo ($top * $value) ?">

Dit kan alleen! als álle input in een post even lang is maar dat is nooit zo (in een forum) je kan dus nooit berekenen hoever van de top de volgende post moet komen.

dat kan wel, maar dan moet je eerst álle karakters gaan tellen, alle plaatjes gaan berekenen, etc etc. kortom veel te ingewikkeld

Timz wijzigde dit bericht 05-08-2005 16:25 (18%)