Содержание

Теги для создания и оформления таблицы в html

Цель урока: создание и оформление таблицы в html

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

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

1
2
3
4
5
<table>
	<tr>
		<td> содержание </td>
	</tr>
</table>

<table> <tr> <td> содержание </td> </tr> </table>

Результат:
пример таблицы html
Добавим границу для таблицы — атрибут border:

1
2
3
4
5
<table border="1">
	<tr>
		<td> содержание </td>
	</tr>
</table>

<table border=»1″> <tr> <td> содержание </td> </tr> </table>

Результат:
простая таблица html пример

Создания таблицы начинается с тега

table (от англ. «таблица»). Тег tr служит для создания строки. В строке располагаются ячейки — тег td. Завершается таблица закрывающим тегом /table

создание таблицы в html
Или пример таблицы посложнее:
html таблица пример

Атрибуты тега TABLE

align left — таблица влево;
center – табл. по центру;
right — табл. вправо.
width 400
50%
bоrdеr ширина
bordercolor цвета рамки
сеllspacing ширина грани рамки
cellpadding внутреннее расстояние до рамки
bgсоlоr Цвет
#rrggbb
bасkground файл (фон таблицы)

Важно: Для ячеек-заголовка таблицы используется тег th вместо td. Браузер размещает содержимое таких ячеек по центру и делает шрифт полужирным

Атрибуты тега TR — строки

align left, center, right выравнивание по горизонтали
valign top, middle, bottom, baseline выравнивание по вертикали
bgcolor цвет задний фон
bordercolor
цвет цвет границы

Атрибуты тега TD или TH — ячейки

align left, center, right выравнивание по горизонтали
valign top, middle, bottom, baseline выравнивание по вертикали
width число или процент ширина ячейки
bgcolor цвет цвет фона
background файл файл фона
bordercolor цвет цвет границы
nowrap заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой
Важно:
  • Тег caption служит для создания заголовка таблицы
  • Для группировки заголовочных ячеек используется тег thead
  • Для группировки основного содержимого таблицы используется тег tbody
  • Тег tfoot определяет нижнюю часть таблицы

Тег caption заголовка таблицы может иметь атрибут, определяющий расположение заголовка — align — со следующими значениями:
top — заголовок над таблицей,
bottom — заголовок под таблицей,
left — заголовок вверху и выровнен влево,
right — заголовок вверху и выровнен вправо. К сожалению не все значения «работают» во всех браузерах.
заголовок таблицы

Пример: Создать «каркас» таблицы со всеми тегами группировки

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table  border="1">
<caption>таблица</caption>
<thead>
	<tr>
	<th>Заголовок 1</th><th>3аголовок 2</th>
	</tr>
</thead>
<tbody>
	<tr>
	<td>содержимое</td><td>содержимое</td>
	</tr>
</tbody>
<tfoot>
...
</tfoot>
</table>

<table border=»1″> <caption>таблица</caption> <thead> <tr> <th>Заголовок 1</th><th>3аголовок 2</th> </tr> </thead> <tbody> <tr> <td>содержимое</td><td>содержимое</td> </tr> </tbody> <tfoot> … </tfoot> </table>

Лабораторная работа №1: Создайте таблицу по образцу. У таблицы должен быть заголовок и области для группировки (thead — 1-я строка таблицы, tbody — 2-я и 3-я строки таблицы, tfoot — 4-я строка таблицы).
Таблица с областями группировки
Столбец 1 Столбец 2 Столбец 3 Столбец 4
Строка2 Ячейка1 Строка2 Ячейка2 Строка2 Ячейка3 Строка2 Ячейка4
Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3 Строка3 Ячейка4
Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3 Строка4 Ячейка4

Объединение ячеек в таблице

В происходит при помощи двух атрибутов тега td:

COLSPAN — объединение ячеек по горизонтали, ROWSPAN — объединение ячеек по вертикали.

Синтаксис COLSPAN:
html объединение ячеек в таблице пример

1
2
3
4
5
6
7
8
9
<table>
<tr>
  <td colspan="2"> </td>
</tr>
<tr>
  <td> </td>
  <td> </td>
</tr>
</table>

<table> <tr> <td colspan=»2″> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

Синтаксис ROWSPAN:
html объединение ячеек в таблице пример

1
2
3
4
5
6
7
8
9
<table>
<tr>
  <td rowspan="2"> </td>
  <td> </td>
</tr>
<tr>
  <td> </td>
</tr>
</table>

<table> <tr> <td rowspan=»2″> </td> <td> </td> </tr> <tr> <td> </td> </tr> </table>

Пример: создать таблицу по образцу на картинке. Использовать слияние ячеек
таблицы html примеры

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table  border="1">
<caption>Таблица с объединенными ячейками </caption>
<tr>
  <th rowspan="2">&nbsp;</th>
  <th colspan="2">3аголовок 1</th>
</tr>
<tr>
  <th> Заголовок 1.1</th>
  <th> Заголовок 1.2</th>
</tr>
<tr>
  <th> Заголовок 2</th>
  <td> Ячейка 1</td>
  <td> Ячейка 2</td>
</tr>
<tr>
  <th> Заголовок 3</th>
  <td> Ячейка 3</td>
  <td> Ячейка 4</td>
</tr>
</table>

<table border=»1″> <caption>Таблица с объединенными ячейками </caption> <tr> <th rowspan=»2″>&nbsp;</th> <th colspan=»2″>3аголовок 1</th> </tr> <tr> <th> Заголовок 1.1</th> <th> Заголовок 1.2</th> </tr> <tr> <th> Заголовок 2</th> <td> Ячейка 1</td> <td> Ячейка 2</td> </tr> <tr> <th> Заголовок 3</th> <td> Ячейка 3</td> <td> Ячейка 4</td> </tr> </table>

Лабораторная работа №2: создайте таблицы, с расположенными в их ячейках цифрами, точно по образцу:
задание html таблицы

Группировка ячеек: COLGROUP

Элемент colgroup позволяет создавать группы колонок с одинаковыми свойствами.

Рассмотрим на примере:

Пример: Создать таблицу по образцу
группировка ячеек html

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<TABLE border="4">
<colgroup >
	<col span="2" />
	<col />
</colgroup>
<colgroup>
	<col span=2/>
</colgroup>
<TR>
<TD> 1-1 </TD><TD> 1-2 </TD><TD> 1-3 </TD><TD> 1-4 </TD><TD> 1-5</TD>
</TR>
<TR>
<TD> 2-1 </TD><TD> 2-2 </TD><TD> 2-3 </TD><TD> 2-4 </TD><TD> 2-5 </TD>
</TR>
</table>

<TABLE border=»4″> <colgroup > <col span=»2″ /> <col /> </colgroup> <colgroup> <col span=2/> </colgroup> <TR> <TD> 1-1 </TD><TD> 1-2 </TD><TD> 1-3 </TD><TD> 1-4 </TD><TD> 1-5</TD> </TR> <TR> <TD> 2-1 </TD><TD> 2-2 </TD><TD> 2-3 </TD><TD> 2-4 </TD><TD> 2-5 </TD> </TR> </table>

Атрибуты тега COLGROUP

align выравнивание содержимого столбца
  1. left — по левому краю (по умолчанию)
  2. center — по центру
  3. right — по правому краю

не работает в Firefox

dir определяет направление символов:
  1. ltr — слева направо
  2. rtl — справа налево

не работает в Firefox

span количество столбцов, к которым будет применяться оформление (по умолчанию 1)
style задает встроенную таблицу стилей
valign вертикальное выравнивание в ячейке таблицы
  1. bottom — по нижнему краю ячейки
  2. middle — по центру ячейки (по умолчанию)
  3. top — по верхнему краю ячейки

не работает в Firefox

width ширина столбца

HTML вложенные таблицы

Таблицы со сложной структурой проще заменять на вложенные таблицы.

Пример: создайте вложенные таблицы по образцу:
html вложенные таблицы

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<TABLE border="4" bgcolor="yellow">
<tr>
   <td>Таблица 1</td>
   <td>
      <TABLE>
      <tr>  <td>Таблица 2</td><td>Ячейка 2-2</td>  </tr>
      <tr>  <td>Ячейка 3-2</td><td>Ячейка 4-2</td> </tr>
      </TABLE>
   </td>
<tr>
   <td>Ячейка 3-1</td>
   <td>Ячeйкa 4-1</td>
</tr>
</TABLE>

<TABLE border=»4″ bgcolor=»yellow»> <tr> <td>Таблица 1</td> <td> <TABLE> <tr> <td>Таблица 2</td><td>Ячейка 2-2</td> </tr> <tr> <td>Ячейка 3-2</td><td>Ячейка 4-2</td> </tr> </TABLE> </td> <tr> <td>Ячейка 3-1</td> <td>Ячeйкa 4-1</td> </tr> </TABLE>

Лабораторная работа №3:
  • Создайте таблицу с фиксированными размерами, содержащую ячейки указанной на рисунке ширины
  • Вставьте в левую нижнюю ячейку вложенную таблицу
  • Фон ячеек вложенной таблицы сделайте серым

вложенные таблицы html примеры

Лабораторная работа №4:
  • Откройте задание, выполненное на прошлой лабораторной работе
  • Добавьте в верхнюю ячейку еще одну вложенную таблицу
  • Фон ячеек вложенной таблицы сделайте белым

задание вложенные таблицы html

Таблица основных тегов html с примерами

Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.

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

 

Базовые теги

<!—…—> — тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.

<!DOCTYPE> — показывает браузеру тип документа, сообщает его версию и язык.

<html></html> — корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.

<head></head>— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, <title> или <style>.

<meta> — тег для оформления метаданных документа, используемых браузером для обработки страницы, а поисковиками — для индексации.

<body></body> — тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег <body> имеет несколько атрибутов, позволяющих управлять цветами.

<body bgcolor=?> — цвет фона документа в формате RGB.

<body text=?> — цвет текста.

<body link=?> — цвет гиперссылок.

<body vlink=?> — цвет гиперссылок, по которым уже переходили.

<body alink=?> — цвет гиперссылок при нажатии.

<title></title>— метатег, который задаёт название страницы, отображаемое на вкладке браузера.

<header></header> — определяет содержимое блока с вводной информацией сайта или группой ссылок.

 

Форматирование текста

<h2></h2>……<h6></h6>. — теги заголовков, от самого большого к самому маленькому.

<b></b> — жирный текст без придания важности выделенному фрагменту.

<strong></strong> — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.

<i></i> — выделение текста курсивом без придания важности.

<del></del> — зачёркивает текст, помечая его удалённым.

<s></s> — отображает перечёркнутый текст.

<ins></ins> — подчёркивает текст, визуально выделяя внесённые изменения.

<u> — подчёркивание без дополнительного акцентирования внимания.

<em></em> — расставление акцентов путём выделения фрагментов текста курсивом.

<mark></mark> — выделение частей текста жёлтым маркером.

<tt></tt> — имитация текста, набранного на печатной машинке.

<small></small> — отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.

<sub></sub> — подстрочное начертание символов.

<sup></sup> — надстрочное начертание символов.

<cite></cite> — оформление цитат.

<address> — добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.

<pre></pre> — вывод неформатированного текста с сохранением пробелов и особенностей переносов.

<p></p> — контейнер для абзаца.

<br> — переносит текст на другую строку без создания абзаца.

<blockquote> </blockquote> — отступы с обеих сторон для оформления цитаты или врезки.

<q></q> — краткое цитирование.

<dl></dl> — контейнер для размещения термина и его определения.

<dt> — добавление термина.

<dd> — добавление определения понятия

<dfn> — выделение термина курсивом. Последующий текст должен раскрывать понятие.

<abbr> — указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.

<ol></ol> — список с цифрами.

<ul></ul> — список со значками.

<li> — отметка каждого элемента перечня (цифра или значок в зависимости от типа списка).

<a></a> — добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.

<code></code> — выделение фрагмента кода с помощью шрифта monospace. 

 

Встраивание элементов

<img></img> — вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:

<img src=»name» align=?> — выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.

<img src=»name» border=?> — позволяет настроить в пикселях толщину рамки вокруг изображения.

<picture></picture> — контейнер для расположения элемента <img> без <source>, который даёт браузеру возможность самостоятельно выбрать подходящую картинку.

<audio></audio>  — вставка звукового контента.

<video></video> — вставка видео (поддерживается Ogg, WebM и MP4).

<source></source> — указывает местоположение файла для <video>, <audio> и <picture>

<track> — формирует субтитры для <video> и <audio>.

<object></object> — контейнер, через который встраиваются мультимедийные файлы. Для передачи параметров применяется тег <param>.

<hr> — размещает на странице горизонтальную линию. Имеет несколько атрибутов.

<hr size=?> — устанавливает высоту линии.

<hr width=?> — устанавливает ширину линии.

<hr noshade> — убирает тень у линии.

<hr color=?> — задаёт цвет линии.

<script></script> — определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на  внешний источник.

<noscript></noscript> — ограничивает фрагмент документа, в котором скрипт не выполняется.

 

Работа с таблицами

<table></table> — размещает таблицу. Все остальные теги для форматирования таблиц должны находиться внутри это контейнера.

<thead></thead> — определяет заголовок.

<tbody></tbody> — отмечает тело таблицы.

<td></td> — создаёт одну ячейку.

<th></th> — указывает на заголовок ячейки.

<tr> — создание одной строки.  

<tfoot></tfoot> — показывает нижний колонтитул.

<caption></caption> — вставляет подпись. Указывается после тега <table>.

<col> — позволяет указать ширину и другие параметры одной или нескольких колонок.

 

Создание форм и кнопок

<form></form> — создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.
 

<button></button> — создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.

<select multiple name=»NAME» size=?></select> — формирует меню с поддержкой скроллинга.

<select name=»NAME»></select> — создаёт ниспадающее меню.

<option></option> — описывает каждый отдельный пункт меню.

<input> — формирует поля для добавления пользовательских данных.

<output> — выводит результаты вычислений, сделанных с помощью скрипта.

<label> — оформляет пометку для поля, созданного тегом <input>.


<textarea></textarea> — создаёт большие поля для ввода текста.

Тег HTML таблица — справочник GuruWeba

Тег <table> используется для создания HTML таблиц.

HTML таблица <table> должна содержать хотя бы одну строку <tr> и хотя бы одну ячейку <th> — ячейку-заголовок или <td> — обычную ячейку в каждой строке.

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

К таблице можно добавить подпись, используя тег <caption>.

Внутри таблицу <table> можно делить не только по строкам, но и по колонкам используя теги <col> и <colgroup>.

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

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<table>HTML контент таблицы</table>

Примеры использования таблиц <table> в HTML коде

Ниже представлены 2 варианта HTML таблиц.

Простая HTML таблица

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

HTML код простой таблицы

<table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</tbody>
</table>

Сложная HTML таблица

Подпись таблицы
Ячейка колонтитула 1 Ячейка колонтитула 2 Ячейка колонтитула 3
Ячейка колонтитула 4 Ячейка колонтитула 5 Ячейка колонтитула 6
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4

HTML код сложной таблицы

<table>
<caption>Подпись таблицы</caption>
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>Ячейка колонтитула 1</th>
<th>Ячейка колонтитула 2</th>
<th>Ячейка колонтитула 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Ячейка колонтитула 4</th>
<th>Ячейка колонтитула 5</th>
<th>Ячейка колонтитула 6</th>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan="2">Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td colspan="2">Ячейка 4</td>
</tr>
</tbody>
</table>

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

Атрибуты

В HTML5 тег <table> не имеет атрибутов.

Устаревшие атрибуты тега table

Атрибут Значения Описание
align left
right
center
justify
Задает правило выравнивания содержимого таблицы по горизонтали. В HTML5 используйте CSS.
bgcolor rgb
HTML hex
HTML colorname

Фоновый цвет. В HTML5 используйте CSS.

Примеры:
RGB: rgb(226,112,017), rgb(0, 40, 129).
HTML hex: #1a2a2c, #eee.
HTML colorname: black, yellow;

border число Ширина границ таблицы в пикселях. По умолчанию: 0 — границы не выводятся.
В HTML5 используйте CSS.
cellpadding число Отступ от границ ячеек до их содержимого. Значение указывает количество пикселей. В HTML5 используйте CSS.
cellspacing число Отступ между границами ячеек. Значение указывает количество пикселей. В HTML5 используйте CSS.
frame void
above
below
lhs
rhs
vsides
hsides
box
border

Определяет какие внешние границы будут отображены:
void — все границы скрыты;
above — только верхняя граница;
below — только нижняя граница;
lhs — только левая граница;
rhs — только правая граница;
vsides — вертикальные границы;
hsides — горизонтальные границы;
box или border — все границы.

В HTML5 используйте CSS.

rules none
groups
rows
cols
all

Определяет какие внутренние границы будут отображены:
none — все скрыты;
groups — границы групп;
rows — границы строк;
cols — границы колонок;
all — все;

В HTML5 используйте CSS.

summary текст Описание таблицы.
width пиксели
проценты
Ширина таблицы. В HTML5 используйте CSS.

Таблица HTML. Тег TABLE. Создание HTML таблицы. HTML table.

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

Не забываем подписываться на RSS-ленту, twitter и на публичную страницу Вконтакте.

HTML тег <table>. Описание <table>.

Содержание статьи:

HTML тег <table> относится к тегам предназначенным для формирования HTML таблиц. Тег <table> создает HTML таблицу, является ее контейнером. Понятно, что каждая HTML таблица состоит из строк и ячеек таблицы, тег <table> служит контейнером, в котором будут расположены строки и ячейки. Строки создаются тегом <tr>, а ячейки тегом <td> или <th>

Внутри элемента <table> могут находиться только элементы таблиц HTML, такие как: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>.

Когда-то давно, таблицы использовали для создания макетов сайта или шаблонов сайта, так называемы табличные шаблоны. Делалось все просто: создавали таблицу нужной структуры, но с невидимыми границами между ячейками. Сейчас этот метод устарел и не рекомендуется его использовать для создания макетов сайта. Вместо табличной верстки следует использовать блочную верстку, которая реализуется при помощи элементов <div>.

Тег <table>. Синтаксис тега <table> 

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

<table>Структура таблицы</table>

<table>Структура таблицы</table>

Тег <table>. Атрибуты тега <table>

Тег <table> из группы HTML таблиц, имеет атрибуты событий и универсальные HTML атрибуты. Для тега <table> доступны уникальные атрибуты HTML:

  • align – атрибут align выравнивание всей таблицы по горизонтали
  • background – при помощи атрибута background можно задать фоновый рисунок для таблицы
  • bgcolor – атрибут bgcolor служит для задания цвета фона таблицы
  • border – атрибут border определяет толщину рамки таблицы в пикселах.
  • bordercolor – атрибут bordercolor позволяет изменить цвет рамки.
  • cellpadding – атрибут cellpadding позволяет установить отступ от рамки до контента ячейки
  • cellspacing – при помощи атрибута cellspacing можно изменять расстояние между ячейками
  • cols – атрибут cols устанавливает число колонок в таблице
  • frame – атрибут frame дает указание браузеру о том, как отобразить границу вокруг HTML таблицы
  • height – атрибут height задает высоту таблицы
  • rules – атрибут rules дает указание браузеру о том, где следует отображать границы между ячейками
  • summary – атрибут summary позволяет кратко описать HTML таблицу
  • width – атрибут width позволяет изменять ширину всей HTML таблицы

Теги для создания таблицы HTML

В языке HTML имеется целая группа тегов предназначенных для формирования HTML таблиц.

Теги формирующие таблицы HTML:

Тег <table>. Пример использования тега <table>.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание HTML таблицы</title> <link rel=»stylesheet» href=»style.css» type=»text/css» > </head> <body> <table> <caption>Заголовок HTML таблицы</caption> <tr> <th>Первая ячейка</th> <th>Вторая ячейка</th> <th>Третья ячейка</th> </tr> <tr> <th>Четвертая ячейка</th> <th>Пятая ячейка</th> <th>Шестая ячейка</th> </tr> </table> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Создание HTML таблицы</title>

<link rel=»stylesheet» href=»style.css» type=»text/css» >

</head>

<body>

<table>

<caption>Заголовок HTML таблицы</caption>

<tr>

<th>Первая ячейка</th>

<th>Вторая ячейка</th>

<th>Третья ячейка</th>

</tr>

<tr>

<th>Четвертая ячейка</th>

<th>Пятая ячейка</th>

<th>Шестая ячейка</th>

</tr>

</table>

</body>

 

</html>

Если вы скопируете пример в текстовый редактор(рекомендую Notepad++, бесплатный редактор с подсветкой синтаксиса), а затем запустите его в браузере, то увидите:

<img title=»Таблица HTML. Тег TABLE. Создание HTML таблицы.» src=»//zametkinapolyah.ru/wp-content/uploads/2012/12/caption2.png» alt=»Таблица HTML. Тег TABLE. Создание HTML таблицы.» />

<img title=»Таблица HTML. Тег TABLE. Создание HTML таблицы.» src=»//zametkinapolyah.ru/wp-content/uploads/2012/12/caption2.png» alt=»Таблица HTML. Тег TABLE. Создание HTML таблицы.» />

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru 

Краткая таблица всех HTML тегов с описанием и фото

Теги: Описание: Атрибуты: Скриншот:
<!DOCTYPE> Этот параметр предоставляет интернет браузеру общую информацию об HTML документе.  html, public
<!— —> Этот тег дает возможность добавить комментарий в HTML код, который не выводится на интернет странице и не обрабатывается Web-браузером. Нет
<a> Тег <a> предназначен для создания гиперссылок. accesskey, charset, coords, href, hreflang, media, name, rel, rev, shape, tabindex, target, title, type
<abbr> Тег <abbr> нужен для создания аббревиатур. Он подчеркивает сокращение пунктирной линией,а при наведении мышкой можно увидеть расшифровку аббревиатуры. title <abbr>

abbr

<acronym> Тег <acronym> выделяет текст как акроним, и подчеркивает его пунктирной линией. title <acronym>

acronym

<address> Тег <address> нужен для указания контактных данных создателя Web-страницы или сайта. Нет <address>

address

<applet> Тег <applet> нужен для вставки на страницу апплетов(программы, на языке Java). align, alt, archive, code, codebase, height, hspace, vspace, width <applet>

applet

<area> Тег <area> создает активные области изображения, которые являются ссылками. accesskey, alt, coords, href, hreflang, nohref, shape, tabindex, target, type
<article> Тег <article> задает логический блок, содержание которого может бытьвроде новости, статьи, записи блога, форума и т.п. Нет
<aside> Тег <aside> предназначен для определения блока сбоку от контента для размещения рубрик, ссылок на архив, меток и т.п. Боковая панель. Нет <aside>

aside

<audio> Тег <audio> предназначен для вставки в Web-страницу аудиоролика. autoplay, controls, loop, preload, src <audio>

audio

<b> Тег <b> предназначен для выделения текста жирным начертанием. Нет <b>

b

<base> Этот элемент устанавливается внутри тега <head> и инструктирует браузер относительно полного базового адреса текущего документа. href, target
<basefont> Тег <basefont> нужен для создания свойств шрифта, таких как: размер, цвет и тип шрифта. color, face, size <basefont>

basefont

<bdi> Тег <bdi> необходим для отделения фрагмента текста, который должен быть отделен от основного описания.Такое оформление нужно для текстов с разными языками. dir
<bdo> Тег <bdo> предназначен для вывода текста справа налево или слева на право. dir <bdo>

bdo

<bgsound> Тег <bgsound> предназначен для проигрывания музыкального файла, который будет проигрываться в фоновом режимена Web-странице при ее открытии. balance, loop, src, volume
<blockquote> Тег <blockquote> предназначен для добавления цитат. Нет <blockquote>

blockquote

<big> Тег <big> увеличивает размер выделенного текста относительно обычного. Нет <big>

big

<body> Тег <body> необходим для хранения содержимого Web-страницы, а именно контента в окне браузера.Контент, который следует выводить в документе, нужно располагать именно внутри тега <body>. alink, background, bgcolor, bgproperties, bottommargin, leftmargin, link, rightmargin, scroll, text, topmargin, vlink
<blink> Заставляет ваш текст мигать. Нет
<br> Тег <br> нужен для перевода строки на новую. clear <br>

br

<button> Тег <button> нужен для создания кнопки на вашей Web-странице. accesskey, autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, type, value <button>

button

<canvas> Тег <canvas> предназначен для создания области, в которую при помощи JavaScript можно нарисовать разные объекты, выводить изображения, трансформировать их и менять свойства. height, width <canvas>

canvas

<caption> Этот тег необходим для создания заголовка к таблице и может размещаться только внутри тега <table>,сразу после открывающего тега. По умолчанию отображается перед таблицей и описывает ее содержимое. align, valign <caption>

caption

<center> Тег <center> выравнивает содержимое по центру. Нет <center>

center

<cite> Тег <cite> делает ваш текст цитатой либо сноской на другой источник. Нет <cite>

cite

<code> Тег <code> предназначен для опубликования части или полного исходного кода программы. Нет <code>

code

<col> Тег <col> предназначен для задания ширины и других характеристик одной или нескольких колонок таблицы. align, char, charoff, span, valign, width <col>

col

<colgroup> Этот тег используется для задания ширины и стиля одной или нескольких колонок таблицы. align, char, charoff, span, valign, width <colgroup>

colgroup

<command> Тег <command> нужен для отображения команды в виде переключателя, флажка или маркера. Этот тег необходимо размещать внутри <menu>, иначе он не будет отображаться. checked, disabled, icon, label, radiogroup, type
<comment> Тег <comment> нужен для добавления комментариев в HTML код. Его необходимо использовать только внутри тега <body>. Нет
<datalist> Этот тег предназначен для создания списка вариантов, которые можно выбирать в текстовом поле. id <datalist>

datalist

<dd> Тег <dd> предназначен для создания списка определений. Нет <dd>

dd

<del> Тег <del> необходим для того чтобы показать что данный текст был удален. Обычно текст выделенный этим тегом отображается как перечеркнутый. cite, datetime <del>

del

<details> Этот тег предназначен для хранения описания к чему-либо, которое может быть отображено пользователем. open
<dfn> Тег <dfn> предназначен для выделения нового термина, который оформляется курсивом. Нет <dfn>

dfn

<dir> Тег <dir> предназначен для создания списков, содержащих названия директорий. Нет <dir>

dir

<div> Тег <div> предназначен для выделения фрагмента документа с целью изменения вида содержимого.Обычно вид блока настраивается с помощью CSS-стилей. align, title <div>

div

<dl> Тег <dl> предназначен для создания списка определений. Нет <dl>

dl

<dt> Список начинается с тега <dl>, а внутри обычно содержатся тег <dt> создающий термини тег <dd> задающий определение этого термина. Нет <dt>

dt

<em> Тег <em> нужен затем чтобы акцентировать внимание на тексте. Обычно отображается в браузере курсивным начертанием. Нет <em>

em

<embed> Этот элемент используется для загрузки и отображения объектов(аудио, видеофайлов, флэш и т.п.) align, height, hidden, hspace, pluginspage, src, type, vspace, width
<fieldset> Тег <fieldset> необходим для группирования элементов формы. disabled, form, title <fieldset>

fieldset

<figcaption> Тег <figcaption> предназначен для описания тега <figure>.И должен быть первым или последним элементом в группе. Нет <figcaption>

figcaption

<figure> Тег <figure> предназначен для группирования разных элементов, например, картинок и подписей к ним. Нет <figure>

figure

<font> Этот тег служит для придания вашему тексту оригинальных характеристик шрифта, таких как цвет, размер и тип.Этот тег считается устаревшим и рекомендуется им не пользоваться. color, face, size <font>

font

<form> Тег <form> предназначен для установки формы на Web-страницу.Форма нужна для обмена данными между пользователем и сервером. accept-charset, action, autocomplete, enctype, method, name, novalidate, target <form>

form

<footer> Тег <footer> нужен для реализации <<подвала>> сайта, это раздел обычно находящийся внизу HTML страницы,где размещается контактная информация, имя создателя сайта, дата и правовая информация. Нет <footer>

footer

<frame> Тег <frame> предназначен для определения свойства отдельного фрейма, на которые делится окно браузера. bordercolor, frameborder, name, noresize, scrolling, src <frame>

frame

<frameset> Тег <frameset> определяет структуру фреймов на Web-странице.Фреймы разделяют окно браузера на отдельные окна, расположенные вплотную друг к другу.В каждую из таких окон загружается отдельная Web-страница определяемая с помощью тега <frame>. border, bordercolor, cols, frameborder, framespacing, rows <frameset>

frameset

<h2> Этот тег необходим для создания заголовка первого уровня. Текст будет отображаться крупным жирным шрифтом.(Самый крупный заголовок) align

h2

<h3> Этот тег необходим для создания заголовка второго уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок первого уровня) align

h3

<h4> Этот тег необходим для создания заголовка третьего уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок второго уровня) align

h4

<h5> Этот тег необходим для создания заголовка четвертого уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок третьего уровня) align

h5

<h5> Этот тег необходим для создания заголовка пятого уровня. Текст будет отображаться крупным жирным шрифтом.(Менее крупный заголовок чем заголовок четвертого уровня) align

h5

<h6> Этот тег необходим для создания заголовка шестого уровня. Текст будет отображаться крупным жирным шрифтом.(Самый маленький заголовок) align

h6

<head> Тег <head> нужен для хранения технических элементов, которые помогают Web-браузеру работать с этим документом.Например, хранение мета данных, которые используют поисковые системы. profile
<header> Этот тег предназначен для создания <<шапки>> сайта, которая обычно размещается в верхней части HTML страницы. Нет
<hgroup> Этот тег предназначен для группирования заголовков(h2-h6) Web-страницы. Внутри этого тега располагаются теги от <h2> до <h6>. Нет
<hr> Тег <hr> предназначен для рисования горизонтальной линии. Так же дизайн этой линии можно изменять в зависимости от параметров,например: цвет и толщину. align, color, noshade, size, width <hr>

hr

<html> <html> это глобальный тег, в который обычно заключено все содержимое Web-страницы.Исключение составляет элемент <!DOCTYPE> — он необходим для определения типа документа. title, manifest, xmlns
<i> Тег <i> предназначен для выделения шрифта курсивом. Нет <i>

i

<iframe> Тег <iframe> предназначен для создания плавающего фрейма. align, allowtransparency, frameborder, height, hspace, marginheight, marginwidth, name, sandbox, scrolling, seamless, src, srcdoc, vspace, width
<img> align align, alt, border, height, hspace, ismap, longdesc, src, vspace, width, usemap
<input> Тег <input> предназначен для создания различных элементов интерфейса и позволяет обеспечить взаимодействие с пользователем.Такими элементами считаются: текстовые поля, различные кнопки, переключатели и флажки, расположенные на форме. accept, accesskey, align, alt, autocomplete, border, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, tabindex, type, value <input>

input

<ins> Тег <ins> необходим для того чтобы выделить текст, который добавлен в документ как новый.Обычно отображается как подчеркнутый текст. cite, datetime <ins>

ins

<isindex> Тег <isindex> необходим для реализации поискового индекса в вашем Web-документе. Этот тег устарел. action, prompt <isindex>

isindex

<kbd> Этот тег применяется для обозначения названия клавиш. Нет <kbd>

kbd

<keygen> Этот тег предназначен для генерации ключей. autofocus, challenge, disabled, form, keytype, name
<label> Тег <label> предназначен для установки связи между определенной меткой, в качестве которой обычно выступает текст, и элементом формы(<input>, <select>, <textarea>). accesskey, for
<legend> Тег <legend> предназначен для создания заголовка группы элементов формы, которая создается с помощью тега <fieldset>.Текст который располагается внутри тега <legend>, встраивается в рамку. accesskey, align, title <legend>

legend

<li> Тег определяет отдельный элемент списка. А внешние теги <ul> и <ol> определяют вид списка – маркированный или нумерованный. type, value <li>

li

<link> Тег <link> предназначен для подключения внешних файлов, например: стилей CSS или шрифтов.Размещается внутри контейнера <head> и не создает ссылку. charset, href, media, rel, sizes, type
<map> Тег <map> служит областью для элементов <area>, которые задают активные области для карт-изображений. name
<marquee> Тег <marquee> предназначен для создани

Таблицы в HTML. теги . Вставка таблиц. форматирование таблиц

Таблицы в настоящее время стали неотъемлемой частью web страниц. Во времена создания сайтов только с помощью голого HTML кода таблицы использовались для верстки страниц. Таблица с невидимыми границами отлично представляла собой образ модульной сетки, в которой очень удобно размещать информацию, выровненную на странице. Но с появлением каскадных таблиц стилей CSS, языка программирования JavaScript необходимость в верстке страниц с помощью таблицы отпала и на смену табличной верстке пришла блочная верстка, которая имела множество преимуществ перед табличной.

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

Для добавления таблицы на страницу используется тег <TABLE> </TABLE>, он служит контейнером для остальных тегов таблицы. Как уже говорили любая таблица состоит из строк и ячеек в строке, в HTML для обозначения строк используется тег <TR>, а для определения ячеек в строке используется тег <TD>. Так же для обозначения ячеек может применяться тег <TH>, в основном он используется как заголовки столбцов таблицы, так как текст содержащийся в данном теге будет выведен браузером жирным начертанием и выровненный по центру ячейки.

Пример таблицы в HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя первая таблица</title>
  </head>
  <body>
   <table>
  <caption align=top>Заголовок таблицы</caption>
      <tr>
        <td>Ячейка 1</td>
        <td>Ячейка 2</td>
      </tr>
      <tr>
        <td>Ячейка 3</td>
        <td>Ячейка 4</td>
      </tr>
   </table>
  </body>
</html>

Для написания заголовков таблицы используется специальный тег <CAPTION>. По умолчанию заголовок созданный с помощью данного тега центрируется и размещается либо над таблицей либо под таблицей, за расположение заголовка отвечает атрибут ALIGN тега <CAPTION>, данный атрибут может принимать значения TOP (сверху) или BOTTOM (снизу).

<caption align=top> заголовок таблицы вверху</caption>

<caption align=bottom> заголовок таблицы внизу</caption>

Атрибуты тега <TABLE>

Как и другие теги HTML тег добавления таблиц так же имеет свои специальные атрибуты.

bgcolor — атрибут устанавливает цвет фона таблицы, в качестве значений используются цвета системы RGB, либо названия цвета.

align — задает выравнивание таблицы на странице, таблица может быть выровнена по левому краю, по центру и по правому краю. Если у таблицы задано выравнивание по левому или правому краю то текст на странице будет обтекать таблицу сбоку и снизу.

width — устанавливает ширину таблицы, если ширина содержимого будет больше заданного размера то браузер будет пытаться уместить содержимое за счет форматирования текста, если данное действие невозможно (например в ячейке находится изображение), то атрибут ширины будет проигнорирован а ширина таблице будет соответствовать её содержимому.

border — устанавливает толщину границы в пикселях вокруг таблицы. При указании данного атрибута так же отображаются границы между ячейками.

cellpadding — данный атрибут определяет расстояние между границей ячейки и её содержимым. Данный атрибут добавит пустое место к ячейке, тем самым увеличив ее размер. Применение данного атрибута необходимо чтобы рамка не слипалась с текстом, для лучшей читабельности и восприятия текста.

cellspacing — определяет расстояние между внешними границами ячеек. Если у таблицы задан атрибут border, то толщина границы в данном случае будет входить в общее значение расстояния.

cols — указывает браузеру количество столбцов в таблице для подготовки к её отображению. Браузер начнет отображать таблицу только после её полной загрузки, а данный атрибут позволяет ускорить время вывода таблицы на экран.

Теги <THEAD>, <TBODY>, <TFOOT>.

Так же как и для всей страницы HTML таблицу можно разделить на три части: это заголовочная часть, основная часть и подвал таблицы. Для каждой части созданы свои определенные теги соответственно:

<THEAD> </THEAD> -Заголовочная часть таблицы, с помощью данного тега в таблице определяются заголовки столбцов, Строк в данной части может быть несколько и создаются они с помощью привычного  тега <TR></TR>, ячейки внутри строки создаются с помощью тега <TH></TH>. Текст помещенный в данные контейнеры будет отформатирован автоматически по центру ячейки, полужирным начертанием.

<TBODY> </TBODY> — основная часть таблицы. Содержит основной набор строк и столбцов которые необходимо вывести браузеру.

<TFOOT> </TFOOT> — помимо заголовка каждый столбец может иметь и подвал, например для подсчета итоговой суммы значений ячеек столбца или для пояснения или комментария к данному столбцу. Повал задается после определения заголовков столбцов, то есть сразу после тега <THEAD>.

Отличительная особенность данных тегов состоит в том что при создании таблицы в начале определяются заголовочная часть <THEAD> и подвал <TFOOT>, а только после этого создается основная часть <TBODY>.

Пример использования тегов структуры таблицы:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя первая таблица</title>
  </head>
  <body>
   <table border=2px>
  <caption align=top>Заголовок таблицы</caption>
<thead>
      <tr>
        <th> Заголовок столбца 1</th>
        <th>Заголовок столбца 2</th>
      </tr>
</thead>
<tfoot>      
<tr>
        <td>подвал столбца 1</td>
        <td>подвал столбца 2</td>
      </tr>
</tfoot>
<tbody>
   <tr>
    <td>Ячейка 1</td>
    <td>ячейка 2</td>
   </tr>
</tbody>
   </table
  </body>
</html>

Работа данного примера

Атрибуты тегов <TR> и <TD>

Теги строк и теги ячеек так же имеют свои атрибуты специфичные в использовании.

COLSPAN — Атрибут тега <TD>? служит для объединения нескольких столбцов в один. Значением данного атрибута является количество столбцов которые необходимо соединить в один. Например: colspan=3, говорит о том, что данный столбец замещает собой три столбца таблицы (себя и еще два следующих), столбцы которые были соединены создавать данной строке больше не нужно.

ПРИМЕР:

<table border=2px>
  <tr>
    <td colspan=2>ячейка состоящая из соединенных 2 столбцов</td>
  </tr>
   <tr>
    <td>Ячейка 2</td>
    <td>ячейка 3</td>
   </tr>
</table> 

ROWSPAN — атрибут тега <TD> позволяющий объединять строки таблицы для данного столбца. Значение атрибута является число строк в столбце необходимое для объединения.

ПРИМЕР

<table border=2px>
  <tr>
    <td rowspan=2>ячейка состоящая из соединенных 2 строк</td>
    <td> ячейка 2</td>
  </tr>
   <tr>
    <td>Ячейка 3</td>
   </tr>
</table> 

ALIGN — атрибут позволяет задать выравнивание текста в ячейке, может принимать три значения: по центру (center), по левому краю (left), по правому краю (right).

VALIGN — позволяет установить вертикальное выравнивание содержимого ячейки. по умолчанию содержимое ячейки располагается по вертикали в центре. Может принимать четыре значения: по центру (middle), по верхнему краю (top), по нижнему краю (bottom), по базовой линии (baseline, при этом происходит привязка содержимого ячейки к одной линии).

BGCOLOR — позволяет установить цвет фона отдельной ячейки таблицы. Может принимать значения в виде названия цвета, либо код в шестнадцатеричной системе счисления по модели RGB.

Лабораторная работа 6. Таблицы в HTML (pdf)

HTML Таблицы



Пример таблицы HTML

Компания Контакты Страна
Alfreds Futterkiste Мария Андерс Германия
Centro comercial Moctezuma Франсиско Чанг Мексика
Ernst Handel Роланд Мендель Австрия
Island Trading Хелен Беннетт Великобритания
Laughing Bacchus Winecellars Йоши Таннфмури Канада
Magazzini Alimentari Riuniti Иоанн Ровелли Италия
Редактор кода »

Определение HTML-таблицы

Таблица HTML определяется тегом<table>.

Каждая строка таблицы определяется тегом <tr>. Заголовок таблицы определяется тегом <th>. Заголовок таблицы по умолчанию, выделяется жирным и устанавливается по центру. Таблица данных/ячейки определяется тегом <td>.

Пример

<table>
 <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Лет</th>
 </tr>
 <tr>
    <td>Джилл</td>
    <td>Смит</td>
    <td>50</td>
 </tr>
  <tr>
    <td>Ева</td>
    <td>Джексон</td>
    <td>94</td>
  </tr>
</table>

Редактор кода »

Примечание: элементы <td> — это контейнеры данных таблицы. Они могут содержать любые HTML-элементы, тексты, изображения, списки, таблицы, и т. д.


Таблицы HTML — Добавление границы

Если не указывать границы для таблицы, они будет показана без границ.

Границы устанавливаются с помощью свойства CSS border:

Помните, нужно определять границы для таблицы и ячеек таблицы.


Таблицы HTML — Рухнули Границы

Если вы хотите, чтобы границы рухнули в одну границу, нужно добавить свойство CSS border-collapse:


Таблицы HTML — Добавление Ячейки

Ячейки задает расстояние между содержимым ячейки и ее границами.

Если Вы не укажете заполнение ячеек таблицы будут отображаться без отступа.

Установить отступы, используйте в CSS свойство padding:


Таблицы HTML — Заголовок Выровнить Слева

По умолчанию, Заголовок таблицы жирный и по центру.

Заголовок таблицы выровнить слева в CSS с помощью свойства text-align:


Таблицы HTML — Добавление Границы Интервала

Границы spacing задает пространство между ячейками.

Установить границы интервалов для таблицы в CSS с помощью свойства border-spacing:

Примечание: Если границы таблицы рухнули, border-spacing не будет иметь никакого эффекта.


Таблицы HTML — Клетки, которые охватывают несколько колон

Чтобы сделать промежуток ячейке более одного столбца, используйте атрибут colspan:

Пример

<table>
  <tr>
    <th>Имя</th>
    <th colspan=»2″>Телефон</th>
  </tr>
  <tr>
    <td>Билл Гейтс</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Редактор кода »

Таблицы HTML — Клетки, которые охватывают несколько строк

Чтобы сделать интервал ячеек более одной строки, используйте атрибут rowspan:

Пример

<table>
  <tr>
    <th>Имя:</th>
    <td>Билл Гейтс</td>
  </tr>
  <tr>
    <th rowspan=»2″>Телефон:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Редактор кода »

Таблицы HTML — Добавление надписи

Чтобы добавить Надпись к таблице, используйте тег <caption>:

Пример

<table>
  <caption>Ежемесячные сбережения</caption>
  <tr>
    <th>Месяц</th>
    <th>Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>$50</td>
  </tr>
</table>

Редактор кода »

Пимечание: Тег <caption> должен быть включен сразу же после тега <table>.


Особый стиль для одной таблицы

Чтобы определить особый стиль в специальную таблицу, добавить атрибут id в таблице:

Пример

<table>
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Лет</th>
  </tr>
  <tr>
    <td>Ева</td>
    <td>Джексон</td>
    <td>94</td>
  </tr>
</table>

Теперь вы можете определить специальный стиль для этой таблицы:

table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}

Редактор кода »

Добавить больше стилей:

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}

Редактор кода »

Краткое содержание

  • Используйте в HTML элемент <table> для определения таблиц
  • Используйте в HTML элемент <tr> чтобы определить строку таблицы
  • Используйте в HTML элемент <td> для определения табличных данных
  • Используйте в HTML элемент <th> чтобы определить заголовок таблицы
  • Используйте в HTML элемент <caption> чтобы определить надпись таблицы
  • Используйте в CSS свойство border чтобы определить границы
  • Используйте в CSS свойство border-collapse чтобы рухнули границы ячеек
  • Используйте в CSS свойство padding чтобы добавить отступы для ячеек
  • Используйте в CSS свойство text-align для выравнивания текста в ячейке
  • Используйте в CSS свойство border-spacing чтобы задать интервал между ячейками
  • Используйте атрибут colspan для создания ячейки охватывают множество столбцов
  • Используйте атрибут rowspan чтобы сделать промежуток ячейке несколько строк
  • Используйте атрибут id для определения одной таблицы

Проверьте себя с помощью упражнений!

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

Тег Описание
<table> Определяет таблицу
<th> Определяет заголовок ячейки в таблице
<tr> Определяет строки в таблице
<td> Определяет ячейки в таблице
<caption> Определяет надпись таблицы
<colgroup> Определяет группу из одной или нескольких колон в таблице для форматирования
<col> Задает свойства столбца для каждого столбца в елементе <colgroup>
<thead> Определяет группы содержимого заголовка в таблице
<tbody> Определяет группы содержание тела в таблице
<tfoot> Определяет группы, содержание, подвал в таблице

Тег таблицы HTML


Пример

Простая таблица HTML, содержащая два столбца и две строки:

<таблица>

Месяц
Экономия


Январь
г. 100

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

Дополнительные примеры «Попробуйте сами» ниже.


Определение и использование

Тег

определяет таблицу HTML.

Таблица HTML состоит из одного элемента

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


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

и .

Элемент

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

Таблица HTML может также включать

,
Элемент
<таблица> Есть Есть Есть Есть Есть

Глобальные атрибуты

Тег

также поддерживает глобальные атрибуты в HTML.


Атрибуты событий

Тег

также поддерживает атрибуты событий в HTML.



Другие примеры

Пример

Как добавить свернутые границы в таблицу (с помощью CSS):




table, th, td {
border: 1px сплошной черный;
граница-коллапс: коллапс;
}

<таблица>













Месяц Экономия
январь 100
февраль 80 долларов


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

Пример

Как выровнять таблицу по правому краю (с помощью CSS):

<таблица>

Месяц
Экономия


январь
100


февраль
80 долларов

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

Пример

Как выровнять таблицу по центру (с помощью CSS):




table, th, td {
border: 1px сплошной черный;
}
стол.по центру {
маржа-слева: авто;
маржа-право: авто;
}

<таблица >

Месяц
Экономия


январь
100


февраль
80 долларов

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

Пример

Как добавить цвет фона в таблицу (с помощью CSS):

<таблица>

Месяц
Экономия


январь
100


февраль
80 долларов

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

Пример

Как добавить отступ в таблицу (с помощью CSS):




table, th, td {
border: 1px сплошной черный;
}

th, td {
padding: 10px;
}















Месяц Экономия
январь 100
февраль 80 долларов



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

Пример

Как установить ширину таблицы (с помощью CSS):

<таблица>

Месяц
Экономия


январь
100


февраль
80 долларов

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

Пример

Как создавать заголовки таблиц:












Имя Электронная почта Телефон
Джон Доу джон[email protected] 123-45-678

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

Пример

Как создать таблицу с подписью:

<таблица>
Ежемесячная экономия

Месяц
Экономия


январь
100


февраль
80 долларов

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

Пример

Как определить ячейки таблицы, которые охватывают более одной строки или одного столбца:













Имя Электронная почта Телефон
Джон Доу джон[email protected] 123-45-678 212-00-546

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

Связанные страницы

Учебное пособие по HTML: таблицы HTML

Ссылка на HTML DOM: объект таблицы

Учебник CSS: таблицы стилей


Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент

со следующими значениями по умолчанию:

Пример

стол {
дисплей: стол;
бордюр-обвал: раздельный;
border-spacing: 2px;
цвет границы: серый;
}

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

: Элемент Table — веб-технологии для разработчиков

Элемент HTML

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

элементов,
  • необязательный элемент
  • ,
  • либо одно из следующих:
    • ноль или более
  • элементов
  • один или несколько элементов
  • необязательный элемент
  • Категории контента Расход
    Разрешенное содержание В этом порядке:
    1. необязательный элемент
    ,
  • ноль или более
  • Отсутствие тега Нет, и начальный, и конечный тег являются обязательными.
    Разрешенные родители Любой элемент, который принимает содержимое потока
    Неявная роль ARIA стол
    Разрешенные роли ARIA Любая
    Интерфейс DOM HTMLTableElement

    Атрибуты

    Этот элемент включает глобальные атрибуты.

    Устаревшие атрибуты

    выровнять

    Этот перечислимый атрибут указывает, как таблица должна быть выровнена внутри содержащего документа.Может иметь следующие значения:

    • слева : таблица отображается в левой части документа;
    • центр : таблица отображается в центре документа;
    • справа : таблица отображается в правой части документа.

    Установите margin-left и margin-right на auto или margin от до 0 auto для достижения эффекта, аналогичного атрибуту align.

    bgcolor

    Цвет фона таблицы. Это шестизначный шестнадцатеричный код RGB с префиксом # . Также можно использовать одно из предопределенных цветовых словечек.

    Для достижения аналогичного эффекта используйте свойство CSS background-color .

    граница

    Этот целочисленный атрибут определяет в пикселях размер рамки, окружающей таблицу.Если установлено значение 0, атрибут кадра устанавливается на недействительный.

    Для достижения аналогичного эффекта используйте сокращенное свойство CSS border .

    подкладка

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

    Для достижения аналогичного эффекта примените свойство border-collapse к элементу

    со значением collapse, а свойство padding - к элементам
    .

    расстояние между ячейками

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

    Для достижения аналогичного эффекта примените свойство border-spacing к элементу

    . border-spacing не имеет никакого эффекта, если для border-collapse установлено значение collapse.

    рама

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

    Для достижения аналогичного эффекта используйте свойства border-style и border-width .

    правила

    Этот перечислимый атрибут определяет, где правила, то есть строки, должны отображаться в таблице.Может иметь следующие значения:

    • нет , что означает, что правила отображаться не будут; это значение по умолчанию;
    • групп , что приведет к отображению правил между группами строк (определенными элементами
    , и ) и между группами столбцов (определенными элементом и элементов) только;
  • строки , что приведет к отображению правил между строками;
  • columns , что приведет к отображению правил между столбцами;
  • все , что приведет к отображению правил между строками и столбцами.
  • Для достижения аналогичного эффекта примените свойство border к соответствующим элементам

    , , , или .

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

    Таблица с colgroup

    <Таблица> <Й> Страна <Й> Столица <Й> Население <Й> Язык <Цв> <Й> Известь <Й> Лимон <Й> Orange
     стол
    {
    граница-коллапс: коллапс;
    интервал границы: 0 пикселей;
    }
    таблица, th, td
    {
    отступ: 5 пикселей;
    граница: сплошной черный 1px;
    } 

    Проблемы доступности

    Подписи

    Предоставляя элемент

    Предоставление объявления scope = "col" в элементе

    .
    ширина

    Этот атрибут определяет ширину таблицы. Вместо этого используйте свойство CSS width .

    Примеры

    Простой стол

     <таблица>
      
    John Doe
    Джейн Doe

    Другие примеры

     

    Простая таблица с заголовком

    <Таблица>
    Имя Фамилия
    John Doe
    Джейн Doe

    Таблица с thead, tfoot и tbody

    <Таблица>
    Содержание заголовка 1 Содержание заголовка 2
    Основной текст 1 Основной текст 2
    Содержание нижнего колонтитула 1 Содержание нижнего колонтитула 2
    США Вашингтон, Д.С. 309 миллионов английский
    Швеция Стокгольм 9 миллионов Swedish

    Таблица с colgroup и col

    <Таблица>
    Green Желтый Orange

    Простая таблица с подписью

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

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

    Объем строк и столбцов

    Атрибут области действия в элементах заголовка является избыточным в простых контекстах, поскольку область действия определяется. Однако некоторые вспомогательные технологии могут не давать правильных выводов, поэтому указание области заголовка может улучшить взаимодействие с пользователем. В сложных таблицах область действия может быть указана так, чтобы предоставить необходимую информацию о ячейках, связанных с заголовком.

    Пример
     <таблица>
      
    Названия и значения цветов
    Имя HEX HSLa RGBa
    Бирюзовый <код> # 51F6F6 hsla (180, 90%, 64%, 1) rgba (81, 246, 246, 1)
    Золотарник <код> # F6BC57 hsla (38, 90%, 65%, 1) rgba (246, 188, 87, 1) поможет описать, что ячейка находится наверху столбца.Предоставление объявления scope = "row" в элементе поможет описать, что ячейка является первой в строке.

    Сложные столы

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

    В идеале рассмотрите альтернативные способы представления содержимого таблицы, включая разбиение ее на коллекцию меньших связанных таблиц, которые не должны полагаться на использование атрибутов colspan и rowspan .Помимо помощи людям, использующим вспомогательные технологии, в понимании содержимого таблицы, это также может принести пользу людям с когнитивными проблемами, которые могут испытывать трудности с пониманием ассоциаций, описываемых макетом таблицы.

    Если таблица не может быть разбита на части, используйте комбинацию атрибутов id и заголовков , чтобы программно связать каждую ячейку таблицы с заголовком (ами), с которым связана ячейка.

    Технические характеристики

    Совместимость с браузером

    Обновление данных совместимости на GitHub
    Desktop Mobile
    Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Chrome для Android Firefox Opera для Android Safari на iOS Samsung Internet
    таблица Chrome Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    выровнять Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    bgcolor Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    бордюр Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    обивка ячейки Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    расстояние между ячейками Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    рама Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    правила Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    сводка Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0
    ширина Хром Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка Да Opera Полная поддержка Да Safari Полная поддержка Да WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка Да Safari iOS Полная поддержка Да Samsung Интернет Android Полная поддержка 1.0

    Обозначения

    Полная поддержка
    Полная поддержка
    Устарело. Не для использования на новых сайтах.
    Устарело. Не для использования на новых сайтах.

    См. Также

      Свойства CSS
    • , которые могут быть особенно полезны для стилизации элемента : .

      HTML: тег

      Документ HTML5

      Если вы создали новую веб-страницу в HTML5, ваш тег

      может выглядеть так:

        
      
      
      <Голова>
      
       Пример HTML5 от www.techonthenet.com 
      
      
      <Тело>
      <Таблица>
        

      В этом примере документа HTML5 мы создали таблицу с помощью тега

      Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
      Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2
      Данные в столбце 1, строке 3 Данные в столбце 2, строке 3 Данные в столбце 3, строке 3
      Данные в столбце 1, строке 4 Данные в столбце 2, строке 4 Данные в столбце 3, строке 4
      , который имеет 3 столбца и 4 строки.Строка 1 таблицы определяется с помощью первого тега . Он имеет 3 ячейки заголовка таблицы, определенные с помощью тега
      . В строках 2–4 таблицы используется тег для определения стандартных ячеек таблицы.

      HTML 4.01 Переходный документ

      Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег

      может выглядеть так:

        
      
      
      <Голова>
      
       HTML 4.01 Переходный пример от www.techonthenet.com 
      
      
      <Тело>
      <Таблица>
        

      В этом HTML 4.01 Пример переходного документа, мы создали таблицу с помощью тега

      Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
      Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2
      Данные в столбце 1, строке 3 Данные в столбце 2, строке 3 Данные в столбце 3, строке 3
      Данные в столбце 1, строке 4 Данные в столбце 2, строке 4 Данные в столбце 3, строке 4
      , который имеет 3 столбца и 4 строки. Строка 1 таблицы определяется с помощью первого тега . Он имеет 3 ячейки заголовка таблицы, определенные с помощью тега
      . В строках 2–4 таблицы используется тег для определения стандартных ячеек таблицы.

      Переходный документ XHTML 1.0

      Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег

      может выглядеть так:

        
      
      
      <Голова>
      
       Переходный пример XHMTL 1.0 от www.techonthenet.com 
      
      
      <Тело>
      <Таблица>
        

      В этом XHTML 1.0 Пример переходного документа, мы создали таблицу с помощью тега

      Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
      Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2
      Данные в столбце 1, строке 3 Данные в столбце 2, строке 3 Данные в столбце 3, строке 3
      Данные в столбце 1, строке 4 Данные в столбце 2, строке 4 Данные в столбце 3, строке 4
      , который имеет 3 столбца и 4 строки. Строка 1 таблицы определяется с помощью первого тега . Он имеет 3 ячейки заголовка таблицы, определенные с помощью тега
      . В строках 2–4 таблицы используется тег для определения стандартных ячеек таблицы.

      Строгий документ XHTML 1.0

      Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег

      может выглядеть так:

        
      
      
      <Голова>
      
       Строгий пример XHTML 1.0 от www.techonthenet.com 
      
      
      <Тело>
      <Таблица>
        

      В этом XHTML 1.0 Пример строгого документа, мы создали таблицу с помощью тега

      Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
      Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2
      Данные в столбце 1, строке 3 Данные в столбце 2, строке 3 Данные в столбце 3, строке 3
      Данные в столбце 1, строке 4 Данные в столбце 2, строке 4 Данные в столбце 3, строке 4
      , который имеет 3 столбца и 4 строки. Строка 1 таблицы определяется с помощью первого тега . Он имеет 3 ячейки заголовка таблицы, определенные с помощью тега
      . В строках 2–4 таблицы используется тег для определения стандартных ячеек таблицы.

      XHTML 1.1, документ

      Если вы создали новую веб-страницу в XHTML 1.1, ваш тег

      может выглядеть так:

        
      
      
      <Голова>
      
       XHTML 1.1 Пример с сайта www.techonthenet.com 
      
      
      <Тело>
      <Таблица>
        

      В этом XHTML 1.1 Пример документа, мы создали таблицу с помощью тега

      Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
      Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2
      Данные в столбце 1, строке 3 Данные в столбце 2, строке 3 Данные в столбце 3, строке 3
      Данные в столбце 1, строке 4 Данные в столбце 2, строке 4 Данные в столбце 3, строке 4
      , который имеет 3 столбца и 4 строки. Строка 1 таблицы определяется с помощью первого тега . Он имеет 3 ячейки заголовка таблицы, определенные с помощью тега
      . В строках 2–4 таблицы используется тег для определения стандартных ячеек таблицы.

      ,

      HTML 5 Тег

      Тег HTML

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

      Элементы таблицы

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

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

      Элемент

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

      1. опционально тег
      тегов
    • , за которым необязательно следует тег
    • , за которым может следовать тег
    • , за которым следует ноль или несколько тегов
    • или один или несколько тегов
    • , за которым необязательно следует тег
    • (но всего может быть только один дочерний тег )
    • , необязательно смешанный с одним или несколькими элементами поддержки сценария (т.е.е. либо

      Отправить ответ

      avatar
        Подписаться  
      Уведомление о
    • , за которым следует ноль или более