< The Webmakers Lounge />

Давно мы о таблицах не говорили. Да и что о них говорить? Их оформлять надо. Табличное представление информации является одним из важных инструментов донесения данных до пользователя и несомненно должно быть удобным и легким для восприятия.

Существуют различные методы визуального разграничения информации в таблицах для большего удобства восприятия. Такие как разделение строк таблицы различным цветом. Этот способ известен под названием “Полосатые таблицы“

Сегодня я хотел бы поговорить о столбцах (колонках) таблицы. Признавайтесь, сколько раз вы чертыхались, прописывая класс для каждой ячейки в каждой строке, чтобы выделить ту или иную колонку фоновым цветом?

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

Существует простое, кроссбраузерное решение, основаное только на HTML/CSS. А именно colgroup. Решение это совсем не ново, но почему-то незаслужено забыто многими разработчиками. Перейдем прямиком к разметке:

<table>
		<caption>Столбцы / колонки:</caption>
		<colgroup>
			<col />
			<col class="alt" />
			<col />
			<col class="alt" />
			<col />
		</colgroup>
		<tr>
			<th>FF2/3</th>
			<th>IE6/7</th>
			<th>Opera</th>
			<th>Safari</th>
			<th>Other</th>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
		<tr>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
			<td>Нет</td>
			<td>Да</td>
		</tr>
	</table>

Чем этот код отличается от обычной разметки таблицы? Наличием тегов colgroup и col. Собственно colgroup является родительским контейнером для элементов col, которые и определяют нужные нам столбцы. Достаточно указать тому или иному столбцу класс и вуаля — у нас есть колонки, выделенные по вашему вкусу.

Вот так выглядит CSS:

table {
border: 1px solid #333;
border-collapse: collapse;
}
th, td {
padding: 2em;
text-align: center;
border-spacing: 1em;
}
th {
background: #ddd;
color: #fff;
}
/*Стиль для столбца*/
col.alt {
background: #ddf;
}

В принципе ничего сложного, и уж тем более инновационного, здесь нет. Таким способом можно задавать стиль для любого столбца таблицы.

Проверено в FF2/3, IE6/7, Opera 9.5, Safari|(Win)

Список поддерживаемых стилевых правил. Спецификация.

В последнее время при разработке сайтов все меньше и меньше учитывается разрешение 800х600, что само по себе не удивительно, если взглянуть на статистику. Соответственно, либо сайты оптимизированы под 1024х768 и выше, либо они “резиновые”, что встречается реже.

Ситуация закономерная и соответствует развитию рынка мониторов и стремлениям дизайнеров/разработчиков. Я уже размышлял над этим год назад. Так вот, год спустя мои мысли приобрели немного другое направление.

Количество посетителей сайтов с разрешением 800х600 не только не уменьшится, а увеличится. Связано это напрямую с развитием субноутбуков, кпк, мобильников и прочих переносимых девайсов. Добрая половина субноутбуков уже сейчас имеет разрешение 1024х600, но сайт, оптимизированый под 1024х768, открытый на таком экране, в большинстве случаев будет неудобоваримым так как займет всё окно браузера. А в дизайне, как известно, важны пустоты.

Поэтому я предлагаю перестать игнорировать 800х600 и начать смотреть на этот вопрос под другим углом. Мне кажется разумным:

• Создавать отдельный файл стилей, оптимизированый под маленькие разрешения экрана, для всех мобильных устройств .
• С помощью PHP/JS создать функциональную возможность переключения файла стилей для владельцев настольных компьютеров с малым разрешением экрана.

Таким образом, мы убиваем одним выстрелом двух зайцев. У сайта появляется полноценная мобильная версия, и мы заботимся о посетителях с маленьким… разрешением.

Добавление файла стилей для мобильных устройств делается так:

<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

Про корректное оформление мобильной версии сайта можно почитать на старом добром ресурсе A List Apart.

Переключать стили можно с помощью JQuery вот так или так.

Решения, конечно, могут быть другими, но главная мысль состоит в том, чтобы заботиться о всех посетителях сайта, вне зависимости от разрешения монитора.

#evil {
position: absolute;
}

Ссылка в тему: Расправляемся с багом позиционирования в IE6 (z-index).

Обновил движок и поменял дизайн. Теперь все еще более минималистично К сожалению часть комментариев при переносе БД утеряна. Если вы чувствуете, что у вас есть что сказать — сейчас самое время.

Появилась возможность авторизироваться через OpenID для комментирования, поддержка Gravatar, ну и по мелочам.

В ближайшие дни буду отлавливать баги.

Дин, спасибо за помощь с базой.

Часть первая.

Второй день конференции начался с жестокого похмелья доклада Nate Koechley под названием “Professional Front-End Engeneering”. Как Нэйт и обещал, он толкнул зажигательную речь о Front-End’е и его значении в веб-разработке. Особый упор был сделан на том, что Front-End веб-разработка по сути своей ни чем не отличается от архитектуры и поэтому отношение к ней, со стороны разработчика и его начальства не должно быть другим. Архитектор, проектируя здание, не позволяет себе махнуть рукой на то, что будет с домом через 5—10 лет, проект наполняется чертежами, схемами, документацией и тд. Так почему разработка сайтов должна отличаться?

Он призвал веб-разработчиков не пренебрегать своей работой даже если они убеждены, что проект, который они делают, не важен и не будет развиваться. Веб, как известно, среда динамическая и постоянно расширяющаяся, по сему любой, даже самый маломальский проект может “выстрелить” и его надо будет срочно расширять, дорабатывать и развивать. Соответственно не стоит экономить на документации, комментировании собственного кода, стоит помнить возможности повторного использования элементов интерфейса и возможности для расширения. Прочитать остальную часть записи »