Как сделать таблицу на сайте – пошаговая инструкция по размещению таблиц на страницах Вашего сайта

Содержание

Как на сайте сделать таблицу

Создать таблицу можно тремя способами:

Виджет «Таблица»

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

Для добавления нового столбца нажмите на зелёную кнопку в правом верхнем (или левом нижнем для добавления строки) углу таблицы:

Виджет «PRO таблица»

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

Работа с самой таблицей строится по привычному многим принципу настройки таблиц Excel. Достаточно выделить нужные ячейки и кликнуть по этой области правой кнопкой мыши, чтобы произвести с ними какие-либо действия. Среди настроек доступны:

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

Примечание:

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

Для добавления нового столбца или строки в конце таблицы вы также можете воспользоваться зелёными кнопками: для добавления столбца — в правом верхнем углу таблицы, а для добавления строки — в левом нижнем углу таблицы.

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

Виджет «Прайс»

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

Остается только заполнить таблицу.

Помогла ли вам статья?

Статья оказалась полезной для 72 человек

Как сделать или вставить таблицу на сайте. 5 способов

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

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

Далее посмотрим, как вставить на сайт таблицу из уже готового файла Excel. И в завершении создадим адаптивные таблицы для сайта с помощью сервисов Гугл и Onedrive, чтобы вставлять на сайт таблицы excel любого размера.

Итак, начнем…

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

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

Плагины для создания и вставки таблиц на сайт

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

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

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

Но, также необходимо понимать, что у плагинов есть и свои недостатки.

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

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

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

Вставить таблицу на сайт с помощью ckeditor

Вставить таблицу на сайт с помощью ckeditor

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

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

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

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

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

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

Вот, к примеру, есть плагин WP-Опросы для удобного создания и ведения опросов на сайте. При установке он автоматически встраивает кнопку Вставить опрос:

Вставить опрос на сайт

Вставить опрос на сайт

При нажатии по кнопке появляется дополнительное окно, в котором можно просто поставить ID опроса и нажать ОК:

ID опроса

ID опроса

Опрос вставится в то место страницы, где стоял курсор.

А узнать ID опроса можно в разделе, где находятся все созданные опросы:

Опросы

Опросы

Достаточно удобно! Но, при добавлении расширенного редактора CKEditor данная кнопка не работает, т.е. не выводит всплывающее окно (по крайней мере, в некоторых темах).

Конечно, здесь тоже можно приспособиться, просто вставляя вручную код , где цифра 2, это ID опроса.

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

И, что касается создания и вставки таблиц, так уж ли необходимо использовать плагины или можно воспользоваться другими способами?! Рассмотрим другие способы.

Сайты для создания таблиц. Генераторы таблиц

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

Вот один из таких бесплатных сайтов для создания таблиц: Онлайн генератор html таблиц для сайта:

русскоязычный генератор html таблиц для сайта

русскоязычный генератор html таблиц для сайта

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

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

онлайн генератор таблицо для сайта

онлайн генератор таблицо для сайта

Как видно на снимке выше, в этом генераторе даже можно задавать цвет и доп. эффекты!

Если захочется поэкспериментировать с созданием таблиц и этих сервисов будет недостаточно то, вот еще один сервис для создания таблиц: HTML Table Generator. Этот генератор таблиц англоязычный, но разобраться в нем просто, а если еще пользоваться браузером с автопереводчиком, то вообще никаких проблем.

Как вставить таблицу Excel на сайт

Что касается таблиц, то довольно часто бывает необходимо вставить уже готовую таблицу, созданную, например, в OpenOffice, Microsoft Excel, или Microsoft Word. Если таблица не слишком большая в ширину и нет объединенных ячеек, то можно воспользоваться бесплатным онлайн сервисом Tableizer.

Суть работы сервиса простая. Нужно выделить и скопировать необходимую готовую таблицу или ее часть:

Как вставить таблицу Excel на сайт

Как вставить таблицу Excel на сайт

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

сгенерировать html код таблицы

сгенерировать html код таблицы

Затем смотрим, как будет выглядеть таблица, копируем готовый код таблицы:

копируем готовый код таблицы

копируем готовый код таблицы

И вставляем к себе на сайт.

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

Вот как это может выглядеть:

большая excel таблица на сайте

большая excel таблица на сайте

Как видно на снимке, таблица выходит на границы сайта.

Кстати и даже не слишком большие таблицы при просмотре сайта на мобильном устройстве (если сайт адаптивный) тоже могут выходить за рамки страницы.

Ну и как тогда быть с такими широкими таблицами и отображением таблиц на адаптивных сайтах?

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

Но, есть более интересный способ, который рассмотрим далее.

Адаптивные таблицы для сайта через Гугл Диск

Загружаем в Гугл Диск нужный нам файл с таблицей (Создать -> Загрузить файл) и открываем доступ:

Открыть доступ файлу

Открыть доступ файлу

Включаем доступ по ссылке и копируем ее:

Совместный доступ

Совместный доступ

Теперь можно разместить на сайте, например, так:

Расписание Саратовского автовокзала (нажмите для просмотра)

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

И для самого владельца сайта использование Гугл Диска делает удобным добавление таблиц на сайт, ведь проще создать сложную таблицу в Excelе, чем «мучится» с их созданием на сайте с помощью разных кодов html.

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

Для этого нужно зайти в файл, закачанный в Гугл, и в верхней части экрана выбрать функцию Открыть в приложении «Google»:

Открыть в приложении

Открыть в приложении

Заходим в Меню -> Публикация в Интернете:

Публикация таблицы в Интернете

Публикация таблицы в Интернете

Копируем предоставленный код во вкладке Встроить:

Встроить таблицу

Встроить таблицу

И размещаем на своем сайте в нужно месте.

Примечание: Единственное, что еще можно добавить, это размеры width=»100%» height=»480″, как на снимке ниже, чтобы корректно отображалась таблица на сайте.

Добавить размеры

Добавить размеры

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

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

Улучшаем использование таблиц

Если на одной странице необходимо вставить много таблиц, то для более удобного их использования посетителями можно воспользоваться плагином Shortcodes Ultimate и заключить таблицы в аккордион:

Пример таблицы во всю ширину и высоту 480 рх

Пример таблицы с шириной 90% и высотой 480 рх

Пример таблицы с шириной 80% и высотой 200 рх

Адаптивные таблицы для сайта через Onedrive

По аналогии сервиса Гугл Диск, встроить таблицу на сайт можно с помощью сервиса от Майкрософт Onedrive.

Загружаем таблицу, правой кнопкой мыши на файл, — выбираем Внедрение и берем для сайта код таблицы (1):

Добавить таблицу через onedrive

Добавить таблицу через onedrive

Можно также воспользоваться дополнительными настройками внешнего вида таблицы (2):

Дополнительные настройки встраивания таблицы onedrive

Дополнительные настройки встраивания таблицы onedrive

Вот как выглядит встроенная таблица на сайте с помощью сервиса Onedrive:


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

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

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

пошаговая инструкция по размещению таблиц на страницах Вашего сайта

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

Способ №1: Вставить на сайт таблицу, подготовленную в Word

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

Ctrl+С или правой кнопкой мыши). Необходимо выделить и скопировать таблицу целиком, а не только текст в ячейках. 

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

Вставка таблицы из текстового редактора

Перед вами появится диалоговое окно. Вставьте таблицу в него, пользуясь сочетанием клавиш Ctrl+V или правой кнопкой мыши. После вставки нажмите кнопку «OK».

Добавление таблицы: работа в диалоговом окне

Система поинтересуется, желаете ли Вы очистить формат текста перед вставкой на сайт. Вы ведь знаете, для чего следует очищать текст перед публикацией на сайте? Если знаете, то подтвердите действие кнопкой «OK».

Система спросит, хотите ли вы очистить текст перед вставкой. Вы хотите!

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

Переход к свойствам таблицы и настройка оформления

Способ №2: Создать таблицу на сайте с помощью текстового редактора

Этот способ подходит для небольших таблиц. При его использовании вам не придется копировать таблицу: вы с нуля создадите ее в текстовом редакторе.

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

Затем кликните мышкой на значок таблицы в верхнем меню.
Переход к свойствам таблицы и настройка оформления

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

При создании новой таблицы обязательно задайте количество колонок и строк. При необходимости укажите остальные параметры, а затем сохраните таблицу, нажав кнопку «OK».
Переход к свойствам таблицы и настройка оформления

Таблица с пустыми ячейками будет добавлена.
Переход к свойствам таблицы и настройка оформления

Теперь в пустые ячейки можно добавить данные. Если вы планируете вставить в ячейки скопированный откуда-то тест, то воспользуйтесь общими правилами для добавления текста на сайт.

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

«Сохранить».
Переход к свойствам таблицы и настройка оформления

Добавление таблиц, как правило, вызывает у наших клиентов много вопросов. Если вы остались недовольны тем, как опубликована таблица, вы можете отредактировать ее или опубликовать ее заново с помощью программы «Реформатор».

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

Здравствуйте! В этой статье рассмотрим как добавить таблицу на сайт.  На заре веба где то в годах 90-х  20 столетия таблицы использовались для верстки сайтов. Надо сказать, что тогда сайты были еще не настолько переполнены различными элементами и были внешне простыми. Поэтому тогда казалось что нет ничего более простого чем  верстка сайтов на основе таблиц.

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

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

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

Любая таблица состоит из строк и столбцов за выод строк отвечает элемент <tr> а за столбцы <td>.

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

Давайте рассмотрим атрибуты тега <table>.

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

устанавливает рамку в таблице значение задается в пикселах.

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

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

Данный атрибут  указывает количество столбцов в таблице.

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

align

Позволяет задать выравнивание  ячейки по горизонтали. Принимает значения: left —- выравнивает по левому краю, center — по центру и right — по правому краю.

bgcolor

Задает цвет фона ячейки.

colspan

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

 

height

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

rowspan

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

 

valign

Устанавливает вертикальное выравнивание в ячейке. По умолчанию содержимое ячейки располагается по ее вертикали в центре. Принимает такие значения: top — выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии.

width

Позволяет задать ширину ячейки таблицы.

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

Для того чтобы выравнивать таблицу используется атрибут align тега table. Причем результат будет заметен только в том случае если  таблица не занимает всей ширины страницы.

Выравнивание таблицы по правому краю

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание таблицы</title>
 </head>
 <body>
  <table bgcolor="#c0c0c0" cellspacing="0" cellpadding="5" border="1" align="right">
   <tr><td>Содержимое таблицы</td></tr>
  </table>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
     euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body>
</html>

Просмотреть  пример

Объединение ячеек

Для  того чтобы объединить две и более ячеек в одну используются атрибуты colspan и rowspan тега <td>. Атрибут colspan устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, <td colspan=»3″> заменяет три ячейки, поэтому в следующей строке должно быть три тега <td> или конструкция вида <td colspan=»2″>…</td><td>…</td>. Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В примере 12.3 приведен хотя и валидный, но неверный код, в котором как раз проявляется подобная ошибка.

Неверное объединение ячеек

<!DOCTYPE HTML">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Неправильное использование colspan</title>
 </head>
 <body>
   <table border="1" cellpadding="5">
    <tr>
     <td colspan="2">Ячейка 1</td>
     <td>Ячейка 2</td>
    </tr>
    <tr>
     <td>Ячейка 3</td>
     <td>Ячейка 4</td>
    </tr>
   </table>
 </body>
</html>

Просмотреть  пример

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

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

<!DOCTYPE HTML">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Объединение ячеек</title>
 </head>
 <body>
  <table border="1" cellpadding="4" cellspacing="0">
   <tr>
    <td rowspan="2">Браузер</td>
    <th colspan="2">Internet  Explorer</th>
    <th colspan="3">Opera</th>
    <th colspan="2">Firefox</th>
   </tr>
   <tr>
    <th>6.0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th><th>1.0</th><th>2.0</th>
   </tr>
   <tr align="center">
    <td>Поддерживается</td>
    <td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td><td>Да</td><td>Да</td>
   </tr>
  </table>
 </body>
</html>

Просмотреть  пример

В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.

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

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

Явно заданная высота ячейки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Объединение ячеек</title>
 </head>
 <body>
  <table border="1" cellpadding="4" cellspacing="0">
   <tr>
    <td valign="top">Duis te feugifacilisi. Duis autem dolor in hendrerit 
         in vulputate velit esse molestie consequat.</td>
    <td rowspan="2" valign="top">Lorem ipsum dolor sit amet, consectetuer 
         adipiscing  elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
         dolore magna aliguam  erat volutpat. Ut wisis enim ad minim veniam, quis 
         nostrud exerci tution  ullamcorper suscipit lobortis nisl ut aliquip ex ea 
         commodo consequat. Duis te  feugifacilisi. Ut wisi enim ad minim veniam, quis 
         nostrud exerci taion  ullamcorper suscipit lobortis nisl ut aliquip ex 
         en commodo consequat.</td>
   </tr>
   <tr>
    <td>Lorem ipsum</td>
   </tr>
  </table>
 </body>
</html>

Просмотреть  пример

Левая нижняя ячейка согласно коду HTML имеет высоту 40 пикселов, но поскольку высота содержимого правой колонки больше, чем содержимое левой колонки, то высота ячейки меняется. Получается, что атрибут height в данном случае игнорируется. Заметим, что данная особенность проявляется только в браузере Opera, но и другие браузеры могут отображать сложные таблицы с ошибками. Это часто выражается в тех таблицах, где явно устанавливается высота ячеек и их объединение по вертикали. Для упрощения верстки применяется прием с вложенными таблицами.

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

Вложенные таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Вложенные таблицы</title>
 </head>
 <body>
  <table border="0" cellpadding="5" cellspacing="0">
   <tr>
    <td valign="top" bgcolor="#f0f0f0">
     <table cellpadding="2" cellspacing="1">
      <tr><td bgcolor="#ffffff">Lorem</td></tr>
      <tr><td bgcolor="#ffffff">Ipsum</td></tr>
      <tr><td bgcolor="#ffffff">Dolor</td></tr>
      <tr><td bgcolor="#ffffff">Sit</td></tr>
      <tr><td bgcolor="#ffffff">Amet</td></tr>
     </table>
    </td>
    <td valign="top" bgcolor="#ffffee">Lorem ipsum dolor sit amet, consectetuer 
         adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
         dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis 
         nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea 
         commodo consequat.</td>
   </tr>
  </table>
 </body>
</html>

Просмотреть  пример

В данном макете с помощью таблицы создается две колонки, причем левая колонка имеет фиксированную ширину 150 пикселов. Чтобы создать подобие навигации, внутрь ячейки добавлена еще одна таблица с шириной 100%.

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

  • left — выравнивает заголовок по левому краю таблицы. Браузер Firefox располагает текст сбоку от таблицы, Internet Explorer и Opera располагают заголовок сверху, выравнивая его по левому краю.
  • right — в браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. Firefox отображает заголовок справа от таблицы.
  • center — заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию.
  • top — результат аналогичен действию атрибута center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
  • bottom — заголовок размещается внизу таблицы по ее центру.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Заголовок таблицы</title>
 </head>
 <body>
  <table border="1" cellpadding="4" cellspacing="0">
   <caption>Изменение добычи ресурсов по годам</caption>
   <tr>
    <th>&nbsp;</th><th>2003</th><th>2004</th><th>2005</th>
   </tr>
   <tr>
    <td>Нефть</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Золото</td><td>29</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Дерево</td><td>38</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Просмотреть  пример

Смотрите видеоурок по созданию таблиц

Как сделать таблицу на сайте/блоге.

Таблицы в html.

Html таблицы – полезная штука . Обычно их используют не только для отображения графических таблиц как таковых, но и для расположения фото или видео в табличной конфигурации с невидимым каркасом. Раньше все сайты имели табличную структуру страниц, сейчас все большую популярность приобретает структура на дивах (с помощью <div> и CSS ). Вот классический пример табличной структуры сайта:

Шапка сайта, заголовок (логотип и все такое)
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
Ссылка 5
Основное содержание посыла, о сайте или что-то ещё. Реклама и все такое
Блок копирайта

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

TABLE (“таблица”) – Элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Сразу скажу, что здесь есть атрибут BORDER (“кромка”), который задает толщину рамки таблицы в пикселах.

TR (Table Row – “табличный ряд”) – Создает новый ряд таблицы. Закрывающий тег поставить обязателено.

TD (Table Data – “табличные данные”) – Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег в конце.

Давайте попробуем создать таблицу из двух рядов и двух столбцов:

<table border=”1″>

<tr>

<td>ряд 1 ячейка1</td> <td>ряд1 ячейка2</td>

</tr>

<tr>

<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>

</tr>

</table>

Вот как эта HTML-запись будет выглядеть в браузере:

ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2

Вместо слов “ряд 1 ячейка 1″ подставляете нужный вам текст и всё, таблица сделана. Разобрались? Т.е. таблица начинается с <table>, затем идёт <tr>, указывающий на начало нового ряда. В ряду вставлены две ячейки: <td>ряд 1 ячейка1</td> и <td>ряд1 ячейка2</td>. Ряд закрывается </tr>, и сразу начинается новый ряд <tr>. В новом ряду также две ячейки. Таблица закрывается </table>. Все довольно логично

А как можно объединить ячейки?

Для этого существуют данные атрибуты.

COLSPAN – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

ROWSPAN – определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

Пример 1:

<table border=”1″>

<tr>

<td colspan=”2″>ряд 1 ячейка 1+2</td>

</tr>

<tr>

<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>

</tr>

</table>

Получим в браузере:

ряд 1 ячейка 1+2
ряд 2 ячейка 1 ряд 2 ячейка 2

Пример 2:

<table border=”1″>

<tr>

<td rowspan=”2″>Ячейка 1, ряд 1+2</td>

<td>ряд1 ячейка2</td>

</tr>

<tr>

<td>ряд 2 ячейка 2</td>

</tr>

</table>

Получим в браузере:

Ячейка 1, ряд 1+2 ряд1 ячейка2
ряд 2 ячейка 2

Ничего сложного нет. Присмотритесь внимательно к трем примерам и все станет ясно.

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

CELLPADDING – задаёт расстояние между рамкой каждой ячейки html таблицы и содержащемся в ней материалом (в пикселах).

CELLSPACING – задаёт расстояние между границами соседних ячеек таблицы html (в пикселах).

WIDTH – задаёт ширину таблицы html. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.

HEIGHT – задаёт высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в html таблице материала.

Пример 1:

<table border=”1″ cellpadding=”10″>

<tr>

<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>

</tr>

<tr>

<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>

</tr>

</table>

Результат в браузере:

ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2

Пример 2:

<table border=”1″ cellspacing=”10″>

<tr>

<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>

</tr>

<tr>

<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>

</tr>

</table>

Результат в браузере:

ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2

Пример 3:

<table border=”1″ width=”400″ height=”100″>

<tr>

<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>

</tr>

<tr>

<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>

</tr>

</table>

Результат в браузере:

ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2

И наконец последние четыре атрибута:

ALIGN – задаёт горизонтальное выравнивание html таблицы или содержимого ячеек. Возможные значения: left, center, right. Значение по умолчанию – left.

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

BGCOLOR – задаёт цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

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

Приведу пример:

<!– задаем ширину , высоту, рамку, выравнивание по центру и фоновый цвет всей таблицы–>

<table width=”400″ height=”100″ border=”1″ align=”center” bgcolor=”#FFF8D2″>

<tr>

<!– эту ячейку оставляем по умолчанию–>

<td>ряд 1 ячейка1</td>

<!– содержимое горизонтально выравниваем по центру, вертикально – прижимаем к верху–>

<td align=”center” valign=”top”>ряд1 ячейка2</td>

</tr>

<tr>

<!– содержимое горизонтально выравниваем по центру, вертикально – прижимаем к низу–>

<td align=”center” valign=”bottom”>ряд 2 ячейка 1</td>

<!– содержимое горизонтально выравниваем по правому краю, вертикально – посередине, и меняем фоновый цвет–>

<td align=”right” valign=”middle” bgcolor=”#33FF99″>ряд 2 ячейка 2</td>

</tr>

</table>

Результат в браузере:

ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2

Еще один пример:

<!– задаем ширину , высоту, рамку, фоновый цвет всей таблицы, выравнивание оставляем по умолчанию(по левому краю)–>

<table width=”400″ height=”100″ border=”1″ bgcolor=”#FFF8D2″>

<tr>

<!– горизонтальное-по центру, вертикально по умолчанию(по центру)–>

<td align=”center”> ряд 1 ячейка1 </td>

<!– горизонтальное-по центру, вертикально по умолчанию(по центру) и делаем фоновый рисунок–>

<td align=”center” background=”pchela.jpg”> ряд1 ячейка2 </td>

</tr>

<tr>

<!– горизонтальное-по центру, вертикально по умолчанию(по центру)–>

<td align=”center”> ряд 2 ячейка 1 </td>

<!– горизонтальное-по центру, вертикально по умолчанию(по центру) и меняем фоновый цвет–>

<td align=”center” bgcolor=”#33FF99″>ряд 2 ячейка 2</td>

</tr>

</table>

Результат в браузере:

ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2

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

НУ, вот в принципе и всё по таблицам. Если не получилось запомнить не расстраивайтесь. С практикой все запомнится, повторенье – мать ученья (и, как говорят, главное знать, где подсмотреть!). В программе Adobe Dreamweaver все делается очень просто.

Тому, кто хочет вникнуть поглубже, рекомендую бесплатно ссылку:

http://www.novichkoff.ru/kak-sdelat-i-vstavit-tablicy-v-wordpress-nachalo-plagin-wp-table-reloaded.html

Как сделать таблицу на сайте?

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

Для этого нам потребуется всего две вещи:

  1. Редактор Microsoft Word.
  2. Сайт http://www.word-to-html.ru/

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

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

Артём ВысоковАртём Высоков

Артём Высоков

Автор блога о SEO и заработке на сайтах — Vysokoff.ru. Продвигаю информационные и коммерческие сайты с 2013 года.

Задать вопросЗагрузка ...Загрузка ... Загрузка …

Я думаю в Microsoft Word все вы умеете делать таблицы, в этом нет ничего сложного. После того, как вы создали таблицу в Word, копируйте её, заходите на сайт word-to-html.ru и вставляйте в появившееся окно.

Как сделать таблицу на сайте?

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *