Problemen met TD colspans

[Trinsec]

*Mutter mutter*SearchWeerBroken*Mutter*

Hoi, ik heb hier een tabelletje:

code:

<table width=100% border=1 cellpadding=0 cellspacing=5>
<tr>
<td colspan=2 rowspan=2 width=300 height=100 bgcolor=red>Test</td>
<td height=50 bgcolor=red>Test</td>
</tr>
<tr><td>Test</td></tr>
<tr>
<td width=150 bgcolor=red>Test</td>
<td colspan=2>Test</td>
</tr>
<tr>
<td colspan=2 rowspan=2 width=300 height=100 bgcolor=red>Test</td>
<td>Test</td>
</tr>
<tr><td height=50 bgcolor=red>Test</td></tr>
</table>

De bedoeling is hopelijk duidelijk: Een soort C vorm van rode achtergrond, in de 3 andere TDs in rechts-midden is het een gewone achtergrond.

Nu wil ik specifiek dat de linker TD in het midden 150 pixels wordt, maar met deze structuur wordt het allemaal nogal.. tsja, verneukt. Als ik de rechter TD in het midden (regel 9) een colspan van 1 geeft, dan is de linker TD (regel 8 dus) weer wel op de goede breedte. Maar dat is dus de bedoeling niet, ik wil regel 9 de hele rest van het scherm laten beslaan.

Met die colspan=2 in regel 9 wordt ook die 'width=300' van regel 3 en 12 niet meer gehoorzaamd. Dit is beiden getest in Firebird 0.7 en MSIE 6. Wat ook opvalt is dat MSIE nog niet goed werkt als in regel 9 de colspan=1 is.

Het kan zijn dat ik hier waardeloze prut gebruik. Ik ben gelimiteerd tot CSS en HTML (CSS komt later, wil eerst de tables goed krijgen, tenzij het gelijk al noodzakelijk is?), dus geen JS ofzo.

Misschien lijkt dit nogal basisch, maar ik ben er de hele nacht mee bezig geweest en ze willen de widths doodgewoon niet gehoorzamen, anders zou dit allang goed zijn.

(Ik weet dat dit niet 'correct' HTML is, maar het is genoeg voor nu om duidelijk te maken)

[Kippenijzer]

[/einde voorheen getypte onzin]

Owkee, ik lees over die 2e colspan heen.
Houd het simpel, layout fucket nu eenmaal op als colspannen in 2 verschillende rijen elkaar overlappen. Dit is te verhelpen, maar dan heb je JUIST ccs nodig. Dus niet "eerst tabellen goed krijgen", gewoon meteen css gebruiken OM de tabellen goed te krijgen.
Laat je helpen door www.w3schools.com eventueel, gebruik ik zelf altijd als ik met css kloot

[ Voor 85% gewijzigd door Kippenijzer op 04-01-2004 09:40 ]

[Verwijderd]

Wat is er mis met een plaatje?

Of een uitvergrootte C?

code:

span.c{
 font:bold 500% /* juiste fonts hier */,sans-serif;
}

[Trinsec]

*blinks @Anne* Ik denk niet dat je mijn stuff goed heb gelezen. Ik wil een soort grote 'C' van tables zodat ik er content erin kan plekken? Het moet dynamisch zijn en dat gaat dus niet met je idee van een 'plaatje'. Ik hoef niet een 'echte' C te hebben.

Kippenijzer's suggestie is een goede, zit nu inmiddels w3schools af te speuren. (Als je een duwtje in de juiste richting kan geven zou koel zijn).

[Verwijderd]

*Anne heeft nu het gevoel dat je tabellen aan het misbruiken bent*

[Trinsec]

Ik ben zeer zeker tables aan het misbruiken, vooral omdat ik geen andere manier zie.
Het kan niet opgelost worden met een simpel plaatje, vooral omdat de lengte en breedte dynamisch moet zijn. Regel 7-10 kunnen tot in het oneindige herhaald worden.

[Verwijderd]

Euh? Plaatje aan de bovenkant, plaatje aan de onderkant, daartussen een oneindig ding. Lijkt me super simpel. (ipv plaatjes zou je ook een stel spannetjes kunnen gebruiken met een kleurtje).

[Trinsec]

Ik ben net aan't rondzoeken naar DIVs en hoe ze tables kunnen voorkomen. Had al eerder met DIVs ge-experimenteerd maar zonder het gewenste resultaat, ik probeer het opnieuw. Ben een echte DIV n00b.

[Kippenijzer]

Ik zit me overigens net af te vragen wat het nut van je colspans is? tenzij de 2 cellen boven en de 2 cellen onder "binnen de rode c" ook nog content krijgen, kun je de colspan gewoon droppen. veel belangrijker is de breedte, gewoon 2 kolommen -> eentje 50px breed, eentjes "content" breed. De hoogte doe je op de manier niet te elegant, gezien veel browsers niet blij worden van de cell-height property (doen er niets mee -> geen 50px hoog). Ik los het zelf altijd heel vies op door in de cel een plaatje (transparant 1x1px plaatje) op te rekken naar in dit geval 50px hoogte.
Je moet op die site gewoon onder REFERENCES de CSS 2.0 reference kiezen, die is duidelijk zat (soms wat zoeken, indeling laat hier en daar te wensen over) maar alles binnen 2 klikken

[Trinsec]

Alles krijgt content. Misschien de 2 hoeken niet maar ze kunnen ook content krijgen. Die 2 hoeken zijn trouwens de enigen die een echte 'plaatje' krijgen om het mooi 'rond' te maken.
Die 'height' heeft me zover toe nog geen problemen opgegeven, het is de width dat me de das omdoet. Op het moment zit ik ook te rondsnuffelen op glish.com, die alles table-achtig in CSS heeft verwerkt, dus een beetje meer specifiek gericht op wat ik wil. Als het mogelijk is, ga ik alles naar DIVs converteren. Ben ik ook van die table-gedoe af.

[crisp]

als je in je eerste rij al met col en rowspans gaat werken is het vaak handig om een colgroup op te nemen waar je per kolom alvast de juiste breedte opgeeft. Desnoods zet je nog een table-layout:fixed in je table.

[Trinsec]

*knikt* Dat had ik ook geprobeerd nadat ik de situatie in Word probeerde te nabootsen en diens code bekeek. Die had inderdaad ook een groepje met maar 1 colom per cel enzo, maar dat werkte helaas ook niet. Die table-layout:fixed heb ik nog niet geprobeerd, mmm.

[Trinsec]

Oke, ik heb een beetje vals gespeeld en heb ze in aparte tables ondergebracht. Dus de top van die 'C' in een table. Daarna de data in aparte tables (zoals GoT dus), en dan weer de bottom van de 'C' in weer een andere table, bijelkaar gehouden door een enorme DIV. Zo ver toe werkt het wel lekker eigenlijk, het doet wat ik wil.

Nu is er nog steeds 1 probleem: De height. Ze willen prima gehoorzamen in Firebird, maar in MSIE werkt dat niet. En een truukje van 'dan doe je een doorzichtig plaatje in van die hoogte' werkt ook niet, want het is namelijk niet te klein.. het is te GROOT. Iemand een oplossing hier?

Ik vind het niet erg dat top en bottom gedeelten naar DIVs te converteren, maar dan heb ik meer informatie nodig want die DIVs willen namelijk niet netjes uitlijnen enzo.

code:

 ____________________________
|        |___________________|
|________|___________________|

Zo is ongeveer hoe ik die layout van de bottom en top wil hebben. Het moet allemaal heel precies uitlijnen.

Edit: Dit is allemaal opgelost, eindelijk. Had 2 table cells gemaakt, linker dus een mooi plaatje van de hoek, rechter 2 divs onder elkaar met elk een fixed height enzo. En om de tekst vertikaal te centreren, weer daarin een table met een TD ALIGN=center. Blijkbaar heeft DIVs geen valign attribuut, aaaah! Nahjah.

[ Voor 16% gewijzigd door Trinsec op 07-01-2004 18:50 ]