[HTML] Tabel indeling lukt niet

[Urk]

Ik ben al uren bezig met een tabel maar ik krijg het niet voor elkaar om deze goed te krijgen:

Hij moet er als volgt uitzien:

IMG WEGGEHAALT

Ik heb de volgende HTML code:

HTML:

    <table border="1" cellpadding="0" cellspacing="0">
     <tr>
      <td rowspan="3" width="444" height="76">[img]"images/header_contentgras.jpg"[/img]</td>
      <td width="92%" height="10" bgcolor="#8BB864">&nbsp;</td>
     </tr>
     <tr>
      <td height="10" bgcolor="#4D92BE">&nbsp;</td>
     </tr>
     <tr>
      <td rowspan="2" height="256" bgcolor="#4384AE" valign="top">c&nbsp;</td>
     </tr>
     <tr>
      <td height="200" bgcolor="#4384AE" valign="top">d&nbsp;</td>
     </tr>
     </table>

Het gekke is dus dat de cel die 200 hoog en die 256 hoog zijn bijna even hoog worden en het er dus op lijkt ze op dezelfde row zitten, lijkt een paar pixels af te wijken maar dit moeten er dus 56 zijn.

Iemand enig idee hoe ik dit goed krijg of wat er niet goed is aan bovenstaande HTML?

[ Voor 24% gewijzigd door Urk op 26-04-2005 22:46 ]

[R4NCOR]

Weet zo geen echte oplossing qua correct HTML, maar wel een workaround:

Maak een table met links die 2 vakken en rechts gewoon 1 leeg vak. Maak daarin nog een table met de 3 overige vakken. Cellspacing en Cellpadding 0 en je ziet er niets van terug Maar het werkt wel

[RobIII]

HTML:

<table border="0" cellpadding="0" cellspacing="0" width="200">
    <tr>
        <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100">
                <tr>
                    <td height="76">[img]"myimg.gif"[/img]</td>
                </tr>
                <tr>
                    <td height="200">[img]"myimg.gif"[/img]</td>
                </tr>
            </table>
        </td>
        <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100">
                <tr>
                    <td height="10">[img]"myimg.gif"[/img]</td>
                </tr>
                <tr>
                    <td height="10">[img]"myimg.gif"[/img]</td>
                </tr>
                <tr>
                    <td height="256">[img]"myimg.gif"[/img]</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Kwestie van om leren gaan met tables

Ik heb voor het gemak beide colommen maar effe 100 breed gemaakt (200 in totaal)

offtopic:
Ik moet dat voorkauwen echt eens gaan afleren

Strict genomen kun je het ook zo doen:

HTML:

<table border="0" cellpadding="0" cellspacing="0" width="200">
    <tr>
        <td>[img]"myimg.gif"[/img]<br>[img]"myimg.gif"[/img]</td>
        <td>[img]"myimg.gif"[/img]<br>[img]"myimg.gif"[/img]<br>[img]"myimg.gif"[/img]</td>
    </tr>
</table>

Da's korter (en scheelt 2 _subtables), maar ook ranziger...

Excuses voor de layout (als je enters tussen de images gooit krijg je spacing ertussen )

[ Voor 243% gewijzigd door RobIII op 09-06-2004 03:18 ]

[Verwijderd]

De bovengestelde oplossing is ook niet echt fraai zeker niet voor iemand die pretendeert goed met tabelen te zijn. Geneste tabelen zijn nooit fraai.

Een mooiere oplossing en dit lijkt het meest op jouw code is als volgt:

HTML:

<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="3" width="444" height="76">&nbsp;</td>
        <td width="92%" height="10" bgcolor="#8BB864">&nbsp;</td>
        <td height="10">&nbsp;</td>
    </tr>
    <tr>
        <td height="10" bgcolor="#4D92BE">&nbsp;</td>
        <td width="1">&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="2" height="256" bgcolor="#4384AE" valign="top">c </td>
        <td height="56" width="1">&nbsp;</td>
    </tr>
    <tr>
        <td height="200" bgcolor="#4384AE">d </td>
        <td valign="top" width="1">&nbsp;</td>
    </tr>
</table>

het geheim zit hem in een extra hulpkolommetje

[6K]

hm.. ik ben absoluut geen html guru, maar geneste tabellen heb ik niet zo'n problemen mee, ik vind dat best lekker werken

[klokop]

Zonder raar hulpkolommetje:

code:

<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="3" width="200" height="76">1</td>
        <td width="200" height="10">3</td>
    </tr>
    <tr>
        <td height="10">4</td>
    </tr>
    <tr>
        <td rowspan="2" height="256">5</td>
    </tr>
    <tr>
        <td height="200">2</td>
    </tr>
</table>

[crisp]

In het geval van row- en colspans is het vaak ook beter om tables te gaan nesten; vaak genoeg zal een browser het toch niet 100% precies renderen.
Aan de andere kant is natuurlijk al vaak genoeg gesteld hier dat tabellen niet voor opmaak bedoelt zijn; ook de opzet van TS is eenvoudig met andere elementen en CSS samen te stellen.

[André]

HTML:

<style>
  DIV { border: 1px solid #000000; line-height: 8px; }
</style>

<div style="width:200px;height:76px;float:left"></div>
<div style="width:200px;height:10px"></div>
<div style="width:200px;height:10px"></div>
<div style="width:200px;height:256px"></div>
<div style="width:200px;height:200px;margin-top:-200px"></div>

[--MeAngry--]

crisp schreef op 09 juni 2004 @ 09:16:
In het geval van row- en colspans is het vaak ook beter om tables te gaan nesten; vaak genoeg zal een browser het toch niet 100% precies renderen.
Aan de andere kant is natuurlijk al vaak genoeg gesteld hier dat tabellen niet voor opmaak bedoelt zijn; ook de opzet van TS is eenvoudig met andere elementen en CSS samen te stellen.

Niet 100% precies? Ik heb me vaak net als de TS rot zitten ergeren aan hoe browsers (IE vooral, Firefox minder mate) mijn hoogte en breedte instellingen mooi negeren en er 1 grote puinzooi van maken terwijl alles netjes HTML-valid is
Is het nou echt zo moeilijk voor een browser om gewoon een vak te tekenen wat een bepaalde hoogte met breedte heeft icm met row- en colspanning

Ik denk dat ik maares zelf een browserengine ga schrijven ofzo...

Geneste tabellen vind ik persoonlijk dan altijd nog de beste oplossing net als anderen, het levert een wat rommeligere code op, maar het werkt meestal goed, en je ziet weinig verschil.

[ Voor 10% gewijzigd door --MeAngry-- op 09-06-2004 13:58 ]

[Urk]

Bedankt voor alle reacties!! Had niet verwacht dat jullie over zo'n simpel lijkend topic veel zouden reageren.

Ik heb de oplossing van NOCHAIR gebruikt, met een extra hulpkolommetje van 1 breed, werkt prima! Zat hier gisteravond ook zelf al aan te denken maar zat al zo lang te kloten hiermee en zag op een gegeven moment alleen maar TD, TR, COLSPAN's en ROWSPAN's

Ben het trouwens ook helemaal met --MeAngry--, maarja, eigenlijk zitten we vast aan IE, die blijft toch de grootste marktleider...

Anyway: het ziet er nu allemaal goed uit, so....

[Verwijderd]

--MeAngry-- schreef op 09 juni 2004 @ 13:57:
[...]

Niet 100% precies? Ik heb me vaak net als de TS rot zitten ergeren aan hoe browsers (IE vooral, Firefox minder mate) mijn hoogte en breedte instellingen mooi negeren en er 1 grote puinzooi van maken terwijl alles netjes HTML-valid is
Is het nou echt zo moeilijk voor een browser om gewoon een vak te tekenen wat een bepaalde hoogte met breedte heeft icm met row- en colspanning

Ik denk dat ik maares zelf een browserengine ga schrijven ofzo...

Geneste tabellen vind ik persoonlijk dan altijd nog de beste oplossing net als anderen, het levert een wat rommeligere code op, maar het werkt meestal goed, en je ziet weinig verschil.

Als je nou eens leert waar tabellen voor bedoelt zijn en leert hoe je een website netjes maakt, in plaats van alle browsers afkraken, dan had je denk ik minder last van die "vervelende" browsers.

Over validatie/semantiek heeft Crisp ooit nog de mooie vergelijking gegeven iets in de trant van: "Je kan 10 woorden achter elkaar zetten die perfect door de spellingscontrole komen, dat wil alleen nog niet zeggen dat het een goede zin is".

[We Are Borg]

--MeAngry-- schreef op 09 juni 2004 @ 13:57:
[...]

Niet 100% precies? Ik heb me vaak net als de TS rot zitten ergeren aan hoe browsers (IE vooral, Firefox minder mate) mijn hoogte en breedte instellingen mooi negeren en er 1 grote puinzooi van maken terwijl alles netjes HTML-valid is
Is het nou echt zo moeilijk voor een browser om gewoon een vak te tekenen wat een bepaalde hoogte met breedte heeft icm met row- en colspanning

Ik denk dat ik maares zelf een browserengine ga schrijven ofzo...

Ik denk dat het eerder aan de kwaliteit ligt van de code dan aan de browser. Ik heb zal al behoorlijk wat constructies gemaakt met tabellen en het werkt steeds prima. Duurt idd even voordat het overal precies hetzelfde werkt, maar zeker niet onmogelijk. Kortom, geef niet zo snel IE de schuld, maar kijk eens naar je code die gewoon niet klopt.

Geneste tabellen vind ik persoonlijk dan altijd nog de beste oplossing net als anderen, het levert een wat rommeligere code op, maar het werkt meestal goed, en je ziet weinig verschil.

Tabellen nesten doe ik nooit, want het is meestal ook zonder nesten mogelijk om je resultaat te bereiken

[Verwijderd]

BTW het is nog pretiger ipv een   een 1 px groot doorzichtig pixeltje te gebruiken. Dit werkt over het algemeen nog net iets pretiger. En het heeft een korte lengte dan een space.
Over tabellen in tabellen, ik merk toch dat het vaak voorkomt dat er daardoor juist lengte berekeningne fout gaan

btw heb er toch ook nog ff op zitten puzzelen

[ Voor 34% gewijzigd door Verwijderd op 09-06-2004 23:21 ]

[crisp]

Verwijderd schreef op 09 juni 2004 @ 19:52:
BTW het is nog pretiger ipv een   een 1 px groot doorzichtig pixeltje te gebruiken. Dit werkt over het algemeen nog net iets pretiger. En het heeft een korte lengte dan een space.

btw heb er toch ook nog ff op zitten puzzelen

dat is wel heel erg ouderwets hoor, van die pixelgifjes...

wb het niet goed kunnen renderen van tables met row- en colspans; dat is een technische issue. Als een browser tijdens het renderen een cel tegenkomt met een row- of colspan dan kan het zijn dat hij de uiteindelijke grootte op dat moment niet kan bepalen, daarvoor moeten namelijk de afmetingen van de cellen die nog gerenderd moeten worden eerst bekend zijn.
In eerste instantie moet de grootte dus 'gegokt' worden - afgaan van de maten die op cell-level zijn opgegeven kan ook niet altijd omdat cellen de gewoonte hebben uit te kunnen rekken met hun inhoud, width en height moet je dus meer zien als min-height en min-width als het om tables gaat.
Als je dus niet na de 1e renderslag nog een renderslag doet, dan blijf je dus vaak met een tabel zitten die net niet is wat je in gedachten had, en mijn gok is dat browsers niet de moeite nemen om nog een keer door de code te gaan om de puntjes op de i te zetten; het is immers maar een table en die is niet bedoelt voor opmaak