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

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

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

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

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

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

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

Обязательно прочтите эти статьи!

Как проверить посещаемость чужого сайта... Найдется ли такой человек, который не хотел бы знать, чем живет его сосед? Вряд ли. Так и в мире интернет бизнеса: все хотят узнать посещаемость са...
Бесплатное продвижение сайта самому – несколько по... Каждому человеку, который только начинает заниматься заработком на сайтах приходится сталкиваться с проблемой бюджета для продвижения. Конечно, первое...
Какой хостинг выбрать? Хостинг провайдеры – компании, предоставляющие пользователям ресурсы, для размещения информации на сервере. Современный рынок представлен различными п...
Сайты для сокращения ссылок которые мы рекомендуем... Сайты для создания коротких ссылок — это сервисы, которые позволяют вам изменить стандартный вид ссылки на сайт (ваш или чужой), сократив его для удоб...