[HTML] Probleem met tabel

[JJapie]

Beste mensen,

Het is mijn bedoeling om een tabel te maken met een header die afgerond is. Daarvoor had ik de volgende structuur bedacht:

code:

+-----+------------------------+-----+
|22px |        variabel        | 22px|
+-----+-----------+------------+-----+
|                 |                  |
| 22px +          | 22px +           |
| 0.5 * variabel  | 0.5 * variabel   |
|                 |                  |
|                 |                  |
+-----------------+------------------+

edit:

BTW: de gegevens die in de tabel vermeld staan geven de breedte van het desbetreffende vak aan.

Nu heb ik al een heleboel geprobeerd, en heb ik nog méér lopen zoeken naar aanwijzingen en voorbeelden, maar ik heb niets kunnen vinden.
Ik dacht zelf eerst aan ColSpan/RowSpan, maar daarmee kom ik er niet uit..
Twee losse tabellen zou een oplossing kunnen zijn, maar dat wil ik niet. De header moet namelijk naadloos aansluiten en altijd exact evengroot zijn als de tabel met de inhoud.

Wie o wie helpt mij aan een oplossing?

[ Voor 8% gewijzigd door JJapie op 08-09-2003 17:21 ]

[BtM909]

Wat heb je tot nu toe geprobeerd? We kunnen wel weer een voorbeeld voorkauwen

[CrashOne]

HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td width="22">blaat!</td>
    <td colspan="2">blaat!</td>
    <td width="22">blaat!</td>
  </tr>
  <tr> 
    <td colspan="2">blaat!</td>
    <td colspan="2">blaat!</td>
  </tr>
</table>

Omdat ik in een goeie bui ben.

[OnTracK]

is dat nou zó moeilijk, wat ik in dit soort gevallen meestal doe is een rijtje TD's erboven zetten met voor iedere cel een eigen breedte.
Of je kunt met COLGROUP gaan werken

(oh ja, let niet op het niet afsluiten van de cellen, had ik ff geen zin in )

HTML:

<TABLE>
<TR><TD width=22>
    <TD width=50%>
    <TD width=50%>
    <TD width=22>
<!-- hier pas de echte content -->
<TR><TD>
    <TD colspan=2>Midden (variabel)
    <TD>
<TR><TD colspan=2>Linksonder
    <TD colspan=2>Rechtsonder
</TABLE>

CrashOne: bij jou gaat het de mist in als je ongelijke content in de onderste twee cellen zet, omdat tabellen in breedte worden verdeelt naar content

[ Voor 78% gewijzigd door OnTracK op 08-09-2003 17:30 ]

[JJapie]

Dus het kan wel??? Pfeww...

Ik heb uiteraard eerst dit geprobeerd:

HTML:

<table border="0" bordercolor="#000000" CellPadding="3" CellSpacing="0">
       <tr>
           
           <td width="22" background="tabellinks.gif"></td>
           <td bgcolor="#3366FF"><p class="wit"><strong>Titel</strong></p></td>
           <td width="22" background="tabelrechts.gif"></td>
        
       </tr>
       <tr>
           <td width="50%">
           <p><strong>Woei</strong></p>
           </td>
           <td width="50%">
           <p>Woei</p>
           </td>
       </tr>
</table>

Dat leverde uiteraard niets op.

Toen ben ik begonnen om in de bovenste <td>-serie 'ColSpan="3"' toe te voegen, wat niets opleverde. ColSpan="2" werkte evenmin. Verder leek RowSpan mij niet van toepassing..
Meer dingen heb ik niet kunnen vinden, en niet kunnen bedenken..

.edit: Ik zie al wel weer dat ik een domme vraag heb gesteld.. Ik heb er echter niet bij stil gestaan dat een combinatie van ColSpan's in verschillende lagen de oplossing zou kunnen zijn....

[ Voor 53% gewijzigd door JJapie op 08-09-2003 17:26 ]

[CaptBiele]

OnTrack > kwist niet eens dat je nog vaste pixelbreedtes kon definieren naast de 100%.
Ik dacht dat het geheel 100% moest zijn... weer wat geleerd

[Verwijderd]

div + css + http://glish.com/css/
géén tabellen voor opmaak doeleinden gebruiken

[JJapie]

Helaas, ik heb alle genoemde mogelijkheden geprobeerd + variaties daarop, maar geen van allen geven het gewenste resultaat.
In eerste instantie leken beide oplossingen te werken, maar toen ik daadwerkelijk gegevens invulde kreeg ik alsnog hokjes met verkeerde verhoudingen (dat resulteert dus in een helehoop boogjes rechts en links van het variabele deel ipv slechts één)..
Doe ik nu iets fout, of werkt het gewoon niet??
Dit is de code die ik nu heb:

HTML:

<table border="0" bordercolor="#000000" CellPadding="3" CellSpacing="0">

           <tr>
           <td width="22"></td>
               <td width=50%></td>
               <td width=50%></td>
               <td width="22"></td>
       </tr>

       <tr>
           
           <td background="tabellinks.gif"></td>
           <td colspan="2" bgcolor="#3366FF">
           <p class="wit"><strong>titel o.i.d.</strong></p>
           </td>
           <td background="tabelrechts.gif"></td>
        
       </tr>

       <tr>
           <td colspan="2">
           <p><strong>Lalala</strong></p>
           </td>
           <td colspan="2">
           <p>ojojojojojojojoj</p>
           </td>
       </tr>

       <tr>
           <td colspan="2">
           <p><strong>Blaat maar</strong></p>
           </td>
           <td colspan="2">
           <p>okidokie</p>
           </td>
       </tr>
</table>

_{Code wordt een beetje verkaaid weergegeven...}

Verwijderd schreef op 08 September 2003 @ 17:53:
div + css + http://glish.com/css/
géén tabellen voor opmaak doeleinden gebruiken

Ik zal hier ook eens naar kijken..

.edit: woo.. dat CSS is denk ik op dit moment te ingewikkeld...

[ Voor 21% gewijzigd door JJapie op 08-09-2003 18:14 ]

[djluc]

Echt een goede instelling, css is niet ingewikkeld als je het begrijpt Verder is het wel een manier om je probleem op te lossen, dus waarom niet proberen? Probeer maar eens verschillende div's te nesten van de voorbeelden die op de site staan.

nesten is in elkaar zetten btw.

[JJapie]

Kijk, het was mijn bedoeling snel even een vrij simpele site in elkaar te zetten. Met de laatste opmerking uit mijn vorige post schrijf ik CSS niet meteen af... Ik denk alleen dat ik daar momenteel de tijd niet voor heb om me er in te verdiepen. Dingen als classes kan ik wel, maar ik zou zo niet kunnen bedenken hoe ik een tabel in CSS maak. Daarom moet ik mij daar dus eerst in verdiepen, en dat kost tijd. Helaas heb ik daar momenteel niet al te veel van vrij..

[Verwijderd]

Hmmm, wat doet ie nu fout dan?

Wat trouwens wel kan helpen is om onder of boven die zut nog een row aan te maken met een losse cel per kolom, 4 cels dus in dit geval. Vul die allemaal met een legepixel.gif oid, en geef ze de goeie breedte aanduiding, dan gaan de volgende kolomen zich hieraan aanpassen. Heb nl vaker gemerkt dat wanneer je zo met colspans werkt dat hij het niet altijd goed interpreteerd.

[crisp]

of toch tabellen nesten...

[Verwijderd]

Denk dat als je geen gebruik van CSS wil maken je toch uitkomt op het gebruiken van meerdere tabellen om het resultaat te behalen wat je in ged88 heb.

Dan lijkt het me nie zo moeilijk om de juiste weergaven op je scherm neer te zetten.

[Y0ur1]

gebruikt tweakers.NET dan ook css+ die divjes?

[ Voor 10% gewijzigd door Y0ur1 op 08-09-2003 23:37 ]

[Woudloper]

YT-Croc schreef op 08 September 2003 @ 23:37:
gebruikt tweakers.NET dan ook css+ die divjes?

Ik zou zeggen doe even een view source van Tweakers.net en zie.

Wat je ook kan doen is deze favlet in een IE Bookmark te stoppen en hem aan te roepen. Dan zie je ook het resultaat:

JavaScript:

javascript:function%20showBorders(wndw){void(tags=wndw.document.all?wndw.document.all.tags('TABLE'):wndw.document.getElementsByTagName('TABLE'));for(var%20i=0;i<tags.length;i++)void(tags[i].border=(tags[i].border=='0'?'1':'0'));}void(frms=window.frames);if(frms.length==0){showBorders(window);}else{for(iQA=0;iQA<frms.length;iQA++){showBorders(frms[iQA]);}}

[JJapie]

Verwijderd schreef op 08 september 2003 @ 22:51:
Hmmm, wat doet ie nu fout dan?

Wat trouwens wel kan helpen is om onder of boven die zut nog een row aan te maken met een losse cel per kolom, 4 cels dus in dit geval. Vul die allemaal met een legepixel.gif oid, en geef ze de goeie breedte aanduiding, dan gaan de volgende kolomen zich hieraan aanpassen. Heb nl vaker gemerkt dat wanneer je zo met colspans werkt dat hij het niet altijd goed interpreteerd.

Heb er nog maar een rij bij gezet, en deze een fixed size gegeven. Nu klopt het wel Maar zodra ik de boel weer op 50% 50% zet gaat het weer fout..

[Verwijderd]

Ah, je mag geen lege cels gebruiken. Doe het zo:

HTML:

<HTML><BODY>
<table border="0" bordercolor="#000000" CellPadding="3" CellSpacing="0" cols="4" width="100%">

           <tr>
           <td width="22">[img]"e.gif"></td>
[/img][img]"e.gif"></td>
[/img][img]"e.gif"></td>
[/img][img]"e.gif"></td>
[/img]

       <tr>
              
           <td background="tabellinks.gif">[img]"e.gif"></td>
[/img]
           <p class="wit"><strong>titel o.i.d.</strong></p>
           </td>
           <td background="tabelrechts.gif">[img]"e.gif"></td[/img]
        
       </tr>

       <tr>
              <td colspan="2">
           <p><strong>Lalala</strong></p>
           </td>
           <td colspan="2">
           <p>ojojojojojojojoj</p>
           </td>
       </tr>

       <tr>
              <td colspan="2">
           <p><strong>Blaat maar</strong></p>
           </td>
           <td colspan="2">
           <p>okidokie</p>
           </td>
       </tr>
</table>
</BODY></HTML>

Hierin is e.gif een gif file van 1 pixel die transparant is.

Resultaat: klik

[ Voor 29% gewijzigd door Verwijderd op 09-09-2003 13:56 ]

[Y0ur1]

Woudloper schreef op 09 September 2003 @ 08:35:
[...]

Ik zou zeggen doe even een view source van Tweakers.net en zie.

Wat je ook kan doen is deze favlet in een IE Bookmark te stoppen en hem aan te roepen. Dan zie je ook het resultaat:

JavaScript:

javascript:function%20showBorders(wndw){void(tags=wndw.document.all?wndw.document.all.tags('TABLE'):wndw.document.getElementsByTagName('TABLE'));for(var%20i=0;i<tags.length;i++)void(tags[i].border=(tags[i].border=='0'?'1':'0'));}void(frms=window.frames);if(frms.length==0){showBorders(window);}else{for(iQA=0;iQA<frms.length;iQA++){showBorders(frms[iQA]);}}

als ik bron/ view source doe gebeurd er niks

[Woudloper]

YT-Croc :: dat lijkt mij vreemd, maar toch... Gooi onderstaande link maar eens in de address-balk:

code:

view-source:http://www.tweakers.net/

[TRON]

HTML:

<html>
 <head>
  <title>
   Tabelletjes
  </title>
 </head>
 <body>
 <table>
  <tr>
   <td width=15%>
    {links}
   </td>
   <td width=70%>
    {midden}
   </td>
   <td width=15%>
    {rechts}
   </td>
  </tr>
  <tr>
   <td colspan=3>
     <table width=100%>
       <tr>
        <td width=50%>
         {links onder}
        </td>
        <td width=50%>
         {rechts onder}
        </td>
       </tr>
     </table>
   </td>
  </tr>
 </table>
 </body>
</html>

Zal het werk voor je moeten doen. Je moet alleen nog de 15%'tjes moeten aanpassen.

[Verwijderd]

Ugh, had een foute url. DEZE zou moeten werken :)

[crisp]

Verwijderd schreef op 09 September 2003 @ 11:05:
Ah, je mag geen lege cels gebruiken. Doe het zo:

[...]
Hierin is e.gif een gif file van 1 pixel die transparant is.
[...]

back to spacers? bah!

Cascading Stylesheet:

table {
  empty-cells: show;
}

Jammer dat ze dat in IE ook al vergeten zijn te implementeren

[Verwijderd]

crisp schreef op 09 September 2003 @ 14:06:
[...]


back to spacers? bah!

Cascading Stylesheet:

table {
  empty-cells: show;
}

Jammer dat ze dat in IE ook al vergeten zijn te implementeren

Tsk, beetje loze reactie Een niet IE compatible site is niet echt handig imo, en hij wou sowieso geen CSS

[Denker]

Je kunt toch ook gewoon

code:

 

in een lege tabel zetten?

[ Voor 31% gewijzigd door Denker op 09-09-2003 14:12 ]

[Verwijderd]

Denker schreef op 09 September 2003 @ 14:11:
Je kunt toch ook gewoon

code:

 

in een lege tabel zetten?

Nah, het voordeel van dat gifje is dat je dan een extra regel krijgt van slechts 1 pixel hoog, terwijl bij een nonbreaking space de regel een volledige regelgrote wordt.

[André]

Verwijderd schreef op 09 september 2003 @ 14:13:
[...]


Nah, het voordeel van dat gifje is dat je dan een extra regel krijgt van slechts 1 pixel hoog, terwijl bij een nonbreaking space de regel een volledige regelgrote wordt.

Onzin, dat kun je zo aanpassen met line-height.

[Verwijderd]

André schreef op 09 September 2003 @ 14:18:
[...]

Onzin, dat kun je zo aanpassen met line-height.

Huh, dat is toch een CSS tag? Hij wil geen CSS gebruiken

[Rickets]

Verwijderd schreef op 09 September 2003 @ 14:25:
[...]


Huh, dat is toch een CSS tag? Hij wil geen CSS gebruiken

Hij gebruikt class-attributen, dus style="line-height : 1000000px;" kan dan ook wel...

[André]

Verwijderd schreef op 09 September 2003 @ 14:25:
[...]


Huh, dat is toch een CSS tag? Hij wil geen CSS gebruiken

Klopt, verkeerd gelezen.

[Verwijderd]

Rickets schreef op 09 September 2003 @ 14:27:
[...]

Hij gebruikt class-attributen, dus style="line-height : 1000000px;" kan dan ook wel...

Ghehehe, ja idd, maar waar haalt ie nou die class-es vandaan Ik zie wel een class="wit" ja, maar hoe doet ie dat als ie stylesheets niet snapt?

[ Voor 16% gewijzigd door Verwijderd op 09-09-2003 14:30 ]

[crisp]

Als je netjes wilt HTML-en kom je niet onder CSS uit aangezien vele attributen al deprecated zijn en met CSS dienen te worden opgelost. spacer-gifjes zijn echt niet meer van deze tijd

offtopic:
ik heb wat replies getrashed; vervelende zusjes dienen een keyboard-verbod opgelegd te krijgen

[ Voor 23% gewijzigd door crisp op 09-09-2003 14:35 ]

[Verwijderd]

Mwoch, het werkt. Het is maar net hoe hip en stijlvol en profi je wilt zijn he.

Maar ik vind het nogal een useless discussie hoe hij die cell het beste kan vullen (eigenlijk vind ik het gewoon lam dat browsers niet met lege cels kunnen omgaan, mgoe), het komt er op neer dat zijn tabel probleem in de lege cellen zit, dus hij heeft zijn antwoord wel. Hoe hij het oplost mag HIJ kiezen.

[JJapie]

Ok, bedankt voor jullie reactie + discussie
Ik zal een oplossing vinden die de code van DarkX combineert met de door crisp genoemde CSS.
Het is inderdaad waar dat ik nog niet wil beginnen aan het maken van een complete tabel in CSS, maar ik maak uiteraard wel gewoon gebruik van een externe stylesheet