Už hodně dlouho jsem nedělal žádné změny na webu conVERTER. Dnes dopoledne jsem trochu vyladil některé tabulky.
Mým cílem bylo zlepšení vzhledu a čitelnosti textu v převodních tabulkách fyzikálních jednotek. Původní vzhled tabulky byl poměrně dost „naňachňaný“. Výrazný barevný podklad hlavní jednotky mi taky moc neseděl:
Původní vzhled tabulky
Proto jsem provedl několik úprav:
Nová tabulka
Jak už jsem psal, tak hlavní myšlenkou bylo zlepšení čitelnosti obsahu tabulky. Upravil jsem tyto věci:
- Zvětšil jsem mezeru mezi řádky. CSS vlastnost
line-height
jsem nastavil na hodnotu140%
. Větší rozestup řádků na webových stránkách zlepšuje čitelnost textu. - Zvětšil jsem odstup textu od mřížky tabulky (vlastnost
padding
). Větší je levý a horní okraj než dva zbývající. Větší mezery zvýrazňují sloupce i řádky. Více místa nad odstavcem dělá text opticky stabilnější. - Změnil jsem barvu pozadí prvního řádku s tzv. hlavní jednotkou. Původně hodně jásavé červené pozadí jsem zmírnil změnou barvy na okrově hnědou.
- Zkušebně jsem nasadil jQuery, kterým měním barvu lichých řádků a dělám hover efekt řádků, na kterých je kurzor myši. Použil jsem kód z článku Tutorials:Zebra Striping Made Easy.
Nové tabulky jsou třeba na stránkách plošný obsah nebo hmotnost.