Таблицы в HTML5

HTML-элементы, позволяющие создавать таблицы

# caption

Определяет заголовок таблицы <table>.

Пример: Скопировать

Книги и авторы
Достоевский, Фёдор Михайлович Преступление и наказание
Толстой, Лев Николаевич Война и мир 
<table>
  <caption>Книги и авторы</caption>
  <tr>
    <td>Достоевский, Фёдор Михайлович</td>
    <td>Преступление и наказание</td>
  </tr>
  <tr>
    <td>Толстой, Лев Николаевич</td>
    <td>Война и мир</td>
  </tr>
</table>

# table

Определяет контейнер для табличных данных.

Пример: Скопировать

Автор Книга
Автор Книга
Достоевский, Фёдор Михайлович Преступление и наказание
Толстой, Лев Николаевич Война и мир 
<table>
  <thead>
    <tr>
      <th>Автор</th>
      <th>Книга</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Автор</th>
      <th>Книга</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Достоевский, Фёдор Михайлович</td>
      <td>Преступление и наказание</td>
    </tr>
    <tr>
      <td>Толстой, Лев Николаевич</td>
      <td>Война и мир</td>
    </tr>
  </tbody>
</table>

# tbody

Определяет группу в которой будут находиться строки таблицы <tr>.

Пример: Скопировать

Автор Книга
Автор Книга
Достоевский, Фёдор Михайлович Преступление и наказание
Толстой, Лев Николаевич Война и мир 
<table>
  <thead>
    <tr>
      <th>Автор</th>
      <th>Книга</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Автор</th>
      <th>Книга</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Достоевский, Фёдор Михайлович</td>
      <td>Преступление и наказание</td>
    </tr>
    <tr>
      <td>Толстой, Лев Николаевич</td>
      <td>Война и мир</td>
    </tr>
  </tbody>
</table>

# td

Определяет ячейку таблицы. Тег должен быть прямым дочерним элементом <tr>.

Пример: Скопировать

Победители чемпионата мира
Локация Счет
Континент Страна Первый Всего
Южная Америка Уругвай 1930 2
Бразилия 1958 5
Аргентина 1978 2
Европа Италия 1934 4
Германия 1954 4
Англия 1966 1
Франция 1998 1
Испания 2010 1 
<table>
  <thead>
    <tr>
      <th colspan="4">Победители чемпионата мира</th>
    </tr>
    <tr>
      <td colspan="2">Локация</td>
      <td colspan="2">Счет</td>
    </tr>
    <tr>
      <td>Континент</td>
      <td>Страна</td>
      <td>Первый</td>
      <td>Всего</td>
    </tr>
  </thead>
  <tbody>
    <tr>
       <td rowspan="3">Южная Америка</td>
       <td>Уругвай</td>
       <td>1930</td>
       <td>2</td>
     </tr>
     <tr>
       <td>Бразилия</td>
       <td>1958</td>
       <td>5</td>
     </tr>
     <tr>
       <td>Аргентина</td>
       <td>1978</td>
       <td>2</td>
     </tr>
     <tr>
       <td rowspan="5">Европа</td>
       <td>Италия</td>
       <td>1934</td>
       <td>4</td>
     </tr>
     <tr>
       <td>Германия</td>
       <td>1954</td>
       <td>4</td>
     </tr>
     <tr>
       <td>Англия</td>
       <td>1966</td>
       <td>1</td>
     </tr>
     <tr>
       <td>Франция</td>
       <td>1998</td>
       <td>1</td>
     </tr>
     <tr>
       <td>Испания</td>
       <td>2010</td>
       <td>1</td>
     </tr>
  </tbody>
</table>

colspan

Определяет, сколько столбцов должна охватывать ячейка.

"3"

Вы можете использовать любое целое число.

rowspan

Определяет, сколько строк должна охватывать ячейка.

"2"

Вы можете использовать любое целое число.

# tfoot

Определяет группу строк таблицы <tr> в конце <table>.

Пример: Скопировать

Автор Книга
Автор Книга
Достоевский, Фёдор Михайлович Преступление и наказание
Толстой, Лев Николаевич Война и мир 
<table>
  <thead>
    <tr>
      <th>Автор</th>
      <th>Книга</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Автор</th>
      <th>Книга</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Достоевский, Фёдор Михайлович</td>
      <td>Преступление и наказание</td>
    </tr>
    <tr>
      <td>Толстой, Лев Николаевич</td>
      <td>Война и мир</td>
    </tr>
  </tbody>
</table>

# th

Определяет заголовок таблицы. Должен быть прямым дочерним элементом <tr>.

Пример: Скопировать

Победители чемпионата мира
Локация Счет
Континент Страна Первый Всего
Южная Америка Уругвай 1930 2
Бразилия 1958 5
Аргентина 1978 2
Европа Италия 1934 4
Германия 1954 4
Англия 1966 1
Франция 1998 1
Испания 2010 1 
<table>
  <thead>
    <tr>
      <th colspan="4">Победители чемпионата мира</th>
    </tr>
    <tr>
      <td colspan="2">Локация</td>
      <td colspan="2">Счет</td>
    </tr>
    <tr>
      <td>Континент</td>
      <td>Страна</td>
      <td>Первый</td>
      <td>Всего</td>
    </tr>
  </thead>
  <tbody>
    <tr>
       <td rowspan="3">Южная Америка</td>
       <td>Уругвай</td>
       <td>1930</td>
       <td>2</td>
     </tr>
     <tr>
       <td>Бразилия</td>
       <td>1958</td>
       <td>5</td>
     </tr>
     <tr>
       <td>Аргентина</td>
       <td>1978</td>
       <td>2</td>
     </tr>
     <tr>
       <td rowspan="5">Европа</td>
       <td>Италия</td>
       <td>1934</td>
       <td>4</td>
     </tr>
     <tr>
       <td>Германия</td>
       <td>1954</td>
       <td>4</td>
     </tr>
     <tr>
       <td>Англия</td>
       <td>1966</td>
       <td>1</td>
     </tr>
     <tr>
       <td>Франция</td>
       <td>1998</td>
       <td>1</td>
     </tr>
     <tr>
       <td>Испания</td>
       <td>2010</td>
       <td>1</td>
     </tr>
  </tbody>
</table>

colspan

Определяет, сколько столбцов должна охватывать ячейка.

"3"

Вы можете использовать любое целое число.

rowspan

Определяет, сколько строк должна охватывать ячейка.

"2"

Вы можете использовать любое целое число.

# thead

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

Пример: Скопировать

Автор Книга
Автор Книга
Достоевский, Фёдор Михайлович Преступление и наказание
Толстой, Лев Николаевич Война и мир 
<table>
  <thead>
    <tr>
      <th>Автор</th>
      <th>Книга</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Автор</th>
      <th>Книга</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Достоевский, Фёдор Михайлович</td>
      <td>Преступление и наказание</td>
    </tr>
    <tr>
      <td>Толстой, Лев Николаевич</td>
      <td>Война и мир</td>
    </tr>
  </tbody>
</table>

# tr

Определяет строку таблицы.

Пример: Скопировать

Победители чемпионата мира
Локация Счет
Континент Страна Первый Всего
Южная Америка Уругвай 1930 2
Бразилия 1958 5
Аргентина 1978 2
Европа Италия 1934 4
Германия 1954 4
Англия 1966 1
Франция 1998 1
Испания 2010 1 
<table>
  <thead>
    <tr>
      <th colspan="4">Победители чемпионата мира</th>
    </tr>
    <tr>
      <td colspan="2">Локация</td>
      <td colspan="2">Счет</td>
    </tr>
    <tr>
      <td>Континент</td>
      <td>Страна</td>
      <td>Первый</td>
      <td>Всего</td>
    </tr>
  </thead>
  <tbody>
    <tr>
       <td rowspan="3">Южная Америка</td>
       <td>Уругвай</td>
       <td>1930</td>
       <td>2</td>
     </tr>
     <tr>
       <td>Бразилия</td>
       <td>1958</td>
       <td>5</td>
     </tr>
     <tr>
       <td>Аргентина</td>
       <td>1978</td>
       <td>2</td>
     </tr>
     <tr>
       <td rowspan="5">Европа</td>
       <td>Италия</td>
       <td>1934</td>
       <td>4</td>
     </tr>
     <tr>
       <td>Германия</td>
       <td>1954</td>
       <td>4</td>
     </tr>
     <tr>
       <td>Англия</td>
       <td>1966</td>
       <td>1</td>
     </tr>
     <tr>
       <td>Франция</td>
       <td>1998</td>
       <td>1</td>
     </tr>
     <tr>
       <td>Испания</td>
       <td>2010</td>
       <td>1</td>
     </tr>
  </tbody>
</table>