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 části tabulky

Původní vzhled tabulky

Proto jsem provedl několik úprav:

Nový vzhled části tabulky

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 hodnotu 140%. 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.