Как лесно да направите зебра от маса

„Доста странно име за урок“ - може би си мислите. Но след четене всичко ще си дойде на мястото. В този урок ще ви кажа как да направите красив ефект за вашите таблици с помощта на прост javascript.

След като прочетете до края, можете да направите такива красиви таблици:

екранна снимка

Демо версията е тук. Всички файлове са тук.

Можете ръчно да оформите всеки ред и да постигнете същия резултат, но това е доста трудоемък процес.

Първо, трябва да включим javascript:

Това, както винаги, трябва да се прави между тагове. Също така е важно да запомните за пътя, ако прехвърлите файла в друга папка.

След това вмъкнете проста таблица и й присвойте класа "datatable" (можете да измислите всяко име на клас, но трябва да го коригирате във файла js.js на ред 9):

И в крайна сметка се нуждаем от CSS:

Стиловете могат да се поставят или между етикети, използващи, или да се поставят в отделен файл и да го включат в началото на страницата.

Класът .trcolor определя цвета на фона на боядисаните редове. Можете да го промените според това, което отговаря на вашия дизайн. Останалите класове използвах за оформяне на масата.