ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих

En Ua

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

❮ Prev Next ❯

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
     
     
     
     
     

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

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

Пример

<table>
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Попробуйте сами »

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

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

Пример

<table>
  <tr>
    <th>Имя</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Фамилия</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Возраст</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94

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

Пример

th {
  text-align: left;
}
Попробуйте сами »

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

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

Имя Возраст
Jill Smith 50
Eve Jackson 94

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

Пример

<table>
  <tr>
    <th colspan="2">Имя</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Попробуйте сами »

Вы узнаете больше о colspan и rowspan в главе Table colspan & rowspan на нашем сайте W3Schools на русском.

Заголовок (подпись) таблицы

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

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

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

Пример

<table style="width:100%">
  <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>.

HTML Упражнения

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

Упражнение:

Добавьте заголовок таблицы, который называется "Names".

<table>
  
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>

❮ Prev Next ❯