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

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

Содержание

(Для справки) Существуюn теги , которые определяют заголовок таблицы — они делают текст, написанный между ними, жирного шрифта.

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

• valign=»top»
• valign=»bottom»
• valign=»middle»

Для демонстрации работы данных атрибутов создадим таблицу. Зададим ей длину, а высоту «обозначим» внутри ряда (

):

Вверху У середины Внизу
слово слово слово
Горизонтальная ориентация текста в таблице html

Для горизонтальной ориентации текста в таблице применяют атрибуты

• align=»left»
• align=»right»
• align=»center»

Слева По центру Справа
слово слово слово
Горизонтальная ориентация текста в таблице html

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

Ниже представлен пример, который наглядно демонстрирует это:

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

Способы выравнивания таблицы по центру в HTML

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

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

Основные тонкости

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

Как сделать саму таблицу по центру

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

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

Выравнивание по центру в ячейках

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

, отвечающий за конкретную ячейку в строке. Далее необходимо присвоить его атрибутам valign (вертикаль) и/или align (горизонталь) значение «center», в зависимости от вашей задачи:

Если вы хотите сделать такое форматирование стандартным для всего сайта или страницы (чтобы не переписывать каждую таблицу), то следует использовать CSS-стили. Для этого допишите следующий код внутри тега :

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

webshake.ru

Таблицы в HTML

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

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

Часто наши сайты и представляют собой что-то наподобие таблиц, только не в табличной верстке, а сверстанных при помощи дивов (блоков). Даже самая простая верстка сайта контейнерами напоминает таблицу, в левом (правом) меню которой находится боковая панель, в «шапке таблицы» — заголовок, меню, логотип, по центру — контент.

Что-то вроде этого и наблюдается при применении табличной верстки. Перейдем к практике.

Как в HTML сделать таблицу

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

Для добавления на страницу таблицы используется тег

. Это основной и главный контейнер, в который помещают элементы таблицы (строки и столбцы). И этот контейнер нужно закрывать —

.

Строки и столбцы задаются при помощи тегов

, при этом вместо

вы можете смело использовать

. Отличие

от

в том, что браузер отображает текст в ячейке

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

Строки таблицы ( ) должны быть помещены строго между . А столбцы таблицы ( ) в свою очередь помещаются строго между тегами .

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

), начало строки (

), четыре ячейки (

), конец таблицы (

), конец строки (

).

Теперь давайте используем тег

, чтобы больше не возвращаться к этому.

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

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

Эти значения (ширина и высота) задаются в пикселях, процента. Можно оставить и так, ничего не писать, браузер подумает, что вам лень было писать «px» и сочтет цифру за пиксели.

Ну а если вы хотите выровнять содержимое одной или нескольких табличных ячеек, — используйте атрибут align со значениями left, center, right. Это горизонтальное выравнивание, а есть еще вертикальное и у него свой отдельный атрибут — valign, который может принимать значения: baseline (вертикальное выравнивание точно по базовой линии), bottom (по нижнему краю), middle (значения ячеек будут выравнены вертикально по середине), top (по верхнему краю). По умолчанию браузеры выравнивают ячейки по центру (середине).

Увеличиваем рамку (границы) таблицы и меняем ее цвет

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

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

Добавляем всего 1 атрибут и становится уже получше:

Это как в Экселе! Представьте, что не было бы разделения ячеек линиями (сеткой)? Ну ужас же. А вот что будет, если выставить border, равный 10.

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

Давайте изменим цвет этой рамки, ведь для этого тоже есть атрибут — bordercolor. Установим его значение равным «d3d3d3». Результат:

Как сделать отступы в таблице

Отступы в таблице также нужны для повышения «читаемости», как и границы ячеек. Для создания отступов нам понадобится атрибут «cellspacing». Я буду по прежнему работать с нашей 4х4 таблицей, применяя к ней этот атрибут. Актуализирую код для вас (я привожу только одну строку, чтобы не загромождать пост):

Это были отступы снаружи ячеек. Но есть похожий атрибут для задания отступов внутри ячеек — cellpadding, сейчас я сделаю его также равным 10 и вы увидите, как увеличилось расстояние от содержимого ячейки до ее границ (пришлось сделать количество ячеек поменьше, чтобы таблица не разрасталась чрезмерно). Код:

Теперь уберем «cellspacing» и оставим только «cellpadding». Результат:

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

Как грамотно объединить ячейки в таблице

Для объединения ячеек в вашей таблице также есть специальные атрибуты. Это «colspan» и «rowspan». Первый (colspan) объединяет ячейки по столбцам (горизонтали), второй (rowspan) — по строкам или по вертикали. Давайте объединим что-нибудь в нашей таблице.

Здесь внимательно! При объединении ячеек, вам нужно уменьшить их количество на то число (минус один), которое вы прописываете в параметрах атрибута. Если вы будете создавать таблицу в HTML, объединять ячейки не удаляя лишние, то сайт будет ехать. Объединяем две — удаляем одну. Объединяем три — удаляем две. И так далее.

При слиянии ячеек в колонках или столбцах, одну ячейку нужно удалять! И делать это столько раз, сколько ячеек вы объединяете. Сейчас покажу на примере.

При слиянии ячеек в колонках или столбцах, одну ячейку нужно удалять! И делать это столько раз, сколько ячеек вы объединяете.

Сейчас покажу на примере. Вот наша текущая таблица:

Давайте объединим ячейки с номерами «1 и 2», «5 и 9», «4, 8, 12», «6 и 7». Смотрите как круто получилось, я сам не ожидал!

Принцип объединения такой.

При горизонтальном объединении ячейки номер 1 и 2, нужно в первой прописать «colspan=»2″», содержимое второй поместить в первую (мы же объединяем) и удалить вторую ячейку (или скрыть ее от HTML как это сделал я — потом покажу.)

При вертикальном объединении ячеек номер 4, 8, 12, нужно в первой ячейке (номер 4) прописать «rowspan=»2″», а содержимое остальных удалить, предварительно поместив в объединенную ячейку.

Вот какой получился у меня код. Я скрыл ячейки для наглядности (чтобы вам было более понятно), но можно и удалить их.

Надеюсь понятно объяснил и привел хороший пример.

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

Чтобы задать таблице заголовок — используйте теги после начала таблицы (

), но до начала тега

. Вот что получается:

Ну и небольшой HTML-хак для тех, кому нужно разместить заголовок таблицы под самой таблицей. Используйте атрибут align со значением bottom вот так:

И тогда заголовок таблицы переместится под таблицу.

Итак, мы рассмотрели почти все, за исключением… Фона!

Как сделать красивый фон у ячейки или всей таблицы

HTML позволяет задать цвет не только у всего фона таблицы, но и у каждой отдельной ячейки (если есть такая потребность). Устанавливает цвет фона таблицы или ячейки атрибут «bgcolor».

Давайте я сначала задам фон для всей таблицы. Это будет цвет «»lightgreen»» (а вообще можно задать его и вот так — «»#90EE90″»). Вот так теперь у меня начинается таблица:

Ого, цвет фона ячеек стал очень даже «»lightgreen»». Теперь покрашу одну из ячеек таблицы обратно в белый, присвоив ей такой же атрибут, только с другим цветом:

По-моему круто! Если бы я участвовал в конкурсе креативных таблиц (или обучения дошкольников HTML) — точно бы победил.

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

blogwork.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 - lang ru
Поделиться:
Нет комментариев

Добавить комментарий

Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.

Adblock
detector