Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Сложные таблицы

.

В примерах вы видели очень простую структуру таблиц: прямые строки и столбцы, никаких усложненных элементов. Но с какими сложностями мы потенциально можем столкнуться?

Объединение ячеек

Самое частое усложнение структуры таблиц — объединение ячеек. Снова посмотрим на таблицу клубных мероприятий нашего учебного сайта и попробуем представить для нее более сложную структуру — как в табл. 6.3 (я временно убрал форматирование для лучшего восприятия).

Таблица. Более сложная структура таблицы

rowspan и colspan. В этом примере заголовки первого и последнего столбцов («Дата» и «Контакты») состоят из двух вертикально объединенных ячеек. Заголовок «Событие» состоит из двух ячеек, объединенных горизонтально. Для достижения этого эффекта понадобились следующие HTML-атрибуты:

rowspan1;

colspan2.

Разметка будет выглядеть таким образом (код частично сокращен):

Казалось бы, первая строка состоит из трех ячеек (одна ячейка + две объединенные + одна ячейка = четыре), а вторая содержит всего два заголовка, но, поскольку крайние левая и правая ячейки уже обозначены как объединенные в предыдущей строке с помощью атрибута rowspan=2, размеры строк совпадают и таблица получается верной.

Вам это кажется очень трудным? Не расстраивайтесь, вы не одиноки! Многие веб-дизайнеры пугались этих сложных конструкций в начале своей карьеры. Если допустить ошибку в математике rowspan и colspan, то таблица отобразится в неприглядном виде. Вот почему я поместил этот пример в отдельном разделе.

Если вы хотите объединить ячейки таблицы, используйте один из двух способов:

применяйте специальные инструменты для веб-разработки, в которых есть возможность конструировать таблицы с визуальным контролем (например, Dreamweaver);

просто нарисуйте таблицу на бумаге. Начните с простой таблицы без всяких объединений, где будут только столбцы и строки в нужном вам количестве. После того как вы это сделаете, пометьте номера столбцов и строк, которые вам нужно объединить. Закончив макет на бумаге, переведите его на язык HTML — и все!

.

Читайте так же:
Not found