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

Откроем файл нашей веб страницы index.html для редактирования блокнотом Notepad++. И откроем ее с помощью браузера, для того, чтобы просматривать на странице изменения.

В самом начале этой статьи, мы с вами говорили о том, что макет сайта, который мы с Вами задумали, является таблицей.

Причем, таблица макета сайта у нас будет состоять из трех строк (Heder, Контент и Footer) и двух столбцов (Меню и Контент).

Для добавления таблицы с тремя строками и двумя столбцами, изменим наш код, добавив следующее:

Чтобы в таблице задать рамку, используем параметр border. Толщина рамки таблицы задается в пикселах (px).

Добавим в наш html код параметр border, со значением аргумента, равным 1px. То есть, толщина рамки таблицы у нас будет равна одному пикселу:

Нажмем в блокноте кнопку «Сохранить» и для проверки изменений, откроем наш файл index.html браузером. Мы увидим, что в левой части окна браузера, у нас появилась таблица.

Чтобы выровнять таблицу по центру окна браузера, используем параметр align, который может принимать три значения: left, center, right, понятно, что для выравнивания таблицы по центру окна браузера, значение аргумента параметра выравнивания, у нас должно быть равно: center.

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

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

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

Теперь давайте вернемся к рамке таблицы, мы в html коде мы задали ее равной 1 пикселу с помощью значения аргумента параметра border: border=”1”.

Вновь обратиться к параметрам тега TABLE в html справочнике, здесь есть два параметра, которые влияют на внешний вид рамки.

Первый параметр: cellspacing – задает расстояние между ячейками таблицы.

Второй параметр: cellpadding – от значения аргумента данного параметра, зависит расстояние от рамки до содержимого ячейки.

Чтобы сделать все расстояния и отступы минимальными, зададим значения аргументов выше приведенных параметров равными нулю.

В результате html код таблицы, примет следующий вид:

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

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

Для того, чтобы это сделать, воспользуемся параметром colspan. Данный параметр используется в теге TD. Значение аргумента параметра colspan, указывает на количество объединяемых горизонтальных ячеек, в нашем случае это значение равно 2.

Кроме добавления параметра colspan, давайте изменим надписи в ячейках таблицы, в соответствии с нашим макетом.

После всех изменений, полный html код нашей страницы будет следующим:

Сохраним наш код в блокноте и обновим файл index.html в браузере, чтобы посмотреть на изменения.

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

sozdavaite-sait.ru

Таблицы в HTML

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

С траница, которую ты сейчас читаешь, изначально была построена по этому принципу: она разбита на несколько строк, а каждая строка на столбцы (причём, в разных строках разное количество столбцов). В некоторые из получившихся ячеек, в свою очередь, помещены ещё таблицы (таблицы вставлены в таблицы). Ты можешь это увидеть даже чисто визуально.

В общем, использование таблиц в HTML значительно упрощает создание сайта. Впрочем, ты сам всё увидишь! Поэтому давай перейдем непосредственно к практике.

§ 1. Создание таблицы

С ама таблица в HTML создаётся тегами и , строки таблицы (помещаются между тегами и ) тегами и , а столбцы таблицы (помещаются между тегами и ) тегами и .

Н апример, создадим таблицу, состоящую из одной строки и двух столбцов. HTML-код будет выглядеть так:

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

§ 2. Рамка таблицы (границы)

П о-умолчанию, таблица в браузерах представляется без рамки. Чтобы рамка таблицы была видна, используется уже знакомый тебе по предыдущим разделам атрибут «border»:

И тогда браузер покажет:

З начение атрибута «border» влияет только на внешнюю рамку, границы между ячейками изменять нельзя. Их можно либо показывать, либо нет. Например, если изменить значение атрибута «border» с «1» на «5»:

М ожно поменять цвет рамки таблицы с помощью атрибута «bordercolor». Например:

Т огда в браузере мы увидим:

§ 3. Отступы в таблице

Ч тобы изменить отступы между соседними ячейками таблицы, в HTML используется атрибут «cellspacing». Давай для наглядности усложним таблицу: сделаем две строки по три столбца и применим атрибут «cellspacing»:

Б раузер покажет:

Д ля того, чтобы задать отступы внутри ячеек применяется атрибут «cellpadding». Если в нашем HTML-коде поменять первую строку:

§ 4. Объединение ячеек таблицы

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

colspan — объединение ячеек по горизонтали (столбцам);

rowspan — объединение ячеек по вертикали (строкам).

Н апример, изменим наш HTML-код так:

Т огда в браузере мы увидим:

§ 5. Заголовок таблицы

В случае использования таблицы для упорядочивания данных (а не для разметки страницы), может понадобиться использование заголовка. Заголовок таблицы задаётся тегом . Например:

В браузере это выглядит так:

К заголовку таблицы можно применить атрибут «align». Для выравнивания относительно таблицы.

У атрибута «align» бывают следующие значения:

• left — выравнивает заголовок по левому краю таблицы;
• right — выравнивает заголовок по правому краю таблицы;
• center — выравнивает заголовок по центру таблицы (значение по умолчанию);
• top — то же, что и «center», только работает во всех браузерах;
• bottom — заголовок размещается под таблицей по центру.

§ 6. Размеры таблицы

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

• width — ширина таблицы, столбца, ячейки;
• height — высота таблицы, строки, ячейки.

И х значения задаются в пикселах или процентах. Например:

В ыглядеть это будет так:

§ 7. Выравнивание таблицы

В HTML горизонтальное выравнивание таблицы относительно страницы производится с помощью уже известного тебе атрибута «align». Его значения также тебе уже знакомы:

• center — выравнивание таблицы по центру;
• left — выравнивание таблицы по левому краю;
• right — выравнивание таблицы по правому краю.

П о умолчанию, выравнивание происходит по левому краю. Пример:

Д ля того, чтобы выровнять текст в таблице (и другое её содержимое), нужно использовать атрибут «align» для каждой конкретной ячейки! Т.к. именно в ячейках располагается всё содержимое таблицы. Пример:

Д ля вертикального выравнивания содержимого ячеек предназначен атрибут «valign», у которого есть следующие значения:

• baseline — выравнивание по базовой линии;
• bottom — выравнивание по нижнему краю;
• middle — выравнивание по середине (значение по умолчанию);
• top — выравнивание по верхнему краю.

§ 8. Фон таблицы

В HTML цвет фона таблицы или отдельных её ячеек устанавливается с помощью атрибута «bgcolor». О том, как в HTML выбрать нужный цвет того или иного элемента мы говорили в уроке про атрибуты тега body. Пример:

В браузере мы увидим:

В качестве фона таблицы или отдельной ячейки можно использовать картинки. В HTML это делается при помощи атрибута «background». Значением атрибута «background» является адрес до изображения (как в HTML вставляется графика мы изучали в этом уроке). Пример картинки-фона для всей таблицы:

Д ля отдельной ячейки картинка-фон задаётся так:

§ 9. Заключение

В HTML таблицы, как я уже говорил в самом начале, используются, главным образом, для разметки страниц. В этом их основное предназначение. В каждую ячейку таблицы можно вставить любые другие данные: текст, картинки или другую таблицу. Именно поэтому они так удобны для разметки html-страниц и разбивки их на отдельные блоки. Например, можно создать такую «композицию»:

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

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

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

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки ! Так победим.

Поделиться ссылкой на эту страницу в:

www.seoded.ru

Как создавать HTML таблицы — примеры и видео

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

Раньше HTML таблицы использовались для вёрстки сайтов. Она так и называлась – табличная вёрстка. Потом на смену ей пришла вёрстка дивами (при помощи тегов div ) которая оказалась намного удобнее и проще. А сейчас наступает эра вёрстки сайтов по технологии flexbox, которая призвана еще больше упростить жизнь web-мастерам.

Однако, несмотря на всё выше сказанное, таблицы в html по-прежнему современны, актуальны и вовсю используются на сайтах. Правда уже не как структура, а как элемент статей сайта.

Создание таблиц в html примеры

Перед началом обучения создания таблицы в HTML, что бы мои и ваши таблицы смотрелись одинаково — сделайте 3 простые вещи:

1. Создайте файл index.html
2. Откройте его в браузере
3. Добавьте туда следующий код:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Управление ячейками таблицы

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

1. Вывести заголовочную строку
2. Объединить некоторые ячейки по вертикали
3. А другие объединить по горизонтали

Вот этим мы и займёмся. И начнем мы, пожалуй, с…

Ячейки-заголовки в таблице

Конечно, мы могли бы всунуть внутрь ячеек первой строки какие-нибудь заголовки, или оформить их жирными через стили. Однако это будет неправильно!

Так как специально для этих целей был создан тег th, который задается вместо обычных ячеек (тег td). И указывает на то, что это ячейки-заголовки, которые используются для названия столбцов.

Давайте в таблице из прошлого примера в первой строке заменим теги td на th . А также чуточку изменим их содержимое:

А вот и результат кода выше, выполненный в браузере:

Как видите, текст в этих ячейках автоматически делается жирным.

Объединение ячеек по горизонтали и вертикали

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

Для этого мы будем использовать 2 атрибута, которые задаются непосредственно самим ячейкам:

1. Атрибут colspan – указывает сколько надо объединить ячеек по столбцам (горизонталь), начиная с текущей
2. Атрибут rowspan – указывает сколько надо объединить ячеек по стокам (вертикаль) начиная с текущей

Эти атрибуты должны иметь целое число, начиная с 1 и более.

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

Давайте попробуем в нашей таблице объединить 2 ячейки:

1. Ячейку 1 в строке 2 объединим по столбцам (горизонталь) с ячейками 2 и 3 в той же строке. Для этого мы зададим ей атрибут rowspan=“3”
2. Ячейку 4 в строке 2 объединим по строкам (вертикаль) с ячейками 4 в строках 3 и 4. Для этого мы зададим ей атрибут colspan=“3”

И теперь, для правильного отображения таблицы, нам необходимо удалить из кода ячейки, которые были добавлены при объединении. То есть для первого примера мы удаляем из кода ячейки 2 и 3 в строке 2. А для второго – удаляем ячейку 4 в строке 3 и ячейку 4 в строке 4.

В итоге у нас получится вот такой код:

А на деле, наша таблица будет выглядеть следующим образом:

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

Видео 2: HTML таблицы — ячейки и управление ими

Объединение ячеек сразу по 2-ум направлениям

Так же мы можем объединять ячейки не только по какой-либо одной стороне. Но и сразу по двум! Что мы сейчас и проделаем с нашей таблицей.

Давайте объединим ячейку 1 строки 3:

1. С ячейкой 2 строки 3
2. С ячейкой 1 строки 4
3. С ячейкой 2 строки 4

Для этого мы пропишем ячейке 1 строки 3 следующие 2 атрибута:

Помним, что объединённые ячейки замещаются, поэтому ячейки из списка выше, нам надо будет удалить из кода. В итоге вот такой код будет у нашей таблички:

А вот так, будет выглядеть наша таблица сейчас:

Шапка, тело и подвал HTML таблицы.

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

Все 3 тега, которые мы будем изучать далее, должны содержать в себе весь контент таблицы. Который условно мы можем разбить на три большие части.

Тег thead — шапка HTML таблицы

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

Фишки тега thead:

1. Он должен встречаться только один раз на одну таблицу!
2. Независимо от того, где мы его располагаем в таблице — строки, находящиеся в этом теге, будут выводиться в начале таблицы.

Теперь вернёмся к нашей таблице, и давайте первую строку завернём в этот тег:

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

Тег tfoot – подвал HTML таблицы

Хоть это и подвальчик, но помните, что этот тег рекомендуется размещать сразу после тега thead .

Фишки тега tfoot:

1. Он должен встречаться только один раз на одну таблицу!
2. Независимо от того, где мы его располагаем в таблице — строки, находящиеся в этом теге, будут выводиться в конце таблицы.

Давайте мы заведём ещё одну строку в таблице, и завернём её с ячейками сразу в тег tfoot :

А вот и наша табличка:

Посмотрите внимательно, несмотря на то, что мы разместили тег tfoot в середине таблицы, его содержимое выводится в её конце!

Тег tbody – тело таблицы.

В отличии от первых двух – этот тег может встречать в таблице сколько угодно раз. Фишек у него никаких нет. Он просто семантически указывает для поисковых роботов, что в нём идёт контент таблицы.

Вот такой код получится в итоге:

Внешне, наша таблица никак не изменилась! Поэтому и приводить её я здесь не буду.

И как обычно, для закрепления материала на практике, советую Вам глянуть видео №3.

Видео 3. HTML таблицы – шапка, тело и подвал

Кроме разбора на практике самих тегов, в этом видео, дополнительно, вы увидите, как оформить шапку, контент и подвал таблицы при помощи стилей.

Управление колонками в HTML таблицах

Осталось совсем немного ребята. Уже очень скоро таблицы полностью покоряться ваши рукам, головам, ногам или что там у вас ещё имеется в арсенале?

Мы рассмотрим ещё 2 тега, которые позволяют управлять колонками в таблицах.

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

Что бы понять, как это всё работает, давайте первым двум колонкам — зададим ширину в 100 пикселей, третьей 150, а четвертой 200 пикселей. Для этого мы заведём 4 тега col , и каждому из них пропишем свой атрибут style с определённым значением ширины:

В итоге наша таблица выглядит уже так (обратите внимание на ширину каждой колонки):

Тег col можно сократить, если у него одинаковые параметры при помощи атрибута span . В нашем случае, у нас заданы одинаковые параметры для первой и второй колонки. Давайте сократим эти теги и допишем атрибут, вот такой код выйдет:

Таблицу приводить в пример не буду, так как она совершенно не поменялась.

Тег colgroup

Этот тег используется для объединения колонок по группам. Что бы понять, как он работает, давайте мы первые 3 колонки объединим в этот тег и зададим им какой-нибудь общий стиль. Например, сделаем заливку ячеек другим цветом.

Вот какой код ввёл я:

В результате ячейки первых 3-ёх колонок окрасились в указанный нами цвет:

Для закрепления материала рекомендую посмотреть последнее видео из этой серии под номером 4.

Видео 4. HTML таблицы – управление колонками

Как видите, ничего сложного в том, чтобы создать сложную функциональную таблицу нет. Главное знать теги и применять их в правильном назначении. Всё остальное – дело техники

На этом всё, мои дорогие друзья. Если будут вопросы касательно создания HTML таблиц – задавайте их в комментариях.

master-css.com

• Предыдущая записьКак сделать отступ в HTML?
• Следующая записьКак сделать сайт на HTML ?