Een tabel dmv css

[gvdh81]

9 topics later...

Ik zit met een probleempje, naja, ik heb het inmiddels wel getackled maar ik wil eigenlijk met dit topic 2 dingen bereiken:
a) kijken of ik het goed gedaan heb (of dat het nog beter kan)
b) de door jullie aangedragen kennis delen

Ik heb het volgende scenario in elkaar weten te flansen (klik voor grote versie):


Met deze code:

HTML:

    <style type="text/css">
    <!--
        div.row {
            background: #ff0000;
            padding: 0px;
            margin: 0px;
        }

        div.cell {
            width: 48%;
            background: #ffff00;

            float: left;
            padding: 4px;
            margin: 2px;

        }
        
        div.adres {
            width: 200px;
            background: #0000ff;

            font-weight: bold;
            text-align: center;
        }
    // -->
    </style>

    <div class="row">
        <div class="cell">
            <div class="adres" style="float: right;">
                regel 1<br />
                regel 2<br />
                regel 3<br />
            </div>
        </div>
        <div class="cell">
            <div class="adres" style="float: left;">
                regel 1<br />
                regel 2<br />
                regel 3<br />
            </div>
        </div>
        <br />
    </div>
    <br />

Nu is mijn vraag of het beter c.q. sneller kan.. Ik wil dus blocked content in een cel positioneren.

[ Voor 26% gewijzigd door gvdh81 op 19-02-2004 10:50 . Reden: htaccess op eigen website aangepast ]

[X-Lars]

hij linkt door naar http://www.webunity.nl/explain/leech en dan zie ik een leeg scherm

Forbidden. U heeft geen toegang om deze pagina te bekijken.

[ Voor 32% gewijzigd door X-Lars op 19-02-2004 10:54 ]

[gvdh81]

dju heb ik mijn image leecher te fel gezet
Probeer het nu nog eens?

[ Voor 23% gewijzigd door gvdh81 op 19-02-2004 10:50 ]

[BtM909]

X-Lars schreef op 19 februari 2004 @ 10:39:
hij linkt door naar http://www.webunity.nl/explain/leech en dan zie ik een leeg scherm

Ff F5-en en dan werkt het wel

TS :: Kan je niet beter een rode border op die cellen zetten, ipv een border te truuken met je background? Volgens mij kan het wel iets simpeler, maar ik heb helaas geen tijd om een opzetje te maken.

[ Voor 13% gewijzigd door BtM909 op 19-02-2004 10:52 ]

[gvdh81]

Uiteindelijk moet het transparant worden, maar ik heb de kleuren er expres bijgezet om duidelijk te maken hoe de divs nu door de browser (Mozilla FireFox 0.8) gerenderd worden.

[Bosmonster]

Dus dat is iets voor de layout neem ik aan? Want om tabellen te gaan bouwen in divs is nogal nutteloos lijkt me

[disjfa]

De hamvraag is waarom wil je een tabel maken met divs. Als je tabulaire data neer wilt zetten mag je gerust een table gebruiken.

De css en de data die je erin hebt zitten zien er toch wel redelijk uit, maar denk wat minder aan divjes de volgende keer zou ik zeggen. je hebt zoveel meer tags waardoor het geheel een stuk overzichtelijker kan worden (denk aan <h1> - <h*>, <ul> <li> <p> <span> etc)

[gvdh81]

Om eerlijk te zijn zie ik het meer als een uitdaging en ik het nog wel eens zie gebeuren dat de tables verdwijnen omdat ze obsolete zijn.. Tis maar een ideetje hoor

[disjfa]

gvdh81 schreef op 19 februari 2004 @ 12:47:
tables verdwijnen omdat ze obsolete zijn..

volgens wie

[Verwijderd]

'obsolete'?! Waren ze 'deprecated' dan? Nee inderdaad, ze zijn waarschijnlijk het meest uigebreide gedeelte uit de HTML specificatie en niet vanwege het presentationele gehalte -> semantische elementen dus

edit:
( op http://duchtchelt.nl/weblog/ staat trouwens wel een leuk voorbeeld, werkt momenteel alleen niet in bepaalde browsers )

[ Voor 37% gewijzigd door Verwijderd op 19-02-2004 13:18 ]

[Bosmonster]

Denk dat er iets door elkaar gehaald wordt. Dat tabellen niet meer gebruikt dienen te worden voor layout wil niet zeggen dat ze verdwijnen. Tabellen zijn nog steeds bedoeld voor: tabellen (met data dus).

[TRON]

@Bosmonster: waarom zou je tabellen niet meer gebruiken voor de lay-out? Dit forum wordt ook door een table opgemaakt. Of bedoel je dat niet op die manier?

[disjfa]

tabellen zijn voor tabulaire data!!!!!!!

Dit forum word binnenkort verbouwd en ik weet niet of het dan nog wel een tabel blijft. Maar de meeste dingen die hier op GoT staan zijn toch ook al tabulair......

[gvdh81]

(Hmz dit word een leuke discussie...)

Daar gaat het nu dus om, als je tabulaire data wilt tonen zijn tables perfect, en ik zeg nergens dat ze obsolete zijn, ik zeg alleen "als" ze obsolete of depricated worden, hoe gaan we het dan oplossen?

@bosmonster: Dat tabellen niet meer gebruikt dienen te worden voor layout wil niet zeggen dat ze verdwijnen." ---> Waar haal jij die wijsheid vandaan en wat zie je dan als oplossing?

@disjfa: Wie zegt dat dit forum binnenkort verbouwd word?

Ik heb al 1 (grote) site gemaakt die enkel uit divjes bestaan (hier zit dan wel de browserscheck bij die het niet toestaat om met een "oude" browser" te surfen maar enkel 4.x cleints krijgen hiermee te maken).

De site is: http://www.hoffice.nl/
Een goed voorbeeld is: http://www.hoffice.nl/prijslijst

P.s. bovenstaande is NIET bedoeld als spam, maar slechts ter referentie dat je tabulaire data ook zonder tables kunt tonen.

[TRON]

Maar waarom zou je tabellen NIET gebruiken voor je lay-out? Leuk en aardig dat het voor tabulaire data is, maar wat zijn de nadelen er van??

'k Geef toe dat het gebruik van div-jes kan leiden tot meer controle over datgeen wat je wilt gaan doen, maar probeer me eens te overtuigen waarom ik bv. geen tabellen zou gebruiken om een site mee op te maken.

[disjfa]

1. tables zullen er nooit uit gehaald worden. zou hetzelfde zijn als excell spontaan uit office te halen.

2. Lees med, Lees de t.net plannen, lees wat er gaat gebeuren hier

@tron. als je zelf tabellen veel handiger vind blijf het dan vooral doen. je komt er zelf wel achter wat je allemaal meer kan doen. komt tijd komt.....

[ Voor 31% gewijzigd door disjfa op 19-02-2004 16:57 ]

[djluc]

http://www.hoffice.nl/prijslijst

Dit vind ik nou echt geen goed voorbeeld, het gaat er niet om dat je alleen maar divjes gebruikt Voor die prijslijsten zijn tabellen nou net ideaal.

[kleautviool]

TRON schreef op 19 februari 2004 @ 16:56:
Maar waarom zou je tabellen NIET gebruiken voor je lay-out? Leuk en aardig dat het voor tabulaire data is, maar wat zijn de nadelen er van??

'k Geef toe dat het gebruik van div-jes kan leiden tot meer controle over datgeen wat je wilt gaan doen, maar probeer me eens te overtuigen waarom ik bv. geen tabellen zou gebruiken om een site mee op te maken.

Als je even in de search zoekt, vind je btw ook veeeel topics over deze discussie

[Verwijderd]

Daar gaat het nu dus om, als je tabulaire data wilt tonen zijn tables perfect, en ik zeg nergens dat ze obsolete zijn, ik zeg alleen "als" ze obsolete of depricated worden, hoe gaan we het dan oplossen?

En waarom denk je dat? Ooit in de spec gekeken ( http://www.w3.org/TR/html401/struct/tables.html ). Persoonlijk vind ik het een van de interessantste stukjes van de HTML spec. Alleen al de vele semantische attributen als HEADERS, AXIS, SCOPE etc.

@bosmonster: Dat tabellen niet meer gebruikt dienen te worden voor layout wil niet zeggen dat ze verdwijnen." ---> Waar haal jij die wijsheid vandaan en wat zie je dan als oplossing?

Huh?! Sommigen dingen horen in tabellen . En omdat je inderdaad ook wel is een XML documentje de vormgeving van een tabel wil geven heeft het W3C daarvoor http://www.w3.org/TR/CSS21/tables.html geschreven (lang niet zo goed als de HTML spec).

Ik heb al 1 (grote) site gemaakt die enkel uit divjes bestaan (hier zit dan wel de browserscheck bij die het niet toestaat om met een "oude" browser" te surfen maar enkel 4.x cleints krijgen hiermee te maken).

Hmm... nooit van backward compatibility gehoord? HTML is ervoor bedoelt om gegevens dusdanig te structureren dat het enigzins ook nog in NN4 e.d. zichtbaar is, net zo goed als op de mobiel.

http://www.hoffice.nl/prijslijst

En dat noem je waarde aan je inhoud geven?! Voor dat soort informatie gebruik je _juist_ tabellen.

[Bosmonster]

Het idee is juist dat als een niet-browser applicatie de data probeert te lezen hij er toch nog wat van kan maken omdat ie gezien de gebruikte elementen toch weet om wat voor soort data het gaat. Dat opmaak verloren gaat doordat er bijvoorbeeld geen CSS support is maakt dan niet uit.

Als zo'n applicatie een tabel tegen komt weet ie dat het gaat om tabulaire data. Hier loop je dan direct tegen het probleem aan als je tabellen gebruikt voor layout. Tuurlijk zal het niet veel uitmaken als je een site maakt voor alleen normale moderne webbrowsers en mensen met een handicap je een worst wezen. Maar als je een beetje denkt aan de toekomst en alternatieve mogelijkheden is het een kleine moeite om compatibiliteit in te bouwen.

http://www.hoffice.nl/prijslijst

Is dan ook weer zo'n typisch voorbeeld hoe je HTML compleet averechts kunt interpreteren. Ook hier kan een alternatieve parser helemaal niks mee. Het is tabulaire data weergegeven in massa's losse containers die daar helemaal niet voor bedoeld zijn. Om over de (achterhaalde) browsercheck nog maar te zwijgen.

[ Voor 3% gewijzigd door Bosmonster op 19-02-2004 21:13 ]

[Johnny]

LOL! Dit geeft een heel andere betekenis aan "misbruik maken van tabellen".

Het is trouwens wel zo dat er in CSS display: table/table-cell bestaat waarmee je niet-tabellen kunt gebruiken als tabellen, waarvoor is dat dan, voor uitzonderingsgevallen?

[ Voor 3% gewijzigd door Johnny op 19-02-2004 21:37 ]

[TRON]

Bosmonster schreef op 19 februari 2004 @ 21:12:
Het idee is juist dat als een niet-browser applicatie de data probeert te lezen hij er toch nog wat van kan maken omdat ie gezien de gebruikte elementen toch weet om wat voor soort data het gaat. Dat opmaak verloren gaat doordat er bijvoorbeeld geen CSS support is maakt dan niet uit.

Als zo'n applicatie een tabel tegen komt weet ie dat het gaat om tabulaire data. Hier loop je dan direct tegen het probleem aan als je tabellen gebruikt voor layout. Tuurlijk zal het niet veel uitmaken als je een site maakt voor alleen normale moderne webbrowsers en mensen met een handicap je een worst wezen. Maar als je een beetje denkt aan de toekomst en alternatieve mogelijkheden is het een kleine moeite om compatibiliteit in te bouwen.

http://www.hoffice.nl/prijslijst

Is dan ook weer zo'n typisch voorbeeld hoe je HTML compleet averechts kunt interpreteren. Ook hier kan een alternatieve parser helemaal niks mee. Het is tabulaire data weergegeven in massa's losse containers die daar helemaal niet voor bedoeld zijn. Om over de (achterhaalde) browsercheck nog maar te zwijgen.

Kijk daar heb ik wat aan 'k Dacht eerlijk gezegd al dat het zoiets was. 'k Zal voortaan m'n sites gaan ver-'div'en. Compabiliteit heerst!

[glashio]

Xces
Ik vind het zeer 'orgineel' bedacht hoor
Ga zo door! Be creative!
_{wel jammer dat andere mensen dit niet 'openlijk' durven toe te geven
denk maar zo : 'opbouwende' kritiek is altijd mooi meegenomen}

[ Voor 25% gewijzigd door glashio op 19-02-2004 23:24 ]

[Verwijderd]

Het is trouwens wel zo dat er in CSS display: table/table-cell bestaat waarmee je niet-tabellen kunt gebruiken als tabellen, waarvoor is dat dan, voor uitzonderingsgevallen?

Om mezelf maar is te quoten:

En omdat je inderdaad ook wel is een XML documentje de vormgeving van een tabel wil geven heeft het W3C daarvoor http://www.w3.org/TR/CSS21/tables.html geschreven (lang niet zo goed als de HTML spec).

edit:
Daarnaast kun je het natuurlijk gebruiken om structurele elementen te behandelen als tabellen voor de layout van je site

[ Voor 14% gewijzigd door Verwijderd op 20-02-2004 11:26 ]

[gvdh81]

Het idee is juist dat als een niet-browser applicatie de data probeert te lezen hij er toch nog wat van kan maken omdat ie gezien de gebruikte elementen toch weet om wat voor soort data het gaat. Dat opmaak verloren gaat doordat er bijvoorbeeld geen CSS support is maakt dan niet uit.

Hier had ik nog niet aan gedacht maar dit is een zeer goed argument! Ik zal hier zeker rekening mee gaan houden.

Hier loop je dan direct tegen het probleem aan als je tabellen gebruikt voor layout. Tuurlijk zal het niet veel uitmaken als je een site maakt voor alleen normale moderne webbrowsers en mensen met een handicap je een worst wezen. Maar als je een beetje denkt aan de toekomst en alternatieve mogelijkheden is het een kleine moeite om compatibiliteit in te bouwen.

Ook hier heb je gelijk in, maar je eerste zin in deze quote, hoe zie jij het dan gebeuren dat je een prijslijst zoals in mijn aangedragen voorbeeld toch fatsoenlijk kunt vormgeven zoals ik nu wel bereikt heb?

Conclusie:
We zijn een beetje off topic geworden maar dat maakt niet uit, ik heb het er ook gedeeltelijk zelf naar gemaakt... Jullie hebben gelijk wat betreft de cross browser compatibiliteit en om heel eerlijk te zijn snap ik nu niet meer waarom ik zo veel werk heb gedaan om alles netjes in divjes te krijgen terwijl het ook in een table had kunnen staan..

------------------------------------------------------------------------------------------
Even 1 opmerking over mijn achterhaalde browsercontrole;
Als jullie hier input over hebben dan graag naar mijn email adres (zie profiel) dan wil ik best een discussie met jullie aangaan, of een mod moet toestemming geven om dit in een ander topic door te gaan spreken, want dit is ook een intressant onderwerp.
------------------------------------------------------------------------------------------
In kijk via php zodra je op de website komt of je voldoet aan een browser na 01/01/2003.

(xces zoekt het even op)

Ik kijk om precies te zijn naar de volgende minimum eisen:
- Mozilla versie 5
- Ie versie 5
- Netscape versie 6
- Opera versie 7
- Gecko based browser met gecko datum 20030000 (oftewel alle builds na 01/01/2003)

Mensen die niet voldoen aan deze criteria worden netjes verwezen naar:
-> http://www.hoffice.nl/explain/history

en mensen die een hele oude browser hebben naar:
-> http://www.hoffice.nl/explain/sorry

Verder is er nog een linkje naar de website eisen op deze pagina terug te vinden.
-> http://www.hoffice.nl/explain/requirements

[X-Lars]

Ook hier heb je gelijk in, maar je eerste zin in deze quote, hoe zie jij het dan gebeuren dat je een prijslijst zoals in mijn aangedragen voorbeeld toch fatsoenlijk kunt vormgeven zoals ik nu wel bereikt heb?

Dit (die prijslijst) is precies waar tabellen voor bedoeld zijn en dus heel eenvoudig te realiseren. Ik denk niet dat dat moeilijk in te zien valt.

[man-o-script]

@Xces: sorry hoor, maar is het niet aan de bezoeker om te bepalen of hij de site wel of niet wil bekijken?

[Bosmonster]

De keuze van de browser is ook niet altijd aan de bezoeker zelf. Bovendien bestaat er nog meer dan een browser. Wat als ik zelf een parser heb geschreven die iedere dag de content van je site ophaalt? HTML goed geschreven is gewoon te parsen met een XML-parser dus dit wordt steeds meer realiteit.

Oftewel zorg dat de site er zonder CSS nog enig leesbaar uitziet (geen probleem als je dus de juiste elementen gebruikt) en je bent in principe klaar met je browsercheck