Таблицы HTML

html-таблицы
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>

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

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Стиль по умолчанию:
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;
}

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

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Цвет границ задается с помощью 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>

Результат.

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

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

Как вы уже догадались строка таблицы задается с помощью тега <tr> (от англ. table row — строка таблицы). Элемент <tr> является контейнером содержащим ячейки таблицы. Ячейки вне этого контейнера будут неправильно отображаться на экране.

Ячейки таблицы

Ячейки таблицы создаются с помощью тега <td> (от англ. able data — данные таблицы), который вкладывается в <tr>. Думаю со строками и ячейками все понятно.

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

Существует тег для создания заголовка таблицы и тег для создания заголовка столбца.

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

Для создания заголовка столбца используется тег <th> (от англ. table head — заголовок таблицы).

Все это немного запутано, правда? Давайте разбираться на примере.

<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>

Результат.

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

Таблица по центру

Часто возникает необходимость выровнять таблицу по центру документа. Тут есть два варианта (как и с границей).С помощью HTML-кода добавить атрибут align со значением center тега <table>.

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

Этот вариант применим если нам нужно выровнять по центру одну таблицу. Если же нам нужно выровнять по центру все таблицы, тогда лучше применить CSS-код.

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

Размер таблицы

Если вы не указываете размер таблицы, то он определяется количеством текста (или иного контента) внутри. проще говоря таблица растягивается по размеру контейнера в котором она находится.

При этом можно указать размеры таблицы в пикселях, где width — ширина таблицы, height — высота таблицы. Например, сделаем нашу таблицу шириной 400 пикселей.

<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>

 

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

Более удобно задавать размер таблицы в процентах. В таком случае таблица становиться адаптивной. Изменим значение widthн равным 100%. Длинна будет адаптироваться в зависимости от контента. Результат будет следующим.

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

Размер шрифта

Размер шрифта в таблице можно измять двумя способами. Наверное вы уже догадались какими.

С помощью HTML-кода можно изменять размер и начертание текста во всей таблице, но я рекомендую делать это с помощью CSS. А с помощью HTML менять шрифт в отдельных частях. Давайте изменим шрифт с помощью тега <span> в отдельной ячейке.

<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>

Результат.

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

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

<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>

Результат.

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

Здесь мы указываем что весь текст в таблице должен быть размером 12px, а шрифт — ‘Times New Roman’.

Выравнивание текста

Выровнять текст в таблице можно несколькими способами. Рассмотрим выравнивание с помощью HTML.

Разбираемся на примере заголовком столбцов. Горизонтальное выравнивание осуществляется с помощью атрибута align. Выровняем заголовки столбцов по центру.

<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-таблиц










HTML-код:



Анатолий Бузов
Анатолий Бузов / об авторе

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.


11 комментариев к записи “Таблицы HTML

  • Юрий says:

    Добрый день! Анатолий, скажите пожалуйста «как позиционировать таблицу к правой части страницы. Или вообще расположить две независимые таблицы — одну справа, а другую — слева.

    Reply
    • Юрий здравствуйте. Тут есть несколько вариантов, все зависит от более конкретных целей.

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

      Второй вариант. Что бы таблица была справа у нее должен быть ограниченная ширина. Создаете таблицу <table width="250" border="1" align="right"> . align="right" говорит о том, что таблица будет справа, а остальное содержимое, например текст, будет расположен слева (если нет других, препятствующих стилей).

      Если же вы используете css- фреймворк то нужно отталкиваться от него.

      Reply
  • Дмитрий says:

    Здравствуйте, Анатолий!
    Есть таблица с каталогом. Хочу сделать отступы между строками.
    То есть чтобы строки не сливались, а шли на расстоянии вертикальном друг от друга.
    Как правильно сделать отступы между конструкциями 1 и 2?

    Спасибо заранее))

    Reply
    • Дмитрий, приветствую. Оперативность на данный момент не мой конек — почти всегда занят. Вот пример, дальше модернизируйте его под ваши нужды.

      1 2 3
      4 5 6
      7 8 9



      <html>
      <style>
      table {
      border-collapse: separate; /* Способ отображения границы */
      border-spacing: 10px 2px; /* Расстояние между ячейками */
      }
      td {
      padding: 5px; /* Отступ содержимого от границ таблицы */
      border: 1px solid #a52a2a; /* Граница ячеек */
      }
      </style>
      </head>
      <body>
      <table border="1">
      <tr>
      <td>1</td><td>2</td><td>3</td>
      </tr>
      <tr>
      <td>4</td><td>5</td><td>6</td>
      </tr>
      <tr>
      <td>7</td><td>8</td><td>9</td>
      </tr>
      </table>
      </body>
      </html>

      Reply
  • Дмитрий says:

    Здравствуйте, Анатолий!
    Снова нужна ваша помощь))

    А есть ли какая-то html команда/код, чтобы можно было делать отступ между содержимым ?

    Вариант с CSS не прокатил, т.к. правило применяется ко всем таблицам одновременно.

    Reply
    • Приветствую Дмитрий. Что бы стили применялись к одной таблице добавьте к ней класс.
      В HTML-коде:
      table class=»table»
      В CSS:

      .table{
      border-collapse: separate; /* Способ отображения границы */
      border-spacing: 10px 2px; /* Расстояние между ячейками */
      }
      .table td {
      padding: 5px; /* Отступ содержимого от границ таблицы */
      border: 1px solid #a52a2a; /* Граница ячеек */
      }

      При этом стиль будет применяться только к таблицам с классом .table.

      Reply
  • Виталий says:

    Здравствуйте, не подскажете, как покрасить отдельные ячейки таблицы в зависимости от значения (true/false)?

    Reply
    • Не совсем понял вас. Приведите фрагмент кода таблицы.
      Вопрос в том, как значения true/false получаются? Если они генерируются, то в ячейке можно генерировать CSS класс, например:
      …td class=»true»… …td class=»false»…
      А классы «покрасить» как вам угодно.

      Reply
      • Виталий says:

        @model List
        @{
        ViewData[«Title»] = «Таблица мероприятий»;
        }

        TABLE {
        border-collapse: collapse;
        width: 300px;
        }
        TH {
        height: 40px;
        vertical-align: bottom;
        padding: 0;
        }
        TH, TD {
        border: 1px solid black;
        text-align: center;
        padding: 4px;
        }
        table td:nth-child(4) {
        background: lime;
        }

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

        Дата
        Описание
        Типы работников
        Состояние

        @foreach (var e in Model){

        @e.Date.ToString(«dd.MM.yyyy»)
        @e.Description
        @e.WorkerTypes
        @e.Condition
        Оповестить

        }

        Вот код страницы.
        Окрасить необходимо ячейки 4-го столбца. В таблице в sql хранятся значения True\false (прошло мероприятие или нет). В настоящий момент я могу окрасить этот столбец в один цвет с помощью:
        table td:nth-child(4) {
        background: lime;
        }
        Но я никак не могу туда вставить условие…

        Reply
        • Виталий says:

          Блин, не так отправилось…
          Так, кажется, должно быть правильно…

          <!—@model List
          @{
          ViewData[«Title»] = «Таблица мероприятий»;
          }

          TABLE {
          border-collapse: collapse;
          width: 300px;
          }
          TH {
          height: 40px;
          vertical-align: bottom;
          padding: 0;
          }
          TH, TD {
          border: 1px solid black;
          text-align: center;
          padding: 4px;
          }
          table td:nth-child(4) {
          background: lime;
          }
          —>

          <!—

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

          Дата
          Описание
          Типы работников
          Состояние

          @foreach (var e in Model){
          —>
          <!—@e.Date.ToString(«dd.MM.yyyy»)
          @e.Description
          @e.WorkerTypes
          @e.Condition
          Оповестить

          }

          —>

          Reply
          • Виталий says:

            Чёрт… может лучше я вам на почту файлом скину?… Извините за такое количество сообщений…

            Я уже нашёл решение, просто я не совсем правильно разобрался со свойствами тега

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

Добавить комментарий

Ваш адрес email не будет опубликован.