На прошлом уроке мы с Вами создали файл главной страницы сайта index.html, открыли его блокнотом и добавили в него HTML код, содержащий обязательные html теги.

Кроме того, мы с Вами научились изменять цвет фона страницы с помощью изменения значения параметра bgcolor тега BODY.

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

Обратите внимание, что макет сайта, на самом деле, является таблицей .

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

На самом деле, существует два основных типа верстки страниц html сайтов – с помощью таблиц и с помощью CSS стилей.

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

В начальный период развития Интернет, в основном использовался табличный способ верстки страниц. Широкое использование таблиц при верстке html страниц было связано с тем, что таблицу можно создать с любым количеством столбцов и строк. Размеры таблицы очень просто меняются с помощью параметров.

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

Ну что же, продолжим нашу работу по . Откроем html справочник и найдем там описание тега TABLE. В самом начале описания тега, обратите внимание на замечание о том, что таблица с невидимой границей широко используется для верстки веб-страниц, о чем мы говорили выше.

Итак, таблица в коде веб страницы задается тегом

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

. Откроем файл нашей веб страницы index.html для редактирования блокнотом Notepad++. И откроем ее с помощью браузера, для того, чтобы просматривать на странице изменения. В самом начале этой статьи, мы с вами говорили о том, что макет сайта, который мы с Вами задумали, является таблицей. Причем, таблица макета сайта у нас будет состоять из трех строк (Heder, Контент и Footer) и двух столбцов (Меню и Контент). Для добавления таблицы с тремя строками и двумя столбцами, изменим наш код, добавив следующее: 1строка 1 столбец 1строка 2 столбец 2строка 1 столбец 2строка 2 столбец 3строка 1 столбец 3строка 2 столбец Чтобы в таблице задать рамку, используем параметр border. Толщина рамки таблицы задается в пикселах (px). Добавим в наш html код параметр border, со значением аргумента, равным 1px. То есть, толщина рамки таблицы у нас будет равна одному пикселу: 1строка 1 столбец 1строка 2 столбец 2строка 1 столбец 2строка 2 столбец 3строка 1 столбец 3строка 2 столбец Чтобы выровнять таблицу по центру окна браузера, используем параметр align, который может принимать три значения: left, center, right, понятно, что для выравнивания таблицы по центру окна браузера, значение аргумента параметра выравнивания, у нас должно быть равно: center. И давайте, здесь же, зададим ширину таблицы. Ширина таблицы задается параметром width. Значения, которые может принимать данный параметр, могут быть выражены целым числом в пикселах или в процентах от текущей ширины окна браузера. Добавим в наш код выравнивание и ширину таблицы, в результате, получим следующий код: 1строка 1 столбец 1строка 2 столбец 2строка 1 столбец 2строка 2 столбец 3строка 1 столбец 3строка 2 столбец Обновляем окно браузера страницы нашего сайта, чтобы посмотреть изменения, мы видим, что таблица выровнялась по центру окна и изменила свою ширину. Теперь давайте вернемся к рамке таблицы, мы в html коде мы задали ее равной 1 пикселу с помощью значения аргумента параметра border: border=”1”. Вновь обратиться к параметрам тега TABLE в html справочнике, здесь есть два параметра, которые влияют на внешний вид рамки. Первый параметр: cellspacing – задает расстояние между ячейками таблицы. Второй параметр: cellpadding – от значения аргумента данного параметра, зависит расстояние от рамки до содержимого ячейки. Чтобы сделать все расстояния и отступы минимальными, зададим значения аргументов выше приведенных параметров равными нулю. В результате html код таблицы, примет следующий вид: 1строка 1 столбец 1строка 2 столбец 2строка 1 столбец 2строка 2 столбец 3строка 1 столбец 3строка 2 столбец Как Вы помните, наша таблица должна иметь три строки, причем в первой строке должна быть одна ячейка, во второй строке две ячейки и в третьей строке, должна быть тоже одна ячейка. Если мы посмотрим на внешний вид таблицы, то увидим, что для приведения таблицы к нужному виду, нам достаточно объединить горизонтальные ячейки первой и третьей строки. Для того, чтобы это сделать, воспользуемся параметром colspan. Данный параметр используется в теге TD. Значение аргумента параметра colspan, указывает на количество объединяемых горизонтальных ячеек, в нашем случае это значение равно 2. Кроме добавления параметра colspan, давайте изменим надписи в ячейках таблицы, в соответствии с нашим макетом. После всех изменений, полный html код нашей страницы будет следующим: Header Меню сайта Контент Footer Сохраним наш код в блокноте и обновим файл index.html в браузере, чтобы посмотреть на изменения. Итак, Данный урок получился достаточно большим, поэтому работу над htmlтаблицей нашей страницы, давайте продолжим в следующем уроке. находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно. Каждый тег
создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки. Как сделать таблицу в html Приведем пример, html код: Пример таблицы Столбец 1 Столбец 2 Обратите внимание на ячейку	. Мы используем специальный атрибут colspan для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег		(заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td. Теперь рассмотрим подробно все атрибуты тега . Атрибуты и свойства тега К открывающему тегу можно прописывать различные атрибуты. 1. Свойство align="параметр" - задает выравнивание таблицы. Может принимать следующие значения: В разобранном выше примере мы выравнивали таблицу по центру align="center" . Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы . Таким образом, в разных ячейках выравнивание будет разное. Например , , , или cols - линия отображается между колонками none - все границы скрываются rows - граница рисуется между строками таблицы, созданными через тег 12. Свойство width="число" - задает ширину таблицы: либо в пикселях, либо в процентах. 13. Свойство class="имя_класса" - можно указать имя класса, которому принадлежит таблица. 14. Свойство style="стили" - стили можно задать индивидуально для каждой таблицы. Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге и доступны такие же параметры, что и для будут иерархично применены ко всем обязателен. TD – создает новую ячейку в ряду. Закрывающий тег обязателен. Давайте рассмотрим пример, чтобы лучше понять все выше сказанное: или строкам ... ... ... 2. Свойство background="URL" - задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения. Пример Пример таблицы Столбец 1 Столбец 2 Преобразуется на странице в следующее: В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif . Обратите внимание на то, что в теге мы добавили style="color:white;" . Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым. 3. Свойство bgcolor="цвет" - задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов) 4. Свойство border="число" - задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1" , что означает толщина рамки - 1 пиксель. 5. Свойство bordercolor="цвет" - задает цвет рамки. Если border="0" , то рамки не будет и цвет рамки не будет иметь смысла. 6. Свойство cellpadding="число" - отступ от рамки до содержимого ячейки в пикселях. 7. Свойство cellspacing="число" - расстояние между ячейками в пикселях. 8. Свойство cols="число" - число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы. 9. Свойство frame="параметр" - как отображать границы вокруг таблицы. Может принимать следующие значения: void - не отрисовывать границы border - граница вокруг таблицы above - граница по верхнему краю таблицы below - граница снизу таблицы hsides - добавить только горизонтальные границы (сверху и снизу таблицы) vsides - рисовать только вертикальные границы (слева и справа от таблицы) rhs - граница только на правой стороне таблицы lhs - граница только на левой стороне таблицы 10. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах. 11. Свойство rules="параметр" - где отображать границы между ячейками. Может принимать следующие значения: all - линия рисуется вокруг каждой ячейки таблицы groups - линия отображается между группами, которые образуются тегами . Атрибуты и свойства 1. Свойство align="параметр" - задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения: left - выравнивание по левому краю center - выравнивание по центру right - выравнивание по правому краю 2. Свойство background="URL" - задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения. 3. Свойство bgcolor="цвет" - задает цвет фона ячейки. 4. Свойство bordercolor="цвет" - задает цвет рамки ячейки. 5. Свойство char="буква" - задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char. 6. Свойство colspan="число" - задает число объединяемых горизонтальных ячеек. 7. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах %. 8. Свойство width="число" - задает ширину таблицы: либо в пикселях, либо в процентах %. 9. Свойство rowspan="число" - задает число объединяемых вертикальных ячеек. 10. Свойство valign="параметр" - выравнивание содержимого ячейки по вертикали. top - выравнивание содержимого ячейки по верхнему краю строки middle - выравнивание по середине bottom - выравнивание по нижнему краю baseline - выравнивание по базовой линии Примечание 1 Для тега . Параметры для одного тега внутри него Как сделать, чтобы границы ячеек в таблице не склеивались В случае использования border (граница ячеек) и нулевых отступов между ячейками, они все равно склеиваются и получается удвоенный border . Чтобы это избежать нужно прописать в стилях таблице border-collapse: collapse : ... Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку. Таблица - набор данных, распределенных по строкам и ячейкам. В большинстве ячеек размещаются табличные данные, остальные содержат заголовки для строк и столбцов, описывающие содержимое. Для создания таблицы в HTML-документе используется тег , он представляет собой контейнер, в котором находится все содержимое таблицы. Создание таблицы всегда начинается со строк, которые определяются с помощью тега , каждая строка, в свою очередь, состоит из ячеек. Тег может содержать в себе только теги для создания ячеек. В HTML существует два разных тега для создания ячеек, первым из них является , он создает обычные ячейки с данными. По умолчанию, содержимое тегов выравнивается по левому краю. Второй тег для создания ячеек - это тег , он позволяет определять ячейки, которые содержат заголовки для столбцов или строк, содержимое таких ячеек отображается жирным текстом и выравнивается по центру. Теги и могут включать в себя любые HTML-элементы, которые доступны для использования в теле документа. Первый заголовок Второй заголовок строка 1, ячейка 1 строка 1, ячейка 2 строка 2, ячейка 1 строка 2, ячейка 2 Попробовать » Таблица внутри таблицы В HTML есть возможность создания вложенных таблиц, то есть таких таблиц, которые расположены внутри других таблиц. Чтобы сделать вложенную таблицу надо код таблицы, которую требуется сделать вложенной, поместить внутрь любого тега . Для примера, возьмём уже созданную ранее нами таблицу и поместим этот код во вторую ячейку второй строки: Первый заголовок Второй заголовок строка 1, ячейка 1 строка 1, ячейка 2 строка 2, ячейка 1 строка 2, ячейка 2 Первый заголовок Второй заголовок строка 1, ячейка 1 строка 1, ячейка 2 строка 2, ячейка 1 строка 2, ячейка 2 То таблицы играют очень важную роль в создании невидимого каркаса для веб-страницы. А это поможет равномерно и красиво расположить текст, меню, картинки и т.д. Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы: Итак, как в HTML сделать простую таблицу ? Для постройки таблицы необходимо использовать три тега: TABLE – этот тег нужен для открытия таблицы. Это, своего рода, контейнер, в котором содержатся другие элементы. Вот загнул так, что без пончика не разобраться. Ничего, разберетесь, когда увидите пример. Закрывающий тег обязателен. Таблица состоит из ряда ряд 1 ряд 1 ряд 2 ряд 2 ряд 3 ряд 3 ячейка 1 ячейка 2 ячейка 1 ячейка 2 ячейка 1 ячейка 2 TR – создает новый ряд таблицы. Закрывающий тег ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 ряд 3 ячейка 1 ряд 3 ячейка 2 Вот результат: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 ряд 3 ячейка 1 ряд 3 ячейка 2 Давайте все объясню. Перед каждым созданием новой таблицы открывается тег . Дальше, размещаем в середине контейнера тег , что говорит о начале нового ряда. В этом ряду вставляем две ячейки с содержанием при помощи тега Закрываем ряд тегом . Открываем другой ряд тегом Закрываем ряд тегом . Открываем третий ряд тегом и вставляем в него снова две ячейки. Закрываем ряд тегом . Закрываем таблицу тегом ряд 1 ячейка1 ряд1 ячейка2 . Я думаю, разобрались? Если кто-то забыл, что такое атрибут border , который я использую вместе с тегом , напоминаю, что это толщина рамки. Если в border будет установлено значение «0» , тогда границы таблицы будут невидимые. Посмотрите парочку примеров созданных таблиц и можно идти дальше: ряд 1 ячейка 1 ряд 2 ячейка 1 Результат: Для того чтобы вставить картинку в таблицу, нужно владеть элементарными начальными знаниями о том, как вставляется изображение в HTML файл. Об этом я рассказываю в . Теперь, когда вы знаете основные нюансы об изображении в HTML, можно попробовать вставить картинку в таблицу. Это можно сделать следующим образом: в строку между тегами

ряд 1 ячейка 1

ряд 1 ячейка 2

Результат:

ряд 1 ячейка 1

ряд 1 ячейка 2

А как объединить ячейки в таблице?

Чтобы объединить ячейки в таблице, вам нужно использовать такие атрибуты:
COLSPAN – определяет количество столбцов.
По умолчанию значение 1.
ROWSPAN – определяет количество рядов.
По умолчанию значение 1.

объединяем ячейки в верхнем ряду с помощью атрибута colspan :

ряд 1 ячейка 1+2
ряд 2 ячейка 1	ряд 2 ячейка 2

Результат:

Как установить размер таблицы?

Чтобы задать высоту и ширину таблицы, воспользуйтесь такими атрибутами:

WIDTH – ширина таблицы. Размер задается в пикселях или в процентах.
HEIGHT – высота таблицы. Размер задается в пикселях или в процентах.

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Результат:

Выравнивание содержимого в таблице

Чтобы выровнять внутри таблицы содержимое (текст, картинки), можно воспользоваться такими атрибутами:

ALIGN – горизонтальное выравнивание содержимого в таблице.
К атрибуту ALIGN присваивается значения: left (по умолчанию) , center , right .
left - прижать содержимое к левой части;
center – установить по центру;
right - прижать содержимое к правой части

VALIGN – вертикальное выравнивание содержимого в таблице.
К атрибуту VALIGN присваивается значения: top , bottom , middle .
top – прижать содержимое к верху;
bottom – прижать содержимое к низу;
middle – установить содержимое посередине

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Результат:

Как сделать фон таблицы?

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

BGCOLOR – цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
BACKGROUND –фон в таблице заполняется рисунком.

Внимание: если вы ходите задать фон цветом или фоновым рисунком всей таблице, атрибуты нужно установить в теге

. А если только к определенной ячейке, тогда в тег

. Для лучшего понимания посмотрите пример: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Результат: Внимание: если картинка по размеру меньше за ячейку, тогда она будет повторяться, пока не заполнит ячейку до конца. Если картинка больше за ячейку, тогда фон картинки будет обрезан по размерам ячейки. И напоследок расскажу еще о двух полезных атрибутах . В случае, если вам вдруг захочется увеличить расстояние между всеми ячейками, помогут следующие атрибуты: CELLPADDING –расстояние между рамкой каждой ячейки html таблицы и содержимым в ней материалом. ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Результат: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 CELLSPACING –расстояние между границами соседних ячеек. ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Результат: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Фух, рассказал! Надеюсь, с задачей я справился и доступно объяснил все, что я знал про html таблицы . А вам, рекомендую хорошо закрепить материал. Попробуйте создать собственную таблицу, а лучше целый каркас для веб-страницы из таблицы html. Всего вам хорошего! Спасибо, что посетили мой блог Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления. Создание таблицы Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. Для добавления таблицы на веб-страницу используется тег . Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов и . Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега использовать тег . Текст в ячейке, оформленной с помощью тега , отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги и нет. Пример 12.1. Создание таблицы Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Порядок расположения ячеек и их вид показан на рис. 12.1. Какие клавиатуры для андроид лучше В Play Market среди... Моргает лампочка зарядки аккумулятора - почему так происходит →