...
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.
В этой статье мы поговорим о создании таблиц в HTML. Создать таблицу в HTML можно абсолютно любую по размерам и формы: какое кочешь столбцов и строк, а также различное оформление. Они очень полезны при создании страниц сайта, когда он имеет табличную структуру.
Например твой сайт состоит из трех столбцов и двух строк. Первую строку из 3 столбцов мы можем объеденить в одну общую, где разместим название нашего сайта и логотип, во второй строке в первом столбце мы можем разместить левое меню, во втором столбце текст сайта или же текст определенной страницы, ну а в последнем столбце правое меню. Не запутался? :) Да вот простой пример: эта страница, которую ты сейчас читаешь. Она тоже сделана именно по такому принципу. Думаю, лучше перейти к практике, и на примерах наглядно увидеть, как это все реализовать.
Чтобы создать таблицу, нам сперва потребуюся теги
, для создания строк нужны теги и
, которые пишутся между тегами TABLE, ну а столбы создаются тегами и | , и как вы уже поняли - помещаются между тегами TR.
Давайте создадим простую таблицу, которая состоит из 3 столбцов. HTML-код таблицы:
Столбец 1 |
Столбец 2 |
Столбец 3 |
На странице в браузере таблица будет выглядеть вот так:
По умолчанию браузер выводит таблицу с рамкой. Чтобы скрыть рамку таблицы, вам понядобится атрибут тега TABLE border. Пример таблицы без рамки:
Столбец 1 |
Столбец 2 |
Столбец 3 |
На странице мы увидем нашу таблицу без рамки:
Атрибут border изменяет вечиличину лишь внешней рамки нашей таблицы. Значение 0 как вы поняли делает её невидимой, а значение от 1 до 10 задает её толщину. Примедем пример таблицы с рамкой 6:
Столбец 1 |
Столбец 2 |
Столбец 3 |
На выходе страницы получим такую таблицу:
При помощи атрибута bordercolor можно задать цвет нашей рамки в таблице. На HTML примере покажу таблицу с зеленой рамкой и толщиной 4:
Столбец 1 |
Столбец 2 |
Столбец 3 |
Получим вот что:
Как видите, между ячейками существует небольшое расстояние. Чтобы от него избавится, или наоборот, увеличить расстояние нам поможет атрибут таблицы cellspacing. HTML пример увеличения расстройния между ячейками в таблице:
Столбец 1 |
Столбец 2 |
Столбец 3 |
Наш браузер выведет такую таблицу:
Для изменения отсутпов между текстом и границей ячейки, используйте атрибут таблицы cellpadding. HTML-код атрибута cellpadding на примере:
Полученная таблица в браузере:
Для объединения ячеек в таблицы, применяются атрибуты тега TD:
- colspan — объединение ячеек по горизонтали;
- rowspan — объединение ячеек по вертикали.
Довольно сложно представить, поэтому приведу простой пример HTML-код:
Ячейка 1 |
Ячейка 2 |
Ячейка 3 |
Ячейка 4 |
В браузере получим такую таблицу:
C ячейками попробуй сам по такому же принципу. Выравнивать ттаблицу а также текст в ячейчах можно при помощи атрибута align. Значения могут быть знакомые нам: center (по центру), left (по левому краю) и right (по правому краю). Давай выравним таблицу по правому краю:
Столбец 1 |
Столбец 2 |
Столбец 3 |
В бразуере:
Ячейка 1
|
Ячейка 2
|
Ячейка 3
|
Чтобы выранивать содержимое ячеек по вертикали, нам понадобится атрибут для ячейки valign. Приведу его значения:
- baseline — по базовой линии;
- bottom — по нижнему краю;
- middle — по середине (значение по умолчанию);
- top — по верхнему краю.
Попробуйте сделать пример HTML-кода сами, мне кажется на данном этапе урока данное задание полезно:)
Далее, рассказывая про атрибуты таблицы, можно вспомнить атрибут bgcolor. Он задает цвет фона таблицы или ячейки. Если вы хотите вставить рисунок на фон таблицы или ячейки, используйте атрибут background, в значение которого пишите путь до картинки
Кстате, в таблицу можно вставить не только текст или картинку, но и другую таблицу, что делает использование таблиц очень полезным оружием для решения самых сложных задач. НКак я уже говорил, данная таблица сделана именно табличным методом.
Думаю, данная статья вам поможет чтобы создать свою первую таблицу или даже первую страницу сайта, и на этом статья о создании таблиц в HTML закончена. далее мы поговорим о META тегах, что не менее важно, чем таблицы.
Дата публикации: 15 мая, 2012
Здравствуйте, уважаемые читатели блога! Частенько на web-страницы, кроме текста и картинок, возникает необходимость вывести различные данные в виде таблиц. Да это и понятно, таблица — удобнейший способ представления большого количества сведений. Поэтому возникает вопрос «Как же вставлять таблицы в html?»
. В этой статье я отвечу вам на этот вопрос и приведу вам множество примеров различных html таблиц.
Как создать таблицу используя HTML
HTML-таблицы создаются в четыре шага.
1. На первом шаге в html-коде с помощью парного тега
указываем браузеру, что в web-страницу вставлена таблица: . Элемент table является блочным элементом web-страницы. Следовательно таблица всегда выводится с новой строки с отступами по вертикали от соседних элементов, поэтому нет необходимости помещать ее в абзац.
2. На втором шаге формируем строки
таблицы, помещая парные теги
внутрь . Каждый элемент создает отдельную строку:
3. Далее, на третьем шаге формируем ячейки
таблицы с помощью парных тегов
и |
, которые помещаются внутрь элемента |
. Тег создает обычную
ячейку, а | ячейку заголовка
, т.е. шапку соответствующего столбца:
4. Ну и на последнем шаге помещаем внутрь элементов | и |
содержимое ячеек. HTML-код вставки таблицы на веб-страницу выглядит примерно так:
Столбец 1 | Столбец 2 | Столбец 3 |
---|
Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
Более тонко настроить отображение границ помогут . С помощью можно изменить толщину и цвет рамок, а также изменить тип границ.
Текст, который необходимо поместить внутрь ячеек, заключать в необязательно, но, если текст большой, его можно разбить на абзацы, применив тег
Если понадобиться как-то оформить вставляемый текст, то можно использовать .
Кроме текста мы можем помещать в ячейки картинки с помощью тега :
|
В качестве содержимого ячейки может даже выступать другая таблица. В этом случае создание вложенной таблицы ничем не отличается от создания обычной таблицы. Просто между тегами
и | вставляются теги , и в нее вставляются строки и ячейки.
При создании таблиц необходимо учитывать некоторые правила:
- для создания таблицы используется только тег
;
- тег
может находиться только внутри тега ;
- теги
и | могут находиться только внутри тега | , любое другое содержимое тега
игнорируется браузером;
- содержимое таблицы(текст или картинки) может находиться только в тегах
и | ;
- ячейки таблицы должны иметь хоть какое-то содержимое, иначе браузер может их вообще не отобразить, если же какая-то ячейка должна быть пустой, то в нее обычно помещают неразрывный пробел (HTML-литерал);
- таблица относится к блочным элементам web-страницы;
- размеры таблицы и ее ячеек зависят от содержимого, т.е. таблица растягивается по ширине и высоте так, чтобы все уместилось;
- между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ;
- текст ячеек заголовка(элемент th) выводится полужирным шрифтом и выравнивается по центру;
- границы вокруг таблицы и ее ячеек по умолчанию не рисуются.
Заголовок таблицы
Начнем с парного тега ,
который задает таблице заголовок. Текст заголовка помещается внутрь этого тега, а тот должен находится внутри тега . Причем без разницы в каком месте html-кода таблицы поместить тег , браузер все равно отобразит заголовок над таблицей и выровняет по ее центру. Но обычно тег помещают сразу после открывающего тега :
Это таблица
Ячейка 1.1 | Ячейка 1.2 |
Ячейка 2.1 | Ячейка 2.2 |
Отображение:
Секции таблицы
Таблицу html можно логически разбить на части — секции. Всего существует три вида секций:
- секция заголовка
, в которую помещают ячейки заголовка, которые формируют шапку таблицы;
- секция тела
, в которой располагают ячейки с основными данными;
- секция завершения
, в которую помещают ячейки с итоговыми данными.
Секция заголовка таблицы формируется с помощью парного тега . Причем допустимо использовать не более одного элемента в пределах одной таблицы, и он должен идти в html коде сразу после тега .
Секцию тела создают парным тегом . Одна html таблица может содержать несколько секций тела, что позволяет создавать структурные блоки к которым могут применяться единые стили оформления.
Секция завершения формируется парным тегом и в пределах одного контейнера может быть только одна.
Все эти парные теги должны содержать теги , которые формируют строки, относящиеся к соответствующим секциям:
Столбец 1 | Столбец 2 | Столбец 3 |
Ячейка 1.1 | Ячейка 1.2 | Ячейка 1.3 |
Ячейка 2.1 | Ячейка 2.2 | Ячейка 2.3 |
Итог 1 | Итог 2 | Итог 3 |
Объединение ячеек таблицы
Осталось рассказать о самой важной возможности таблиц — объединении ячеек.
Для объединения нескольких ячеек в одну используются атрибуты colspan
и rowspan
тегов и | . Атрибут 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
|
При объединении ячеек важно проверить количество ячеек в каждой строке, чтобы не было ошибок. Так, конструкция | заменяет две ячейки, поэтому в следующей строке должно быть два тега | , либо такая же конструкция! Если число ячеек во всех строках не будет совпадать, то появятся пустые лишние ячейки.
Пример неправильного html-кода при объединении ячеек:
ячейка 1.1 | ячейка 1.2 |
ячейка 2.1 | ячейка 2.2 |
И результат отображения в браузере:
Т.е. если проанализировать html-код, то вы заметите, что в первой строке задано три ячейки, две из которых объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. По этому во второй строке возникает третья пустая ячейка.
Атрибуты тега
В этом посте мы уже столкнулись с одним атрибутом тега . С атрибутом border, который задает толщину рамки в пикселях. По умолчанию он равен 0 и следовательно ячейки по умолчанию отображаются без рамки.
Кроме атрибута border есть еще несколько важных атрибутов поддерживаемых тегом . Давайте их рассмотрим.
Атрибут align
— задает выравнивание
таблицы на странице. Может принимать значения left, center, right, которые задают выравнивание соответственно по левому краю, по центру и по правому краю. По умолчанию равен left.
Атрибут background
, который задает фоновый рисунок
к таблице. В качестве значения принимает адрес файла с изображением.
bgcolor
— устанавливает цвет фона
таблицы. Можно использовать совместно с атрибутом background.
Атрибут bordercolor
задает цвет рамки
таблицы.
Cellpadding
— определяет расстояние между границей ячейки и ее содержимым
. Позволяет улучшить читабельность таблицы. В качестве значения может быть любое положительное число.
Cellspacing
— задает расстояние между внешними границами ячеек
.
На этом рассказывать о том как вставить таблицу в html страницу
я закончу, только подведу итоги:
| |