Сложные заголовки для <table>?

Question

[cthtuf]

Уважаемое сообщество!


Подскажите мануалы, инструменты и все что можно для создания сложных заголовков таблиц, таких как этот:



рассмотрю любые варианты, кроме картинок

Comments

[Олег Матрозов]

А что именно для вас в этой таблице является сложным? Как я вижу — это просто таблица с использованием colspan и поворотом теста при помощи, например, css transform: rotate.

[Олег Матрозов]

Если хотите, могу пример скинуть подобной верстки.

[Олег Матрозов]

Единственно реальная проблема в вашем примере — это поворот текста. А это либо css:transform (+progid:DXImageTransform для IE) и потеря старых браузеров, либо SVG (но тоже не везде), либо действительно картинками.

[Олег Матрозов]

cssdesk.com/d9fJZ

Answer 1

[Михаил Лялин]

1) IMHO, смотреть и воспринимать пользователям информацию будет сложно
2) м.б., имеет смысл выдавать в диаграммы, графики и т.п.?

Comments

[cthtuf]

1. согласен, глаза это немного «ломает», но оказалось все не так плохо, как я представлял себе в самом начале
2. и с этим я тоже согласен — мы строим графики по этим данным и пользователи в первую очередь будут анализировать их, и только потом, при каких-то аномалиях, будут смотреть на данные в таблице

Answer 2

[MT]

Если возникает необходимость в вертикальном выводе текста в таблице, то, возможно, данные имеет смысл представить иначе. Например, использовать сокращения (в простейшем случае), изменить направление таблицы (столбцы превратить в строки, и наоборот) и/или ограничить количество одновременно отображаемых параметров наиболее необходимыми.

Comments

[cthtuf]

Да, я согласен с вами — это не лучший способ, но, «скрипя зубами», я это делаю. Перед тем как прибегнуть в «вертикальным» заголовкам, я попробовал много разный вариантов, однако этот способ оказался наиболее приемлемым для меня: столбцов (заголовков) будет около 20, строк будет ещё больше, и их число будет постоянно увеличиваться, а в требованиях было — данные по всем параметрам (столбцам) должны умещаться на странице.

Конечно можно было бы все перевернуть, но очень скоро появился бы горизонтальный скролл, а это, в условиях уже существующей верстки, гораздо хуже чем вертикальные заголовки.

[MT]

Возможно, часть данных можно вывести в нетабличной форме или на отдельной странице / отдельным блоком, раскрываемым по желанию пользователя. Едва ли все параметры (столбцы вашей текущей таблицы) одинаково важны и требуются пользователю единовременно.

[cthtuf]

Возможно, часть данных можно вывести в нетабличной форме или на отдельной странице / отдельным блоком, раскрываемым по желанию пользователя

да, это были те варианты, которые я перепробовал до вертикальных заголовков, но, к сожалению, все они не удовлетворяют требованию заказчика — все данные одной записи должны умещаться на странице.

Едва ли все параметры (столбцы вашей текущей таблицы) одинаково важны и требуются пользователю единовременно.

Все данные записи одинаково важны, и разбить их по группам тоже не совсем выходит.

на самом деле, оказалось все не так уж плохо. читабельность не на высоте конечно, но, я бы сказал, «удовлетворительная».

Answer 3

[cthtuf]

Да, забыл уточнить — вопрос был именно в написании текста по вертикали. Более того, я сделал css:transform, но получил не совсем удовлетворительные результаты:

почему-то подумал что таблицы ещё не умеют работать с css:transform и для этого необходимо использовать яваскрипт.

Спасибо за то что напомнили что начинать нужно всегда с самого простого, а именно — удаления всех ненужных стилей. Моя проблема была в том что у меня присутствовал стиль table.blabla { width:100%}. После того как я его убрал, все встало на свои места, но, как ни странно, добавив этот стиль в ваш шаблон на cssdesk, ничего плохого не случилось, и все отработало так как и должно было.

За ссылку на полезный сервис тоже спасибо!

Comments

[IkaR49]

А если вложить в ячейку таблиц p или div и уже его поворачивать?

[cthtuf]

В конечном итоге так и было сделано (по примеру ).

Сейчас все отлично. Всем спасибо за помощь!

[cthtuf]

*по примеру Mear (парсер..)