KOMPOOS.NL

table alternatief css

home » manuals » css » table-alternative-css.html

foutieve- en gedoogde-tables | gedoogde- en perfecte-tables

voorbeeld alternatieve table (gedeeltelijk CSS)

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

voorbeeld alternatieve table (volledig CSS)

000000330000660000990000cc0000ff0000
003300333300663300993300cc3300ff3300
006600336600666600996600cc6600ff6600
009900339900669900999900cc9900ff9900
00cc0033cc0066cc0099cc00cccc00ffcc00
00ff0033ff0066ff0099ff00ccff00ffff00
00ff3333ff3366ff3399ff33ccff33ffff33
00ff6633ff6666ff6699ff66ccff66ffff66
00ff9933ff9966ff9999ff99ccff99ffff99
00ffcc33ffcc66ffcc99ffccccffccffffcc
00ffff33ffff66ffff99ffffccffffffffff

uitleg alternatieve table

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.

CSS met/voor table


        table{
                font-family:monospace;
                border:1px solid #808080;
                border-collapse:collapse}
        td{
                line-height:32px;
                width:75px;
                font-weight:bold}

Puur CSS


        #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}