В предыдущем посте мы уплотнили таблицу и добавили в неё важные показатели, однако анализ содержимого таблицы по-прежнему требует напряжённого всматривания. Как упростить поиск информации в таблице? Наводим красоту В таблице неправильно расставлены визуальные акценты – мы анализируем прибыльность, а выделен у нас заголовок, а важные для анализа цифры всё также представляют собой не более чем фон. Исправляем: Для начала выключаем экселевскую сеточку: Делаем заливку заголовка менее яркой и меняем цвет шрифта на тёмный (потому что белый на светлом плохо виден)...
Очевидно, что прежде чем применить различные свойства CSS к html-таблице необходимо ее создать. О том как это сделать можно прочитать здесь. В моем случае законченный вариант таблицы будет выглядеть вот так: Это довольно простая таблица, состоящая из четырех столбцов и пяти строк. Ее html-код выглядит вот так: Обратите особое внимание на атрибут rowspan, т.к. именно с его помощью мы можем объединить четыре ячейки в первом столбце в одну. Теперь переходим непосредственно к CSS. Начать можно с ширины таблицы...