Как добавить таблицу на сайт

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

Систематизировать ваши данные в виде вставки таблицы на сайт можно добавив её с помощью 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

Вот мы и получили нашу простенькую таблицу с данными.

Надеемся, теперь вы знаете как добавить таблицу на свой сайт!