В этой статье мы поговорим о создании таблиц в 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
находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно.
создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки.
Как сделать таблицу в html
. Мы используем специальный атрибут colspan
для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег
(заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.
Теперь рассмотрим подробно все атрибуты тега
.
Атрибуты и свойства тега
К открывающему тегу
можно прописывать различные атрибуты.
1. Свойство align="параметр"
- задает выравнивание таблицы. Может принимать следующие значения:
В разобранном выше примере мы выравнивали таблицу по центру align="center"
.
Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы
или строкам
. Таким образом, в разных ячейках выравнивание будет разное.
Например
...
...
...
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
- рисовать только вертикальные границы (слева и справа от таблицы)
10. Свойство height="число"
- задает высоту таблицы: либо в пикселях, либо в процентах.
11. Свойство rules="параметр"
- где отображать границы между ячейками. Может принимать следующие значения:
all
- линия рисуется вокруг каждой ячейки таблицы
groups
- линия отображается между группами, которые образуются тегами , , ,
или
cols
- линия отображается между колонками
none
- все границы скрываются
rows
- граница рисуется между строками таблицы, созданными через тег
12. Свойство width="число"
- задает ширину таблицы: либо в пикселях, либо в процентах.
13. Свойство class="имя_класса"
- можно указать имя класса, которому принадлежит таблица.
14. Свойство style="стили"
- стили можно задать индивидуально для каждой таблицы.
Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге
.
Атрибуты и свойства
и
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-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.
Все HTML-элементы делятся на пять типов:
пустые элементы
— , , , , , , , ,
Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию.
Индикатор измерения в заданном диапазоне.
Раздел документа, содержащий навигационные ссылки по сайту.
Определяет секцию, не поддерживающую сценарий (скрипт).
Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег .
Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
Контейнер с заголовком для группы элементов .
Определяет вариант/опцию для выбора в раскрывающемся списке , или .
Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
Параграфы в тексте.
Определяет параметры для плагинов, встраиваемых с помощью элемента .
Элемент-контейнер, содержащий один элемент и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
Индикатор выполнения задачи любого рода.
Определяет краткую цитату.
Контейнер для Восточно-Азиатских символов и их расшифровки.
Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом.
Отмечает вложенный в него текст как дополнительную аннотацию.
Выводит альтернативный текст в случае если браузер не поддерживает элемент .
Отображает текст, не являющийся актуальным, перечеркнутым.
Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src .
Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в .
Отображает текст шрифтом меньшего размера.
Указывает местоположение и тип альтернативных медиаресурсов для элементов , , .
Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
Расставляет акценты в тексте, выделяя полужирным.
Подключает встраиваемые таблицы стилей.
Задает подстрочное написание символов, например, индекса элемента в химических формулах.
Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
Задает надстрочное написание символов.
Тег для создания таблицы.
Определяет тело таблицы.
Создает ячейку таблицы.
Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
Создает строку таблицы.
Добавляет субтитры для элементов и .
Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
Создает маркированный список.
Выделяет переменные из программ, отображая их курсивом.
Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
имеет
следующие основные необязательные параметры:
align
="
left
|
center
|
right
"
Выполняет горизонтальное выравнивание
таблицы на странице документа. Если параметр align опускается при
определении таблицы, то таблица располагается по левому краю и ее обтекание
текстом не происходит (рис. 3.3, а). Если устанавливается значение align=left или right, то таблица
ориентируется по левому или правому краю с обтеканием текста (рис. 3.3, б).
Если же выравнивание выполняется по центру, то обтекание таблицы текстом не
происходит (рис. 3.3, в).
Рис. 3.3 Взаимное расположение таблицы и текста: а –
параметр align отсутствует; б –
параметр align=right; в – параметр align=center
background
="
URL
"
Данный параметр служит для задания
фонового изображения таблицы. Следует отметить, что изображение, указанное в
значении URL, не
масштабируется под высоту и ширину таблицы и будет отображена только
соответствующая часть изображения. Если изображение меньше по ширине и/или
высоте таблицы, то оно повторяется, заполняя соответственно всю ее площадь.
bgcolor
="цвет"
Устанавливает цвет фона таблицы. В
качестве значения данного параметра допустимо использовать как заданные
цветовые константы, типа red, green, blue и др., так и
шестнадцатиричные значения цветов в формате #RRGGBB, например,
...
соответствует
красному цвету фона таблицы. Часто цвет фона таблицы делают близким к цвету
фонового изображения, т.к. он отображается, пока фоновое изображение не
загрузится с сервера, либо в случаях ошибки загрузки фонового изображения.
border="толщина"
С помощью параметра border устанавливается
толщина рамки вокруг таблицы. По умолчанию border равен 0 и рамки
в таблице не рисуются.
Отображение таблиц без рамок бывает
весьма полезным при создании разметки HTML-страницы, когда
содержимое ячеек воспринимается пользователем как единый документ. Также это
полезно при создании многоколоночных текстов или списков в тексте и т.п.
Следует отметить, что параметр border устанавливает
толщину рамки только вокруг таблицы, но не вокруг ячеек. Например, при
определении значения border=10, приведет к следующему
визуальному эффекту (рис. 3.4).
Рис. 3.4. Таблицы с параметром border=10
cellpadding
="число"
Данный параметр определяет расстояние в
пикселах между границей ячейки и ее содержимым. По умолчанию значение параметра
равно 1. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем
самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая
тем самым его восприятие. Добавление же cellpadding позволяет улучшить
читабельность текста. При отсутствии границ особого значения этот атрибут не
имеет, но может помочь, когда требуется установить пустой промежуток между
ячейками.
cellspacing="число"
Задает расстояние в пикселах между
смежными ячейками таблицы (точнее между рамками ячеек) по горизонтали и
вертикали одновременно. При отсутствии рамки, данный параметр аналогичен по
действию параметру cellpadding. Если в таблице используется набор параметров
...
то
расстояния между ячейками будут отсутствовать и они сливаются, образуя единое
неразрывное пространство. Это свойство таблиц очень удобно, например, для
отображения графического меню, где в ячейках располагаются фрагменты единого
изображения, и, сливаясь вместе, они образуют естественное визуальное
восприятие такой информации в целом.
cols="число"
Атрибут cols задает количество столбцов
в таблице, помогая браузеру в подготовке к ее отображению. Без этого атрибута
таблица будет показана только после того, как все содержимое таблицы будет
загружено в браузер и проанализировано. Использование атрибута cols позволяет
несколько ускорить отображение содержимого таблицы.
frame="значение"
Определяет способ рисования рамки вокруг
таблицы. Данный параметр может принимать следующие значения:
void – без рамки;
border –
рисование рамки вокруг таблицы;
above – рисование рамки сверху таблицы;
below – рисование рамки снизу таблицы;
hsides – рисование рамки только сверху и
снизу таблицы;
vsides – рисование только вертикальных
границ;
rhs – рисование границы справа;
lhs – рисование границы слева.
По
умолчанию данный параметр имеет значение border.
rules="значение"
Сообщает браузеру, где отображать
границы между ячейками. При этом толщина внешней рамки таблицы устанавливается
с помощью атрибута border. По умолчанию рамка рисуется вокруг каждой ячейки,
образуя тем самым сетку; толщина таких линий составляет 1px.
Данный параметр может принимать
следующие значения:
all – линия рисуется вокруг каждой
ячейки таблицы;
groups – линия отображается между
группами, которые образуются тегами , ,
, или ;
cols – линия отображается между
колонками;
none – все границы скрываются;
rows – граница рисуется между строками
таблицы, созданных через тег
.
width="значение"
Параметр width определяет
желаемую ширину таблицы. По умолчанию браузеры вычисляют ширину и высоту таблиц
автоматически, исходя из содержимого ячеек. Принцип формирования ширины исходит
из того, что при чтении документа его удобно просматривать сверху вниз, не
выполняя дополнительный скроллинг по горизонтали документа. Таким образом,
браузеры пытаются установить ширину таблицы не превышающую ширину HTML-документа,
чтобы исключить горизонтальный скроллинг. Однако бывают ситуации, когда Web-разработчику
необходимо указать строго определенное значение ширины. Для этого можно
использовать параметр width, который определяет ширину таблицы в
пикселах, либо в процентах, например, так:
...
...
В
первом случае ширина будет установлена в 200 пикселов, во втором – она будет
масштабироваться по всей ширине документа. Соответственно при изменении ширины
документа, таблицы также будет менять свою ширину.
При использовании данного параметра
всегда следует помнить, что задается именно желаемая ширина таблицы. То есть,
если браузер не сможет уменьшить ширину до величины, указанной в width, то таблица
будет отображена более широкой. Например, если в ячейках таблицы находятся
изображения и их общая ширина больше ширины, указанной в width, то таблица
будет увеличена по ширине для корректного отображения всех данных.
HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTML
Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.
Тег
Краткое описание
Акроним. Используйте тег вместо него
Встроенный апплет. Используйте или вместо него.
Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него