Заголовок таблицы

HTML Заголовки таблицы

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

EMIL TOBIAS LINUS
8:00
9:00
10:00
11:00
12:00
13:00
MON TUE WED THU FRI
8:00
9:00
10:00
11:00
12:00
DECEMBER

Заголовки таблиц

Заголовки таблиц определяются с помощью th . Каждый th представляет ячейку таблицы.

Пример

Вертикальные заголовки таблиц

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

Пример

Выровнивание заголовка таблицы

По умолчанию заголовки таблиц выделены жирным шрифтом и по центру:

Имя Фамилия Год
Андрей Щипунов 50
Татьяна Щипунова 94

Чтобы выровнять заголовки таблиц по левому краю, используйте свойство CSS text-align :

Пример

Заголовок для нескольких столбцов

У вас может быть заголовок, охватывающий два или более столбца.

Имя Год
Андрей Щипунов 50
Татьяна Щипунова 94

Для этого используйте атрибут colspan для элемента :

Пример

Вы узнаете больше о colspan и rowspan в главе Таблица colspan и rowspan.

Заголовок таблицы

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

Ежемесячная экономия

Месяц Сбережения
Январь $100
Февраль $50

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

Пример

HTML Упражнения

Мы только что запустили
SchoolsW3 видео

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники
ТОП Справочники
ТОП Примеры

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

HTML Table Headers

HTML tables can have headers for each column or row, or for many columns/rows.

EMIL TOBIAS LINUS
8:00
9:00
10:00
11:00
12:00
13:00
MON TUE WED THU FRI
8:00
9:00
10:00
11:00
12:00
DECEMBER

HTML Table Headers

Table headers are defined with th elements. Each th element represents a table cell.

Example

Vertical Table Headers

To use the first column as table headers, define the first cell in each row as a element:

Example

Align Table Headers

By default, table headers are bold and centered:

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94

To left-align the table headers, use the CSS text-align property:

Example

Header for Multiple Columns

You can have a header that spans over two or more columns.

Name Age
Jill Smith 50
Eve Jackson 94

To do this, use the colspan attribute on the element:

Example

You will learn more about colspan and rowspan in the Table colspan & rowspan chapter.

Table Caption

You can add a caption that serves as a heading for the entire table.

Monthly savings

Month Savings
January $100
February $50

To add a caption to a table, use the tag:

Example

HTML Exercises

Unlock Full Access 50% off

COLOR PICKER

colorpicker

Join our Bootcamp!

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials
Top References
Top Examples
Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Заголовок таблицы

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

  • left — выравнивает заголовок по левому краю таблицы. Браузер Firefox располагает текст сбоку от таблицы, Internet Explorer и Opera располагают заголовок сверху, выравнивая его по левому краю.
  • right — в браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. Firefox отображает заголовок справа от таблицы.
  • center — заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию.
  • top — результат аналогичен действию атрибута center , но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
  • bottom — заголовок размещается внизу таблицы по ее центру.

Пример 12.7. Создание заголовка таблицы

       
Изменение добычи ресурсов по годам
 200320042005
Нефть435179
Золото293448
Дерево385736

Ниже показан результат данного примера (рис. 12.9).

Рис. 12.9

Рис. 12.9. Вид заголовка таблицы в браузере Safari

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

Популярные задачи

  • TEX
  • Отступы между блоков
  • Андроид в тени
  • Ссылка как кнопка
  • Вложенные списки
  • Форма регистрации
  • Объединение ячеек таблицы
  • Обязательные поля формы
  • Цвет и фон в таблице
  • Асуанская плотина
  • Батарейка
  • Заголовки

Источник

Читайте также:  Document
Оцените статью