Таблицы в HTML

96
посл. ред. 07.09.2016

Создание таблиц в HTML - очень важный момент. Любой человек, который создает сайты, обязан уметь создавать таблицы любой сложности. И не только потому, что информация, представленная в таблице, легче воспринимается. С помощью таблиц можно создавать структуру страницы (так называемая табличная вёрстка).

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

<table>
  <tr><!-- 1-я строка --></tr>
  <tr><!-- 2-я строка --></tr>
</table>

Каждая строка разбивается на ячейки тегом <td>.

<table>
  <tr>
    <td><!-- 1-я строка 1-я ячейка --></td>
    <td><!-- 1-я строка 2-я ячейка --></td>
  </tr>
  <tr>
    <td><!-- 2-я строка 1-я ячейка --></td>
    <td><!-- 2-я строка 2-я ячейка --></td>
  </tr>
</table>

В каждую ячейку помещается нужный элемент (можно даже еще одну таблицу вложить).

<!DOCTYPE html>
<html>
<head>
  <title>HTML</title>
</head>
<body>
  <table>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
    </tr>
  </table>
</body>
</html>
1.1 1.2 1.3
2.1 2.2 2.3
3.1 3.2 3.3

Чтобы создать таблицу сложной структуры, используются специальные атрибуты. Чтобы присоединить ячейки из соседних строк, нужно использовать атрибут rowspan. Например, нужно объединить ячейки 2.1 и 3.1 в одну:

  • Ячейке 2.1 добавляется атрибут rowspan="2" ("2" означает две строки).
  • Ячейка 3.1 удаляется.
<!DOCTYPE html>
<html>
<head>
  <title>HTML</title>
</head>
<body>
  <table>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
    </tr>
    <tr>
      <td rowspan="2">2.1</td>
      <td>2.2</td>
      <td>2.3</td>
    </tr>
    <tr>
      <td>3.2</td>
      <td>3.3</td>
    </tr>
  </table>
</body>
</html>
1.1 1.2 1.3
2.1 2.2 2.3
3.2 3.3

Чтобы присоединить ячейки из той же строки, нужно использовать атрибут colspan. Например, нужно объединить ячейки 1.2 и 1.3 в одну:

  • Ячейке 1.2 добавляется атрибут colspan="2" ("2" означает два столбца).
  • Ячейка 1.3 удаляется.
<!DOCTYPE html>
<html>
<head>
  <title>HTML</title>
</head>
<body>
  <table>
    <tr>
      <td>1.1</td>
      <td colspan="2">1.2</td>
    </tr>
    <tr>
      <td rowspan="2">2.1</td>
      <td>2.2</td>
      <td>2.3</td>
    </tr>
    <tr>
      <td>3.2</td>
      <td>3.3</td>
    </tr>
  </table>
</body>
</html>
1.1 1.2
2.1 2.2 2.3
3.2 3.3

Для создания заголовков строк и столбцов вместо тега <td> ячейка создается тегом <th>.

<!DOCTYPE html>
<html>
<head>
  <title>HTML</title>
</head>
<body>
  <table>
    <tr>
      <td></td>
      <th colspan="2">Столбцы</th>
    </tr>
    <tr>
      <th rowspan="2">Строки</th>
      <td>2.2</td>
      <td>2.3</td>
    </tr>
    <tr>
      <td>3.2</td>
      <td>3.3</td>
    </tr>
  </table>
</body>
</html>
Столбцы
Строки 2.2 2.3
3.2 3.3

Это всё, что нужно знать для создания таблиц любой сложности.