Таблица тегов: Справочник по HTML | htmlbook.ru

Содержание

Таблица HTML тегов

<acronym> Определяет акроним.
Не поддерживается в HTML5.
<abbr> Определяет аббревиатуру или акроним.
<address> Содержит контактную информацию об авторе/владельце документа/статьи.
<b> Устанавливает жирное начертание текста.
<bdi> Изолирует фрагмент текста, который может быть отформатирован в другом направлении, что позволяет браузерам корректно обрабатывать двунаправленный текст.
Новый элемент в HTML5.
<bdo> Переопределяет текущее направление текста.
<big> Определяет шрифт большего размера.
Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.
<blockquote> Определяет длинную цитату.
<center> Определяет выровненный по центру текст.
Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.
<cite> Помечает текст как цитату или сноску на другой материал
<code> Определяет фрагмент компьютерного кода.
<del> Определяет удаленный текст.
<dfn> Содержит определение термина или слова. По умолчанию, выделяется курсивом.
<em> Используется для акцентирования фрагмента текста. Выделяется курсивом.
<font> Определяет шрифт, цвет и размер текста.
Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.
<i> Выделяет фрагмент текста курсивным начертанием.
<ins> Определяет вставленный текст, который отображается подчеркнутым.
<kbd> Определяет вводимые пользователем нажатия клавиш или текст, набираемый на клавиатуре.
<mark> Содержит выделенный/подсвеченный текст.
Новый элемент в HTML5.
<meter> Определяет скалярную величину в том же диапазоне или графическое представление дробного числа.
<pre> Определяет предварительно отформатированный текст.
<progress> Определяет индикатора прогресса выполнения задачи (progress bar).
Новый элемент в HTML5.
<q> Определяет короткую цитату.
<rp> Содержит альтернативный текст, который показывается в браузере, не поддерживающем тег <ruby>.
Новый элемент в HTML5.
<rt> Содержит аннотации сверху или снизу от текста, заключенного в тег <ruby> (для западно-азиатских языков).
Новый элемент в HTML5.
<ruby> Содержит аннотации сверху или снизу от текста, заключенного в тег <ruby> (для восточно-азиатских языков).
Новый элемент в HTML5.
<s> Содержит текст, который уже не актуален.
<samp> Содержит результат вывода компьютерной программы или скрипта.
<small> Определяет текст, написанный мелким шрифтом.
<strike> Содержит перечеркнутый текст.
Не поддерживается в HTML5. Рекомендуется использовать тег <del> или <s>.
<strong> Подчеркивает важность выделенного фрагмента текста.
<sub> Определяет текст с нижним индексом.
<sup> Определяет текст с верхним индексом.
<template> Определяет шаблон.
<time> Определяет время/дату.
Новый элемент в HTML5.
<tt> Отображает шрифт моноширинным текстом.
Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.
<u> Определяет текст, стилистически отличающийся от обычного текста.
<var> Определяет математические/переменные величины.
<wbr> Указывает браузеру, что при необходимости можно сделать перенос строки.
Новый элемент в HTML5.

Таблица основных тегов HTML для новичков

HTML. Создание таблиц.

Тема: Цель: Время: Задание: Практическая работа 43. HTML. Создание таблиц. Познакомиться с языком HTML, получить навыки работы с обязательными тегами, научиться создавать и форматировать документ. 80 мин.

Подробнее

Лабораторная работа 2

Тема: Таблицы в HTML-документах Лабораторная работа 2 Цель: научиться создавать таблицы в HTML-документах Выполнение каждого задания демонстрировать преподавателю. 1. Построение простых таблиц и колонок

Подробнее

Лекция 3 Таблицы и фреймы

Лекция 3 Таблицы и фреймы Лектор Ст. преподаватель Купо А.Н. Лекция 3 Таблицы и фреймы Для создания таблиц в языке HTML используются следующие элементы: TABLE — создаёт таблицу. CAPTION — задаёт заголовок

Подробнее

Создание сайтов HTML

Создание сайтов HTML HTML Разработку web-сайта можно осуществлять двумя способами: с помощью специального web-редактора; непосредственно написанием программы на языке HTML. HTML (HyperText Markup Language)

Подробнее

Создание сайтов HTML

Создание сайтов HTML Начало В 1989 году Тим Бернерс-Ли разработал технологию гипертекстовых документов World Wide Web. Гипертекст это текст, в котором содержатся ссылки на другие документы. Основные понятия

Подробнее

Язык программирования HTML

Язык программирования HTML 1. Вызовите текстовый редактор БЛOКНОТ, который находится в группе «Стандартные». Наберите следующий ниже текст и сохраните под именем web1.html в папку html_text, которую предварительно

Подробнее

Лабораторная работа 3

Теория Лабораторная работа 3 Задание Требования к отчету HTML (HyperText Markup Language) — язык разметки гипертекста. Создание таблиц в html Таблица — один из основных инструментов для создания web-страниц.

Подробнее

HTML HEAD TITLE TITLE HEAD BODY BODY HTML

Лабораторная работа по HTML 1 Тема: Основы Цели обучения: формирование у учащихся умений создавать простые Web-страницы и оформлять содержащийся в них текст.

Ожидаемые результаты обучения: Учащиеся должны

Подробнее

Лекция 6. Элементы HTML 4.01 (продолжение)

Донецкий национальный технический университет Факультет компьютерных наук и технологий Кафедра компьютерной инженерии Лекция 6. Элементы HTML 4.01 (продолжение) Иваница Сергей Васильевич, ассистент кафедры

Подробнее

<html> <head> <title>название документа</title>

Основы языка гипертекстовой разметки HTML Web-документ (иначе html-документ) является обычным текстовым файлом, к имени которого добавлено расширение.htm или.html. Такой документ открывается в обозревателе

Подробнее

ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ

Федеральное агентство по образованию Государственное образовательное учреждение высшего профессионального образования Владимирский государственный университет Кафедра информационных систем и информационного

Подробнее

Фреймовые структуры FRAMESET

Фреймовые структуры Используя фрэймы, позволяющие разбивать Web-страницы на множественные прокручиваемые подокна, вы можете значительно улучшить внешний вид и функциональность информационных систем и Web-приложений.

Подробнее

ОСНОВНЫЕ ТЕГИ HTML. Описание документа

ОСНОВНЫЕ ТЕГИ HTML HTML — Hypertext Markup Language — язык разметки гипертекста — используется для форматирования электронных документов, предназначенных для размещения в глобальной информационной сети

Подробнее

ОСНОВЫ ПРОГРАММИРОВАНИЯ

ОСНОВЫ ПРОГРАММИРОВАНИЯ Зачем нам знания HTML? Для чего нужен HTML? Как самому создать HTML документ? Для создания HTML файла (документа) необходимо в первую очередь поменять расширение файла текстового

Подробнее

Содержание. Часть I. HTML 15. Введение 13

Содержание Введение 13 Часть I. HTML 15 Глава 1. Основы HTML 17 Введение в основы HTML 17 История развития языка HTML 18 Как работает Web 20 Принципы взаимодействия браузера и Web-сервера 20 Понятие URL

Подробнее

Использование таблиц в web-страницах

Использование таблиц в web-страницах В печатных публикациях таблицы представляют собой основной элемент дизайна.

Размещение данных в строках и столбцах облегчает сравнительный анализ данных. Помимо этого

Подробнее

<HTML> <HEAD> <TITLE>

Лабораторная работа 1. Создание простейшего HTML-документа. Форматирование шрифта и абзаца Цель работы: Научиться создавать простейший гипертекстовый документ средствами текстового редактора Блокнот. Научиться

Подробнее

Практикум «Создание Web-сайта Компьютер»

1 Практикум «Создание Web-сайта Компьютер» Web-сайт состоит из Web-страниц, объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты. Задание

Подробнее

Псевдоклассы, табличная вёрстка

Псевдоклассы, табличная вёрстка Приоритеты применения стилей. Псевдоклассы и псевдоэлементы. Создание таблиц. Объединение ячеек. Вложенные таблицы. Стилевое оформление таблиц. Оглавление Псевдоклассы и

Подробнее

Лекция Таблицы в HTML

Министерство образования Республики Беларусь Учреждение образования Гомельский государственный университет им. Ф. Скорины Физический факультет «Информационные системы и сети» Лекция Таблицы в HTML Лектор

Подробнее

Вопрос 3. HTML формы

Вопрос 3. Язык гипертекстовой разметки HTML. HTML (HyperText Markup Language) это коллекция стилей (указанных в терминах языка HTML), которые определяют различные компоненты WWW документов. Годом рождения

Подробнее

Формы и фреймы в HTML

Формы и фреймы в HTML План теги и атрибуты формы и ее элементов управления; использование многострочных тексовых полей ввода и тега ; назначение фреймов, их достоинства и недостатки подготовка

Подробнее

WEB-программирование

WEB-программирование Л Е К Ц И И [Shift]+[F5] Ситников С. Ю. Лекция 1 2 Лекция 1 3 Тимоти Джон Бернерс-Ли британский учёный, изобретатель URL, HTTP, HTML, создатель Всемирной паутины Лекция 2 4 Пример элемента

Подробнее

Работа с формами в HTML

Работа с формами в HTML С помощью средств HTML можно создавать формы для ввода информации посетителем Web-страницы. Описание формы помещается между тэгами и . На странице одновременно может

Подробнее

Глава 8. Формы Создание формы

Глава 8. Формы Формы являются наиболее популярным способом «обратной связи» с пользователем. С помощью HTML можно создавать как простые формы, предполагающие выбор одного из нескольких ответов, так и сложные

Подробнее

ИНТЕГРАЦИЯ ИНТЕРСПИДИИ и САЙТА КЛИЕНТА

«ПЕРФОРМИЯ СНГ» г. Москва, Ленинский проспект, 32 Выпуск от 10. 02.2009 В шляпные папки Отв. подключение к Интерспидии ИНТЕГРАЦИЯ ИНТЕРСПИДИИ и САЙТА КЛИЕНТА В ситуации, когда у клиента Интерспидии (далее

Подробнее

Глава 10. Фреймы Описание структуры фреймов

Глава 10. Фреймы Фреймами называют независимые окна внутри окна браузера, в которых могут одновременно отображаться разные документы. Фреймы удобны при создании страниц, которые должны иметь как динамическое,

Подробнее

Синтаксис языка HTML

Введение в HTML Содержание История языка HTML Синтаксис языка HTML Структура документа HTML Цветовая разметка документа. Способы задания цветовых параметров Разметка текста. Физическое форматирование текста.

Подробнее

Лекция 8. Использование CSS

Донецкий национальный технический университет Факультет компьютерных наук и технологий Кафедра компьютерной инженерии Лекция 8. Использование CSS Иваница Сергей Васильевич, ассистент кафедры компьютерной

Подробнее

«Создание WEBстраниц. помощью HTML»

«Создание WEBстраниц с помощью HTML» Работа выполнена Хисматуллиным Ильнуром Рахимзяновичем, учителем информатики Нижнекуюкской средней общеобразовательной школы Атнинского муниципального района Республики

Подробнее

Лекция Работа со стилями CSS

Министерство образования Республики Беларусь Учреждение образования Гомельский государственный университет им. Ф. Скорины Физический факультет «Информационные системы и сети» Лекция Работа со стилями CSS

Подробнее

HTML. язык гипертекстовой разметки

HTML язык гипертекстовой разметки Обзор HTML CSS Активные html-страницы Инструментальные системы верстки CSS CSS — Cascading Style Sheets, каскадные таблицы стилей Стилем или CSS называется набор параметров

Подробнее

Язык разметки гипертекстов HTML

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ ВОЛГОГРАДСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ ВОЛЖСКИЙ ПОЛИТЕХНИЧЕСКИЙ ИНСТИТУТ В. Ф.Савченко, И.Е.Кожевникова Язык разметки гипертекстов HTML Лабораторный

Подробнее

Список тегов HTML-списка и таблица тегов таблицы

Теги списка

<Ul> неупорядоченный список
Атрибуты:
Тип списка Тип списка Значение: круг сплошного круга, квадрат пустого круга
            
<ol> упорядоченный список
Атрибуты:
Тип списка Тип значения: A a 1 I i и т. д.
Начальное значение начального значения: начальная буква / номер
   обратное обратное значение: обратное

Примеры:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
  
         <ul type = "disc"> <font color = "red"> Просто заголовок </ font>
    	     <li> Список 1 </ li>
    	     <li> Список 1 </ li>
    	     <li> Список 1 </ li>

    </ul>

         <ol type = "a" start = "3" reversed = "reversed"> <font size = "5"> Упорядоченный список </ font>
    	     <li> <a href="http://www. baidu.com" target="_blank"> Список 1 </a> </ li>
		 <li> <a href="./success.html"> окно входа </a> </ li>
		 <li> Список 1 </ li>

		 <li> Список 1 </ li>


    </ol>
</body>
</html>

<a> Теги Гиперссылки

Атрибуты:

Href: адрес веб-сайта, например: http://www.12356789.com

Цель: форма перехода _self открывается на собственной странице _blank открывает другую страницу для открытия

Эффект:

Форма этикетки

Табличный тег <table>
Атрибуты:
                     width  height:px
    border: border
cellpadding: расстояние между текстом и границей в ячейке
cellspacing: поля
                     align: «left»  «center»
Bgcolor: цвет фона
Теги
tr   <tr>: ОК
Атрибуты: Атрибуты:
”” ”” ”align: align: align
Bgcolor: сплошной цвет фона
• высота: высокая высота: высокая
   <td>: столбец

Атрибуты:

Colspan: горизонтальное слияние: colspan: горизонтальное слияние
Размах строк: вертикальное слияние

Примеры:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
		

	<table border="1" cellspacing="0" cellpadding="15px" bgcolor="#776655">
		<thead align="center">
			<! - Свойства заголовка->
			<tr> 
				 <th> Date </ th>
				 <th> возраст </ th>
				 <th> день рождения </ th>	
			</tr>
			<tr></tr>

		</thead>
		<tbody align="center">
			<tr>
				<td rowspan="2">hello</td>
				<td>abandon</td>
				<td>im</td>
			</tr>
			<tr>
				
				<td>you</td>
				<td>hello</td>
			</tr>
		</tbody>
		<tfoot align="center">
			  <! - tfoot: добавить дополнительный контент, такой как итог, в конце таблицы
			 		 -->
			 <td colspan = "2"> Всего </ td>
		    
			<td>256</td>
		</tfoot>
	</table>


</body>
</html>

Эффект:

При написании раннего интерфейса он обычно пишется с использованием табличных атрибутов, но теперь он обычно не применим

 

HTML теги, описание HTML тегов, назначение HTML тегов и их синтаксис

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah. ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена HTML тегу <td>. Описание тега <td>, атрибуты тега <td>, синтаксис…

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена HTML тегу <tbody>. Описание тега <tbody>, атрибуты тега <tbody>, синтаксис…

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена HTML тегу <table>. Описание тега <table>, атрибуты тега <table>, синтаксис…

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah. ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена HTML тегу <caption>. Описание тега <caption>, атрибуты тега <caption>,…

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена HTML тегу <col>. Описание тега <col>, атрибуты тега <col>,…

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена HTML тегу <colgroup>. Описание тега <colgroup>, атрибуты тега <colgroup>,…

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги.  Данная публикация посвящена HTML спискам. Всего в HTML можно создать 5 видов списков:…

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена маркированным спискам HTML. Маркированный или как еще говорят, неупорядоченный список…

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена HTML тегу <ul>. Описание тега <ul>, атрибуты тега <ul>,…

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена HTML тегу <li>. Описание тега <li>, атрибуты тега <li>,…

Тег | HTML справочник

Поддержка браузерами

Описание

Таблицы в HTML могут содержать множество различных тегов, включая HTML тег <table>, т.е. имеется возможность создания вложенных таблиц.

Основным тегом-контейнером для HTML-таблицы является тег <table>, который требует обязательного присутствия закрывающего тега. Любая таблица состоит из строк (определяются тегом <tr>), содержащих любое количество как заголовочных ячеек (определяются тегом th), так и ячеек с любыми данными (определяются тегом <td>). Тег <th>, отличается от <td> визуальным представлением данных внутри таблицы: по умолчанию, текст, размещенный в теге <th>, отображается жирным начертанием с выравниванием текста по центру, а текст тега <td> — обычным начертанием с выравниванием по левому краю.

Более сложные таблицы могут содержать такие элементы как, <caption>, <col>, <colgroup>, <thead>, <tfoot> и <tbody>.

Примечание: по стандарту HTML5 все ранее используемые атрибуты таблицы, такие как align, bgcolor, border и т.д. больше не поддерживаются и их использование валидатор будет считать за ошибки в коде. Поэтому для стилизации таблиц нужно использовать CSS, с помощью которого можно заменить все атрибуты. Например, чтобы добавить рамку для таблицы используется свойство border, для изменения заднего фона — свойство background, а для выравнивания строчного содержимого в ячейках таблицы — свойства text-align и vertical-aling.

Атрибуты

Тег <table> поддерживает Глобальные атрибуты и События

Стиль по умолчанию


table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

Пример


<table>
  <tr>
    <th>Месяц</th>
    <th>Денег на счету</th>
  </tr>
  <tr>
    <td>Декабрь</td>
    <td>100р</td>
  </tr>
</table> 

Результат данного примера в окне браузера:

теги выходят за пределы тегов

То , что я пытался сделать, — это включить тег <div> внутри <table>, частично заменив <tr> .

    <table ng-controller="TableController as tc">
        @foreach ($orders as $order)
        <tr>
            //<td>
        </tr>
        <!--From here, <div> is incorporated -->
        <div ng-show'isShow == {{$order->id}}'>
            <tr>
                //<td>
            </tr>
        </div>
        @endforeach
    </table>

Для простоты я хотел бы, чтобы вы представили себе, что эта таблица динамически генерируется, основываясь на результате @foreach ($orders as $order) (я использую Laravel 5), и что эта таблица состоит из двух частей — одна сделана из <tr> , другая находится внутри <div> .

В конечном счете, я сделаю функцию, чтобы скрыть / показать <div> , нажав на <tr>. либо с AngularJS-х ngShow или JQuery-х hide() .

Однако, к моему удивлению, тег div всегда выходит за пределы таблицы при запуске, что может быть подтверждено только инструментом разработчика.

(то есть щелкните правой кнопкой мыши -> проверить — > элементы)

    <div ng-show'isShow == {{$order->id}}'>

        </div>
    <table ng-controller="TableController as tc">
        @foreach ($orders as $order)
        <tr>
            //<td>
        </tr>
        <!--From here, <div> is incorporated -->
            <tr>
                //<td>
            </tr>
        @endforeach
    </table>

Я не в состоянии понять, что происходит.

Я был бы признателен, если бы вы дали какой-нибудь совет.

javascript html css angularjs


1

Проблема:

В инструменте разработчика вы видите div вне элемента table , потому что в структуре HTML недопустимо помещать <div> непосредственно внутри <table> , поэтому в браузере вы получите <div> , отображаемый вне <table> , поскольку это недопустимый код HTML.

Примечание:

Таким образом, все , что вам нужно знать, когда вы имеете дело с таблицами, это то, что блоки контента, такие как <div>, <span> …, не могут быть помещены непосредственно в теги <table> или <tr> , но вы можете поместить их вместо этого в элементы <td> или <th> .

Ссылка:

Пожалуйста, проверьте разрешенный контент в разделе контекст использования спецификации <table> MDN для получения более подробной информации.

теги вставки строк и столбцов

Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте следующую статью). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей.

Теги и атрибуты таблиц

Вот основные элементы, которые нужны для создания таблиц:

  • <table> — контейнер, внутри которого располагается таблица (такой же, как <ul> для маркированных или <ol> для нумерованных списков).
  • border — атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
  • <caption> задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега <table>, вне ячеек и строк.
  • <tr> — парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
  • <th> — тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках — обычно текст внутри <th> обозреватель выделяет жирным и размещает по центру.
  • <td> — контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег <tr>, столько ячеек в ней и будет: один тег — одна ячейка.
  • <colgroup> позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега <caption>, если его нет, то после <table>.
  • <col> используется для той же цели, что и <colgroup>. <colgroup> может содержать <col>, но не наоборот.
  • span — атрибут, задающий число столбцов, к которым применяются свойства контейнера <col>.
  • <thead>, <tbody> и <tfoot> — контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров <head>, <body> и <footer> в HTML-документе.
  • colspan нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
  • rowspan объединяет ячейки по столбцам.

Пример создания таблицы

Создайте документ формата HTML и скопируйте в него следующий код:

<!DOCTYPE html>
<html>
   <head>
	<title>Пример таблицы</title>
   </head>
   <body>
	<table border="1">
	 <caption>Инструменты создания сайтов</caption>
	 <tr>
	  <th>Назначение</th><th colspan="2">Инструмент</th>
	 </tr>
	 <tr>
	  <td>Разметка</td><td>HTML</td><td>XHTML</td>
	 </tr>
	 <tr>
	  <td>Оформление</td><td colspan="2">CSS</td>
	 </tr>
	 <tr>
	  <td>Разработка</td><td>PHP</td><td>Python</td>
	 </tr>
	</table>
   </body>
</html>

В браузере документ будет выглядеть так:

Разберём, какие строчки кода за что отвечают.

  • <table border=»1″> — открыли таблицу, задав ей толщину рамок.
  • <caption> Инструменты создания сайтов </caption> — озаглавили её.
  • <tr> — открыли строку.
  • <th>Назначение</th> — создали ячейку с оформлением заголовка.
  • <th colspan=»2″>Инструмент</th> — создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
  • </tr> — закрыли строку. Аналогично создали остальные строки.
  • <tr> <td>Разметка</td><td>HTML</td><td>XHTML</td> </tr> — добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
  • </table> — закрыли таблицу.

Полезные ссылки:

HTML-списков


Списки HTML позволяют веб-разработчикам группировать набор связанных элементов в списки.


Пример

Упорядоченный список HTML:

  1. Первая позиция
  2. Второй предмет
  3. Третий объект
  4. Четвертый объект
Попробуй сам »

Неупорядоченный список HTML

Неупорядоченный список начинается с тега

    . Каждый элемент списка начинается с
  • тег.

    По умолчанию элементы списка будут отмечены маркерами (маленькими черными кружками):


    Заказанный HTML-список

    Упорядоченный список начинается с тега

      . Каждый элемент списка начинается с тега
    1. .

      По умолчанию элементы списка будут отмечены цифрами:


      Списки описаний HTML

      HTML также поддерживает списки описаний.

      Список описаний — это список терминов с описанием каждого термина.

      Тег

      определяет список описаний, тег
      определяет термин (имя), а тег
      тег описывает каждый термин:

      Пример


      Кофе

      — черный горячий напиток

      Молоко

      — белый холодный напиток

      Попробуй сам »

      Теги списка HTML

      Тег Описание
      Определяет неупорядоченный список
      Определяет упорядоченный список
    2. Определяет элемент списка
      Определяет список описаний
      Определяет термин в списке описания
      Описывает термин в списке описания


      HTMLTableElement — веб-API | MDN

      Интерфейс HTMLTableElement предоставляет специальные свойства и методы (помимо обычного объектного интерфейса HTMLElement , который он также имеет доступным по наследству) для управления компоновкой и представлением таблиц в документе HTML.

      Наследует свойства от своего родительского элемента HTMLElement .

      HTMLTableElement.caption
      — это HTMLTableCaptionElement, , представляющий первый , который является дочерним элементом элемента, или null , если ничего не найдено. Если установлено, если объект не представляет , выдается DOMException с именем HierarchyRequestError .Если задан правильный объект, он вставляется в дерево как первый дочерний элемент этого элемента, а первый , который является дочерним элементом этого элемента, удаляется из дерева, если таковой имеется.
      HTMLTableElement.tHead
      — это HTMLTableSectionElement , представляющий первый , который является дочерним элементом элемента, или null , если ничего не найдено. При установке, если объект не представляет , генерируется исключение DOMException с именем HierarchyRequestError .Если задан правильный объект, он вставляется в дерево непосредственно перед первым элементом, который не является ни , ни , или как последний дочерний элемент, если такого элемента нет, и первый , который является потомком этого элемента, удаляется из дерева, если таковой имеется.
      HTMLTableElement.tFoot
      — это HTMLTableSectionElement, , представляющий первый , который является дочерним элементом элемента, или null , если ничего не найдено.Если установлено, если объект не представляет , выдается DOMException с именем HierarchyRequestError . Если задан правильный объект, он вставляется в дерево непосредственно перед первым элементом, который не является ни , ни , ни , или как последний дочерний элемент, если есть не является таким элементом, и первый , который является потомком этого элемента, удаляется из дерева, если таковой имеется.
      HTMLTableElement.rows Только чтение
      Возвращает активную HTMLCollection , содержащую все строки элемента, то есть все , которые являются дочерними элементами элемента или дочерними элементами одного из его , и детей. Члены строк появляются первыми в древовидном порядке, а эти элементы — последними, также в древовидном порядке. HTMLCollection работает и автоматически обновляется при изменении HTMLTableElement .
      HTMLTableElement.tBodies Только чтение
      Возвращает активную HTMLCollection , содержащую все элемента. HTMLCollection активна и автоматически обновляется при изменении HTMLTableElement .

      Устаревшие свойства

      Предупреждение: Следующие свойства устарели.Вам следует избегать их использования.

      HTMLTableElement.align
      — это DOMString , содержащая пронумерованное значение, отражающее атрибут align . Он указывает на выравнивание содержимого элемента относительно окружающего контекста. Возможные значения: «слева» , «справа» и «по центру» .
      HTMLTableElement.bgColor
      — это DOMString , содержащая цвет фона ячеек.Он отражает устаревший атрибут bgcolor .
      HTMLTableElement.border
      — это DOMString , содержащая ширину в пикселях границы таблицы. Он отражает устаревший атрибут границы .
      HTMLTableElement.cellPadding
      — это DOMString , содержащая ширину в пикселях горизонтального и вертикального промежутка между содержимым ячейки и ее границами. Он отражает устаревший атрибут cellpadding .
      HTMLTableElement.cellSpacing
      — это DOMString , содержащая ширину в пикселях горизонтального и вертикального разделения между ячейками. Он отражает устаревший атрибут ячеек .
      HTMLTableElement.frame
      — это DOMString , содержащая тип внешних границ таблицы. Он отражает устаревший атрибут кадра и может принимать одно из следующих значений: "void" , "выше" , "ниже" , "hsides" , "vsides" , "lhs ", " справа ", " прямоугольник " или " граница ".
      HTMLTableElement.rules
      - это DOMString , содержащая тип внутренних границ таблицы. Он отражает устаревший атрибут rules и может принимать одно из следующих значений: «нет» , «группы» , «строки» , «столбцы» или «все» .
      HTMLTableElement.summary
      - это DOMString , содержащая описание назначения или структуры таблицы.Он отражает устаревший атрибут сводки .
      HTMLTableElement.width
      - это DOMString , содержащая длину в пикселях или в процентах от желаемой ширины всей таблицы. Он отражает устаревший атрибут ширины .

      Наследует методы от своего родительского элемента, HTMLElement .

      HTMLTableElement.createTHead ()
      Возвращает HTMLTableSectionElement , представляющий первый , который является дочерним элементом элемента.Если ничего не найдено, создается новый и вставляется в дерево непосредственно перед первым элементом, который не является ни , ни , или последним дочерним элементом, если такого элемента нет.
      HTMLTableElement.deleteTHead ()
      Удаляет первый , который является дочерним элементом элемента.
      HTMLTableElement.createTFoot ()
      Возвращает HTMLTableSectionElement , представляющий первый , который является дочерним элементом элемента.Если ничего не найдено, создается новый и вставляется в дерево как последний дочерний элемент.
      HTMLTableElement.deleteTFoot ()
      Удаляет первый , который является дочерним элементом элемента.
      HTMLTableElement.createTBody ()
      Возвращает HTMLTableSectionElement , представляющий новый , который является дочерним элементом элемента. Он вставляется в дерево после последнего элемента, который является , или как последний дочерний элемент, если такого элемента нет.
      HTMLTableElement.createCaption ()
      Возвращает HTMLElement , представляющий первый , который является дочерним элементом элемента. Если ничего не найдено, создается новый и вставляется в дерево как первый дочерний элемент элемента .
      HTMLTableElement.deleteCaption ()
      Удаляет первый
      в заданной позиции индекса . При необходимости создается . Если индекс равен -1 , новая строка добавляется к коллекции. Если индекс меньше -1 или больше, чем количество строк в коллекции, возникает исключение DOMException со значением IndexSizeError .
      HTMLTableElement.deleteRow ()
      Удаляет строку, соответствующую индексу , указанному в параметре. Если значение индекса равно -1 , последняя строка удаляется; если оно меньше -1 или больше количества строк в коллекции, возникает исключение DOMException со значением IndexSizeError .

      Таблицы BCD загружаются только в браузере

      • Элемент HTML, реализующий этот интерфейс:
      , который является дочерним элементом элемента.
      HTMLTableElement.insertRow ()
      Возвращает HTMLTableRowElement , представляющий новую строку таблицы. Он вставляет его в коллекцию строк непосредственно перед элементом
      .

      HTML 5 Тег

      Тег HTML

      используется для определения таблицы. Тег
      содержит другие теги, определяющие структуру таблицы.

      Элементы стола

      Таблицы состоят из элемента

      , а также других элементов, связанных с таблицами. Эти другие элементы вложены в теги
      , чтобы определить способ построения таблицы.

      Элемент

      может содержать следующие элементы (и в этом порядке):

      1. опционально
      тегов
    3. , за которым может следовать тег
    4. , за которым может следовать тег
    5. , за которым следуют ноль или несколько тегов
    6. или один или несколько тегов
    7. , за которым необязательно следует тег
    8. (но всего может быть только один дочерний тег тега )
    9. , необязательно, смешанный с одним или несколькими элементами поддержки сценария (т.е. либо
    10. tag
    11. , за которым следует ноль или более