Th table html: Тег | htmlbook.ru

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+1.0+1.0+1.0+1.0+1.0+

Описание

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

Синтаксис

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

Атрибуты

abbr
Краткое описание содержимого ячейки.
align
Определяет выравнивание содержимого ячейки по горизонтали.
axis
Группирует ячейки связанные между собой похожей информацией.
background
Задает фоновый рисунок в ячейке.
bgcolor
Цвет фона ячейки.
bordercolor
Цвет рамки.
char
Выравнивает содержимое ячейки по заданному символу.
charoff
Смещает содержимое ячейки относительно заданного символа.
colspan
Объединяет горизонтальные ячейки.
headers
Позволяет связать ячейки таблицы с заголовками в речевых браузерах.
height
Высота ячейки.
nowrap
Запрещает перенос строк.
rowspan
Объединяет вертикальные ячейки.
scope
Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
valign
Выравнивание содержимого ячейки по вертикали.
width
Ширина ячейки.

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

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

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

Пример

HTML 4.01IECrOpSaFx 6

<!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</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>

Результат данного примера показан на рис. 1.

Рис. 1. Вид ячеек, оформленных с помощью стилей

Таблицы

  • Колонки таблицы
  • Объемная таблица
  • Простая таблица
  • Сетка таблицы
  • Таблица без рамки
  • Таблица с рамкой
  • Таблицы и стили
  • Теги для таблиц

Тег th

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮Назад Полный HTML Ссылки Дальше ❯


Пример

Простая 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.


Атрибуты

АтрибутЗначениеОписание
abbrtextЗадает сокращенную версию содержимого в ячейке заголовка
alignleft
right
center
justify
char
Не поддерживается в HTML5.
Выравнивание содержимого в ячейке заголовка
axiscategory_nameНе поддерживается в HTML5.
Классифицирует ячейки заголовка
bgcolorrgb(x,x,x)
#xxxxxx
colorname
Не поддерживается в HTML5.
Задает цвет фона ячейки заголовка
charcharacterНе поддерживается в HTML5.
Выравнивание содержимого в ячейке заголовка по символу
charoffnumber Не поддерживается в HTML5.
Задает количество символов, которое будет выровнено по отношению к символу, указанному атрибутом char
colspannumberУказывает количество столбцов, которые должна охватывать ячейка заголовка
headersheader_idУказывает одну или несколько ячеек заголовка, связанных с ячейкой
heightpixels
%
Не поддерживается в HTML5.
Задает высоту ячейки заголовка
nowrapnowrapНе поддерживается в HTML5.
Указывает, что содержимое внутри ячейки заголовка не должно обтекать
rowspannumberУказывает количество строк, которые должны охватываться ячейкой заголовка
scopecol
colgroup
row
rowgroup
Указывает, является ли ячейка заголовка столбцом, строкой или группой столбцов или строк
sortedreversed
number
reversed number
number reversed
Определяет направление сортировки столбца
valigntop
middle
bottom
baseline
Не поддерживается в HTML5.
Вертикальное выравнивание содержимого в ячейке заголовка
widthpixels
%
Не поддерживается в 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 картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы



Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

HTML-тег

❮ Назад Полный справочник HTML Далее ❯


Пример

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


 
   

 
 

   
 

   

 
Месяц Экономия
Январь 100 долларов США
Февраль $80

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

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


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

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

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

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

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

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


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

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

Атрибуты

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

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

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


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

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



Дополнительные примеры

Пример

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


 


   

 


   

   

 

 


   

 

Месяц Экономия
Январь 100 долларов США
Февраль 80$

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

Пример

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

<таблица>
 
   Месяц
Сбережения
 
 
   Январь
   100$
 
 

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

Пример

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


 

   

 

 

   

   

 

Месяц
Экономия
Январь 100 долларов США

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

Пример

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


 

   


 

 

   

   

 

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

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

Пример

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

<таблица>
 
Месяц
   Экономия
 

   Январь
   100$
 

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

Пример

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


 


    <число >Экономия
 


   


 

Месяц
Январь 100$

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

Пример

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


 

   

   

 


   


   


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

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

Пример

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



 


   

 


   


 

 


   

 

Ежемесячная экономия
Месяц Экономия
Январь 100 долларов
Февраль 80$

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

Пример

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


 

   


   


 

   


   


 

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

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


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

Учебник по HTML: Таблицы HTML

Справочник по HTML DOM: Объект TableHeader 9 0003

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


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

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

th {
  display: table-cell;
  вертикальное выравнивание: наследовать;
  вес шрифта: полужирный;
 выравнивание текста: по центру;
}

❮ Предыдущий Полный справочник HTML Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

903 54 лучших примера Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

900 28

ФОРУМ | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

HTML th rowspan Атрибут

❮ Тег HTML

Пример

HTML-таблица с ячейкой заголовка, занимающей три строки:


 
   
   
 
 
   
   
 
 
   
   
 
Mon й
Экономия Экономия на праздник!
Январь 100$
Февраль 80$

Попробовать это Сам »

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


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

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


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

Атрибут
междурядья Да Да Да Да Да


Синтаксис

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

Значение Описание
номер Задает количество строк, которые должна охватывать ячейка заголовка. Примечание. rowspan="0" сообщает браузеру, что ячейка должна охватывать последнюю строку раздела таблицы (thead, tbody или tfoot)

Дополнительные примеры

Пример

Использование rowspan="0" (работает в Chrome, Firefox и Opera):



 
   

   
 


 
   
   
   
 
 

   
 

Месяц Экономия Экономия на отпуск!
Январь 100 долларов США 100 долларов США
Февраль $80

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


❮ Тег HTML

900 04
ВЫБОР ЦВЕТА



Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9000 3

Основные каталожные номера
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

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

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