Какой лучший способ конвертировать макет таблицы в макет CSS?

Question

Я собираюсь начать работу над веб-страницей со сложным макетом на основе таблиц (закодировано несколько лет назад).

Одна из вещей, которые я хотел бы сделать, - преобразовать макет в правильный CSS-макет с элементами div и span.

Можете ли вы предложить хороший подход для решения подобных проблем? Должен ли я использовать CSS-фреймворк, как Blueprint? Просто зайдите туда и взломайте его, пока он не будет выглядеть правильно? Я уже активно использую Firebug и панель инструментов разработчика IE.

Answer 1

Обычно при конвертации между таблицей и CSS нет серебряной пули. Каждый сайт отличается и имеет разные требования. Единственный реальный ответ: просто начните разметку с нуля.

Лучший совет - сначала написать разметку полностью. Убедитесь, что разметка является точной, семантической и представляет ваши данные полностью. Не пишите таблицу стилей ... пока. После того, как разметка сделана, создайте CSS. Таким образом, у вас есть семантическая разметка, а CSS просто контролирует представление.

Фреймворки CSS часто не поддерживают этот подход к семантической разметке, потому что они заставляют вас добавлять дополнительные теги, чтобы соответствовать их подходу. Следовательно, CSS-фреймворки иногда доставляют больше хлопот, чем их ценность.

Сделайте разметку, затем CSS.

Answer 2

Перед началом убедитесь, что вы используете сброс CSS. Эрик Мейер и Yahoo YUI оба превосходны. Это поможет заставить все ваши браузеры выглядеть одинаково.

Кроме того, установите HTML-валидатор . Это гарантирует, что ваш HTML выглядит хорошо и готов к добавлению CSS.

Затем возьмите копию Firebug и установите ее в Firefox. Это отлично подходит для просмотра того, какие правила CSS делают что. Вы можете отключить отдельные правила, щелкая крестиком по каждому правилу.

Теперь посетите некоторые веб-страницы, которые корректно проверяют, и посмотрите, какие правила они использовали в своих таблицах стилей.

Веб-сайты, которые можно попробовать: www.alistapart.com , CSS Zen Garden , SimpleBits и т. Д.

Answer 3

Процесс конвертации будет мучительной головной болью! Я предлагаю вам начать целый редизайн.

Answer 4

Я второй комментаторов, которые говорят, что вы должны изменить дизайн всего с нуля. Очистите HTML, а затем сделайте CSS.

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

Answer 5

Не знаю, может ли это помочь, я создаю CSS Framework под названием Emastic (поддерживает текучие и фиксированные столбцы), и вы можете смоделировать таблицы, если хотите, вот пример Стол Emastic

Answer 6

В некоторых случаях использование регулярных выражений может ускорить ваш процесс.

Например, что-то вроде этого:

<table.*>\R*.*<tr>\R*.*<td[^>]*?>(.*)</td>

будет соответствовать началу таблицы и будет содержать содержимое первой ячейки в $ 1 для замены:

<div class="container">\n\t<div class="row">\n\t\t<div class="span6">$1</div>

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

Другим подходом было бы использовать что-то вроде этого плагина jQuery: https://github.com/ryandoom/jquery-plugin-table-to-div

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

Answer 7

Я бы не использовал фреймворк. Изучение новой структуры полезно только в том случае, если вы используете ее снова и снова. Каждый фреймворк имеет свои ошибки и недостатки. Используйте

display: table-cell;

чтобы сделать столбец. Они выстроятся в линию как float: left;. Смотри http://quirksmode.org/css/css2/display.html

Answer 8

Итеративный способ также работает. Начните с небольших блоков, преобразовав их в CSS. Это должно упростить структуру вашей таблицы, мы надеемся, что в таблицах останется только «базовая сетка», а все остальное в CSS.

Оттуда выберите существующее протестированное решение, если это простая схема (для 1-3 столбцов существует множество протестированных решений). Если это сложнее, используйте Blueprint.