Pohled pod povrch
|
| | | | | | | | |
| Tohle mohlo být skutečně uděláno mnohem jednoduššeji. | | | Hádejte, kolik kódu je v této malé tabulce? 13.7k. Je tu 17 řádků a 9 sloupců. A to se nezmiňuji o spacer GIFech. | |
| | | | | |
|
| | | | | | | | |
| Je tu prostě příliš mnoho buňek a spacerů. | | | A všechny ty tečkované okraje jsou udělány jako pozadí tabulkových buněk, což není validní. | | • | Vložená tabulka? K čemu? | | | • | K vytvoření seznamu s odrážkami? To si děláš legraci, že? |
| |
| | | | | |
|
| | | | | | | | |
| Tohle všechno lze udělat s 8 buňkami a 4 CSS pravidly. | | | No vážně. 8 buněk a 4 CSS pravidla, to je všechno. | | • | Ale ne, další tabulka, co se tváří jako seznam s odrážkami. | | | • | Prostě zapiš seznam s odrážkami jako seznam s odrážkami a o zbytek se postará CSS. |
| |
| | | | | |
|
| | | | | | | | |
| Potřebuješ jedno pravidlo pro <table>, jedno pro <td>, jedno pro <ul> a jedno pro <li>. | | | Toť vše. Jakmile to máš, jsi nejlepší. | | • | Je to rozhodně lepší než dalších 8 buněk k vytvoření falešného seznamu s odrážkami, který je navíc daleko hůře přístupný. | | | • | Perfektní! Poslední falešný seznam. |
| |
| | | | | |
|
Kód, který ukazuje strukturu tabulky:
table{ margin:3px; padding:2px; border:solid 2px blue }
td{ padding:2px; border-style: solid; border-width: 1px; border-color:gray gray silver silver }