1. Что такое HTML таблицы и зачем они нужны?
html таблицы - это один из самых основных составляющих каждой html странички и соответственно каждого сайта. Например, сайт сайт весь состоит из таблиц: картинки, тексты, ссылки, формы регистрации – все размещено относительно друг друга при помощи таблиц html (собственно, весь сайт также расположен в одной большой таблице).
Теги , задающие таблицу html пишутся так:
Но так как мы знаем, все таблицы состоят из строк и столбцов (ячеек), поэтому необходимо задать теги и для них:
А теперь давайте попробуем объединить все теги в одну таблицу. Для этого мы создадим html таблицу, которая состоит из двух строк и трех столбцов:
Делается такая html таблица очень легко. Для начала поставим теги самой таблицы, внутрь которых помещаем необходимое количество строк (в нашем примере 2 строки):
Затем каждую строку разбиваем на ячейки с помощью тегов столбцов:
| - ячейка 1.1 | - ячейка 1.2 | - ячейка 1.3 |
| - ячейка 2.1 | - ячейка 2.2 | - ячейка 2.3 |
На самом деле, первая цифра в надписях - это номер ряда, а вторая номер ячейки (1х2 - первый ряд, вторая ячейка и т.д.).
А сейчас давайте разберемся, как же задается фон таблицы или каждой ячейки отдельно.
Итак, для задания фона используется атрибут bgcolor="цвет_фона" .
Например, если нам необходимо задать один цвет для всей таблички, то делается это так:
| - ячейка 1.1 | - ячейка 1.2 | - ячейка 1.3 |
| - ячейка 2.1 | - ячейка 2.2 | - ячейка 2.3 |
Например, если необходимо сделать табличку желтого цвета, то мы пишем:
Если нужно задать фоновый цвет ряду html таблицы, то тогда атрибут bgcolor="цвет_фона" применяем к тегу
|
| 1.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.3 |
В этом случае, атрибут номер ячейки задает белый цвет тексту, расположенному внутри тега.
Точно так же задается и цвет каждой ячейки отдельно . Например, если нужно изменить цвет ячейки 1.2 на синий, то внутри открывающего тега
Итак, для того, что бы вручную установить ширину и высоту ячеек, используют атрибуты height и width. Их можно задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).
height - атрибут, устанавливающий высоту ячейки
width - атрибут, задающий ширину ячейки
А теперь на примере:
Теперь объясню, почему мы задали высоту ячеек только один раз в каждой строке.
Если в ряду Вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей. А ширину каждого ряда лучше всего задавать отдельно!
Вы можете задать высоту и ширину для всей таблицы. В этом случае все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им данные параметры персонально (в процентах от общей ширины (высоты) таблицы или пикселях).
Так же, очень часто приходится задавать высоту height и ширину width в процентах :
Если мы задаем для ячейки ширину в 40 процентов, как в нашем примере, то это значит, что на остальные ячейки у нас осталось еще 60 процентов, т.е. сумма их ширин не должна превышать 60 процентов. Все очень просто: в сумме мы имеем всего 100%. Считаем: 100 – 40 = 60.
А теперь давайте разберемся, как выровнять текст в нашей html таблице по левому краю, по правому краю и по центру.
Делается это с помощью атрибута:
align=”left” - выравнивает текст внутри html таблицы по левому краю
align=”center” - выравнивает текст html таблицы по центру
align=”right” - выравнивает текст внутри html таблицы по правому краю
Соответственно, атрибут align может принимать еще значения right и left. Значение justify при употреблении с тэгом
Например, код html таблицы, текст которой выровнен по центру, выглядит так:
|
Прописав атрибут align="center" в открытии
| 1x1 | 1.2 | 1x3 |
| 2.1 | 2x2 | 2.3 |
А теперь рассмотрим на примере, как выровнять текст внутри html таблицы по верхнему или по нижнему краю, то есть, как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу.
Вертикальное выравнивание задается атрибутом:
valign="top" - содержание будет располагаться вверху ячейки
valign="middle" - содержание будет располагаться по центру ячейки
valign="bottom" - содержание будет располагаться внизу ячейки
Давайте рассмотрим данные атрибуты на нашем примере:
|
Вот что мы получим, если посмотрим в браузере результат работы атрибутов align и valign :
| 1x1 | 1.2 | 1x3 |
| 2.1 | 2x2 | 2.3 |
В этой части нашей статьи мы поговорим об атрибутах colspan и rowspan .
colspan - определяет количество столбцов, на которые распространяется данная ячейка
rowspan - определяет количество рядов на которые распространяется данная ячейка
Значения colspan и rowspan могут принимать значение от 2 и больше, т.е. ячейка может растягиваться на два и более столбца (ряда).
Итак, сейчас на примере мы растянем ячейку 1х1 на два столбца (ячейки). Для этого мы будем использовать атрибут colspan="2", прописав его для ячейки 1х1. Код будет выглядеть так:
Как видим, ячейка 1х1 распространяется на длину двух ячеек. Соответственно, ее длина равняется суммированной длине этих двух ячеек (160 пикселей). Мы не прописали атрибут width для ячейки 1x1, но если бы мы решили это сделать, то width мы задали бы равным 160 пикселям. И еще, обратите внимание, что в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, почему – мы уже это обсудили – ячейка 1х1 равна двум ячейкам, благодаря атрибуту colspan.
С атрибутами colspan и rowspan необходимо обращаться очень аккуратно. Ошибка может привести к тому, что ваш сайт «поедет».
А теперь, когда мы разобрались с параметром colspan , давайте разберемся с параметром rowspan. Принцип действия тут тот же:
|
| 1.1 | 1.2 | |
| 2.1 | 2.2 | |
Таким образом, мы научились объединять ячейки в строках и столбцах html таблиц.
Итак, ранее мы создали html таблицу, между ячейками которой четко видны отступы. Чтобы их стало видно еще лучше, давайте добавим рамку для нашей таблицы. Делается это с помощью атрибутов:
border="ширина рамки в пикселях" - устанавливает ширину рамки
bordercolor="цвет рамки" - устанавливает цвет рамки
Давайте, например, сделаем нашей html таблице рамку черного цвета шириной 1 пиксель.
Для этого тегу
|
|||||
Если посмотреть на результат в браузере, то мы четко видим, что расстояние между ячейками (cellspacing ) нашей html таблицы увеличилось до 10 пикселей, а расстояние между текстом и внутренним краем ячейки увеличилось на 20 пикселей.
| 1.1 | 1.2 | |
| 2.1 | 2.2 | |
Если же необходимо вообще убрать отступы, то просто напросто поставьте cellpadding="0" и cellspacing="0" .
Мы подходим к завершающему этапу по изучению html таблиц. Сейчас мы научимся вставлять одну таблицу внутрь другой.
На примере, внутрь ячейки 1.2 мы вставим новую таблицу, состоящую из одного ряда и двух столбцов. Внутренней html таблице мы установим красную рамку шириной 2 пикселя и расстояние между ячейками 0 пикселей. Также, внутреннюю таблицу мы разместим вверху ячейки.
Делается это очень просто:
|
|||||||
Вот что получилось в результате новых преобразований нашей таблицы (красные ячейки - внутренняя таблица, находящаяся внутри большой таблицы):
| 1.1 |
|
|||
| 2.1 | 2.2 | |||
На этом этапе данную статью мы закончим. Думаю она получилась удачной и не сложной для понимания, и надеюсь, больше с таблицами у Вас проблем не будет.
Здравствуйте, уважаемые читатели блога! Частенько на web-страницы, кроме текста и картинок, возникает необходимость вывести различные данные в виде таблиц. Да это и понятно, таблица — удобнейший способ представления большого количества сведений. Поэтому возникает вопрос «Как же вставлять таблицы в html?» . В этой статье я отвечу вам на этот вопрос и приведу вам множество примеров различных html таблиц.
HTML-таблицы создаются в четыре шага.
1. На первом шаге в html-коде с помощью парного тега 2. На втором шаге формируем строки
таблицы, помещая парные теги 3. Далее, на третьем шаге формируем ячейки
таблицы с помощью парных тегов 4. Ну и на последнем шаге помещаем внутрь элементов Более тонко настроить отображение границ помогут . С помощью можно изменить толщину и цвет рамок, а также изменить тип границ. Текст, который необходимо поместить внутрь ячеек, заключать в необязательно, но, если текст большой, его можно разбить на абзацы, применив тег Если понадобиться как-то оформить вставляемый текст, то можно использовать . Кроме текста мы можем помещать в ячейки картинки с помощью тега В качестве содержимого ячейки может даже выступать другая таблица. В этом случае создание вложенной таблицы ничем не отличается от создания обычной таблицы. Просто между тегами При создании таблиц необходимо учитывать некоторые правила: Начнем с парного тега Отображение: Таблицу html можно логически разбить на части — секции. Всего существует три вида секций: Секция заголовка таблицы формируется с помощью парного тега . Причем допустимо использовать не более одного элемента в пределах одной таблицы, и он должен идти в html коде сразу после тега Секцию тела создают парным тегом Секция завершения формируется парным тегом Все эти парные теги должны содержать теги Осталось рассказать о самой важной возможности таблиц — объединении ячеек.
Для объединения нескольких ячеек в одну используются атрибуты colspan
и rowspan
тегов Результат примера: При объединении ячеек важно проверить количество ячеек в каждой строке, чтобы не было ошибок. Так, конструкция Пример неправильного html-кода при объединении ячеек: И результат отображения в браузере: Т.е. если проанализировать html-код, то вы заметите, что в первой строке задано три ячейки, две из которых объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. По этому во второй строке возникает третья пустая ячейка. В этом посте мы уже столкнулись с одним атрибутом тега Кроме атрибута border есть еще несколько важных атрибутов поддерживаемых тегом Атрибут align
— задает выравнивание
таблицы на странице. Может принимать значения left, center, right, которые задают выравнивание соответственно по левому краю, по центру и по правому краю. По умолчанию равен left. Атрибут background
, который задает фоновый рисунок
к таблице. В качестве значения принимает адрес файла с изображением. bgcolor
— устанавливает цвет фона
таблицы. Можно использовать совместно с атрибутом background. Атрибут bordercolor
задает цвет рамки
таблицы. Cellpadding
— определяет расстояние между границей ячейки и ее содержимым
. Позволяет улучшить читабельность таблицы. В качестве значения может быть любое положительное число. Cellspacing
— задает расстояние между внешними границами ячеек
. На этом рассказывать о том как вставить таблицу в html страницу
я закончу, только подведу итоги: На этом все, в следующем посте я расскажу о средствах навигации на html-сайте. Чтобы не пропустить этот пост подписывайтесь на обновления моего блога ! Все, до новых встреч! Создать таблицу и указать её параметры (поля и расстояние между ячейками) через стили. Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Для добавления таблицы на веб-страницу используется тег Пример 1. Создание таблицы HTML5
IE
Cr
Op
Sa
Fx
Порядок расположения ячеек и их вид показан на рис. 1. Рис. 1. Результат создания таблицы с четырьмя ячейками Атрибут border
тега Для управления полями внутри ячеек используется стилевое свойство padding
, которое добавляется к селектору td
. Расстояние между ячейками меняется свойством border-spacing
(пример 2) добавляемым к селектору table
, браузер IE понимает его только с версии 8.0. Пример 2. Поля внутри ячеек HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Таблица с полями и расстоянием между ячейками показана на рис. 2. Аналогичного результата можно добиться и с помощью рамки белого цвета вокруг ячеек. Рис. 2. Поля в ячейках таблицы Атрибуты: width
- ширина таблицы в пикселях или в % относительно ширины окна браузера. height
- высота таблицы в пикселях или в % относительно ширины окна браузера (высота обычно рассчитывается автоматически, поэтому менять ее не рекомендуют). align
- выравнивание таблицы. left
- выравнивание таблицы по левому краю. right
- выравнивание таблицы по правому краю. center
- выравнивание таблицы по центру. border
- толщина рамки таблицы в пикселях. cellspacing
- расстояние между смежными ячейками в пикселях (по умолчанию = 2). cellpadding
- расстояние между содержимым ячейки и ее границей в пикселях (по умолчанию =1). bgcolor
- фоновый цвет таблицы. background
- фоновое изображение для таблицы. bordercolor
- цвет всех линий рамки таблицы. Контейнер Контейнер Контейнер Атрибуты width
- ширина ячейки в пикселях или в % относительно ширины окна браузера (для height
- высота ячейки в пикселях или в % относительно ширины окна браузера (для align
- выравнивание в ячейке. left
- выравнивание в ячейке по левому краю. right
- выравнивание в ячейке по правому краю. center
- выравнивание в ячейке по центру. valign
- вертикальное выравнивание содержимого ячейки. top
- выравнивание по верхнему краю ячейки. bottom
- выравнивание по нижнему краю ячейки. middle
- выравнивание по середине ячейки. bgcolor
- фоновый цвет ячейки. background
- фоновое изображение для ячейки. bordercolor
- цвет всех линий рамки ячейки. colspan
- количество объединяемых ячеек по столбцам (для rowspan
- количество объединяемых ячеек по строкам (для Такой код: Даст такой результат.
указываем браузеру, что в web-страницу вставлена таблица:
. Элемент table является блочным элементом web-страницы. Следовательно таблица всегда выводится с новой строки с отступами по вертикали от соседних элементов, поэтому нет необходимости помещать ее в абзац.
внутрь . Каждый элемент
создает отдельную строку:
и
, которые помещаются внутрь элемента . Тег создает обычную
ячейку, а ячейку заголовка
, т.е. шапку соответствующего столбца:
и содержимое ячеек. HTML-код вставки таблицы на веб-страницу выглядит примерно так:
Столбец 1 Столбец 2 Столбец 3
Ячейка 1-1 Ячейка 1-2 Ячейка 1-3
Ячейка 2-1 Ячейка 2-2 Ячейка 2-3
:
и вставляются теги и
, и в нее вставляются строки и ячейки.
;
может находиться только внутри тега ;
и могут находиться только внутри тега , любое другое содержимое тега игнорируется браузером;
и ;
Заголовок таблицы
. Причем без разницы в каком месте html-кода таблицы поместить тег
:
Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2
Секции таблицы
.
может быть только одна.
, которые формируют строки, относящиеся к соответствующим секциям:
Столбец 1 Столбец 2 Столбец 3
Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
Итог 1 Итог 2 Итог 3
Объединение ячеек таблицы
и . Атрибут colspan задает количество ячеек объединенных по горизонтали, а rowspan — по вертикали:
1.1 1.2-1.3
2.1 2.2 2.3
3.1-4.1 3.2 3.3
4.2 4.3
1.1
1.2-1.3
2.1
2.2
2.3
3.1-4.1
3.2
3.3
4.2
4.3
заменяет две ячейки, поэтому в следующей строке должно быть два тега , либо такая же конструкция! Если число ячеек во всех строках не будет совпадать, то появятся пустые лишние ячейки.
ячейка 1.1 ячейка 1.2
ячейка 2.1 ячейка 2.2
Атрибуты тега
. С атрибутом border, который задает толщину рамки в пикселях. По умолчанию он равен 0 и следовательно ячейки по умолчанию отображаются без рамки.
. Давайте их рассмотрим.
— обозначение таблицы,
— добавление строки и — вставка ячейки;
colspan и rowspan.
Задача
Решение
. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов
и
. Таблица должна содержать хотя бы одну ячейку (пример 1). Допускается вместо тега
использовать тег
. Текст в ячейке, оформленной с помощью тега
, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги
и
нет.
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
допустимо добавлять только с пустым значением (
) или равным 1. Все остальные значения не проходят валидацию.
Заголовок 1 Заголовок 2 Ячейка 3 Ячейка 4 
служит для создания строки таблицы. служит для создания заголовок для столбца таблицы. служит для создания ячейки таблицы. не применяется). не применяется). не применяется). не применяется).
Заг 1
Заг 2
Заг 3
1
2
3
4
5
6
Статьи по теме:
Способы загрузки ос с флешки
Как сделать на ноутбуке подсветку клавиатуры
Создание MIDI мелодии в программе Anvil Studio
Hover-эффекты для изображений на чистом CSS3 Выезжающая иконка как на CoolWebMasters
Варианты переноса строк Как перейти на строчку ниже на клавиатуре
Новое:
Популярное:
