Ta en titt under ytan

Detta kunde verkligen göras på ett mycket enklare sätt. Gissa hur mycket kod det finns i denna lilla tabell? 13,7kb. Det är 17 rader och 9 kolumner här inne. Och nämnde jag alla utfyllnads-GIFar?
Det är alldeles för många tabellceller och utfyllnadsbilder här inne. Och alla prickade linjer görs med ett background-attribut på tabellcellerna, vilket inte kommer att validera.
• En nästlad tabell? Till vad?
• För att göra en punktlista? Du skojar, va?
Allt detta skulle kunna göras med 8 tabellceller och 4 CSS-regler. Allvarligt. 8 celler och 4 CSS-regler, det är allt som behövs.
• Ånej, ännu en tabell förklädd till punktlista.
• Koda upp punklistorna som punklistor och låt CSS sköta resten.
Du behöver en regel för <table>, en för <td>, en för <ul> och en för <li>. Det är allt. När du väl har dem är allt lugnt.
• Det är bättre än att använda 8 ytterligare tabellceller för att fejka en punktlista, vilket i slutändan är mycket mindre tillgängligt.
• Lysande! Den sista fejkpunkten.

Koden som visar tabellstrukturen:

table { margin: 3px; padding: 2px; border: solid 2px blue }

td { padding: 2px; border-style: solid; border-width: 1px; border-color: gray gray silver silver }