Добавление таблицы в текст иногда является просто необходимым и не только потому что, вы хотите представить текстовые данные, которые будут лучше выглядеть в виде таблицы. Иногда с помощью вставки таблицы можно выровнять даже изображения. Теперь подробнее о том как вставить таблицу на сайт.
Систематизировать ваши данные в виде вставки таблицы на сайт можно добавив её с помощью HTML-тегов. Для этой цели существует отдельный тег — <table>.
Вот как он работает (на примере):
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
Теперь разберем эти обозначения.
- Каждая таблица, размеченная с помощью HTML-тегов начинается с открывающег тега <table> и заканчивается закрывающим тегом </table>
- Далее идет тег, обозначающий строку — <tr>. Закрывающий тег </tr> показывает, где заканчивается данная строка. Каждая строка таблицы может содержать несколько ячеек.
- <td> — тег, показывающий начало ячейки. Соответственно, </td> — закрывает ячейку. Между тегами <td></td> нужно писать ваши данные (текст, ссылки, изображения и т. д.). Но помните, что пока вы не начали новую строку, вы создаёте ячейки по горизонтали. Для внесения данных в ячейки с новой строк, нужно закрыть текущую ячейку(</td> и строку (</tr>) и открыть новую строку (<tr>) и новую ячейку (<td>)
- В конце редактирования таблицы, не забудьте закрыть её — </table>
- Стоит добавить, что сама таблица и её содержимое, в том числе строки и ячейки, могут содержать стили и другие данные, которые будут изменять внешний вид.
Давайте теперь создадим с вами простую таблицу.
Вставка таблицы на сайт на конкретном примере
Допустим у нас есть данные: выручка предприятия, количество работников и дебиторская задолженность предприятия за несколько лет. Как вставить таблицу с такими данными на сайт?
Для начала откроем тег <table>, чтобы показать, что мы начинаем таблицу:
<table>
Далее откроем новую строку, в которой запишем заголовки столбцов:
<tr>
Добавим четыре ячейки в эту строку (первую ячейку оставим пустой):
<td></td>
<td>Выручка предприятия</td>
<td>Количество работников</td>
<td>Дебиторская задолженность</td>
Закрываем первую строку с заголовками:
</tr>
Открываем новую строку и добавляем в неё четыре ячейки. Первая ячейка — это год, за который предоставлены данные. Остальные ячейки — данные, согласно названиям столбцов. В конце — закрываем строку.
<tr>
<td>2013</td>
<td>100000</td>
<td>50</td>
<td>20000</td>
</tr>
То же самое повторяем с данными для ещё одного года:
<tr>
<td>2014</td>
<td>150000</td>
<td>60</td>
<td>25000</td>
</tr>
Закрываем нашу таблицу (</table>) и смотрим результат:
Выручка предприятия | Количество работников | Дебиторская задолженность | |
2013 | 100000 | 50 | 20000 |
2014 | 150000 | 60 | 25000 |
Вот мы и получили нашу простенькую таблицу с данными.
Надеемся, теперь вы знаете как добавить таблицу на свой сайт!

Более 6 лет занимаюсь продвижением сайтов в поисковой выдаче. Работал как с русскоязычным рынком, так и с англоязычным.
Люблю подискутировать, так что оставляйте свои отзывы.