Как легко создать таблицу html в блокноте?

Доброго всем времени суток, мои дорогие друзья. Как лето проходит? Я надеюсь, что у всех всё хорошо. Ну а сегодня мы продолжим изучать основы html и сегодня будет наверное последний урок на эту тему, потому что дальше мы окунемся уже в CSS. Так вот, говоря об html, я не могу не рассказать про таблицы, так как они тоже являются довольно значимой темой.

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

Помнится мне, как свои первые сайты я верстал с помощью табличной верстки, т.е. шапка, сайдбары, футер и контентный блок были всего лишь элементами таблицы. Об этом я упоминал в своей статье о моем пути в блоггинг. Правда сегодня сайты уже вообще не принято делать с помощью таблиц, но это не значит, что они не нужны. Скорее наоборот.

Что еще хорошо, так это то, что вам даже не придется ничего чертить. Всё делается в обычном блокноте (ну или другом, типа Notepad++), причем довольно легко. В общем давайте настраиваться на работу.

Как легко создать таблицу html в блокноте?

Теги

Здесь разметка происходит несколько сложнее, чем в других тегах, но это всё быстро запоминается. Так что смотрим и не отвлекаемся.

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

Внутри table ставится парный тег <tr></tr>. Данная пара означает, что мы создали одну строку в таблице, и сколько таких тегов будет прописано, столько строк и будет.

Как легко создать таблицу html в блокноте?

Ну а внутри <tr></tr> мы теперь проставляем еще одну пару — <td></td>. Данная пара означает, что мы создали один столбец  в данной строке, и если в каждом tr прописать несколько td, то тогда в данной строчке будет несколько столбцов. Понятно? Если нет, то давайте посмотрим на примере, как тут всё устроено... Допустим я хочу создать таблицу учеников и отметок. Тогда пишем следующее внутри тега <body>:

<table>

<tr>
 <td></td>
 <td>Математика</td>
 <td>Русский язык</td>
 <td>История</td>
</tr>

<tr>
<td>Медведев</td>
 <td>3</td>
 <td>5</td>
 <td>5</td>
</tr>

<tr>
<td>Смирнов</td>
 <td>5</td>
 <td>5</td>
 <td>5</td>
</tr>

<tr>
<td>Соколов</td>
 <td>3</td>
 <td>2</td>
 <td>3</td>
</tr>
</table>

Что мы здесь сделали? А сделали мы четыре строки (tr), в каждой из которых содержится по четыре таблицы (td). В первом блоке tr мы написали название учебных дисциплин, при этом оставив первый столбец пустым, чтобы не нарушить таблицу.

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

Как легко создать таблицу html в блокноте?

Но зайдя в документ мы видим, что таблица не совсем похожа на то, что мы планировали. А чего тут не хватает? Правильно — границ. Но вы не переживайте. Об этом я вам расскажу чуть ниже.

Но для приличия я покажу вам еще один тег, который выделяет и центрирует данные в таблицах. Этот тег пишется как <th>. Давайте выделим наши заголовки в таблице. Для этого просто замените теги td, на th в тех местах, где у нас пишутся фамилии и названия дисциплин.

Как легко создать таблицу html в блокноте?

И смотрим, что у нас получится благодаря этому. Как я и говорил, теперь данные названия центрированы и выделены. Этого-то мы и добивались.

Как легко создать таблицу html в блокноте?

В общем с тегами мы вроде разобрались. Хотя есть еще и другие (можете посмотреть на htmlbook), но я не буду заострять на них внимание.

Атрибуты

Естественно такая вещь как таблицы не может обойтись без специальных атрибутов и я вам покажу некоторые из них.

Граница (border)

Ну и начать бы я хотел с того, о чем говорил выше, то бшь о границах. По умолчанию их нет, поэтому таблица выходит невзрачной и не совсем понятной. Но это можно исправить, и поможет нам в этом атрибут border, который ставится непосредственно в открывающий тег <table>. Сделайте так, как я показал вам в примере ниже, то есть поставьте значение атрибута border="1".

Как легко создать таблицу html в блокноте?

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

Как легко создать таблицу html в блокноте?

Отступ и расстояние (cellpadding и cellspacing)

Совершенно естественно, что одно отображение таблицы на все случаи жизни устроит не всех. Но мы можем это немного изменить, благодаря двум похожим атрибутам.

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

Хоп. Видите? Расстояние увеличилось. таким образом вы сможете сами подставлять нужные значения, расширяя тем самым ячейки.

Cellspacing=»" — изменяет расстояние между ячейкми таблицы и его значения также измеряются с пикселях. Давайте попробуем также поставить этот атрибут со значением равным 5 и увидим, что из этого получится.

Как легко создать таблицу html в блокноте?

Ну что? Суть ясна? Как видите, расстояние между ячейками стало шире. Именно этого мы с вами и добивались.

Как легко создать таблицу html в блокноте?

Выравнивание (Align)

Ну куда же мы без этого замечательного атрибута, который позволяет нам выровнять всё по разным местам? Align работает точно также, как и с другими тегами, которые мы проходили ранее и имеет три значения:

  • Left
  • Center
  • Right

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

Как легко создать таблицу html в блокноте?

Ну что? Вроде всё работает и я думаю, что должно быть понятно. Но если возникают какие-либо вопросы, то вы не стесняйтесь, спрашивайте.

Как легко создать таблицу html в блокноте?

Ну вот в принципе и всё, что я хотел рассказать сегодня о таблицах. Надеюсь, что вам всё было понятно. Ну а если вы хотите подробно изучить все тонкости работы с HTML и CSS и научиться верстать сайты самостоятельно, то я вам настоятельно рекомендую посмотреть [urlspan]превосходнейший видеокурс[/urlspan] на данную тему. Для новичка это самый понятный, как по мне, видеокурс, в котором вам просто всё разжуют и разложат по полочкам.

Ну а я свой урок на сегодня завершаю. Не забывайте подписываться на обновления моего блога, чтобы не пропустить какую-либо важную информацию или новости. А мы с вами увидимся в других статьях. Удачи вам и пока-пока!

С уважением, Дмитрий Костин.

Всем привет! Меня зовут Дмитрий Костин. Я автор и создатель данного блога. Первые шаги к заработку в интернете я начал делать еще в 2013 году, а данный проект я завел в 2015 году, еще когда работал IT-шником. Ну а с 2017 года я полностью ушел в интернет-заработок.

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

Оцените автора
Блог Дмитрия Костина
Добавить комментарий

  1. Ольга Парфенова

    У вас получается все расписывать очень подробно и после ваших уроков каждый сможет сделать все сам.

    Ответить
    1. Дмитрий Костин автор

      Спасибо) такие слова всегда приятно слышать.

      Ответить
  2. Евгений

    Ещё есть легкая возможность в Ворде такое делать, но там очень много лишних элементов после сохранения в html бывает выходит

    Ответить
    1. Дмитрий Костин автор

      Да. Согласен с вами и насчет ворда и насчет мусора в нем. По хорошему сайт можно в ворде сделать (я так по первости делал), но он загаженный такой получился в коде) раз в 50 больше страница весила, чем такая же, но с чистым кодом

      Ответить
  3. Вадим

    У вас очень полезный блог, много нужной и ценной информации. И поэтому я хочу вручить вам награду «Liebster blog award» :-p Более подробно читайте на моем блоге! Поздравляю :p

    Ответить
    1. Дмитрий Костин автор

      Ого. Спасибо большое. Даже не ожидал. Ведь я уже получал эту награду один раз. Ну второй раз получить ее это еще круче))

      Ответить
Следи за нами в FaceBook.
Все новые статьи и много уникального!
Спасибо, не показывайте мне эту штуку больше!
Друг, ты хочешь уйти? Тогда подпишись на мой блог в ВК, чтобы не пропустить следующие статьи!
Дорогой друг, хотел бы ты всегда быть в курсе всех новостей блога? Тогда подпишись на блог в ВК