имеет
следующие основные необязательные параметры: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 можно абсолютно любую по размерам и формы: какое кочешь столбцов и строк, а также различное оформление. Они очень полезны при создании страниц сайта, когда он имеет табличную структуру.
Например твой сайт состоит из трех столбцов и двух строк. Первую строку из 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
HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTML
Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Тег
Краткое описание
|
|
Комментарий.
|
|
|
Определяет тип документа.
|
|
|
Ссылка, гиперссылка, якорь.
|
|
|
Определяет текст как аббревиатуру.
|
|
|
Контактная информация автора или владельца документа.
|
|
|
Определяет область на карте-изображении
|
|
|
Статья
|
|
|
Контент в стороне (содержимое не является основным на странице по смыслу)
|
|
|
Позволяет вставить воспроизводимый аудио файл.
|
|
|
Полужирный текст.
|
|
|
Задает базовый URL или аттрибут target для относительных ссылок в документе.
|
|
|
Область, где написание текста может имееть другое направления.
|
|
|
Устанавливает направление написания текста. В отличии от направление указывается физическое направление
|
|
|
Цитата.
|
|
|
Указывает область body документа.
|
|
Перенос строки.
|
|
|
Кликабельная кнопка
|
|
|
Используется для рисовании графики с помощью скриптов
|
|
|
Подпись таблицы.
|
|
|
Сноска на название материала.
|
|
|
Используется для вставки компьютерного кода в текстовом виде.
|
|
|
Задает характеристики колонок в таблице.
|
|
|
Определяет группу из одной или более колонок таблицы для форматирования.
|
|
|
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле
|
|
|
Определяет описание термина из тега в списке терминов
|
|
|
Текст, который удален в новой версии документа.
|
|
|
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть
|
|
|
Указывает, что содержимое является термином.
|
|
|
Определяет диалоговое окно или интерактивный элемент
|
|
|
Блочный элемент - один из основных элементов верстки.
|
|
|
Определяет список определений
|
|
|
Название термина в списке определений
|
|
|
выделенный по смыслу текст (обычно, текст выделенный курсивом).
|
|
|
Контейнер для внешнего приложения
|
|
|
Группа связанных элементов в форме
|
|
|
Заголовок для элемента
|
|
|
Определяет автономную группу из нескольких элементов (например картинка с подписью)
|
|
|
Нижний колонтитул
|
|
|
Определяет форму пользовательского ввода
|
| -
|
Заголовки HTML разного уровня: , , , , , .
|
|
|
Указывает область head документа.
|
|
|
Блок заголовка
|
|
|
Горизонтальная линия - тематический разделитель.
|
|
|
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом.
|
|
|
Выделяет текст курсивом.
|
|
|
Определяет встроенный фрейм
|
![]()
|
Изображение, картинка.
|
|
|
Поле для ввода
|
|
|
Текст, который был добавлен в новой версии документа.
|
|
|
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом.
|
|
|
Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода.
|
|
|
Заголовок элементов
|
|
|
Элемент списка
|
|
|
Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS)
|
|
|
Основной контент
|
|
|
Контейнер для . Определяет пользовательскую карту на изображении
|
|
|
Выделенный текст (обычно с помощью подсветки фона).
|
|
|
Контейнер для списка пунктов меню
|
|
|
Определяет элементы, которые пользователь может вызвать из контекстного меню
|
|
|
Используется для определения мета-данных документа.
|
|
|
Измеритель значений в заданном диапазоне
|
|
|
Контейнер для навигационных элементов
|
|
|
Альтернативный контент для пользователей, отключивших скрипты
|
|
|
Определяет встроенный объект
|
|
|
Определяет нумерованный список
|
|
|
Определяет группу связанных вариантов в выпадающем списке. Дает название группу
|
|
|
Параметр (вариант выбора) в выпадающем списке
|
|
|
Результат вычислений
|
|
Абзац.
|
|
|
Задает параметры для встроенных объектов
|
|
|
Контейнер для нескольких изображений
|
|
|
Предварительно отформатированный текст.
|
|
|
Индикатор выполнения (прогресса)
|
|
|
Цитата в тексте.
|
|
|
Альтернативный текст, если браузер не поддерживает тег .
|
|
|
Аннотация к содержимому тега .
|
|
|
Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов).
|
|
|
Перечеркнутый текст.
|
|
|
Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом).
|
|
|
Определяет скрипт или подключение скрипта из внешнего ресурса.
|
|
|
Раздел
|
|
|
Определяет выпадающий список
|
|
|
Текст шрифтом меньшего размера.
|
|
|
Определяет ресурс для тегов , и .
|
|
|
Строчный элемент.
|
|
|
Текст, выделенный по значению. Обычно отображается полужирным.
|
|
|
Определяет контейнер для определения стилей документа
|
|
|
Отображает текст в виде нижнего индекса.
|
|
|
Заголовок внутри тега
|
|
|
Отображает текст в виде верхнего индекса.
|
| Определяет таблицу.
|
|
|
Определяет область контента в таблице.
|
|
|
Ячейка в таблице .
|
|
Многострочное поле для ввода
|
|
|
Определяет группу строк в нижней части таблицы - нижний колонтитул. Подробнее
|
|
Место, где допускается перенос строки.
|
Устаревшие теги HTML
Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.
Тег
Краткое описание
|
|
Акроним. Используйте тег вместо него
|
|
|
Встроенный апплет. Используйте или вместо него.
|
|
|
Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него
|
|
|
Текст большего размера. Используйте вместо него
|
|
|
Отцентрованный текст. Используйте вместо него
|
|
|
Список директорий. Используйте |
|
|
Определяет цвет, размер и семейство шрифта. Используйте вместо него
|
|
|
Фрейм внутри . Используйте вместо него
|
|
|
Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько элементов
|
|
|
Альтернативный текст, если фреймы не поддерживаются
|
|
|
Перечеркнутый текст. Используйте или вместо него
|
|
|
Моноширный текст. Используйте вместо него
|
|
|
Подчеркнутый текст. Используйте вместо него
|
HTML-теги
— основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.
Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.
Все HTML-элементы делятся на пять типов:
- пустые элементы
— , ,
, , , , ![]() , ,
|
|
Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию.
|
|
|
Индикатор измерения в заданном диапазоне.
|
|
|
Раздел документа, содержащий навигационные ссылки по сайту.
|
|
|
Определяет секцию, не поддерживающую сценарий (скрипт).
|
|
|
Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег .
|
|
|
Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
|
|
|
Контейнер с заголовком для группы элементов .
|
|
|
Определяет вариант/опцию для выбора в раскрывающемся списке , или .
|
|
|
Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
|
|
|
Параграфы в тексте.
|
|
|
Определяет параметры для плагинов, встраиваемых с помощью элемента .
|
|
|
Элемент-контейнер, содержащий один элемент ![]() и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
|
|
|
Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
|
|
|
Индикатор выполнения задачи любого рода.
|
|
|
Определяет краткую цитату.
|
|
|
Контейнер для Восточно-Азиатских символов и их расшифровки.
|
|
|
Определяет вложенный в него текст как базовый компонент аннотации.
|
|
|
Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом.
|
|
|
Отмечает вложенный в него текст как дополнительную аннотацию.
|
|
|
Выводит альтернативный текст в случае если браузер не поддерживает элемент .
|
|
|
Отображает текст, не являющийся актуальным, перечеркнутым.
|
|
|
Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
|
|
|
Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src .
|
|
|
Определяет логическую область (раздел) страницы, обычно с заголовком.
|
|
|
Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в .
|
|
|
Отображает текст шрифтом меньшего размера.
|
|
|
Указывает местоположение и тип альтернативных медиаресурсов для элементов , , .
|
|
|
Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
|
|
|
Расставляет акценты в тексте, выделяя полужирным.
|
|
|
Подключает встраиваемые таблицы стилей.
|
|
|
Задает подстрочное написание символов, например, индекса элемента в химических формулах.
|
|
|
Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
|
|
|
Задает надстрочное написание символов.
|
| Тег для создания таблицы.
|
|
|
Определяет тело таблицы.
|
| |
|
Создает ячейку таблицы.
|
|
|
Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
|
|
|
Создает большие поля для ввода текста.
|
|
|
Определяет нижний колонтитул таблицы.
|
|
|
Создает заголовок ячейки таблицы.
|
|
|
Определяет заголовок таблицы.
|
|
|
Определяет дату/время.
|
|
|
Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
|
| |
| Создает строку таблицы.
|
|
|
Добавляет субтитры для элементов и .
|
|
|
Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
|
| |
Создает маркированный список.
|
|
|
Выделяет переменные из программ, отображая их курсивом.
|
|
|
Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
|
|
|
Указывает браузеру возможное место разрыва длинной строки.
|
Еще статьи из этой рубрики
|
| | |
