HTML-таблицы используются для логического структурирования контента. Они состоят из строк и ячеек которые можно объединять. В этой статье вы найдете подробное руководство по созданию HTML-таблиц с нуля. Материал рассчитан на новичков — школьников и студентов первых курсов. Рассмотрим как создаются таблицы в HTML.

Если вы не хотите изучать материал, а хотите просто создать таблицу, вы можете воспользоваться генератором html-таблиц.

Как сделать таблицу в HTML?

Таблицы создаются они с помощью тега <table> который имеет закрывающий тег </table>. Код самой простой таблицы из двух строк и столбцов выглядит следующим образом.

<table>
   <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
   </tr>
   <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
 </table>

Результат выполнения кода будет следующим.

Стиль по умолчанию:
display: table;
border-collapse: separate;
box-sizing: border-box;
text-indent: initial;
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
border-spacing: 2px;
border-color: grey;
font-variant: normal;

Границы таблицы

В стилях таблиц по умолчанию граница отсутствует. Добавить границы можно с помощью HTML-кода и с помощью CSS.

HTML-код:

<table border="1" bordercolor="grey">

Устанавливает границу равную 1 пикселю, серого цвета. Равнозначным будет CSS-код:

table {
   border: 1px solid grey;
}

Посмотрим результат.

Цвет границ задается с помощью bordercolor, а размер с помощью border.

Как убрать внутренние границы таблицы?

Вопрос очень интересный. Есть множество способов как так или иначе убрать внутренние границы в таблице. Но, я считаю, что самый простой способ это убрать все границы в таблице, «завернуть» таблицу в блок с границами. Это будет гораздо проще чем все остальные способы.

<div style="border:1px solid #ccc;">
<table border="0" width="100%"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th>ФИО</th>
<th>Должность</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Петрова Любовь Николаевна</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>
</div>

<table border="1" bordercolor="grey">
<caption>Таблица сотрудников фирмы</caption>
<tr> 
<th>ФИО</th> 
<th>Должность</th> 
</tr> 
<tr> 
<td>Иванов Иван Иванович</td> 
<td>Директор</td> 
</tr> 
<tr> 
<td>Петрова Любовь Николаевна</td> 
<td>Главный бухгалтер</td> 
</tr>
</table>

<table border="1" bordercolor="grey"  align="center">

<style>
table { margin:0 auto; }
</style>

<table border="1" width="400">
<tbody>
<tr>
<th>ФИО</th>
<th>Должность</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Петрова Любовь Николаевна</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>
</div>

<table border="1" width="100%"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th>ФИО</th>
<th>Должность</th>
</tr>
<tr>
<td><span style="color: red; font-size: x-large; >Иванов Иван Иванович</span></td>
<td>Директор</td>
</tr>
<tr>
<td>Петрова Любовь Николаевна</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>
</div>

<style>
.table-primer td,th{font-size:12px;font-family: 'Times New Roman'; }
</style>
<table class="table-primer" border="1" width="100%"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th>ФИО</th>
<th>Должность</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Петрова Любовь Николаевна</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>
</div>

<table border="1" width="100%"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th align="center">ФИО</th>
<th align="center">Должность</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Петрова Любовь Николаевна</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>

Аналогичное действие можно выполнить с помощью CSS-кода: text-align:center;

Вертикальное выравнивание осуществляется с помощью тега valign который имеет следующие свойства:

• top — по верхнему краю.
• middle — по середине.
• bottom — по нижнему краю.
• baseline — по базовой линии.

Отступы в таблице

Текст может располагаться довольно близко к границам таблицы, что затрудняет чтение. Для решения этой проблемы нужно увеличить отступы в таблице.

Отступы от границ ячеек. С помощью HTML задать отступы можно используя атрибут cellpadding тега <table>. Давайте увеличим отступ содержимого в ячейках нашей таблицы.

<table border="1" width="100%" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th align="center">ФИО</th>
<th align="center" >Должность</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Петрова Любовь Николаевна</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>

Результат.

Видите, текст уже не так прижимается к границе. С помощью CSS сделать это можно следующим образом: td {padding: 10px;}.

Объединение ячеек

Довольно важный момент в HTML-таблицах это объединение ячеек.

Объединение может быть горизонтальным.

И вертикальным.

Для горизонтального объединения ячеек используется атрибут colspan. Соответственно если у нас 4 ячейки, а мы объединяем две по горизонтали, то в первой строке у нас будет одна ячейка. Разберемся на примере.

<table border="1" width="100%" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th align="center">ФИО</th>
<th align="center">Должность</th>
</tr>
<tr>
<td colspan="2">Руководящий состав:</td>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Петрова Любовь Николаевна</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>

Теперь представим ситуацию что на время отпуска главного бухгалтера директор занимает две должности. Для вертикального объединения ячеек будем использовать атрибут rowspan.

<table border="1" width="100%" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th align="center">ФИО</th>
<th align="center">Должность</th>
</tr>
<tr>
<td rowspan="2">Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>

Оформление HTML-таблиц

Под оформлением таблиц я имею ввиду следующие манипуляции:

• Изменить цвет фона.
• Изменить цвет ячейки (или строк).
• Картинки в таблице (в том числе с прозрачностью).
• Кнопки и элементы управления в таблице.
• Скролл (прокрутка) содержимого таблицы.

Изменение цвета фона таблицы

Изменить цвет фона таблицы с помощью HTML можно с помощью атрибута bgcolor. Давайте сделаем фон нашей таблицы не стандартным.

<table border="1" width="100%" bgcolor="#bfc1f5" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th align="center">ФИО</th>
<th align="center">Должность</th>
</tr>
<tr>
<td rowspan="2">Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>

Изменить цвет ячейки (или строк)

Цвет строки или ячейки изменятся с помощью того же атрибута. Для меня удобно менять цвет фона строки в больших таблицах – тогда визуально таблица воспринимается гораздо лучше.

<table border="1" width="100%" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr bgcolor="#f1edf2">
<th align="center">ФИО</th>
<th align="center">Должность</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr bgcolor="#f1edf2">
<td>Иванов Иван Иванович</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>

Результат.

Картинки в ячейке

Давайте сделаем вот что. Добавим Справа фото сотрудников. Если фотографии сотрудника нет, то мы сделаем полупрозрачное фоновое изображение и напишем, что фото нет.

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

А затем мы применим CSS-код для оформления ячейки в которой не будет фотографии.

<table border="1" width="100%" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr bgcolor="#f1edf2">
<th align="center">ФИО</th>
<th align="center">Должность</th>
<th align="center">Фото</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
<td><img src="/img/boss.png"></td>
</tr>
<tr bgcolor="#f1edf2">
<td>Иванов Иван Иванович</td>
<td>Главный бухгалтер</td>
<td class="nofoto">Нет фото</td>
</tr>
</tbody>
</table>

.nofoto{
background: url(/img/no-foto.png);
opacity: 0.6;
height:200px;
}

Результат.

Таблица сотрудников фирмы

ФИО	Должность	Фото
Иванов Иван Иванович	Директор
Иванов Иван Иванович	Главный бухгалтер	Нет фото

Пояснения. В первом случае у нас в ячейку вставляется изображение и ячейка адаптируется под размер картинки.

Во втором случае картинка является фоновым изображением, поэтому я добавил height:200px; — что бы фоновое изображение отобразилось полностью. В этом случае размер ячейки (если не задавать его как это сделал я) зависит не от размера фонового изображения, а от содержимого ячейки (в данном случае — текста).

Кнопки и элементы управления

Кнопки и элементы управления вставляются в таблицу стандартными способами. Создадим справа еще один столбец и вставим туда текстовое поле с кнопкой.

<table border="1" width="100%" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr bgcolor="#f1edf2">
<th align="center">ФИО</th>
<th align="center">Должность</th>
<th align="center">Фото</th>
<th align="center">Написать</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
<td><img src="/img/boss.png"></td>
<td><textarea></textarea><br><button>Написать директору</button></td>
</tr>
<tr bgcolor="#f1edf2">
<td>Иванов Иван Иванович</td>
<td>Главный бухгалтер</td>
<td class="nofoto">Нет фото</td>
<td><textarea></textarea><br><button>Написать бухгалтеру</button></td>
</tr>
</tbody>
</table>

Результат.

Таблица сотрудников фирмы

ФИО	Должность	Фото	Написать
Иванов Иван Иванович	Директор		Написать директору
Иванов Иван Иванович	Главный бухгалтер	Нет фото	Написать бухгалтеру

Скролл или прокрутка таблицы

Бывают ситуации когда таблицу необходимо сделать фиксированных размеров, но при этом должна быть возможность прокрутки таблицы. Разберемся как это сделать на примере.

<table border="1" width="180px" class="table-primer" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr bgcolor="#f1edf2">
<th align="center">ФИО</th>
<th align="center">Должность</th>
<th align="center">Фото</th>
<th align="center">Написать</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
<td><img src="/img/boss.png"></td>
<td><textarea></textarea><br><button>Написать директору</button></td>
</tr>
<tr bgcolor="#f1edf2">
<td>Иванов Иван Иванович</td>
<td>Главный бухгалтер</td>
<td class="nofoto">Нет фото</td>
<td><textarea></textarea><br><button>Написать бухгалтеру</button></td>
</tr>
</tbody>
</table>

.table-primer {
  display: block;
  overflow: auto;
  max-width: 100%;
}

Результат.

Таблица сотрудников фирмы

ФИО	Должность	Фото	Написать
Иванов Иван Иванович	Директор		Написать директору
Иванов Иван Иванович	Главный бухгалтер	Нет фото	Написать бухгалтеру

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

Генератор HTML-таблиц