Какой тег определяет таблицу. Основные html теги
В основе языка HTML лежит понятие «тэг» (англ.: tag -ярлычок, этикетка). Тэги заключаются в угловые скобки (< >) и образуют пары – контейнеры (открывающий тэг и закрывающий). Например, контейнером HTML документа является пара тэгов и . В web-странице включены контейнеры, отвечающие за заголовок документа (голова) и содержат дополнительную информацию, а также контейнеры, отвечающие за само содержание документа (тело). Они представлены на рисунке.
Итак HTML документ заключается в контейнер , заголовок в контейнер , а содержание документа в контейнере . Контейнер , расположенный в заголовке (контейнере ) содержит текст, отображающийся в верхней строке окна браузера. В контейнер заголовка также могут быть добавлены тэги, содержащие кодировку, ключевые слова web-страницы, а также код для подключения файлов каскадных таблиц стилей CSS, языка программирования jаvascript, VBScript и т.д.
Пример простейшей HTML странички, содержащей только основные тэги:
Название страничкиСодержание простейшей странички
Результат работы указанного кода изображен на рисунке.
Как видно из примера текст «Содержание простейшей странички» отображается обычным текстом. Для того чтобы произвести форматирование этого текста, необходимо использовать специальные тэги. Пример использования тэгов форматирования представлен на рисунке.
Для изменения шрифта, его цвета и размера используется тэг с параметрами “face”, “color” и “size”. Например для того чтобы задать шрифт “arial” красного цвета и 14 размера необходимо написать следующий код:
Форматируемтекст
Для выделения абзаца в тексте используется тэг
В контейнер которого как правило помещается каждый абзац текста. Для создания заголовка используются тэги , , , , , .
Для формирования списков в теле документа используются контейнеры , и . Причем тэг формирует нурмерованный список, тэг
- - маркированный список, а в тэгах
- помещаются элементы списка. Пример кода отображения списков, представленный в виде нумерованного и маркированного списков представлен на рисунке.
Для связи двух и более Web-страниц между собой используются гиперссылки, для создания которых используется тэг . Причем в тэгах гиперссылок используются дополнительные атрибуты, позволяющие либо перейти к другой web-странице, либо переместиться внутри данной страницы. Второй способ желательно использовать в большом документе, имеющем несколько смысловых разделов.
Пример использования гиперссылок представлен на рисунке.
При указании URL адреса другой страницы необходимо указывать либо полный абсолютный путь к странице «полный путь/папка/страница» либо относительный (относительно данной страницы) «папка/страница». Параметр “target” позволяет открыть web-страницу в новом или существующем окне браузера.
Для вставки изображения на web-страницу используется тэг с параметрами src (путь к изображению), width (ширина изображения), height (высота изображения), border (рамка вокруг рисунка). Пример кода вставки изображения:
Часто при создании Web-страниц необходимым является задание фонового цвета или фонового изображения. Для этого используются атрибуты тэга «bgcolor» или «background-image». Пример вставки фонового цвета:
Пример вставки фонового изображения:
Указанные атрибуты могут быть использованы не только для тэга , но и для тэгов таблицы , области и других, которые будут рассмотрены в следующих темах.
HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTMLНиже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Тег Краткое описание Комментарий. Определяет тип документа. Ссылка, гиперссылка, якорь. Определяет текст как аббревиатуру. Контактная информация автора или владельца документа. Определяет область на карте-изображении Статья Контент в стороне (содержимое не является основным на странице по смыслу) Позволяет вставить воспроизводимый аудио файл. Полужирный текст. Задает базовый URL или аттрибут target для относительных ссылок в документе. Область, где написание текста может имееть другое направления. Устанавливает направление написания текста. В отличии от направление указывается физическое направление Цитата. Указывает область body документа.
Перенос строки. Кликабельная кнопка Используется для рисовании графики с помощью скриптов Подпись таблицы. Сноска на название материала. Используется для вставки компьютерного кода в текстовом виде. Задает характеристики колонок в таблице. Определяет группу из одной или более колонок таблицы для форматирования. Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле Определяет описание термина из тега в списке терминов Текст, который удален в новой версии документа. Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть Указывает, что содержимое является термином. Определяет диалоговое окно или интерактивный элемент Блочный элемент - один из основных элементов верстки. Определяет список определений Название термина в списке определений выделенный по смыслу текст (обычно, текст выделенный курсивом). Контейнер для внешнего приложения Группа связанных элементов в форме Заголовок для элемента Определяет автономную группу из нескольких элементов (например картинка с подписью) Нижний колонтитул Определяет форму пользовательского ввода - Заголовки HTML разного уровня: , , , , , . Указывает область head документа. Блок заголовка Горизонтальная линия - тематический разделитель. Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. Выделяет текст курсивом. Определяет встроенный фрейм Изображение, картинка. Поле для ввода Текст, который был добавлен в новой версии документа. Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода. Заголовок элементов Элемент списка Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS) Основной контент Контейнер для . Определяет пользовательскую карту на изображении Выделенный текст (обычно с помощью подсветки фона). Контейнер для списка пунктов меню Определяет элементы, которые пользователь может вызвать из контекстного меню Используется для определения мета-данных документа. Измеритель значений в заданном диапазоне Контейнер для навигационных элементов Альтернативный контент для пользователей, отключивших скрипты Определяет встроенный объект Определяет нумерованный список Определяет группу связанных вариантов в выпадающем списке. Дает название группу Параметр (вариант выбора) в выпадающем списке Результат вычислений Абзац. Задает параметры для встроенных объектов Контейнер для нескольких изображений Предварительно отформатированный текст. Индикатор выполнения (прогресса) Цитата в тексте. Альтернативный текст, если браузер не поддерживает тег . Аннотация к содержимому тега . Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). Перечеркнутый текст. Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). Определяет скрипт или подключение скрипта из внешнего ресурса. Раздел Определяет выпадающий список Текст шрифтом меньшего размера. Определяет ресурс для тегов , и . Строчный элемент. Текст, выделенный по значению. Обычно отображается полужирным. Определяет контейнер для определения стилей документа Отображает текст в виде нижнего индекса. Заголовок внутри тега Отображает текст в виде верхнего индекса. Определяет таблицу. Определяет область контента в таблице. Ячейка в таблице .
Многострочное поле для ввода Определяет группу строк в нижней части таблицы - нижний колонтитул. Подробнее
Устаревшие теги HTMLМесто, где допускается перенос строки. Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.
Тег Краткое описание Акроним. Используйте тег вместо него Встроенный апплет. Используйте или вместо него. Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него Текст большего размера. Используйте вместо него Отцентрованный текст. Используйте вместо него Список директорий. Используйте - вместо него
Определяет цвет, размер и семейство шрифта. Используйте вместо него Фрейм внутри . Используйте вместо него Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько элементов Альтернативный текст, если фреймы не поддерживаются Перечеркнутый текст. Используйте или вместо него Моноширный текст. Используйте вместо него Подчеркнутый текст. Используйте вместо него В этой статье мы поговорим о создании таблиц в 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 Приведем пример, html код:
Пример таблицы Столбец 1 Столбец 2 Обратите внимание на ячейку
. Мы используем специальный атрибут 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 - рисовать только вертикальные границы (слева и справа от таблицы)
- rhs - граница только на правой стороне таблицы
- lhs - граница только на левой стороне таблицы
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 - выравнивание по базовой линии
Для тега
доступны такие же параметры, что и для . Параметры для одного тега будут иерархично применены ко всем внутри него Как сделать, чтобы границы ячеек в таблице не склеивались В случае использования border (граница ячеек) и нулевых отступов между ячейками, они все равно склеиваются и получается удвоенный border . Чтобы это избежать нужно прописать в стилях таблице border-collapse: collapse :
...
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.
Популярное в рубрике: