Katsotaanpa pinnan alle

Tämän voisi tehdä yksinkertaisemminkin. Arvaapa kuinka paljon merkkauskieltä vaaditaan tähän pikku-taulukkoon? 13.7k. Taulukossa on 17 riviä ja 9 saraketta. Ja mainitsinko jo läpinäkyvät GIF:it?
Tässä taulukossa on aivan liian paljon soluja ja kuvia. Ja kaikki pistereunat on tehty background-määreellä solujen sisällä, mikä ei mene läpi validaattorista.
• Sisäkkäisiä taulukoita? Miksi?
• Listaa varten? Vitsailetko?
Tämä kaikki saataisiin aikaan 8:lla solulla 4:llä CSS-tyylillä. Oikeasti. 8 solua ja 4 CSS-tyyliä, siinä kaikki.
• Ei kai, toinenkin taulukko leikkii listaa.
• Mikset vain merkkaisi listoja listoiksi ja anna tyylisivun hoitaa loput.
Tarvitset yhden <table>-säännön , yhden <td>:lle, yhden <ul>:lle ja yhden <li>:ta varten. Siinä kaikki. Kun olet luonut ne, olet selvillä vesillä.
• Paljon parempi siitä tulee kuin 8:ta solusta, jotka leikkivät listaa. Ja käytettävämpikin.
• Loistavaa! Viimeinen kohta huijauslistalla.

Tässä koodi ylläolevaa taulukkoa varten:

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

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