Mycket bättre

Mycket bättre Gissa hur mycket kod det är i den här lilla tabellen? 2,1kb. Denna består av 4 rader och 2 kolumner. Och inga utfyllnads-GIFar.
Helt rätt Och alla dessa prickade linjer är gjorda med CSS och validerar helt och hållet.
  • Detta är ett listobjekt nu
  • Precis som det ska vara
Allt detta görs med 8 tabellceller och 4 CSS-regler. Allvarligt. 8 celler och 4 CSS-regler, det är allt som krävs.
  • Hurra för punktlistor
  • Varför inte koda upp alla punktlistor som punktlistor och låta 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 det är allt lugnt.
  • Jag älskar punktlistor
  • Lysande! Inga fler fejkade punkter

Och här är CSS-koden som används för att slippa överflödskoden:

table { border-bottom: 1px dotted fuchsia; border-left: 1px dotted fuchsia }

td { padding: 11px 20px 20px 11px; border-top: 1px dotted fuchsia; border-right: 1px dotted fuchsia }

ul { margin-top: 10px; margin-bottom: 10px; margin-left: 0; padding-left: 1em }

li { margin-bottom: 10px }