Главная » Социальные сети

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

На чтение 10 мин. Обновлено

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

Подробный обзор

Теги и атрибуты таблиц

Вот основные элементы, которые нужны для создания таблиц:

  • <table> — контейнер, внутри которого располагается таблица (такой же, как <ul> для маркированных или <ol> для нумерованных списков).
  • border — атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
  • <caption> задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега <table>, вне ячеек и строк.
  • <tr> — парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
  • <th> — тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках — обычно текст внутри <th> обозреватель выделяет жирным и размещает по центру.
  • <td> — контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег <tr>, столько ячеек в ней и будет: один тег — одна ячейка.
  • <colgroup> позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега <caption>, если его нет, то после <table>.
  • <col> используется для той же цели, что и <colgroup>. <colgroup> может содержать <col>, но не наоборот.
  • span — атрибут, задающий число столбцов, к которым применяются свойства контейнера <col>.
  • <thead>, <tbody> и <tfoot> — контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров <head>, <body> и <footer> в HTML-документе.
  • colspan нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
  • rowspan объединяет ячейки по столбцам.
Читайте также:  Прямые эфиры Instagram стали сильно популярными: в чем причина?

Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14

Всем привет! Продолжаем изучать основы HTML. В этом уроке я расскажу и на примерах покажу, как сделать таблицу в HTML. А также рассмотрим, как можно задать цвет ячейкам таблицы, как отцентрировать таблицу, научимся делать границу таблицы, и т.д. Таблицы HTML часто используют в HTML для перечислений некоторых сведений. Раньше еще таблицы использовали для создания каркаса веб-страниц:

Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14

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

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

Блок . Структура простейшей таблицы

Я думаю, вы представляете, что такое таблица в обычной жизни — это набор строк и столбцов, на пересечении которых находятся ячейки.

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

Сама таблица имеет жесткую структуру: главным является тег <table>, внутри которого должны лежать теги <tr>, которые создают ряды (строки) таблицы, а внутри них — теги <td>, которые создают ячейки.

Как вы видите, нету тегов, которые создавали бы столбцы — таблицы создаются по рядам: сначала первый ряд, потом второй и так далее.

Изучите внимательно следующий пример с таблицей (тегу table добавлен атрибут border, который задает границу таблице и ее ячейкам):

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

Так код будет выглядеть в браузере:

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Создание таблицы в HTML

В языке разметки HTML таблицы используются не только для представления каких-либо данных в виде строк и столбцов, но и как средство форматирования страниц и задания расположения различных элементов.

Другими словами, в HTML оформление таблицы может быть вовсе не заметным, однако выполнять функцию каркаса, занимая всю веб-страницу.

Читайте также:  Ошибка kernel32.dll в Windows – причины и способы решения

Можно поместить, например, в её левый столбец меню, основную информацию в средний, а контактные данные — в правый.

Создание таблицы в HTML

Итак, как сделать таблицу в HTML?

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

В окне браузера только что созданная таблица выглядит следующим образом:

Создание простой HTML таблички

Прежде всего нам необходимо указать тег table. Это парный тег, который указывает браузеру, что именно в нём будет располагаться вся HTML таблица.

<table></table>

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

Как вы знаете, в каждой таблице есть свои строки и колонки, которые на пересечении формируют ячейки. Однако в HTML – таблицы строятся немного по другому принципу. Изначально мы задаём им строки, а внутри строк задаём ячейки. И именно от количества ячеек в строке и будет завесить количество столбцов. Давайте попробуем сделать таблицу в html в блокноте.

Создание строк и ячеек

Строки задаются при помощи тегов tr. И внутри строк мы задаём ячейки тегами td. А сейчас мы по-быстрому забабахаем простую таблицу, с одной строкой и четырьмя ячейками. Вот её код:

<table> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </table>

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

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

А сейчас я предлагаю немного её усложнить, и добавить ещё три строки!

<table> <tr> <td>Строка1 Ячейка1</td> <td>Строка1 Ячейка2</td> <td>Строка1 Ячейка3</td> <td>Строка1 Ячейка4</td> </tr> <tr> <td>Строка2 Ячейка1</td> <td>Строка2 Ячейка2</td> <td>Строка2 Ячейка3</td> <td>Строка2 Ячейка4</td> </tr> <tr> <td>Строка3 Ячейка1</td> <td>Строка3 Ячейка2</td> <td>Строка3 Ячейка3</td> <td>Строка3 Ячейка4</td> </tr> <tr> <td>Строка4 Ячейка1</td> <td>Строка4 Ячейка2</td> <td>Строка4 Ячейка3</td> <td>Строка4 Ячейка4</td> </tr> </table>

Выглядеть она у нас будет вот так:

Строка1 Ячейка1 Строка1 Ячейка2 Строка1 Ячейка3 Строка1 Ячейка4
Строка2 Ячейка1 Строка2 Ячейка2 Строка2 Ячейка3 Строка2 Ячейка4
Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3 Строка3 Ячейка4
Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3 Строка4 Ячейка4
Читайте также:  В приложении Yandex Launcher произошла ошибка — как удалить

Кода получилось довольно много, однако оно того стоило! Думаю, теперь вам ясно, как работает создание таблиц в HTML. Однако это далеко не всё, мы ещё с вами только начали и дальше нас ждёт еще много интересного

Название таблицы — тег caption

Давайте мы немного модернизируем табличку и добавим ей небольшое название. Это делается при помощи тега caption. Этот тег надо размещать самым первым, сразу после открывающего тега table. Вот как это выглядит в коде:

<table> <caption>Пример таблицы с названием</caption> <tr> <td>Строка1 Ячейка1</td> <td>Строка1 Ячейка2</td> <td>Строка1 Ячейка3</td> <td>Строка1 Ячейка4</td> </tr> <tr> <td>Строка2 Ячейка1</td> <td>Строка2 Ячейка2</td> <td>Строка2 Ячейка3</td> <td>Строка2 Ячейка4</td> </tr> <tr> <td>Строка3 Ячейка1</td> <td>Строка3 Ячейка2</td> <td>Строка3 Ячейка3</td> <td>Строка3 Ячейка4</td> </tr> <tr> <td>Строка4 Ячейка1</td> <td>Строка4 Ячейка2</td> <td>Строка4 Ячейка3</td> <td>Строка4 Ячейка4</td> </tr> </table>

А вот, что у нас получится в итоге:

Пример таблицы с названием
Строка1 Ячейка1 Строка1 Ячейка2 Строка1 Ячейка3 Строка1 Ячейка4
Строка2 Ячейка1 Строка2 Ячейка2 Строка2 Ячейка3 Строка2 Ячейка4
Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3 Строка3 Ячейка4
Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3 Строка4 Ячейка4

Как видите, несмотря на то, что мы разместили тег caption внутри таблицы. Он располагается над ней.

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

Видео 1: HTML таблицы – тег table

Свойства столбцов

Элемент <colgroup> определяет группу из одного или нескольких столбцов внутри таблицы. Элемент <colgroup> может состоять из одного, либо нескольких элементов <col>. Тег <col> определяет свойства конкретного столбца, либо столбцов в пределах тега <colgroup> внутри таблицы.

Использование тега <colgroup> совместно с атрибутом span позволяет указать какое количество столбцов должна охватывать группа. В случае если необходимо задать различные свойства для столбцов, то необходимо использовать теги <col> внутри элемента <colgroup>.

Пример использования атрибута span к отдельным столбцам таблицы:

Результат нашего примера:

Рис. 20 Свойства столбцов в HTML таблице.

Если Вам необходимо стилизовать только один столбец, то достаточно указать атрибут span внутри элемента <colgroup>, а не внутри элемента <col>:

Результат нашего примера:

Рис. 21 Пример использования атрибута span HTML тега <colgroup> (определяет какое количество столбцов должна охватывать группа).