[CSS] De oplossing voor cellspacing

[Verwijderd]

Ik weet dat er een hoop mensen zijn die geen flauw benul hebben hoe cellspacing te definieren in css dus hierbij de oplossing. Ik heb overigens de search nageslagen en zag dat deze vraag 10tallen keren is gesteld, maar dat er geen antwoord op was gegeven wat werkte dus bij deze.

code:

<style type="text/css">
.topleft{background:url('skin1/topleft.gif'); width:9px; height:6px; padding:0px; margin:0px;}
.topcenter{background:url('skin1/topcenter.gif'); height:6px; padding:0px; margin:0px;}
.topright{background:url('skin1/topright.gif'); width:9px; height:6px; padding:0px; margin:0px;}
.middleleft{background:url('skin1/middleleft.gif'); width:9px; padding:0px; margin:0px;}
.middlecenter{background:url('skin1/middlecenter.gif'); padding:0px; margin:0px;}
.middleright{background:url('skin1/middleright.gif'); width:9px; padding:0px; margin:0px;}
.bottomleft{background:url('skin1/bottomleft.gif'); width:9px; height:6px; padding:0px; margin:0px;}
.bottomcenter{background:url('skin1/bottomcenter.gif'); height:6px; padding:0px; margin:0px;}
.bottomright{background:url('skin1/bottomright.gif'); width:9px; height:6px; padding:0px; margin:0px;}
.errorshell{width:400px; height:400px; border-collapse:collapse; border-spacing:0px; border-style:hidden;}
</style>

De properties "margin" en "padding" werken niet op het table element met de bedoeling cellspacing weg te werken. Waarom niet? , omdat deze specifiek voor het table element zijn bedoeld en cellspacing tevens door de TD's worden bepaald.

Om dit op te lossen is het dus nodig om 3 properties toe te voegen nl.

collapse:collapse;
border-spacing:0px;
border-style:hidden;


collapse:collapse betekent dat de border min of meer tegen elkaar aan zijn ge-collapsed zodat er geen spacing meer is tussen de borders.


Vervolgens kan ik de style toepassen in mijn source

code:

<table class="errorshell">
    <tr>
        <td class="topleft">[img]"shared/images/spacer.gif"[/img]</td>
        <td class="topcenter">[img]"shared/images/spacer.gif"[/img]</td>
        <td class="topright">[img]"shared/images/spacer.gif"[/img]</td>
    </tr>
    <tr>
        <td class="middleleft">[img]"shared/imagesspacer.gif"[/img]</td>
        <td class="middlecenter">content</td>
        <td class="middleright">[img]"shared/images/spacer.gif"[/img]</td>
    </tr>
    <tr>
        <td class="bottomleft">[img]"shared/images/spacer.gif"[/img]</td>
        <td class="bottomcenter">[img]"shared/images/spacer.gif"[/img]</td>
        <td class="bottomright">[img]"shared/images/spacer.gif"[/img]</td>
    </tr>
</table>

Nu moet je alleen nog zorgen dat je per TD tevens de padding en de margins op 0 zet. Als je dat doet zul je een mooie table krijgen zonder spacings. Mocht je marges binnen je td willen hebben dan kun je natuurlijk de padding verhogen

Veel plezier ermee.

[Tom]

Dat is mij teveel werk, dan maar niet in de CSS

[Verwijderd]

Css bespaart je juist werk

Wat betreft browsers. Voor NS4.* kun je dit wel shaken, daar zul je gewoon hard in je Table tag parameters moeten opgeven.

Voor Mozilla en Msie werkt dit wel. ..

[Pelle]

Op dinsdag 22 januari 2002 14:18 schreef Tom het volgende:
Dat is mij teveel werk, dan maar niet in de CSS

Ik kan me er wel nuttige toepassingen van voorstellen hoor. Voor grote tabellen die je toch genereert met een of ander serverside scriptje is het natuurlijk geen enkel probleem om het zo aan te pakken.

Het komt bij mij in ieder geval vaak zat voor dat ik een paar cellen van een andere padding wil voorzien; als je daar dan toch al mee bezig bent kun je het beter meteen even goed doen en alle properties met CSS gaan zetten.

[Tom]

Op dinsdag 22 januari 2002 14:19 schreef Gordijnstok het volgende:
Css bespaart je juist werk

Als je veel tables hebt wel, anders dan zet ik zoiets liever in de table (minder moeite). Die enkele keer dat het aangepast moet worden doe ik wel met de hand dan.

[Verwijderd]

Ik was dus bezig met een zeg maar skinnable aplicatie, en daar wilde ik zonder gedoe even een andere CSS toewijzen.

Dat kan je dus heel simpel doen met zonder te hoeven reloaden:

code:

function changeStyle(location) {  
  document.getElementById("style").setAttribute("href",location);
}

Als ik dan hard waarden ging toewijzen in de tables zou ik problemen krijgen. Dus wat ik nu doe is de CSS als een soort van DTD gebruiken en wordt dus de opmaak gescheiden gehouden van de content.

[Verwijderd]

Op dinsdag 22 januari 2002 14:21 schreef Tom het volgende:

[..]

Als je veel tables hebt wel, anders dan zet ik zoiets liever in de table (minder moeite). Die enkele keer dat het aangepast moet worden doe ik wel met de hand dan.

Ik noem maar eens een achterlijk voorbeeld. Stel dat Microsoft in MSDN graag een cellspacing wil hebben op alle pagina's. Tja, daar sta je dan als je alles hardcoded hebt

En toen was er CSS. Ik open CSS bestand, wijzig regeltje, save, en voila.. meer als 1000en pagina's worden on-the-fly anders in output

Whow Jim, it's amazinggg...

[waxle]

Mooi gedaan, dank voor je moeite!
Heb net wel met een HTML-er erover gebabbeld, en hij stelde dat deze oplossing vooral nuttig is bij grote web-toepassingen met veel dezelfde tables...
Bij kleinere projecten is het toch handiger om het een en ander gewoon handmatig in te kloppen.

[drm]

Op dinsdag 22 januari 2002 14:15 schreef Gordijnstok het volgende:
Ik weet dat er een hoop mensen zijn die geen flauw benul hebben hoe cellspacing te definieren in css dus hierbij de oplossing. Ik heb overigens de search nageslagen en zag dat deze vraag 10tallen keren is gesteld, maar dat er geen antwoord op was gegeven wat werkte dus bij deze.

euhhh, "cellspacing definieren in css" doe je toch simpelweg door een margin op te geven voor je td

[Verwijderd]

Nee was het maar waar. Dat dacht ik in het begin ook, maar probeer het zelf maar eens door die 3 properties weg te halen.

[Verwijderd]

Op dinsdag 22 januari 2002 14:35 schreef Gordijnstok het volgende:
Nee was het maar waar. Dat dacht ik in het begin ook, maar probeer het zelf maar eens door die 3 properties weg te halen.

Eej, Gordijnstok, bedankt voor je oplossing, ik heb er zelf ook al even mee gerommeld zo nu en dan, maar ik kreeg die rot-attributes nooit weg.

Ik ben namelijk van mening dat je zoveel mogelijk properties via je css moet meegeven, en zo weinig mogelijk html moet gebruiken. Dit is zeker wel een welkome toevoeging.

[Verwijderd]

Vergeet dan ook niet als je bijvoorbeeld een border wilt gebruiken dat je dan met alleen border:1px solid black; niet ver komt. De border wordt namelijk toegepast op het element table, en niet op de childelements TD en TR.

Oftewel voor TD zul je tevens lossstaand in je Style:

border-bottom:
border-top:
border-left:
border:right:

Moeten gebruiken om het effect van border in de table tag te evenaren.

[Tom]

Op dinsdag 22 januari 2002 14:27 schreef Gordijnstok het volgende:

[..]

Ik noem maar eens een achterlijk voorbeeld. Stel dat Microsoft in MSDN graag een cellspacing wil hebben op alle pagina's. Tja, daar sta je dan als je alles hardcoded hebt

En toen was er CSS. Ik open CSS bestand, wijzig regeltje, save, en voila.. meer als 1000en pagina's worden on-the-fly anders in output

Whow Jim, it's amazinggg...

Ja ik snap CSS wel... maar voor een kleine simpele site met net een stuk of 3 tabelletjes ben je denk ik sneller klaar als je het gewoon op de 'oude' manier doet. CSS zal dan wel heel hip zijn, maar voor een site met een stuk of 3 tabellen ben ik sneller klaar door 3 keer "cellspacing=3 cellpadding=2" aan te passen dan die 10 CSS-regels. Pas als je met veel data (meer tabellen, grotere site e.d.) aan de gang gaat is het pas nuttig lijkt mij.

[Verwijderd]

Op dinsdag 22 januari 2002 14:44 schreef Tom het volgende:

[..]

Ja ik snap CSS wel... maar voor een kleine simpele site met net een stuk of 3 tabelletjes ben je denk ik sneller klaar als je het gewoon op de 'oude' manier doet. CSS zal dan wel heel hip zijn, maar voor een site met een stuk of 3 tabellen ben ik sneller klaar door 3 keer "cellspacing=3 cellpadding=2" aan te passen dan die 10 CSS-regels. Pas als je met veel data (meer tabellen, grotere site e.d.) aan de gang gaat is het pas nuttig lijkt mij.

Het is zelf verstandig om het nu al volgens de W3C specs aan te pakken zodat je straks in de diverse browsers geen erm.. "gekut" krijgt.

Ik neem aan dat je ondertussen ook bijv. <font fac... niet meer gebruikt.. maar dit netjes definieert in je css

[Verwijderd]

Op dinsdag 22 januari 2002 14:44 schreef Tom het volgende:

Ja ik snap CSS wel... maar voor een kleine simpele site met net een stuk of 3 tabelletjes ben je denk ik sneller klaar als je het gewoon op de 'oude' manier doet. CSS zal dan wel heel hip zijn, maar voor een site met een stuk of 3 tabellen ben ik sneller klaar door 3 keer "cellspacing=3 cellpadding=2" aan te passen dan die 10 CSS-regels. Pas als je met veel data (meer tabellen, grotere site e.d.) aan de gang gaat is het pas nuttig lijkt mij.

Ik zet zelf altijd cellpadding en cellspacing op nul, maar wel in html. Met css voeg ik vervolgens weer margins en padding hier en daar toe, cellpadding en cellspacing zijn sort of overbodig geworden.

Maar ik kan nu dus gelukkig wél gewoon één keer in een stylesheet roepen: alle margins in een tabel op nul, tenzij ik anders wil. Ik vind dit erg nuttig, omdat juist met table dit amper ging.

[Tom]

Op dinsdag 22 januari 2002 14:46 schreef Gordijnstok het volgende:

[..]

Het is zelf verstandig om het nu al volgens de W3C specs aan te pakken zodat je straks in de diverse browsers geen erm.. "gekut" krijgt.

Ik neem aan dat je ondertussen ook bijv. <font fac... niet meer gebruikt.. maar dit netjes definieert in je css

Stel je neemt deze simpele site (waarvan zeker is dat ze hem toch niet meer gaan uitbreiden). Dat zijn 12 HTMLetjes en qua opmaak zit het meeste gewoon in een CSS, ik denk dat ik totaal een stuk of 4/5 tables heb, maar als die aangepast moeten worden ben ik waarschijnlijk sneller klaar door even de extended replace aan te klikken van Homesite dan die 10 regels CSS aan te passen. Want om nou te zeggen dat het bij ZO'N site handig is daar CSS voor te gebruiken.. nah..

[Verwijderd]

<link rel="Stylesheet" href="jaarverslag.css" type="text/css">

..

Maar ik kan me inderdaad voorstellen dat je qua tijd bij dergelijke sites heel snel de non-css manier kiest.

[drm]

Op dinsdag 22 januari 2002 14:46 schreef Gordijnstok het volgende:
Het is zelf verstandig om het nu al volgens de W3C specs aan te pakken zodat je straks in de diverse browsers geen erm.. "gekut" krijgt.

Ik neem aan dat je ondertussen ook bijv. <font fac... niet meer gebruikt.. maar dit netjes definieert in je css

font.. GA JE MOND WASSEN!

Maar je hebt idd gelijk, om de attributes weg te laten is het nodig... kewl!

Ik denk alleen dat ik bij het kloppen mijn vingers alleen niet meer tegen kan houden, omdat de <table>-tag altijd onlosmakelijk verbonden is geweest met cellspacing="0" cellpadding="0" en border="0"

[Tom]

Op dinsdag 22 januari 2002 14:59 schreef Gordijnstok het volgende:
< link rel="Stylesheet" href="jaarverslag.css" type="text/css">

..

Maar ik kan me inderdaad voorstellen dat je qua tijd bij dergelijke sites heel snel de non-css manier kiest.

OK dan zijn we het eens ben het ook met je eens dat als het meer is, het een stuk beter is zoiets via CSS te doen. Maar ik heb soms het idee dat het meer een modewoordje aan het worden is terwijl het in de praktijk meer werk is (want in bovenstaand voorbeeld was het voor die paar tables meer werk geweest als ik cellpadding/cellspacing via CSS zou regelen). En als je er niet aan meedoet je niet 'hip' genoeg bent.

[Verwijderd]

Op dinsdag 22 januari 2002 15:04 schreef Tom het volgende:

(want in bovenstaand voorbeeld was het voor die paar tables meer werk geweest als ik cellpadding/cellspacing via CSS zou regelen)

Daarom maak ik ook standaard stylesheets, die ik altijd als basis gebruik, met dingen als

code:

body {
  margin: 0px;
  color: #000000;
  background-color: #ffffff;
}

En deze table properties komen daar zeker bij. Als ik klaar ben, dan delete ik alle ondegruikte styles en classes, en zoveel werk hoeft het niet te zijn.

Ik geef trouwens ook nooit meer css properties inline mee, tenzij het echt niet anders kan.

[Pelle]

Op dinsdag 22 januari 2002 15:09 schreef Cheatah het volgende:

code:

body {
  margin: 0px;
  color: #000000;
  background-color: #ffffff;
}

Iets wat ik nooit gesnapt heb, is dat NS4 bij bovenstaande body-style toch de body nog een margin van 1px meegeeft. Terwijl het opnemen van marginheight en marginwidth in de body-tag tot gevolg heeft dat de margin dan inderdaad 0px is.

Afgelopen week heb ik besloten dat ik daar vanaf nu schijt aan heb... overwinning op mezelf!

[drm]

Pelle:
Afgelopen week heb ik besloten dat ik daar vanaf nu schijt aan heb... overwinning op mezelf!

*applaudes loudly* Goed zo!
NS4 tijdperk

[Dennis]

Hmmmmz, dit moet simpeler kunnen.

* Dennis gaat ff denken

[Dennis]

Zo dus:

code:

<style type="text/css">
table.voorbeeld
{
    width:400px; 
    height:400px; 
    border-collapse:collapse; 
    border-spacing:0px; 
    border-style:hidden;
}

table.voorbeeld > tr > td
{
    background:url('skin1/middlecenter.gif'); 
    padding:0px; 
    margin:0px;
}

table.voorbeeld > tr > td:first-child
{
    background:url('skin1/middleleft.gif'); 
    width:9px; 
    padding:0px; 
    margin:0px;
}

table.voorbeeld > tr > td:last-child
{
    background:url('skin1/middleright.gif'); 
    width:9px; 
    padding:0px; 
    margin:0px;
}

table.voorbeeld > tr:first-child > td
{
    background:url('skin1/topcenter.gif'); 
    height:6px; 
    padding:0px; 
    margin:0px;
}

table.voorbeeld > tr:first-child > td:first-child
{
    background:url('skin1/topleft.gif'); 
    width:9px; 
    height:6px; 
    padding:0px; 
    margin:0px;
}

table.voorbeeld > tr:first-child > td:last-child
{
    background:url('skin1/topright.gif'); 
    width:9px; 
    height:6px; 
    padding:0px; 
    margin:0px;
}

table.voorbeeld > tr:last-child > td
{
    background:url('skin1/bottomcenter.gif'); 
    height:6px; 
    padding:0px; 
    margin:0px;
}

table.voorbeeld > tr:last-child > td:first-child
{
    background:url('skin1/bottomleft.gif'); 
    width:9px; 
    height:6px; 
    padding:0px; 
    margin:0px;
}

table.voorbeeld > tr:last-child > td:last-child
{
    background:url('skin1/bottomright.gif'); 
    width:9px; 
    height:6px; 
    padding:0px; 
    margin:0px;
}
</style>

En dan zo :

code:

<table class="voorbeeld">
    <tr>
        <td>[img]"shared/images/spacer.gif"[/img]</td>
        <td>[img]"shared/images/spacer.gif"[/img]</td>
        <td>[img]"shared/images/spacer.gif"[/img]</td>
    </tr>
    <tr>
        <td>[img]"shared/imagesspacer.gif"[/img]</td>
        <td>content</td>
        <td>[img]"shared/images/spacer.gif"[/img]</td>
    </tr>
    <tr>
        <td>[img]"shared/images/spacer.gif"[/img]</td>
        <td>[img]"shared/images/spacer.gif"[/img]</td>
        <td>[img]"shared/images/spacer.gif"[/img]</td>
    </tr>
</table>

Voordeel: als je een nieuwe cel toevoegt hoef je geen class meer aan de cellen toe te voegen.
Nadeel: Dit is CSS3, dus werkt nog niet in oude browsers

[drm]

die > kun je toch weglaten

[Dennis]

Op dinsdag 22 januari 2002 16:34 schreef drm het volgende:
die > kun je toch weglaten

http://www.w3.org/TR/REC-CSS2/selector.html#child-selectors

Doe maar niet dus

[Verwijderd]

Op dinsdag 22 januari 2002 16:22 schreef dennisdotcom het volgende:
Hmmmmz, dit moet simpeler kunnen.

/me gaat ff denken

LOL ja leuk gedaan wil het niet dat het voor de minder ervaren CSSér wat minder begrijpelijk wordt Nieuwe skins moeten zo gemaakt worden.

[drm]

Op dinsdag 22 januari 2002 16:37 schreef dennisdotcom het volgende:

[..]

http://www.w3.org/TR/REC-CSS2/selector.html#child-selectors

Doe maar niet dus

* drm las en zag
of wel dus
Het gaat erom dat bij:

code:

tr > td

td perse een child moet zijn van tr, en niet een "afstammeling". Maar dat maakt dus in dit geval geen bal uit, want td is per definitie alleen maar een child van tr.

Het wordt natuurlijk anders wanneer je ingewikkelde nesting-structuren gaat gebruiken.

^{________________________________}

code:

div.content > span.text

code:

<div class="content">
   <span class="text">Werkt zo wel</span>
   <table>
    <tr>
       <td><span class="text">Maar zo niet</span></td>
    </tr>
   </table>
</div>

^{________________________________}

code:

div.content span.text

code:

<div class="content">
   <span class="text">Werkt zo wel</span>
   <table>
    <tr>
       <td><span class="text">En zo ook</span></td>
    </tr>
   </table>
</div>

^{________________________________}

En ik heb net al gezien dat dat in IE 6 niet eens werkt

[Dennis]

Op dinsdag 22 januari 2002 16:49 schreef drm het volgende:
bla

Ok, dan maakt het niet uit. Maarja voor jezelf is het nog wel iets netter, hangt er ook vanaf of je tables gaat nesten en daarbij classes in combinaties gaat gebruiken


Dat het in IE6 niet werkt verbaast me niks trouwens
Zelfs Mozilla ondersteunt CSS3 nog niet eens volledig, en laat soms op hele rare punten steekjes vallen, waar op andere punten heel nieuwe features al goed werken.

[drm]

CSS2 bedoel je dan toch
Mozilla ondersteunt dit wel goed, zag ik

_edit:
^{_____________________________________}
ik had het nog over die '>'

[Dennis]

Alles is in principe CSS2, alleen last-child pseudo class niet

[oh,when?]

Op dinsdag 22 januari 2002 15:21 schreef Pelle het volgende:

[..]

Iets wat ik nooit gesnapt heb, is dat NS4 bij bovenstaande body-style toch de body nog een margin van 1px meegeeft. Terwijl het opnemen van marginheight en marginwidth in de body-tag tot gevolg heeft dat de margin dan inderdaad 0px is.

Afgelopen week heb ik besloten dat ik daar vanaf nu schijt aan heb... overwinning op mezelf!

jij werkt zo te zien niet in een organisatie waarin iedereen met een Imac surft met daarop NS 4.78...helaas

backwards compatibility is nog altijd een issue..

(neemt niet weg dat je nog steeds valid html moet schrijven )