[CSS] tabellen vormgeven in IE - Softwareontwikkeling

donderdag 1 januari 2004 12:44

Acties:

0 Henk 'm!

Anoniem: 97824

Topicstarter

Ik had laatst de mogelijkheid om tabellen voor het eerst goed te gebruiken in een opdracht. Wegens tijdgebrek kwam het erop neer dat we een lijstje gingen gebruiken met float:right;

Het ging om een tabel met de volgende opbouw:

code:

<table>
 <tr>
  <td>Artikel
  <td><a>Edit</a> <a>Remove</a> <a>Save</a>
 </tr>
 <!-- etc. -->
</table>

Het gewenste effect was te bereiken met pure CSS, maar dit werkte alleen niet in IE (border-spacing oid). Als we er vanuit zouden gaan dat TR een display:block; declaratie mee had gekregen:

code:

tr{
 margin:10px 0;
 padding:5px;
 color:black;
 background:lime;
}

EDIT: dit staat er alleen om het beoogde effect weer te geven. Eventueel zoek ik wel even de CSS op die ik toen gebruikt heb om het in Mozilla te laten werken.

Er zat dus wel verticale ruimte tussen de rijen, maar geen horizontale. In puur presentatie HTML lukte dit ook niet echt, maar ik ben wel benieuwd naar de oplossing daarin, aangezien die waarschijnlijk ook wel zou werken in IE.

Kortom, hoe kun je tabellen gemakkelijk vormgeven, of is het gewoon een grote spacer-gif hel?

[ Voor 20% gewijzigd door Anoniem: 97824 op 01-01-2004 12:59 ]

donderdag 1 januari 2004 12:46

Acties:

0 Henk 'm!

creative8500

freedom.

Cascading Stylesheet:

1	table { border-collapse: collapse; }

offtopic:
Oh, jij bent 't, even wat meer mijn best doen hoor.

[ Voor 39% gewijzigd door creative8500 op 01-01-2004 12:51 ]

donderdag 1 januari 2004 13:07

Acties:

0 Henk 'm!

Anoniem: 53174

ik weet niet precies wat je bedoeld, misschien kan je het iets duidelijker uitleggen.
hier wat korte uitleg over css2 table properties: http://www.w3schools.com/css/css_reference.asp#table

donderdag 1 januari 2004 13:15

Acties:

0 Henk 'm!

creative8500

freedom.

Anoniem: 53174 schreef op 01 januari 2004 @ 13:07:
ik weet niet precies wat je bedoeld, misschien kan je het iets duidelijker uitleggen.
hier wat korte uitleg over css2 table properties: http://www.w3schools.com/css/css_reference.asp#table

Dat weet Anne wel hoor.

offtopic:
Pietertje: verander je ondertitel in iets dat de layout niet verpest.

[ Voor 13% gewijzigd door creative8500 op 01-01-2004 18:29 ]

donderdag 1 januari 2004 13:19

Acties:

0 Henk 'm!

Anoniem: 97824

Topicstarter

Sorry voor m'n onduidelijke post. Even wat moeite gedaan voor jullie en m'n oude resultaat in tabellen (wat dus niet werkt in IE) is weer boven: http://annevankesteren.nl.../tweakers/post-855071.htm

Edit: even wat duidelijker maken. Wat je op die pagina ziet in een _goede_ browser is precies wat ik wil bereiken. Alleen wil ik het ondersteund hebben in _elke_ browser. Ik ben geinteresseerd in elke oplossing. Tot aan spacer-gifjes toe :-). Maar het leukste zou natuurlijk zijn om het met de huidige markup te kunnen oplossen (eventueel een extra CLASS of ID).

[ Voor 48% gewijzigd door Anoniem: 97824 op 01-01-2004 13:36 ]

donderdag 1 januari 2004 13:44

Acties:

0 Henk 'm!

creative8500

freedom.

Een alternatief, maar die werkt ook al niet.

HTML:

<html>
    <head>
        <style type="text/css">
        body { font-family: monospace; background: navy; padding: 2.5em; }
        tr { background: #fdfaf5; margin: 2em; }
        td { padding: 0.3em; }
        ul { margin: 0; padding: 0; }
        li { display: inline; }
        a { text-decoration: underline; color: blue; cursor: pointer; }

#one    table { border-collapse: separate; border-spacing: 0 1em; }
#two    table { border-collapse: collapse; }
#two    tr { border: solid navy; border-width: 1em 0; } 
        </style>
    </head>
    <body id="two">
        <table>
            <tbody>
                <tr>
                    <td>Artikel 1</td>
                    <td>
                        <ul>
                            <li><a>Edit</a></li>
                            <li><a>Remove</a></li>
                            <li><a>Save</a></li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>Artikel 2</td>
                    <td>
                        <ul>
                            <li><a>Edit</a></li>
                            <li><a>Remove</a></li>
                            <li><a>Save</a></li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

donderdag 1 januari 2004 13:45

Acties:

0 Henk 'm!

Anoniem: 53174

ik zie hier in de goede browsers(Ie,Safari,Moz) drie verschillende dingen...
volgens mij kan je de ruimte tussen cellen het beste aanpassen door de border-properties aan te passen...
om het dan goed te krijgen kan je de table de right en de bottom opgeven en bij de td de top en de left (of andersom)

donderdag 1 januari 2004 13:51

Acties:

0 Henk 'm!

creative8500

freedom.

Anoniem: 53174 schreef op 01 januari 2004 @ 13:45:
ik zie hier in de goede browsers(Ie,Safari,Moz) drie verschillende dingen...
volgens mij kan je de ruimte tussen cellen het beste aanpassen door de border-properties aan te passen...

Nee, dat kan niet dé manier zijn. Waarom: je kunt geen transparant instellen voor border, en dat is wel waar de 'border-spacing' voor bedoeld is.

donderdag 1 januari 2004 13:54

Acties:

0 Henk 'm!

Anoniem: 53174

creative8500 schreef op 01 januari 2004 @ 13:51:
[...]

Nee, dat kan niet dé manier zijn. Waarom: je kunt geen transparant instellen voor border, en dat is wel waar de 'border-spacing' voor bedoeld is.

ok, op naar de volgende oplossing, want border-spacing is echt crossbrowser.
dan denk ik al snel aan spacers maar dat is niet echt netjes

donderdag 1 januari 2004 14:00

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

IE ondersteund voor zover ik weet geen border-spacing. Jammer is ook dat je border-collapse niet apart op kan geven voor horizontale en verticale borders.
Eerlijk gezegd vind ik margins en paddings op een TR ook een beetje vies; een TR is geen block-level element, het is een placeholder om een verzameling cellen van elkaar te scheiden, en behoeft in feite helemaal geen opmaak - hooguit om via overerving alle cellen in de rij een bepaalde opmaak te geven.

Intentionally left blank

donderdag 1 januari 2004 14:13

Acties:

0 Henk 'm!

Anoniem: 97824

Topicstarter

Die margin en paddings op TR waren alleen om simpel weer te geven wat het uiteindelijk resultaat moest zijn. Iedereen snapt die regels namelijk. M'n uiteindelijk voorbeeld geeft beter weer wat het effect moet zijn. De randen kunnen trouwens niet met de border property bereikt worden aangezien die er zoiezo nog omheen zouden kunnen zitten.

Het grote probleem is dat IE geen 'border-spacing' ondersteund. En 'cellspacing' wat de HTML equivalent is daarvan, kent geen verschil tussen horizontaal en verticaal AFAIK en AFAITried.

IE (Win+Mac) is BTW _geen_ goede browser in dit geval (in welk geval wel (ik doel nu op de Win versie)?). Safari kan ik helaas niet gebruiken. dus moet iedereen maar even vertrouwen op de weergave van Mozilla en Opera.

[ Voor 20% gewijzigd door Anoniem: 97824 op 01-01-2004 14:16 ]

donderdag 1 januari 2004 14:23

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Anoniem: 97824 schreef op 01 januari 2004 @ 14:13:
[..]
Het grote probleem is dat IE geen 'border-spacing' ondersteund. En 'cellspacing' wat de HTML equivalent is daarvan, kent geen verschil tussen horizontaal en verticaal AFAIK en AFAITried.

Inderdaad, het probleem zit 'm in het gebrek aan ondersteuning voor de border-spacing (wat ik al aangaf). Zonder extra truuken krijg je dit dus gewoonweg niet voor elkaar in IE.

IE (Win+Mac) is BTW _geen_ goede browser in dit geval (in welk geval wel (ik doel nu op de Win versie)?). Safari kan ik helaas niet gebruiken. dus moet iedereen maar even vertrouwen op de weergave van Mozilla en Opera.

Je zou Konqueror onder Linux kunnen gebruiken om een indicatie te krijgen hoe het er in Safari uit zal zien. Mijn ervaring is echter dat KHTML ook nogal eens buggy is wb CSS2 support, maar dat zijn tenminste browsers waarbij de ontwikkeling niet stilstaat

Intentionally left blank

donderdag 1 januari 2004 14:50

Acties:

0 Henk 'm!

Anoniem: 53174

border-spacing werkt dus niet in safari
hier een screenshot van moz+IE+safari op mac os x
Afbeeldingslocatie: http://www.pietertje.nl/got/borderspacing.jpg

Afbeeldingslocatie: http://www.pietertje.nl/got/borderspacing.jpg

[ Voor 4% gewijzigd door Anoniem: 53174 op 01-01-2004 14:51 ]

donderdag 1 januari 2004 16:42

Acties:

0 Henk 'm!

Scurra

De enige oplossing die ik kan bedenken is een semi-spacer-gif-oplossing (

) icm met CSS, verre van ideaal, maar dit is hoe ik het zou doen. Getest in IE6 en Mozilla.

[ Voor 12% gewijzigd door Scurra op 27-10-2021 11:58 ]

donderdag 1 januari 2004 16:45

Acties:

0 Henk 'm!

creative8500

freedom.

Ik zou die spacers dan met JavaScript aanmaken, en alleen voor de relevante browsers.

Kleine toevoeging:

Cascading Stylesheet:

1 2	td { padding: 5px 5px 15px 5px; background:url(semi-spacer.gif) bottom repeat-x; } html[xmlns] td { padding: 5px; background-image: none; }

Ervanuitgaande dat Safari-support niet lang meer op zich laat wachten.

[ Voor 62% gewijzigd door creative8500 op 01-01-2004 17:15 . Reden: Niet op het linkje geklikt. ]

donderdag 1 januari 2004 17:04

Acties:

0 Henk 'm!

Anoniem: 97824

Topicstarter

Scurra schreef op 01 januari 2004 @ 16:42:
De enige oplossing die ik kan bedenken is een semi-spacer-gif-oplossing ( ) icm met CSS, verre van ideaal, maar dit is hoe ik het zou doen. Getest in IE6 en Mozilla.

Dat is inderdaad een interessante oplossing. Op die manier zou je ook nog borders e.d. aan het plaatje kunnen toevoegen. In de toekomst hoef je alleen maar de CSS te wijzigen. Klinkt perfect.

donderdag 1 januari 2004 17:15

Acties:

0 Henk 'm!

Anoniem: 49158

misschien echt een dumbo opmerking/oplossing, maar waarom niet gewoon "losse" tabellen onder elkaar? Maakt toch niet zoveel uit om te renderen of wel?

donderdag 1 januari 2004 17:16

Acties:

0 Henk 'm!

creative8500

freedom.

Anoniem: 49158 schreef op 01 januari 2004 @ 17:15:
misschien echt een dumbo opmerking/oplossing, maar waarom niet gewoon "losse" tabellen onder elkaar? Maakt toch niet zoveel uit om te renderen of wel?

Dan krijgen de columns allemaal andere breedtes.

donderdag 1 januari 2004 17:19

Acties:

0 Henk 'm!

Anoniem: 49158

creative8500 schreef op 01 januari 2004 @ 17:16:
[...]

Dan krijgen de columns allemaal andere breedtes.

true, maar daar is toch ook een oplossing voor, of denk ik nou verkeerd om?

gewoon een style="width:100px" of is dat te vies ofzo?

[ Voor 11% gewijzigd door Anoniem: 49158 op 01-01-2004 17:27 ]

donderdag 1 januari 2004 17:43

Acties:

0 Henk 'm!

creative8500

freedom.

Anoniem: 49158 schreef op 01 januari 2004 @ 17:19:
[...]

true, maar daar is toch ook een oplossing voor, of denk ik nou verkeerd om?
gewoon een style="width:100px" of is dat te vies ofzo?

Dan moet je het natuurlijk wel in em specificiëren! En bovendien moet je steeds thead-herhalen. Maar je begrijpt toch zelf ook wel dat meerdere tabellen gewoon geen alternatief mág zijn voor meerdere rijen?

donderdag 1 januari 2004 19:36

Acties:

0 Henk 'm!

Anoniem: 49158

creative8500 schreef op 01 januari 2004 @ 17:43:
Maar je begrijpt toch zelf ook wel dat meerdere tabellen gewoon geen alternatief mág zijn voor meerdere rijen?

ok, ok, ok, I know, het is ook een dumbo oplossing zoals ik al eerder aangaf.

[ Voor 20% gewijzigd door Anoniem: 49158 op 01-01-2004 19:41 ]

vrijdag 2 januari 2004 01:24

Acties:

0 Henk 'm!

AkaXakA

Just Kidding...

Scurra schreef op 01 januari 2004 @ 16:42:
De enige oplossing die ik kan bedenken is een semi-spacer-gif-oplossing ( ) icm met CSS, verre van ideaal, maar dit is hoe ik het zou doen. Getest in IE6 en Mozilla.

Wat mischien wel werkt is het *omgekeerde* (ik bedoel inverted) hiervan.

Dus 1px wit gif met

code:

td{
  padding: 5px;
  background: lime url(1px-wit.gif) bottom repeat-x;
  }

als css.....werkt dit?

http://www.akaxaka.tk/ - "Knowledge is power. Power corrupts. Study hard, be evil." - 4 Jaar GoT en nog steeds niet evil: er moet een verband zijn...

vrijdag 2 januari 2004 10:53

Acties:

0 Henk 'm!

Scurra

Ja dat werkt zeker, zo deed ik het in eerst instantie, dan wel met de padding aangepast (padding: 5px 5px 15px 5px) en dan idd een 10px witte gif als achtergrond en lime gewoon laten staan.

Maar omdat ik een transparante ruimte tussen de rijen wilde (zo werkt border-spacing immers ook) moet je de achtergrond-kleur toch in de gif-file zetten, want een 10px transparante gif als achtergrond in een rij met een gedefinieerde achtergrondkleur gaat natuurlijk niet werken

.

[ Voor 3% gewijzigd door Scurra op 02-01-2004 11:01 ]

vrijdag 2 januari 2004 12:14

Acties:

0 Henk 'm!

Clay

cookie erbij?

Als je de cell met padding oprekt en de witruimte simuleert met een background image kan je net zo goed meteen een dikke horizontale border tussen de rijen zetten, het lukt je dan immers net zo min om de td's zelf nog een border te geven. iig niet bottom, al zou je die bottom border in de bg image kunnen nadoen, en left, top en right borders met css zetten, maar dan lopen de verticale borders ook naast je witruimte

dus dat werkt ook niet.

Is die table opmaak zooo belangrijk dan? Met tables en spacers is er wel een mouw aan te passen zodat het er idd overal hetzelfde uitziet, maar dat wil je niet (lijkt me iig). Met CSS ben je gewoon afhankelijk van wat browser A wel kan, en B niet (al hoef ik jou dat niet te vertellen

) dus dan kan het ook voorkomen dat het er per browser iets anders uitziet.

Het is dat het een persoonlijke site is en daar gelden andere regels voor, maar de code voorbeeld css (

)

Cascading Stylesheet:

1
2
3

code[class]:after {
   content:attr(class) " code:";
}

die je op je eigen site gebruikt zie je in IE immers ook niet.

Ik zou ze iig met een dikke border van elkaar onderscheiden.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

vrijdag 2 januari 2004 12:42

Acties:

0 Henk 'm!

creative8500

freedom.

Clay schreef op 02 januari 2004 @ 12:14:
Ik zou ze iig met een dikke border van elkaar onderscheiden.

Maar dit werkt ook niet in Internet Explorer:

HTML:

1	tr { border: solid white; border-width: 1em 0; }

vrijdag 2 januari 2004 13:05

Acties:

0 Henk 'm!

Clay

cookie erbij?

Border werkt op de td's wel hoor

[ Voor 53% gewijzigd door Clay op 02-01-2004 13:05 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

vrijdag 2 januari 2004 13:12

Acties:

0 Henk 'm!

Anoniem: 53174

maar dan kom je dus weer met de transparantie van borders

en bied dus eigenlijk niet een vervanging van border-spacing maar misschien is dat hier ook niet nodig

vrijdag 2 januari 2004 13:20

Acties:

0 Henk 'm!

Anoniem: 97824

Topicstarter

Ik vond de oplossing van zkywalker heel inspirerend. Niet omdat het de meest ranzige oplossing was die ik ooit had gehoord, maar meer om te weten te komen hoe zoiets 'vroeger' aangepakt zou worden :-)

Het zou inderdaad perfect werken, maar echt flexibel is het niet. Werken met de border-property is het ook niet helemaal, omdat ik (ik geloof eerder gezegd) er wellicht een bordertje omheen wil plaatsen. Wat uiteraard wel kan is 'border' gebruiken voor 'border-spacing' en 'background-image' voor 'border' en 'padding' voor de ruimte rond de tekst.

Problemen zijn dan alleen dat je een fixed height hebt (1.5em oid) en dat je weer rekening moet gaan houden met het box-model etc.

vrijdag 2 januari 2004 13:26

Acties:

0 Henk 'm!

Clay

cookie erbij?

pietertje1983
maar dan kom je dus weer met de transparantie van borders
en bied dus eigenlijk niet een vervanging van border-spacing maar misschien is dat hier ook niet nodig

Anne
De randen kunnen trouwens niet met de border property bereikt worden aangezien die er zoiezo nog omheen zouden kunnen zitten.

...

Werken met de border-property is het ook niet helemaal, omdat ik (ik geloof eerder gezegd) er wellicht een bordertje omheen wil plaatsen.

Idd klopt, maar dan heb je dus hoe dan ook een probleem

Als je transparante ruimte namelijk met een bottom aligned image doet zit je "spacing" als padding IN de td, en als de content dan een border zou moeten hebben komt die border ook om die transparante ruimte heen, en dat wil je nou juist ook niet.
Met een border onderaan de td kan de content weer geen border krijgen, tenzij je dat deels faked met de bg image, maarja

edit:
ff poken

Iets als dit kan op zich ook. Je zit dan alleen met dat cellspacing attrubuut helaas, maar collpase wil je niet omdat de cellen dan geen border top meer kunnen hebben.
Border left zou naast de witte border komen in IE, dus die kan ook niet in de css. Voor IE kan je dat dan vervangen door een background image op bottom left, met de left en bottom border daarin, al moet je die dan wel lang genoeg maken dat die de hele cell bebordert.

Kan hier trouwens niet op de mac testen

maar als macIE of safari het verprutsen kan de moz & opera css misschien nog wat specifieker geselect worden zodat die dat niet uitvoeren.

[ Voor 30% gewijzigd door Clay op 02-01-2004 13:49 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin