Het lijkt erop dat het weinig mensen interesseert dat de hedendaagse browsers ingewikkelde tabellen (veel colspans en rowspans) gewoon nog steeds niet goed kunnen renderen hoewel de html syntactisch gewoon klopt, getuige het weinige animo op mijn eerdere topic.
Nu denken veel mensen: wat kan er nou moeilijk zijn aan een tabel? Welnu, ik zocht gewoon naar een manier om zogenaamde "perfect square dissections" in een tabel te laten zien.
Hier is een link waar uitgelegd wordt wat een perfect square dissection precies is: het komt erop neer dat er vierkanten bestaan die opgedeeld kunnen worden in vierkanten van verschillende groottes.
Enfin, ik heb een workaround gevonden waarmee ik de tabellen in alle moderne browsers (NS6, IE5+, Mozilla en Opera-hoewel traag) goed kan weergeven: de truuk is om om de tabel een rand te leggen van cellen zonder col- of rowspans.
Wat is dan de programmeeruitdaging? (die ik overigens zelf al met success aangegaan ben).
Een dissected square kan op de volgende manier genoteerd worden:
Bovenstaand voorbeeld is geen "perfect square" omdat het vierkanten bevat van gelijke grootte, maar dat maakt voor het voorbeeld niet uit.
Grafisch ziet dit er zo uit:

Oftewel van links naar rechts en boven naar onderen zien we vierkanten van 6x6, 4x4, 5x5; 3x3, 1x1; 6x6; 5x5, 1x1; en 4x4.
In tabelvorm vertaald zou dat grofweg zo zijn:
waarbij ik de heights en de widths maal 40 heb gedaan om een mooie grote tabel te krijgen.
IE vind deze tabel niet zo fijn, want hij rendert hem verkeerd zonder truuken. Bij meer ingewikkelde tabellen laten Mozilla, NS en Opera het trouwens ook afweten.
Kom ik bij de uitdaging die ik voor mezelf ben aangegaan: een javascript schrijven dat vanuit de bovengenoemde notatie (je kan het namelijk eenvoudig inpassen in een 2-dimensionele array) de tabel rendert.
Daarbij heb ik dus wat truukjes ingebakken zodat het in de browser ook klopt.
Een voorbeeld van zo'n tabel kan je hier vinden; dit is een "unique simple perfect square of order 23" - de kleinste is trouwens van order 21.
Wat ik graag zou willen weten is of mijn uitwerking van dit "probleem" tevens de meest efficiente is; oftewel van notatie naar tabelvorm. Ik vond het in elk geval zelf een leuke uitdaging (een beetje in de orde van de recente programmeerwedstrijd in /14).
Voordat ik dus de code (die imho meer toepassingsmogelijkheden biedt, en waar de heren browserbouwers misschien ook nog iets van kunnen leren
) ga publiceren zou ik de geinterresseerden willen vragen ook eens hun hersens te laten kraken en met een mooi stukje code te komen 
Sorry voor het lange verhaal; ik vond het in elk geval de moeite waard. Ik hoop dat er hier meer rondlopen die het ook zien als een uitdaging, zoniet dan vraag ik vriendelijk dit topic te moven naar /14 waar misschien wel meer geinterresseerden rondlopen (het is namelijk niet gezegt dat het met javascript opgelost moet worden).
Veel plezier!
Nu denken veel mensen: wat kan er nou moeilijk zijn aan een tabel? Welnu, ik zocht gewoon naar een manier om zogenaamde "perfect square dissections" in een tabel te laten zien.
Hier is een link waar uitgelegd wordt wat een perfect square dissection precies is: het komt erop neer dat er vierkanten bestaan die opgedeeld kunnen worden in vierkanten van verschillende groottes.
Enfin, ik heb een workaround gevonden waarmee ik de tabellen in alle moderne browsers (NS6, IE5+, Mozilla en Opera-hoewel traag) goed kan weergeven: de truuk is om om de tabel een rand te leggen van cellen zonder col- of rowspans.
Wat is dan de programmeeruitdaging? (die ik overigens zelf al met success aangegaan ben).
Een dissected square kan op de volgende manier genoteerd worden:
code:
1
2
3
4
5
| (6, 4, 5) (3, 1) (6) (5, 1) (4) |
Bovenstaand voorbeeld is geen "perfect square" omdat het vierkanten bevat van gelijke grootte, maar dat maakt voor het voorbeeld niet uit.
Grafisch ziet dit er zo uit:

Oftewel van links naar rechts en boven naar onderen zien we vierkanten van 6x6, 4x4, 5x5; 3x3, 1x1; 6x6; 5x5, 1x1; en 4x4.
In tabelvorm vertaald zou dat grofweg zo zijn:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <table border=1 cellspacing=0 cellpadding=0>
<tr>
<td colspan=2 rowspan=3 height=240 width=240 align="center">1</td>
<td colspan=2 rowspan=1 height=160 width=160 align="center">2</td>
<td colspan=1 rowspan=2 height=200 width=200 align="center">3</td>
</tr>
<tr>
<td colspan=1 rowspan=3 height=120 width=120 align="center">4</td>
<td colspan=1 rowspan=1 height=40 width=40 align="center">5</td>
</tr>
<tr>
<td colspan=2 rowspan=3 height=240 width=240 align="center">6</td>
</tr>
<tr>
<td colspan=1 rowspan=2 height=200 width=200 align="center">7</td>
<td colspan=1 rowspan=1 height=40 width=40 align="center">8</td>
</tr>
<tr>
<td colspan=2 rowspan=1 height=160 width=160 align="center">9</td>
</tr>
</table> |
waarbij ik de heights en de widths maal 40 heb gedaan om een mooie grote tabel te krijgen.
IE vind deze tabel niet zo fijn, want hij rendert hem verkeerd zonder truuken. Bij meer ingewikkelde tabellen laten Mozilla, NS en Opera het trouwens ook afweten.
Kom ik bij de uitdaging die ik voor mezelf ben aangegaan: een javascript schrijven dat vanuit de bovengenoemde notatie (je kan het namelijk eenvoudig inpassen in een 2-dimensionele array) de tabel rendert.
Daarbij heb ik dus wat truukjes ingebakken zodat het in de browser ook klopt.
Een voorbeeld van zo'n tabel kan je hier vinden; dit is een "unique simple perfect square of order 23" - de kleinste is trouwens van order 21.
Wat ik graag zou willen weten is of mijn uitwerking van dit "probleem" tevens de meest efficiente is; oftewel van notatie naar tabelvorm. Ik vond het in elk geval zelf een leuke uitdaging (een beetje in de orde van de recente programmeerwedstrijd in /14).
Voordat ik dus de code (die imho meer toepassingsmogelijkheden biedt, en waar de heren browserbouwers misschien ook nog iets van kunnen leren
Sorry voor het lange verhaal; ik vond het in elk geval de moeite waard. Ik hoop dat er hier meer rondlopen die het ook zien als een uitdaging, zoniet dan vraag ik vriendelijk dit topic te moven naar /14 waar misschien wel meer geinterresseerden rondlopen (het is namelijk niet gezegt dat het met javascript opgelost moet worden).
Veel plezier!
Intentionally left blank
). je gebruikt rows en cols verkeerd... er ontbreken een aantal rows en cols (rode lijntjes) die je overigens voor dit probleem niet wilt hebben. ligt gewoon aan je html-kwaliteiten; heeft niets met browsers te maken. kijk even op 
je hebt in de eerste tabel (1) een rowspan van 3... okay zie afbeelding... ik tel rechts (rode cijfertjes) 1, 2 en nog een klein beetje rows (vanuit 1 bekeken)! door het ontbreken van een volledige row in de tabel wordt jouw tabel niet goed weergeven. elke html validator zal zeggen dat er niets mis is met je html maar het probleem zit meer in hoe een tabel fundamenteel gedefinieerd dient te worden