В 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 таблицы используются не только для представления каких-либо данных в виде строк и столбцов, но и как средство форматирования страниц и задания расположения различных элементов.
Другими словами, в HTML оформление таблицы может быть вовсе не заметным, однако выполнять функцию каркаса, занимая всю веб-страницу.
Можно поместить, например, в её левый столбец меню, основную информацию в средний, а контактные данные — в правый.
Итак, как сделать таблицу в HTML?
Создадим простейшую таблицу, содержащую три ячейки одной строки с помощью приведенного ниже кода:
В окне браузера только что созданная таблица выглядит следующим образом:
Таблица начинается с тега
и заканчивается парным ему
. Всё содержимое таблицы описывается сверху вниз по строкам, каждая из которых начинается с тега
и заканчивается
.
Ячейки строки описываются слева направо с помощью тегов
и
. В ячейку вы можете поместить как текст, так и графические файлы и даже другие таблицы.
Границы и рамки
По умолчанию в таблице нет границы. Добавить её можно с помощью атрибута border тега
. Однако, иногда браузеры такую границу отображают по-разному, поэтому лучше данный процесс возложить на работу со стилями:
Цвет фона и текста
Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам
,
и
можно применить следующие параметры:
background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;
bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.
Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег .
Отступы таблицы в HTML
В HTML отступы в таблице задаются с помощью тега
:
cellspacing — расстояние между границами соседних ячеек;
cellpading — расстояние между содержимым и границей ячейки.
Визуальное отображение данного кода в браузере таково:
Выравнивание таблицы в HTML
Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное ( align ) и вертикальное ( valign ) выравнивание текста в таблице HTML.
Параметр align может иметь следующие значения:
left — выравнивание по левой границе;
right — выравнивание по правой границе;
center — выравнивание по центру.
Параметр valign может иметь такие значения:
bottom — выравнивание по нижней границе;
top — выравнивание по верхней границы;
middle — выравнивание посередине.
Вставка изображения в HTML таблицу
У вебмастеров часто возникает вопрос о том, как вставить картинку в HTML таблицу? Для того чтобы это осуществить, необходимо прописать адрес или имя изображения в соответствующей ячейке после тега
.
width — ширина;
height — высота;
alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
title — подпись к картинке;
align — горизонтальное выравнивание;
valign — вертикальное выравнивание.
Кроме того, облачив изображение в специальный тег , его можно использовать в качестве ссылки.
Объединение ячеек в HTML таблице
Соседствующие ячейки внутри одного столбца или строки можно объединить с помощью параметров rowspan и colspan тега
.
Объединение столбцов одной строчки выглядит так:
Генераторы HTML таблиц
Разумеется, создавать HTML таблицы можно самостоятельно, прописывая вручную все теги HTML. Таблица в данном случае рискует быть составленной некорректно, поскольку человеческий фактор при работе с большими объёмами информации даёт о себе знать.
Уже давно существуют специальные генераторы таблиц HTML, которые призваны сэкономить ваше время. С их помощью вы можете легко создать таблицу с множеством настроек.
Одним из наиболее распространенных генераторов таблиц является русскоязычный сервис http://rusws.ru/genertabtag . В его арсенале имеется множество настроек для построения таблиц: вы можете задать цвет фона, выравнивание, ширину таблицы, толщину рамки и т.д.
Это — отличный вариант для генерации простейших таблиц, однако для более серьёзных целей рекомендуем воспользоваться другими сервисами:
Этот же сервис имеет довольно удобный HTML редактор, в котором можно построить, заполнить таблицу, а затем получить её код:
Если вы решили воспользоваться услугами генератора таблиц, стоит внимательно подойти к выбору подходящего вам сервиса, опробовав самые популярные из них и выбрав наилучший.
www.internet-technologies.ru
С недавнего времени тег
стал заметно сдавать свои позиции по популярности другому тегу
Синтаксис тега
Между открывающим тегом
и закрывающим тегом
находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно.
Каждый тег
создает новую строку. Далее во вложенных
создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки.
Как сделать таблицу в html
Приведем пример, html код:
Преобразуется на странице в следующее:
Пример таблицы
Столбец 1
Столбец 2
Обратите внимание на ячейку
. Мы используем специальный атрибут colspan для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег
(заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.
Теперь рассмотрим подробно все атрибуты тега
.
Атрибуты и свойства тега
К открывающему тегу
можно прописывать различные атрибуты.
1. Свойство align=»параметр» — задает выравнивание таблицы. Может принимать следующие значения:
left — выравнивание по левому краю
center — выравнивание по центру
right — выравнивание по правому краю
В разобранном выше примере мы выравнивали таблицу по центру align=»center» .
Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы
или строкам
. Таким образом, в разных ячейках выравнивание будет разное.
2. Свойство background=»URL» — задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.
Преобразуется на странице в следующее:
Пример таблицы
Столбец 1
Столбец 2
В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif . Обратите внимание на то, что в теге мы добавили style=»color:white;» . Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.
Более подробно про фон читайте в статье: как сделать фон для сайта
3. Свойство bgcolor=»цвет» — задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)
4. Свойство border=»число» — задает толщину рамки таблицы. В предыдущих примерах мы указывали border=»1″ , что означает толщина рамки — 1 пиксель.
5. Свойство bordercolor=»цвет» — задает цвет рамки. Если border=»0″ , то рамки не будет и цвет рамки не будет иметь смысла.
6. Свойство cellpadding=»число» — отступ от рамки до содержимого ячейки в пикселях.
7. Свойство cellspacing=»число» — расстояние между ячейками в пикселях.
8. Свойство cols=»число» — число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.
9. Свойство frame=»параметр» — как отображать границы вокруг таблицы. Может принимать следующие значения:
void — не отрисовывать границы
border — граница вокруг таблицы
above — граница по верхнему краю таблицы
below — граница снизу таблицы
hsides — добавить только горизонтальные границы (сверху и снизу таблицы)
vsides — рисовать только вертикальные границы (слева и справа от таблицы)
rhs — граница только на правой стороне таблицы
lhs — граница только на левой стороне таблицы
10. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах.
11. Свойство rules=»параметр» — где отображать границы между ячейками. Может принимать следующие значения:
all — линия рисуется вокруг каждой ячейки таблицы
groups — линия отображается между группами, которые образуются тегами
, ,
, или
cols — линия отображается между колонками
none — все границы скрываются
rows — граница рисуется между строками таблицы, созданными через тег
12. Свойство w — задает ширину таблицы: либо в пикселях, либо в процентах.
13. Свойство — можно указать имя класса, которому принадлежит таблица.
14. Свойство style=»стили» — стили можно задать индивидуально для каждой таблицы.
Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге
.
Атрибуты и свойства
и
1. Свойство align=»параметр» — задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:
left — выравнивание по левому краю
center — выравнивание по центру
right — выравнивание по правому краю
2. Свойство background=»URL» — задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.
3. Свойство bgcolor=»цвет» — задает цвет фона ячейки.
4. Свойство bordercolor=»цвет» — задает цвет рамки ячейки.
5. Свойство char=»буква» — задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.
6. Свойство colspan=»число» — задает число объединяемых горизонтальных ячеек.
7. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах %.
8. Свойство w — задает ширину таблицы: либо в пикселях, либо в процентах %.
9. Свойство rowspan=»число» — задает число объединяемых вертикальных ячеек.
10. Свойство valign=»параметр» — выравнивание содержимого ячейки по вертикали.
top — выравнивание содержимого ячейки по верхнему краю строки
middle — выравнивание по середине
bottom — выравнивание по нижнему краю
baseline — выравнивание по базовой линии
Примечание 1
Для тега
доступны такие же параметры, что и для
. Параметры для одного тега
будут иерархично применены ко всем
внутри него
Как сделать, чтобы границы ячеек в таблице не склеивались
В случае использования border (граница ячеек) и нулевых отступов между ячейками, они все равно склеиваются и получается удвоенный border. Чтобы это избежать нужно прописать в стилях таблице border-collapse: collapse :
Более подробно про это свойство читайте в специальной статье border-collapse CSS
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.
zarabotat-na-sajte.ru
Как сделать HTML таблицу HTML?
Пока я творю, я живу! Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
HTML
CSS
PHP
WordPress
Bootstrap
Автор
Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14
Всем привет! Продолжаем изучать основы HTML. В этом уроке я расскажу и на примерах покажу, как сделать таблицу в HTML. А также рассмотрим, как можно задать цвет ячейкам таблицы, как отцентрировать таблицу, научимся делать границу таблицы, и т.д. Таблицы HTML часто используют в HTML для перечислений некоторых сведений. Раньше еще таблицы использовали для создания каркаса веб-страниц:
…но это уже в прошлом, так как на сегодняшний день есть более эффективные способы создания каркасов для сайта с помощью CSS. Я частенько использую таблицу на своем блоге или на сайте, вот например, как в этой статье.
Я думаю, вы разобрались, для чего нужно учиться создавать таблицу.
Из каких основных тегов состоит таблица?
○ тег TABLE Это главный контейнер для создания таблицы, внутри которого содержатся другие элементы таблицы, такие как столбики и ряды. Закрывающий тег обязательный.
○ тег TR
Внутри контейнера
……
размещаются ряды:
ряд 1
ряд 1
Ряды создаются с помощью тега . Именно с помощью этого тега и определяется количество рядов. Закрывающий тег обязателен.
○ тег TD
Внутри контейнеров
……
размещаются столбики (ячейки):
ячейка 1
ячейка 2
ячейка 1
ячейка 2
ячейка 1
ячейка 2
Столбики создаются с помощью тега . Закрывающий тег обязателен.
Внимание: без использования всех этих тегов таблицу создать не возможно.
Теперь попробуем воспользоваться теорией и создадим таблицу на практике.
Задание: создать таблицу из одного ряда, где будет три столбика.
ряд -1 /столбик 1
столбик 2
столбик 3
Задание: создать таблицу из трех рядов и трех столбиков.
ряд -1 /столбик 1
столбик 2
столбик 3
ряд -2 /столбик 1
столбик 2
столбик 3
ряд -3 /столбик 1
столбик 2
столбик 3
До этого момента вам все ясно ? Кто не понял, поднимите руку! Ага, поняли все, значит идем далее .
Теперь рассмотрим атрибуты для таблицы.
*Атрибуты
○ Границы таблицы в HTML
Чтобы была видна таблица, к тегу применяется атрибут «border» .
Если значение атрибута «border» «0» , границы видно не будет, если не прописать к тегу атрибут «border» , граница в таблице тоже видна не будет.
ряд -1 /столбик 1
столбик 2
столбик 3
○ Как объединить ячейки в таблице
Чтобы объединить ячейки в таблице используют атрибуты «colspan» и «rowspan» к тегу .
colspan — объединение ячеек по горизонтали;
rowspan — объединение ячеек по вертикали.
В значениях указываете, сколько нужно объединить ячеек.
ряд 1 столбик 1
ряд 2 столбик 1
ряд 2 столбик 2
ряд 1 столбик 1
ряд 1 столбик 2
ряд 2 столбик 1
Более сложный пример:
ряд -1 /столбик 1
столбик 2
столбик 3
ряд -2 /столбик 1
столбик 2
столбик 3
столбик 4
○ Как увеличить расстояние между ячейками таблицы
Чтобы увеличить расстояние между текстом и границей ячейки, прописывают атрибут «cellpadding» к тегу
В значениях у атрибута «cellpadding» указываете расстояние отступа
ряд 1 столбик 1
столбик 2
Чтобы увеличить расстояние между ячейками в таблице, используют атрибут «cellspacing» к тегу
В значениях у атрибута «cellspacing» указываете расстояние между ячейками
ряд 1 столбик 1
столбик 2
○ Как сделать фон таблицы HTML
Чтобы сделать фон таблицы HTML используют к тегу и такие атрибуты:
BGCOLOR – цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
BACKGROUND –фон в таблице заполняется рисунком.
ряд -1 /столбик 1
столбик 2
столбик 3
ряд -2 /столбик 1
столбик 2
столбик 3
столбик 4
○ Как вставить картинку в таблицу HTML
Чтобы вставить картинку в таблицу HTML, между тегом вставляться тег .
ряд 1 ячейка 1
ячейка 2
○ Ширина и высота таблицы HTML
Чтобы вставить ширину и высоту в таблицы HTML, используют к тегу атрибут «width» и «height» :
Width – ширина таблицы
Height – высота таблицы
ряд 1 ячейка 1
ячейка 2
ряд 2 ячейка 1
ячейка 2
Значения задаются в пикселях (px) или в процентах (%)
○ Выравнивание содержимого в таблице HTML
Чтобы выровнять содержимое в таблице HTML, используют к тегу атрибут «align» и «valign» :
ALIGN – горизонтальное выравнивание содержимого в таблице. Значения:
left— прижать содержимое к левой части (по умолчанию);
center– установить по центру;
right— прижать содержимое к правой части
VALIGN – вертикальное выравнивание содержимого в таблице. Значения:
top– прижать содержимое к верху;
bottom– прижать содержимое к низу;
middle– установить содержимое посередине
ячейка по умолчанию
содержимое выравниваем горизонтально по правому краю, вертикально — прижимаем к низу
содержимое выравниваем горизонтально по левому краю, вертикально — прижимаем к верху
содержимое выравниваем горизонтально по центру, вертикально — прижимаем посредине
○ Как выровнять таблице HTML по центру
Чтобы выровнять таблицу по центру, нужно обхватить таблицу тегом :
Дополнительные и основные теги к таблице
Тег
Описание
Родительский тег таблиц (основной)
Тег строк заголовка таблицы (дополнительный)
ряд таблицы (основной)
Ячейка (столбик) таблицы (основной)
Ячейка заголовка таблицы Должен использоваться внутри тега
(дополнительный)
Описание или краткое содержание таблицы (дополнительный)
Таблица для StepkinBlog.ru
Название 1
Название 2
1
2
Вот и закончили с таблицами. Вы теперь сможете самостоятельно создать таблицу любой сложности. Закрепите данный урок. Попробуйте самостоятельно создать любую таблицу. Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.
