Th тег: Атрибут align | htmlbook.ru

Содержание

Атрибут scope | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
5.0+1.0+1.0+2.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Синтаксис

<th scope="col | colgroup | row | rowgroup">...</th>

Значения

col
Ячейка заголовка установлена для колонки.
colgroup
Ячейка заголовка установлена для группы колонок.
row
Ячейка заголовка задана для строки.
rowgroup
Ячейка заголовка установлена для группы строк.

Значение colgroup применяется в таблице, в которой используется тег <colgroup> или при объединении ячеек с помощью атрибута colspan. Значение rowgroup требуется при объединении ячеек через атрибут rowspan.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут scope</title>
 </head>
 <body> 
  <table border="1">
   <tr>
    <th></th>
    <th scope="col">Месяц</th>
    <th scope="col">Заработано</th>
   </tr>
   <tr>
    <td scope="row">1</td>
    <td>Январь</td>
    <td>152</td>
   </tr>
   <tr>
    <td scope="row">2</td>
    <td>Февраль</td>
    <td>176</td>
   </tr>
   <tr>
    <td scope="row">3</td>
    <td>Март</td>
    <td>244</td>
   </tr>
  </table> 
 </body>
</html>

Тег th



Пример

Простая HTML-таблица с двумя ячейками заголовка и двумя ячейками данных:

<table>
 <tr>
   <th>Month</th>
   <th>Savings</th>
 </tr>
 <tr>
   <td>January</td>
   <td>$100</td>
 </tr>
</table>

Подробнее примеры ниже.


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

Тег <th> определяет ячейку заголовка в таблице HTML.

Таблица HTML имеет два типа ячеек:

  • Header cells - содержит сведения о заголовке (созданные с помощью <th> элемент)
  • Standard cells - содержит данные (созданные с помощью <td> элемента)

Текст в <th> элементах выделен полужирным шрифтом и по умолчанию по центру.

Текст в элементах <td> является обычным и выровнен по левому краю по умолчанию.


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

Элемент
<th> Да Да Да Да Да

Советы и примечания

Совет: Используйте атрибут COLSPAN и RowSpan, чтобы позволить содержимому охватывать несколько столбцов или строк!



Различия между HTML 4,01 и HTML5

Все атрибуты макета удаляются в HTML5.


Атрибуты

Атрибут Значение Описание
abbr text Задает сокращенную версию содержимого в ячейке заголовка
align left
right
center
justify
char
Не поддерживается в HTML5.
Выравнивание содержимого в ячейке заголовка
axis category_name Не поддерживается в HTML5.
Классифицирует ячейки заголовка
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Не поддерживается в HTML5.
Задает цвет фона ячейки заголовка
char character Не поддерживается в HTML5.
Выравнивание содержимого в ячейке заголовка по символу
charoff number  Не поддерживается в HTML5.
Задает количество символов, которое будет выровнено по отношению к символу, указанному атрибутом char
colspan number Указывает количество столбцов, которые должна охватывать ячейка заголовка
headers header_id Указывает одну или несколько ячеек заголовка, связанных с ячейкой
height pixels
%
Не поддерживается в HTML5.
Задает высоту ячейки заголовка
nowrap nowrap Не поддерживается в HTML5.
Указывает, что содержимое внутри ячейки заголовка не должно обтекать
rowspan number Указывает количество строк, которые должны охватываться ячейкой заголовка
scope col
colgroup
row
rowgroup
Указывает, является ли ячейка заголовка столбцом, строкой или группой столбцов или строк
sorted reversed
number
reversed number
number reversed
Определяет направление сортировки столбца
valign top
middle
bottom
baseline
Не поддерживается в HTML5.
Вертикальное выравнивание содержимого в ячейке заголовка
width pixels
%
Не поддерживается в HTML5.
Задает ширину ячейки заголовка

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

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


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

Тег <th> также поддерживает Атрибуты событий в HTML.


Попробуйте примеры

Заголовки таблиц
Создание заголовков таблиц.

Таблица с подписью
Таблица HTML с подписью.

Теги внутри таблицы
Отображение элементов внутри других элементов.

Cлоктя, которые охватывают более одной строки/столбца
Определение ячеек таблицы, охватывающих более одной строки или одного столбца.


Похожие страницы

HTML Учебник: HTML Tables

HTML DOM Ссылки: TableHeader Object

CSS Учебник: Styling Tables


Параметры CSS по умолчанию

Большинство браузеров будут отображать <th> элемент со следующими значениями по умолчанию:

th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: center;
}

HTML тег

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

Тег <th> может содержать изображения, текст, формы, ссылки и другие HTML элементы, которые можно поместить в тело документа. Размер таблицы корректируется автоматически на основе ее содержимого.

Содержимое тега <th> по умолчанию отображается жирным шрифтом и выравнивается по центру. Для изменения внешнего вида содержимого можно использовать CSS стили.

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

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

Добавленные браузером ячейки не имеют рамок, и если они находятся друг за другом, то будут отображаться в виде одной объединенной ячейки.

Синтаксис ¶

<table> 
  <tr> 
    <th>...</th> 
  </tr> 
</table>

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      th, td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Месяц</th>
        <th>Дата</th>
      </tr>
      <tr>
        <td>Июнь</td>
        <td>18.07.2018</td>
      </tr>
    </table>
  </body>
</html>
Попробуйте сами!

Результат¶

В этом примере наши заголовки - "Месяц" и "Дата". Для каждого заголовка мы использовали отдельный тег <th>. Оба тега мы поместили в элемент <tr>.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      th, td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th colspan="2">Месяц и дата </th>
      </tr>
      <tr>
        <td>Июнь</td>
        <td>18.07.2014</td>
      </tr>
    </table>
  </body>
</html>
Попробуйте сами!

Результат¶

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

Атрибуты¶

Тег <th> поддерживает также глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <th> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <th>:

Цвет текста внутри тега <th>:

Стили форматирования текста для тега <th>:

Другие свойства для тега <th>:

Тег | bookhtml.

ru

 

 

 

Тег <th> - элемент языка html, используемый для создания заголовка таблицы и размещается внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>. Ячейка заголовка таблицы имеет ширину всей таблицы. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.

Пример написания:

<table>

<tr>

<th>Заголовок</th>

</tr>

<tr>

<td>Текст</td>

<td>Текст</td>

</tr>

</table>

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

abbr....................Краткое описание содержимого ячейки.

align...................Определяет выравнивание содержимого ячейки по горизонтали.

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

background........Задает фоновый рисунок в ячейке.

bgcolor...............Цвет фона ячейки.

bordercolor..........Цвет рамки.

char....................Выравнивает содержимое ячейки по заданному символу.

charoff...............Смещает содержимое ячейки относительно заданного символа.

colspan...............Объединяет горизонтальные ячейки.

headers..............Позволяет связать ячейки таблицы с заголовками в речевых браузерах.

height................Высота ячейки.

nowrap...............Запрещает перенос строк.

rowspan..............Объединяет вертикальные ячейки.

scope..................Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.

valign..................Выравнивание содержимого ячейки по вертикали.

width..................Ширина ячейки.

 

Закрывающий тег не обязателен.

Язык HTML - это круто.

| Справочник HTML



Элемент <th> (от англ. "table header" ‒ «заголовок таблицы») определяет заголовочную ячейку HTML таблицы. Элемент <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри <table>.

В HTML таблице может быть два вида ячеек:

  • Заголовочная ячейка ‒ содержит информацию для верхнего колонтитула таблицы (создается при помощи элемента <th>). По умолчанию, текст в элементе <th> отображается жирным шрифтом и выравненным по центру.
  • Стандартная ячейка ‒ содержит табличные данные (создается при помощи элемента <td>). По умолчанию, текст в элементе <td> отображается обычным шрифтом и выравненным по левому краю.

Содержимым элемента <th> может являться любой HTML-элемент, который можно поместить в тело документа: текст, формы, изображения, таблицы.

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

Синтаксис

<table>
  ...
  <tr>
    ...
    <th> ... </th>
    ...
  </tr>
  ...
</table>

Закрывающий тег

Не обязателен.

Атрибуты

abbrУстарел в HTML5
Определяет сокращенный вариант содержания в ячейке данных, либо выступает в роли альтернативного текста. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.

alignУстарел в HTML5
Указывает выравнивание содержимого ячейки по горизонтали:
left - выравнивание содержимого ячейки по левому краю
center - выравнивание по центру
right - выравнивание по правому краю
justify - выравнивание по ширине (одновременно по правому и левому краю)
char - выравнивание по указанному символу

axisУстарел в HTML5
Группирует ячейки связанные между собой похожей информацией.

backgroundУстарел в HTML5
Задаёт фоновый рисунок в ячейке.

bgcolorУстарел в HTML5
Назначает цвет фона ячейки.

bordercolorУстарел в HTML5
Устанавливает цвет рамки.

charУстарел в HTML5
Выравнивает содержимое ячейки по заданному символу.
Пример: <td char="c" align="char">. ..</td>

charoffУстарел в HTML5
Задает смещение содержимого ячейки относительно заданного символа.

colspan
Указывает положительное целое число, определяющее сколько столбцов будет охватывать ячейка (по горизонтали). Значение по умолчанию ‒ 1.

headers
Указывает id одной или нескольких заголовочных ячеек (HTML тег <th>), связанных с данной ячейкой данных. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.

heightУстарел в HTML5
Устанавливает высоту ячейки данных.

nowrapУстарел в HTML5
Запрещает перенос строк.

rowspan
Объединяет вертикальные ячейки.

scopeУстарел в HTML5
Определяет связь ячейки простой таблицы с заголовками в речевых браузерах:
col - ячейка заголовка установлена для колонки
colgroup - ячейка заголовка установлена для группы колонок
row - ячейка заголовка задана для строки
rowgroup - ячейка заголовка установлена для группы строк

valignУстарел в HTML5
Назначает выравнивание содержимого ячейки по вертикали:
top - выравнивание содержимого ячейки по верхнему краю строки
middle - выравнивание по середине
bottom - выравнивание по нижнему краю
baseline - выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии

sortedОтсутствует в HTML 5. 1
Определяет направление сортировки столбца:
reversed - реверсивное направление сортировки столбца
number - указывает обычную последовательность столбцов
reversed number - указывает обратную последовательность столбцов
number reversed - указывает реверсивную последовательность столбцов

widthУстарел в HTML5
Определяет ширину ячейки данных. Используйте вместо него CSS свойство width.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <th> со следующими значениями CSS по умолчанию:

th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: center;
}

Различия между HTML 4.01 и HTML5

В HTML 5 была прекращена поддержка 9 атрибутов и одного в 5.1.

Пример использования:

Пример HTML: Попробуй сам
  <table>
    <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
    <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
    <tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
  </table>

Спецификации

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

Элемент
<th> 3+ 1+ 3. 5+ 1+ 1+ 1+
Элемент
<th> 1+ 1+ 6+ 1+

Попробуйте сами - Примеры

Как добавить рамку вокруг таблицы:
Граница таблицы

Как избавиться от «двойной рамки»:
Одинарная рамка для таблицы

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

Как изменить ширину таблицы:
Ширина таблицы

Как объединить столбцы таблицы:
Объединение столбцов

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

Как применять теги группирования элементов таблиц:
Теги группирования элементов таблиц


Учебник HTML

HTML уроки: HTML Табицы

HTML Элементы



HTML и CSS с примерами кода

Тег <th> (от англ. table heading — заголовок таблицы) предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная.

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

Таблицы

Синтаксис

<table>
  <tr>
    <th>...</th>
  </tr>
</table>

Закрывающий тег не обязателен.

Атрибуты

colspan
Объединяет горизонтальные ячейки.
headers
Позволяет связать ячейки таблицы с заголовками в речевых браузерах.
rowspan
Объединяет вертикальные ячейки.

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

colspan

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

Синтаксис

<th colspan="<число>">...</th>

Значения

Любое целое положительное число больше 1.

Значение по умолчанию

1

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

Для связывания ячеек между собой, ячейке в <th> пишется атрибут id, а в другой ячейке — атрибут headers со значением, совпадающим со значением id.

Синтаксис

<th>...</th>
<th headers="<идентификатор>">...</th>

Значения

Один или несколько идентификаторов, разделённых между собой пробелом.

Значение по умолчанию

Нет.

rowspan

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

Синтаксис

<th rowspan="<число>">...</th>

Значения

Любое целое положительное число больше 1.

Значение по умолчанию

1

Значения ARIA role

  • role=columnheader для заголовочной ячейки в столбце
  • role=rowheader для заголовочной ячейки в строке

Спецификации

Описание и примеры

<html>
  <head>
    <meta
      http-equiv="Content-Type"
      content="text/html; charset=utf-8"
    />
    <title>TH</title>
    <style type="text/css">
      table {
        border-collapse: collapse; /* Отображать двойные линии как одинарные */
      }
      th {
        background: #ccc; /* Цвет фона */
        text-align: left; /* Выравнивание по левому краю */
      }
      td,
      th {
        border: 1px solid #800; /* Параметры границы */
        padding: 4px; /* Поля в ячейках */
      }
    </style>
  </head>
  <body>
    <table cellspacing="0" border="1">
      <tr>
        <th>Браузер</th>
        <th colspan="3">Internet Explorer</th>
        <th colspan="3">Opera</th>
        <th colspan="2">Firefox</th>
      </tr>
      <tr>
        <th>Версия</th>
        <td>5. 5</td>
        <td>6.0</td>
        <td>7.0</td>
        <td>7.0</td>
        <td>8.0</td>
        <td>9.0</td>
        <td>1.0</td>
        <td>2.0</td>
      </tr>
      <tr>
        <th>Поддерживается</th>
        <td>Да</td>
        <td>Да</td>
        <td>Да</td>
        <td>Да</td>
        <td>Да</td>
        <td>Да</td>
        <td>Да</td>
        <td>Да</td>
      </tr>
    </table>
  </body>
</html>

Ссылки

  • Тег <th> MDN (рус.)

HTML тег th | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 02.03.2009

Тег <th> (англ. table header — заголовок таблицы) — тег-контейнер, определяет ячейку-заголовок таблицы.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<table>
<tr>
<th> ... </th>
</tr>
</table>

Атрибуты

Основные Вспомогательные События

abbr содержимое ячейки в сокращённой форме
align выраванивание текста в строке
  • left — по левому краю (по умолчанию)
  • center — по центру
  • right — по правому краю
  • justify — по ширине
axis список разделённых запятыми имён категорий ячейки
background URL фонового изображения для ячейки. В спецификации HTML 4.01 отсутствует
bgcolor цвет фона ячейки
bordercolor цвет рамки. В спецификации HTML 4.01 отсутствует
bordercolordark цвет правой и нижней частей рамки. В паре с bordercolorlight создает трехмерный эффект
В спецификации HTML 4. 01 отсутствует
bordercolorlight цвет левой и верхней частей рамки. В паре с bordercolordark создает трехмерный эффект
В спецификации HTML 4.01 отсутствует
char определяет символ по которому происходит выравнивание. Значением по умолчанию является символ десятичной точки
charoff определяет смещение первого в строке символа выравнивания
colspan число ячеек, объединяемых по горизонтали
class определяет имя используемого класса
dir определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
headers список ячеек с заголовочной информацией для текущей ячейки данных
height высота ячейки Не рекомендуется, согласно спецификации HTML 4.01
id уникальный индетификатор
lang определяет используемый язык
nowrap запрещает перенос слов в ячейке Не рекомендуется, согласно спецификации HTML 4. 01
onclick щелчек на элементе
ondblclick двойной щелчек на элементе
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
rowspan число ячеек, объединяемых по вертикали
scope набор ячеек данных, для которых текущая заголовочная ячейка предоставляет заголовочную информацию
  • row — для оставшейся части строки
  • col — для оставшейся части столбца
  • rowgroup — для оставшейся части группы строк
  • colgroup — для оставшейся части группы столбцов
style задает встроенную таблицу стилей
title добавляет всплывающую подсказку
valign вертикальное выраванивание в ячейке
  • baseline — по базовой линии
  • bottom — по нижнему краю
  • middle — по центру (по умолчанию)
  • top — по верхнему краю
width ширина ячейки. Не рекомендуется, согласно спецификации HTML 4.01
Пример

Задаем ширину и горизонтальное выравнивание:

<table>
<tr><th align="center">№ п/п</th><th align="center">Фамилия</th></tr>
<tr><td>1</td><td>Иванов</td></tr>
<tr><td>2</td><td>Петров</td></tr>
</table>

Объединение ячеек:

<table>
<tr>
<th>№ п/п</th><th>Род</th><th>Вид кактуса</th><th>количество в оранжерее, шт</th><th>заказано, шт</th>
</tr>
<tr>
<td>1</td><th rowspan="2">Gymnocalycium</th><td>Gymnocalycium hybopleurum</td><td>15</td><td>8</td>
</tr>
<tr>
<td>1</td><td>Gymnocalycium hybopleurum</td><td>15</td><td>8</td>
</tr>
</table>

Рекомендации по использованию
  • закрывающий тег рекомендован (</th>)
  • располагается внутри тега <tr>
  • тег <th> может содержать CDATA, строчные и блочные элементы
  • большинство браузеров отображают содержимое тега <th> полужирным шрифтом с выравниванием по центру ячейки
  • обязательных атрибутов нет
  • не рекомендуем использовать атрибуты для оформления ячеек, вместо этого применяйте таблицы стилей

В HTML есть два типа ячеек:

  • заголовочные - созданы с помощью тега <th>, текст в них полужирный, расположен по центру;
  • обычные - созданы с помощью тега <td>, текст обычной жирности, выровнен под левый край.

Ячейки могут быть пустыми (не содержать данных). Некторые браузеры не отображают рамки пустых ячеек, чтобы это обойти впишите пробел (&nbsp;) в ячейку.

Твой код:
<html> <head> <title></title> <style type="text/css"> <!-- table { border: 1px solid #000; /* оформляем границы таблицы */ border-collapse: collapse; /* убираем отступы между ячейками */ border-spacing: 0; margin-bottom: 18px; /* отступ между таблицами */ } td, th { border: 1px solid #000; /* оформляем границы ячеек */ } --> </style> </head> <body> <table> <tr><th align="center">№ п/п</th><th align="center">Фамилия</th></tr> <tr><td>1</td><td>Иванов</td></tr> <tr><td>2</td><td>Петров</td></tr> </table> <table> <tr> <th>№ п/п</th> <th>Род</th> <th>Вид кактуса</th> <th>количество в оранжерее, шт</th> <th>заказано, шт</th> </tr> <tr> <td>1</td> <td rowspan="2">Gymnocalycium</td> <td>Gymnocalycium hybopleurum</td> <td>15</td> <td>8</td> </tr> <tr> <td>2</td> <td>Gymnocalycium valnicekianum</td> <td>26</td> <td>6</td> </tr> <tr> <td>3</td> <td rowspan="2">Mammillaria</td> <td>Mammillaria discolor</td> <td>2</td> <td>0</td> </tr> <tr> <td>4</td> <td>Mammillaria johnstonii</td> <td>14</td> <td>4</td> </tr> </table> </body> </html> Сделай код и жми тут

Результат:
большой полигон

HTML-тэг


Пример

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














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

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

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


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

Тег определяет ячейку заголовка в таблице HTML.

Таблица HTML имеет два типа ячеек:

  • Ячейки заголовка - содержат информацию заголовка (создается с помощью элемент)
  • Ячейки данных - содержат данные (созданные с помощью элемента )

Текст в элементах по умолчанию выделен полужирным шрифтом и центрирован.

Текст в элементах по умолчанию обычный и выровнен по левому краю.


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

Элемент
Есть Есть Есть Есть Есть

Атрибуты

Атрибут Значение Описание
abbr текст Задает сокращенную версию содержимого ячейки заголовка
colspan номер Определяет количество столбцов, которые должна занимать ячейка заголовка.
заголовки header_id Определяет одну или несколько ячеек заголовка, с которыми связана ячейка.
пролет между рядами номер Определяет количество строк, которые должна занимать ячейка заголовка.
область применения столб
colgroup
ряд
rowgroup
Указывает, является ли ячейка заголовка заголовком для столбца, строки или группы столбцов или строк.

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

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


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

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



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

Пример

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

<таблица>

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


январь
100


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

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

Пример

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

<таблица>

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


январь
100

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

Пример

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

<таблица>

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


январь
100

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

Пример

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










Месяц Мои сбережения на новую машину
Январь 100

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

Пример

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

<таблица>

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


январь
100

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

Пример

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

<таблица>

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


январь
100

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

Пример

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












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

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

Пример

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

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

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


январь
100


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

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

Пример

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













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

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

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

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

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

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


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

Большинство браузеров будут отображать элемент со следующими значениями по умолчанию:

th {
display: таблица-ячейка;
вертикальное выравнивание: наследование;
font-weight: жирный;
выравнивание текста: центр;
}


Атрибут области действия HTML

❮ HTML-тег

Пример

Укажите, что две ячейки заголовка являются заголовками для столбцы:

<таблица>


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


1
Январь
г. 100


2
февраль
г. 80

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

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

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

Примечание: Атрибут scope не имеет визуального эффекта в обычных веб-браузерах, но может быть используется программами чтения с экрана.


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

Атрибут
область применения Есть Есть Есть Есть Есть

Синтаксис

Значения атрибутов

Значение Описание
столб Указывает, что ячейка является заголовком столбца
ряд Указывает, что ячейка является заголовком для строки
colgroup Указывает, что ячейка является заголовком для группы столбцов
группа строк Указывает, что ячейка является заголовком для группы строк

❮ HTML-тег

- HTML: язык разметки гипертекста

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

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

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

abbr
Этот атрибут содержит краткое сокращенное описание содержимого ячейки.Некоторые пользовательские агенты, такие как программы для чтения речи, могут представлять это описание перед самим контентом.
colspan
Этот атрибут содержит неотрицательное целое число, указывающее, на сколько столбцов расширяется ячейка. Его значение по умолчанию - 1 . Значения выше 1000 будут считаться неправильными и будут установлены на значение по умолчанию (1).
Этот атрибут содержит список разделенных пробелами строк, каждая из которых соответствует атрибуту id элементов , которые применяются к этому элементу.
пролет между рядами
Этот атрибут содержит неотрицательное целое число, указывающее, сколько строк занимает ячейка. Его значение по умолчанию - 1 ; если его значение установлено на 0 , оно продолжается до конца раздела таблицы ( , , , даже если неявно определено), которому принадлежит ячейка. Значения выше 65534 сокращаются до 65534.
объем
Этот перечислимый атрибут определяет ячейки, к которым относится элемент заголовка (определенный в ).Может иметь следующие значения:
  • строка : заголовок относится ко всем ячейкам строки, к которой он принадлежит.
  • col : заголовок относится ко всем ячейкам столбца, которому он принадлежит.
  • группа строк : заголовок принадлежит группе строк и относится ко всем ее ячейкам. Эти ячейки могут быть размещены справа или слева от заголовка, в зависимости от значения атрибута dir в элементе .
  • colgroup : заголовок принадлежит группе colgroup и относится ко всем ее ячейкам.
  • Если атрибут области действия не указан или его значение не равно row , col , rowgroup или colgroup , тогда браузеры автоматически выбирают набор ячеек, к которым применяется ячейка заголовка.

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

    выровнять
    Этот перечисляемый атрибут определяет, как будет обрабатываться горизонтальное выравнивание содержимого ячейки. Возможные значения:
    • слева : содержимое выравнивается по левому краю ячейки.
    • центр : содержимое центрируется в ячейке.
    • справа : содержимое выравнивается по правому краю ячейки.
    • по ширине (только с текстом): содержимое растягивается внутри ячейки так, чтобы покрывать всю ее ширину.
    • char (только с текстом): содержимое выравнивается по символу внутри элемента
    также может создать дополнительную ширину.Но если ширина столбца слишком мала для правильного отображения конкретной ячейки, при отображении он будет расширяться. Примечание: Не используйте этот атрибут, так как он устарел в последнем стандарте: вместо этого используйте свойство CSS width .

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

    HTML: tag

    HTML5 Документ

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

    с минимальным смещением. Этот символ определяется атрибутами char и charoff .

    Значение по умолчанию, когда этот атрибут не указан, - слева .

    Примечание: Не используйте этот атрибут, так как он устарел в последней версии стандарта.
    • Чтобы добиться того же эффекта, что и слева, , по центру, , справа, или , выровняйте значения по ширине, примените свойство CSS text-align к элементу.
    • Чтобы добиться того же эффекта, что и значение char , присвойте свойству text-align то же значение, которое вы использовали бы для char .Не реализовано в CSS3.
    ось
    Этот атрибут содержит список строк, разделенных пробелами. Каждая строка - это id группы ячеек, к которой применяется этот заголовок. Примечание: Не используйте этот атрибут, поскольку он устарел в последнем стандарте: вместо этого используйте атрибут области действия .
    bgcolor
    Этот атрибут определяет цвет фона каждой ячейки в столбце.Он состоит из шестизначного шестнадцатеричного кода, определенного в sRGB, и имеет префикс "#". Этот атрибут может использоваться с одной из шестнадцати предопределенных цветовых строк:
    черный = "# 000000" зеленый = "# 008000"
    серебро = "# C0C0C0" лайм = "# 00FF00"
    серый = "# 808080" оливковый = "# 808000"
    белый = "#FFFFFF" желтый = "# FFFF00"
    бордовый = "# 800000" флот = "# 000080"
    красный = "# FF0000" синий = "# 0000FF"
    фиолетовый = "# 800080" бирюзовый = "# 008080"
    фуксия = "# FF00FF" аква = "# 00FFFF"
    Примечание. Не используйте этот атрибут, так как он нестандартен и реализован только в некоторых версиях Microsoft Internet Explorer: для элемента
    следует использовать стили с использованием CSS.Чтобы создать аналогичный эффект, используйте вместо этого свойство background-color в CSS.
    символ
    Содержимое элемента ячейки выровнено по символу. Типичные значения включают точку (.) Для выравнивания чисел или денежных значений. Если для align не задано значение char , этот атрибут игнорируется. Примечание: Не используйте этот атрибут, так как он устарел в последней версии стандарта. Чтобы добиться того же эффекта, вы можете указать символ в качестве первого значения свойства text-align , Unimplemented in CSS3.
    чугун
    Этот атрибут используется для смещения данных столбца вправо от символа, указанного атрибутом char . Его значение определяет продолжительность этого сдвига.

    Примечание: Не используйте этот атрибут, поскольку он устарел в последнем стандарте.

    высота
    Этот атрибут используется для определения рекомендуемой высоты ячейки. Примечание: Не используйте этот атрибут, так как он устарел в последнем стандарте: вместо этого используйте свойство CSS height .
    валин
    Этот атрибут определяет, как текст выравнивается по вертикали внутри ячейки. Возможные значения этого атрибута:
    • базовая линия : размещает текст рядом с нижней частью ячейки и выравнивает его по базовой линии символов, а не по нижней части. Если символы не опускаются ниже базовой линии, значение базовой линии дает тот же эффект, что и нижний .
    • внизу : размещает текст в нижней части ячейки.
    • по центру : центрирует текст в ячейке.
    • и вверху : текст размещается в верхней части ячейки.
    Примечание: Не используйте этот атрибут, поскольку он устарел в последнем стандарте: вместо этого используйте свойство vertical-align CSS.
    ширина
    Этот атрибут используется для определения рекомендованной ширины ячейки. Дополнительное пространство можно добавить с помощью свойств cellspacing и cellpadding , а ширина элемента
    может выглядеть так:

      
    
    
    
    
     Пример HTML5 от www.<img src='/800/600/https/image1.slideserve.com/3575582/slide2-l.jpg' /> techonthenet.com 
    
    
    
    <таблица>
      
    Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
    Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2

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

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

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

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

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

      
    
    
    
    
     HTML 4.<img src='/800/600/https/overcoder.net/img/1/12/2/110154.gif' /> 01 Переходный пример от www.techonthenet.com 
    
    
    
    <таблица>
      
    Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
    Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2

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

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

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

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

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

      
    
    
    
    
     Переходный пример XHMTL 1.0 от www.techonthenet.com 
    
    
    
    <таблица>
      
    Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
    Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2

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

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

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

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

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

       0 Strict // EN" "http: // www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
    
    
    
    
     Строгий пример XHTML 1.0 от www.techonthenet.com 
    
    
    
    <таблица>
      
    Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
    Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2

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

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

    XHTML 1.1, документ

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

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

       1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
    
    
    
    
     XHTML 1.1 Пример с сайта www.techonthenet.com 
    
    
    
    <таблица>
      
    Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
    Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2

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

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

    HTML th Tag - Изучение HTML

    Тег

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

      <таблица>
      
    .

    Тег

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

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

    вместо элементов . По умолчанию содержимое тега выделено жирным шрифтом и центрировано.Чтобы изменить его внешний вид, вы можете использовать стили CSS. Заголовки таблиц также могут быть легко стилизованы независимо от остального содержимого таблицы благодаря этому элементу.

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

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

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

    Синтаксис¶

    Тег

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

    Пример тега HTML

    : ¶
      
    
      
         Название документа 
        <стиль>
          Таблица {
            ширина: 80%;
            маржа: 30 пикселей автоматически;
            граница-коллапс: коллапс;
          }
          tr: first-child {
            цвет фона: # 1c87c9;
            цвет: #fff;
          }
          th,
          td {
            отступ: 10 пикселей;
            граница: 1px solid # 666;
          }
        
      
      
        <таблица>
          
             Месяц 
             Дата 
          
          
             июнь 
             18.07.2018 
          
        
      
      
    Попробуйте сами »

    Результат¶

    В этом примере нашими заголовками являются« Месяц »и« Дата », которые мы определяем с помощью тегов для каждого из них. Оба тега мы помещаем в .

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

    Пример HTML-тега

    с атрибутом colspan: ¶
      
    
      
         Название документа 
        <стиль>
          Таблица {
            ширина: 80%;
            маржа: 30 пикселей автоматически;
            граница-коллапс: коллапс;
          }
          tr {
            цвет фона: # 1c87c9;
            цвет: #ffffff;
          }
          th,
          td {
            отступ: 10 пикселей;
            граница: 1px solid # 666;
          }
        
      
      
        <таблица>
          
             Месяц и дата 
          
          
             июн 
             18.07.2014 
          
        
      
      
    Попробуйте сами »

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

    Атрибуты¶

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

    Как оформить тег

    ?

    Общие свойства для изменения визуального веса / акцента / размера текста в теге

    :
    • Свойство CSS font-style устанавливает стиль шрифта.нормальный | курсив | косой | начальная | наследовать.
    • CSS свойство font-family определяет приоритетный список из одного или нескольких имён семейств шрифтов и / или родовых имён семейств для выбранного элемента.
    • CSS свойство font-size устанавливает размер шрифта.
    • CSS свойство font-weight определяет, должен ли шрифт быть жирным или толстым.
    • Свойство CSS text-transform управляет регистром текста и заглавными буквами.
    • CSS свойство text-decoration определяет украшение, добавленное к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

    Цвет текста в теге

    :
    • Свойство цвета CSS описывает цвет содержимого текста и оформления текста.
    • CSS свойство background-color устанавливает цвет фона элемента.

    Стили макета текста для тега

    :
    • Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
    • Свойство CSS text-overflow указывает, как пользователю следует сигнализировать о переполненном содержимом, которое не отображается.
    • CSS свойство white-space определяет, как обрабатывается белое пространство внутри элемента.
    • Свойство CSS word-break указывает, где строки должны быть разорваны.

    Другие свойства, на которые стоит обратить внимание для тега

    :

    HTML-тег

    Тег HTML используется для указания ячейки заголовка (или заголовка таблицы) в таблице.

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

    .

    Также см. Тег

    для объявления табличных данных.

    <стиль> table, td, th { граница: сплошной черный 1px; } <таблица>

    Ячейка заголовка Ячейка заголовка
    Ячейка 1 Ячейка 2

    Атрибуты

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

    Элемент принимает следующие атрибуты.

    Атрибут Описание
    colspan Задает количество столбцов, через которые проходит текущая ячейка.
    rowspan Задает количество строк, через которые проходит текущая ячейка.
    заголовки Задает список разделенных пробелами ячеек заголовков, содержащих информацию об этой ячейке.Значение должно соответствовать идентификатору ячейки заголовка (который устанавливается с помощью атрибута id ). Этот атрибут полезен для невизуальных браузеров.
    область действия Этот атрибут используется в ячейках заголовка и указывает ячейки, которые будут использовать информацию этого заголовка.

    Возможные значения:

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

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

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

    • ключ доступа
    • автокапитализировать
    • класс
    • контентный
    • данные- *
    • директор
    • перетаскиваемый
    • скрыто
    • id
    • режим ввода
    • это
    • идентификатор товара
    • itemprop
    • itemref
    • поз. Сфера действия
    • тип позиции
    • язык
    • часть
    • слот
    • проверка орфографии
    • стиль
    • tabindex
    • название
    • перевести

    Полное описание этих атрибутов см. В разделе «Глобальные атрибуты HTML 5».

    Обработчики событий

    Атрибуты содержимого обработчика событий позволяют вызывать сценарий из HTML-кода. Сценарий вызывается при наступлении определенного «события». Каждый атрибут содержимого обработчика событий имеет дело с отдельным событием.

    • onabort
    • onauxclick
    • onblur
    • отмена
    • oncanplay
    • oncanplaythrough
    • на замену
    • onclick
    • вкл.
    • контекстное меню
    • Копия
    • на смену
    • нарезка
    • ondblclick
    • онтраг
    • ондрагенд
    • ондрагентер
    • ондрагэксит
    • ондраглев
    • вперед
    • ondragstart
    • капля
    • на срок замены
    • пусто
    • завершено
    • ошибка
    • onfocus
    • onformdata
    • на входе
    • недействительно
    • нажатие клавиши
    • нажатие клавиши
    • onkeyup
    • onlanguagechange
    • под нагрузкой
    • загруженные данные
    • загруженные метаданные
    • при загрузке
    • onmousedown
    • onmouseenter
    • onmouseleave
    • onmousemove
    • на мышке
    • над мышью
    • onmouseup
    • паста
    • на паузу
    • в игре
    • на ходу
    • в процессе
    • на скорость изменения
    • возобновлено
    • по размеру
    • прокрутка
    • нарушение политики безопасности
    • востребовано
    • в поиске
    • при выборе
    • на смену
    • установлен
    • onsubmit
    • приостановлено
    • ontimeupdate
    • рычаг
    • в объёме поменять
    • ожидает
    • на колесе

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

    Подробнее см. Атрибуты содержимого обработчика событий HTML.

    HTML | th Tag - GeeksforGeeks

    < html >

    < head >

    < > название тег title >

    < style >

    body {

    text-align: center;

    }

    h2 {

    цвет: зеленый;

    }

    th {

    цвет: синий;

    }

    стол, корпус, тд {

    граница: 1 пиксель сплошной черный;

    граница-обрушение: обрушение;

    }

    стиль >

    головка >

    < корпус 6 > 9000

    < центр >

    < h2 > GeeksforGeeks h2 >

    < h3 > th Tag h3 >

    < table >

    < thead >

    < tr >


    95

    900 29 < th > Имя th >

    < th > Идентификатор пользователя th >

    tr >

    thead >

    < tbody >

    < tr >

    < td > Shashank td >

    < td > @shashankla td >
    85 tr >

    < tr >

    < td > GeeksforGeeks td >

    < td > @geeks td >

    tr >

    кузов >

    таблица >

    центр >

    корпус >

    html >

    .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *