foutieve- en gedoogde-tables | gedoogde- en perfecte-tables
000000 | 330000 | 660000 | 990000 | cc0000 | ff0000 |
003300 | 333300 | 663300 | 993300 | cc3300 | ff3300 |
006600 | 336600 | 666600 | 996600 | cc6600 | ff6600 |
009900 | 339900 | 669900 | 999900 | cc9900 | ff9900 |
00cc00 | 33cc00 | 66cc00 | 99cc00 | cccc00 | ffcc00 |
00ff00 | 33ff00 | 66ff00 | 99ff00 | ccff00 | ffff00 |
00ff33 | 33ff33 | 66ff33 | 99ff33 | ccff33 | ffff33 |
00ff66 | 33ff66 | 66ff66 | 99ff66 | ccff66 | ffff66 |
00ff99 | 33ff99 | 66ff99 | 99ff99 | ccff99 | ffff99 |
00ffcc | 33ffcc | 66ffcc | 99ffcc | ccffcc | ffffcc |
00ffff | 33ffff | 66ffff | 99ffff | ccffff | ffffff |
000000330000660000990000cc0000ff0000
003300333300663300993300cc3300ff3300
006600336600666600996600cc6600ff6600
009900339900669900999900cc9900ff9900
00cc0033cc0066cc0099cc00cccc00ffcc00
00ff0033ff0066ff0099ff00ccff00ffff00
00ff3333ff3366ff3399ff33ccff33ffff33
00ff6633ff6666ff6699ff66ccff66ffff66
00ff9933ff9966ff9999ff99ccff99ffff99
00ffcc33ffcc66ffcc99ffccccffccffffcc
00ffff33ffff66ffff99ffffccffffffffff
Elders op de kompoos.nl is al uitgelegd dat het meestal (maar soms ook helemaal niet) niet al te moeilijk is om tables te vervangen door hun (puur) css-equivalent. De hoeveelheid code die in de stylesheet nodig is om de table te "benoemen" is bijna hetzelfde als die voor de "pure css versie". De winst zit er in dat de browser de css-code veel beter kan renderen dan de trage tr- en td-'s.
Blijf rustig tables gebruiken als je dat wilt. Vrijheid, blijheid, voor iedereen. Maar als je op een dag toch niets te doen hebt, en je bent toevallig bezig met een table "op te bouwen", kijk dan eens of dat ook niet met enkel en alleen CSS gedaan kan worden.
Ik ga niet de "hele lap" stylesheet en html-code op de pagina plaatsen. Met een right-click kan je zelf de broncode zichtbaar maken, en, desgewenst kopiëren naar jouw web-ruimte.
Hieronder plaats ik alleen de 2 stukjes stylesheet die er voor zorgen dat de lay-out wordt zoals je op deze pagina kunt zien (de twee kleur-tabellen).
Tot slot:
Heel erg "langzamerhand" vervang ik de oude tables (die al heel lang dienst doen op de kompoos.nl) door pure CSS-versies. Het is niet echt altijd makkelijk, en er moet soms flink gepuzzeld worden... Maar alles is de moeite waard geweest als je kan meten dat bij grote tables er een snelheidswinst (laden van de pagina) van zo'n 15% gerealiseerd is.
table{
font-family:monospace;
border:1px solid #808080;
border-collapse:collapse}
td{
line-height:32px;
width:75px;
font-weight:bold}
#tabel{
white-space:nowrap;
border:1px solid #808080;
position:absolute}
b{
margin:0;
line-height:32px;
width:75px;
display:inline-block;
padding:0 1px 2px 1px;
font-family:monospace}