13. Объединение ячеек таблицы по горизонтали и по вертикали.
Значения этих атрибутов определяют количество ячеек, которые будут объединены в одну.
14. Особенности построения таблицы. Отображение пустых ячеек в таблице. Выравнивание данных в столбцах таблицы Особенности построения html таблиц
В данном разделе рассматриваются некоторые специфичные возможности отдельных браузеров, а также отдельные тонкости построения и отображения таблиц.
Отображение пустых ячеек в HTML таблицах
О дной из особенностей представления HTML таблиц различными браузерами является отображение пустых ячеек. Согласно описанию HTML языка все браузеры должны дополнять строки пустыми ячейками, если в какой-либо строке их количество задано меньшим, чем в остальных строках. Кроме того, в любом месте таблицы могут находиться ячейки, не содержащие данных. Существует различие между пустыми ячейками и ячейками, содержащими невидимые данные. В пустых ячейках внутри пары тегов
Рис. 4.15. Пустая ячейка HTML таблицы отображается по-разному различными браузерами
Microsoft Internet Explorer и те, и другие ячейки отображает цветом фона ячеек. Такой браузер как NSCA Mosaic предоставляет пользователю возможность самому определить характер выдачи пустых ячеек таблицы с помощью выбора соответствующих опций. Знание таких особенностей позволит разрабатывать таблицы, которые будут отображены подходящим образом, вне зависимости от выбранного пользователем браузера. В ряде случаев достаточно для этого вместо некоторых пустых ячеек создавать ячейки, содержащие единственный код .
Объединение ячеек таблиц
Осталось поговорить об одной интересной особенности языка HTML. Это так называемое объединение ячеек таблиц. Лучше всего рассмотреть пример — простую таблицу, HTML-код которой приведен в листинге 5.10.
Листинг 5.10
Это обычная таблица, ячейки которой пронумерованы — так нам будет проще в дальнейшем. На рис. 5.2 показан ее вид в окне Web-обозревателя.
А теперь рассмотрим таблицу на рис. 5.3.
Здесь выполнено объединение некоторых ячеек. Видно, что объединенные ячейки словно слились в одну. Как это сделать?
Специально для этого теги и поддерживают два весьма примечательных необязательных атрибута. Первый — COLSPAN — объединяет ячейки по горизонтали, второй — ROWSPAN — по вертикали.
Рис. 5.2. Изначальная таблица, ячейки которой подвергнутся объединению
Рис. 5.3. Таблица, показанная на рис. 5.2, после объединения некоторых ячеек (объединенные ячейки обозначены сложением их номеров)
Чтобы объединить несколько ячеек по горизонтали в одну, нужно выполнить следующие шаги.
1. Найти в коде HTML тег (), соответствующий первой из объединяемых
ячеек (если считать ячейки слева направо).
2. Вписать в него атрибут COLSPAN и присвоить ему количество объединяемых ячеек, считая и самую первую из них.
3. Удалить теги (), создающие остальные объединяемые ячейки данной строки.
Давайте объединим ячейки 2 и 3 таблицы (см. листинг 5.10). Исправленный фрагмент кода, создающий первую строку этой таблицы, приведен в листинге 5.11.
Листинг 5.11
Точно так же создадим объединенные ячейки 4 + 5 и 12 + 13 + 14 + 15.
Объединить ячейки по вертикали чуть сложнее. Вот шаги, которые нужно для этого выполнить.
1. Найти в коде HTML строку (тег ), в которой находится первая из объединяемых ячеек (если считать строки сверху вниз).
2. Найти в коде этой строки тег (), соответствующий первой из объединяемых ячеек.
3. Вписать в него атрибут ROWSPAN и присвоить ему количество объединяемых ячеек, считая и самую первую из них.
4. Просмотреть последующие строки и удалить из них теги (), создающие остальные объединяемые ячейки.
Нам осталось объединить ячейки 1 и 6 нашей таблицы. Листинг 5.12 содержит исправленный фрагмент ее HTML-кода (исправления затронут первую и вторую строки).
Листинг 5.12
Обратим внимание, что мы удалили из второй строки тег , создающий шестую ячейку, поскольку она объединилась с первой ячейкой.
Объединение ячеек сейчас применяется не очень часто. Однако ранее, в период расцвета табличного Web-дизайна (о табличном Web-дизайне см. в главе 10), трудно было встретить таблицу без объединенных ячеек. Так или иначе, знать о нем не помешает.
Что дальше?
В этой главе мы познакомились со средствами HTML, предназначенными для формирования таблиц, и создали нашу первую таблицу, перечисляющую версии языка HTML. Должны же посетители нашего Web-сайта знать, с чего все начиналось…
В следующей главе мы познакомимся со средствами навигации по Web-сайту. Это всевозможные гиперссылки, как текстовые, так и графические (изображения- гиперссылки и карты-изображения). И наконец-то объединим разрозненные Web- странички в единый Web-сайт!
Данный текст является ознакомительным фрагментом.
Продолжение на ЛитРес
Читайте также
3.8. Объединение ячеек таблицы
3.8. Объединение ячеек таблицы На практике встречается большое количество таблиц, в которых одна ячейка объединяет в себе несколько ячеек по высоте и ширине (см. рис. 3.2). В HTML ячейки объединяют с помощью атрибутов colspan и rowspan. Атрибут colspan определяет количество ячеек, на
Объединение ячеек таблиц
Объединение ячеек таблиц Осталось поговорить об одной интересной особенности языка HTML. Это так называемое объединение ячеек таблиц. Лучше всего рассмотреть пример — простую таблицу, HTML-код которой приведен в листинге 5.10. Листинг
Выделение ячеек
Выделение ячеек Как вам уже известно, чтобы сделать активной одну ячейку, нужно ее выделить. В Excel также можно делать активными группы ячеек, или, как принято говорить, диапазоны ячеек.Чтобы выделить прямоугольный диапазон ячеек, то есть ячейки, которые находятся рядом,
Очистка ячеек
Очистка ячеек Выше я уже говорила о том, что для удаления содержимого ячейки достаточно выделить ее и нажать Delete. Точно также можно поступить и с диапазоном ячеек. Однако имейте в виду, что при использовании клавиши Delete удаляются только данные, а форматирование ячейки и
Форматирование ячеек
Форматирование ячеек Форматирование содержимого ячеек Excel ничем не отличается от форматирования текстовых таблиц в Word. Идем в группу Шрифт на вкладке Главная. Видим там кнопки шрифтов, заливки ячеек и отображения границ. Поскольку с ними вы уже хорошо знакомы, не будем
Объединение связанных таблиц в запросе
Объединение связанных таблиц в запросе Для выборки связанной информации из нескольких таблиц используется объединение (join). Чтобы создать объединение в запросе, необходимо определить первичные (primary) и внешние (foreign) ключи в таблицах, участвующих в объединении (эти
Выделение ячеек
Выделение ячеек Напомним, чтобы выделить отдельную ячейку, на ней необходимо щелкнуть кнопкой мыши, при этом ячейка будет заключена в жирную рамку. Кроме того, ячейку можно выделять с помощью клавиатуры: используя клавиши управления курсором (клавиши со стрелками),
Объединение ячеек
Объединение ячеек Две и более ячейки на листе могут быть объединены в одну. Объединение ячеек может понадобиться, например, при создании общего заголовка для нескольких столбцов (рис. 3.15). Рис. 3.15. Пример объединения ячеекЧтобы объединить ячейки, выполните следующие
6.5. Форматирование ячеек
6.5. Форматирование ячеек Форматирование текста и размещение его внутри ячейки1. В меню Формат выберите команду Ячейки, затем перейдите к вкладке Выравнивание. Выберите соответствующие параметры выравнивания по горизонтали и вертикали, а также, если необходимо,
Форматирование ячеек
Форматирование ячеек Данные в ячейках можно форматировать. Например, применять выравнивание (по левому краю ячейки, по правому краю, по центру и по ширине), изменять гарнитуру, размер (кегль) и эффекты (начертания) шрифта.Изменять формат данных можно также с помощью меню
Выделение ячеек
Выделение ячеек Чтобы изменить параметры форматирования сразу нескольких ячеек, их нужно выделить, используя один из следующих приемов.? Для выделения отдельной ячейки подведите указатель мыши к ее левой границе и, когда он примет форму черной наклонной стрелки,
Выделение ячеек
Выделение ячеек При выполнении той или иной операции возникает необходимость выделить несколько ячеек или их диапазон. Чаще всего используется выделение прямоугольной области ячеек с помощью кнопки мыши. Это делается следующим образом.1. Установите указатель мыши в
Очистка ячеек
Очистка ячеек В предыдущем уроке уже упоминалось, что для очистки ячейки достаточно сделать ее активной и нажать клавишу Delete. Таким же образом можно очистить сразу несколько ячеек, предварительно выделив нужный диапазон.Очистка приводит к удалению только имеющихся в
Удаление ячеек
Удаление ячеек При удалении ячеек соседние ячейки сдвигаются, чтобы заполнить образовавшееся пустое пространство. Удалять ячейки следует так.1. Выделите ячейки, подлежащие удалению, и нажмите правую кнопку мыши.2. В появившемся контекстном меню выполните команду
Добавление ячеек
Добавление ячеек Иногда необходимо добавить ячейки в уже заполненную таблицу. Для вставки новых ячеек нужно раздвигать уже существующие. При удалении существующие ячейки сдвигаются вверх или влево, а при вставке – вниз или вправо. Последовательность вставки ячеек
Урок по HTML. Объединение ячеек
Таблицы в HTML — весьма удобный элемент. С ними можно делать что угодно. Разумеется, основное назначение — размещение информации в виде таблицы. Но разработчики сайтов пошли дальше. Одно время очень популярно было использовать таблицы для создания каркаса сайта. Сейчас профессионалы стараются так не делать.
Таблицы нашли свое широкое применение из-за большого количества атрибутов. Например, очень полезным оказалось свойство объединения строк или столбцов.
Введение в теорию
В HTML объединение ячеек происходит при помощи двух атрибутов: colspan и rowspan. Они указываются для тега td.
Давайте для начала разберем структуру любой таблицы, прежде чем будем углубляться в тему. В любой таблице есть строка, а в ней — ячейки. Запомните, что изначально все таблицы должны содержать одинаковое количество ячеек.
Несмотря на то, что интерфейс программы Microsoft Word довольно простой, часто возникают проблемы.
На рисунке выше указано две строки, и в каждой по три ячейки. Это является обычной таблицей. Если вы в какой-нибудь строке укажите меньшее количество ячеек, то таблица «съедет», всё будет отображаться некорректно.
HTML-таблица: объединение ячеек по вертикали и горизонтали
Указывать меньшее количество ячеек или строк можно только в том случае, если вы что-то объединяете. Но вместо удаленного элемента в ближайшем соседнем к началу нужно указать дополнительный атрибут. Если объединяете столбцы, то colspan, если строки, то rowspan. В значении атрибута указывается количество элементов, которые нужно объединить.
Обратите внимание, что указывать нужно именно в ближайшем элементе к началу. Например, на рисунке выше, если бы вы хотели объединить ячейку 1 и 2, нужно указать в ячейке 1 атрибут colspan со значением два. И удалить ячейку номер 2 или 3, уже не важно.
Как сверстать выпадающее меню на CSS? Инструкция по созданию HTML.
Суть заключается в том, что вы указываете ячейке, сколько пространства она займет. По умолчанию значение составляет 1.
Объединение ячеек по вертикали HTML-таблицы происходит по такому же принципу. Просто занимаемое пространство будет считаться по вертикали. Смотрим рисунок ниже.
Здесь ячейка с цифрой 43 занимает две строки. Для этого указали атрибут rowspan. Запоминается просто:
- Row — строка.
- Col — колонка/столбец.
- Span — объединение.
Создатели языка старались максимально приблизить его к человеческому, чтобы, даже не зная его, можно было хоть как-то разбираться.
В HTML объединение ячеек можно делать сразу в двух направлениях: по вертикали и горизонтали. Для этого указываем одновременно оба атрибута.
На рисунке выше как раз это и указано, что можно делать объединение: строк, столбцов и одновременно столбцов и строк.
HTML: объединение ячеек. Примеры
Рассмотрим более сложные поэтапные примеры в больших таблицах. Ниже на рисунке слева указан исходный вариант обычной таблицы. А справа — вариант с объединением двух ячеек во второй строке. Так нагляднее и проще сравнивать HTML-код.
Если же вы хотите объединить все ячейке в строке до единой, то удаляем четыре td и в первой указываем colspan=’5′.
Как видите, на деле всё это просто. Сложного ничего нет. Главное, внимательно, с первого раза, разобраться во всех подводных камнях таблиц, и потом никаких проблем возникать не должно.
Таблицы как каркас сайта
В HTML объединение ячеек не всегда используется для обычных таблиц с информацией (как в Word или Excel). Разработчики сайтов часто, а раньше поголовно использовали их для верстки сайтов.
Начинающим вебмастерам приходится сталкиваться со множеством проблем.
Например, можно рассмотреть этот макет сайта. Данный дизайн — очень простой и примитивный. Но здесь можно показать использование объединения явным образом.
Здесь изначально была таблица из трех строк, по две ячейки в каждой. Затем, чтобы разместить логотип сайта, две ячейки в первой строке были объединены. В нижней строке сделали то же самое, чтобы разместить «подвал».
Благодаря этому можно размещать элементы дизайна на своих местах, и ничто никуда не уедет за свои пределы. Это весьма удобно и просто. Поэтому и было настолько популярно. Сейчас же рекомендуется для создания блоков тег div.
Заключение
И помните, что в HTML table объединение ячеек можно делать как угодно. Всё зависит от того, что вам надо, и как вы хотите это оформить. Главное, не запутайтесь. Если хотите создать большую таблицу с большим количеством объединений, то рекомендуется предварительно нарисовать всё это на листочке или в Paint. Начинающим верстальщикам так будет проще.
Когда наберетесь опыта, такие операции вы сможете без труда производить в своей голове.
Несмотря на то, что интерфейс программы Microsoft Word довольно простой, часто возникают проблемы именно с перемещением и объединением таблиц. Ниже изложена подробная инструкция по тому, как объединить две таблицы в «Ворде» в несколько .
Как сверстать выпадающее меню на CSS? Инструкция по созданию HTML разметки, базового файла CSS. Горизонтальное размещение при использовании свойств float и inline-block. Обзор популярных готовых плагинов. Преимущества работы с фреймворком bootstrap.
Начинающим вебмастерам приходится сталкиваться со множеством проблем. Казалось бы, сегодня уже можно использовать для создания своих сайтов шаблоны, но вот беда, далеко не всегда они обладают нужными свойствами.
Некогда относящееся к одному из видов вероники растение хебе выделили в отдельный род. И вероника, и хебе — представители одного семейства норичниковых. Эти вечнозеленые кустарники поделены на две группы. Одна объединяет не зимостойкие виды, .
Подчеркивание CSS-элементов – один из типичных способов оформления гиперссылок. Выполняется он как с помощью стандартного атрибута, так и более продвинутыми методами.
Как объединить ячейки по вертикали в html
Разделы пособия:
# 25 >> Таблицы > Форматирование таблиц > Объединение ячеек таблицы
<<Назад| На главную | Вперед >>
6.4.5 Объединение ячеек таблицы.
А теперь, научившись работать с таблицами и их составными частями, поговорим об одной особенности языка HTML. Это так называемое объединение ячеек таблиц. Что это такое, проще всего объяснить на примере.
Предположим, мы создали Web-страницу с простой таблицей (рис. 6.13). Обычная таблица, какие мы уже умеем создавать в Dreamweaver— простейший набор строк и ячеек, без названия и даже без форматирования. Ячейки этой таблицы содержат их порядковые номера— так нам будет проще с ней работать.
Рис. 6.13. Простая таблица
Все это очень просто и прекрасно нам знакомо. Теперь давайте рассмотрим более сложную таблицу (рис. 6.14).
Рис. 6.14. Более сложная таблица
Здесь видно, что некоторые ячейки объединены в одну (об этом говорит знак «плюс» между их номерами). Такой прием и называется объединением ячеек. Причем ячейки могут быть объединены по горизонтали и по вертикали, а количество объединяемых ячеек не ограничено.
Но как это сделать на Web-странице? Сейчас мы это выясним. И для начала объединим ячейки с номерами 2 и 3. Прежде чем объединять ячейки таблицы, их нужно выделить. Как это делается, мы уже знаем. После этого обратим внимание на редактор свойств. В его левом нижнем углу находится кнопка 
, с помощью которой и производится объединение ячеек. Нажмем ее. На рис. 6.15 показано, что получится в этом случае. Вместо того чтобы нажимать эту кнопку, мы можем выбрать пункт Merge Cells подменю Table меню Modify или контекстного меню либо нажать комбинацию клавиш ++.
Теперь поместим текстовый курсор в ячейку 4. Мы объединим ее с ячейкой 5, но другим способом. Выберем пункт Increase Column Span подменю Table меню Modify или контекстного меню или нажмем комбинацию клавиш ++. Ячейки 4 и 5 сольются в одну.
Это еще один способ объединения ячеек по горизонтали, самый быстрый, но позволяющий объединить за один раз только две ячейки.
Остается объединить четыре ячейки— 12, 13, 14 и 15 — в одну. Выполним это любым из только что рассмотренных способов.
Итак, мы узнали, как выполняется объединение ячеек по горизонтали. Осталось рассмотреть, как ячейки таблицы объединяются по вертикали.
В частности, нам нужно объединить ячейки 1 и 6. Опять же, мы можем выделить их и нажать кнопку объединения.
Также мы можем поставить текстовый курсор в ячейку 1 и выбрать пункт Increase Row Span подменю Table меню Modify или контекстного меню. Так и сделаем.
Но что делать, если мы хотим разъединить объединенные ячейки? Dreamweaver и здесь идет нам на помощь. Достаточно поместить текстовый курсор в ячейку, получившуюся в результате объединения, и сделать следующее:
- если выполнялось объединение по горизонтали, выбрать пункт Decrease Column Span подменю Table меню Modify или контекстного меню либо нажать комбинацию клавиш ++<[>;
- если выполнялось объединение по вертикали, выбрать пункт Decrease Row Span подменю Table меню Modify или контекстного меню;
- и, наконец, универсальный способ— нажать кнопку
, находящуюся в левом нижнем углу редактора свойств.
Объединение ячеек задается с помощью атрибутов colspan и rowspan тега td>. Атрибут colspan задает объединение ячеек по горизонтали, а атрибут rowspan — по вертикали. Количество объединяемых ячеек задается в качестве значения этих атрибутов.
<<Назад| На главную | Вперед >>
МОУ «Гимназия № 6» г. Воркуты
E-mail: gimnaziya6@mail.ru
(С) Янактаев Евгений Владимирович, 2009
E-mail: teacher.g6@mail.ru
Сайт создан в системе uCoz