Меню

При создании а создать таблицу



УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

  1. Главная »
  2. Учебные курсы »
  3. Уроки HTML и CSS »
  4. Урок 6. Табличный макет сайта

Уроки HTML и CSS

Урок 6. Табличный макет сайта

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

Табличная верстка сайта – достаточно распространенный на сегодняшний день метод верстки.

Если таблица служит для разметки страницы и оформления дизайна, то она называется макетной.

На рисунке 1 приведен внешний вид сайта, на рисунке 2 – зеленым цветом обозначена таблица, которая является основой макета этого сайта. Для того, чтобы макетную сетку не было видно, используется таблица с невидимой границей. Для этого в теге TABLE задается атрибут border=»0″.

Рисунок 1. Внешний вид сайта

Рисунок 2. Таблица, которая лежит в основе макета сайта

Все многообразие дизайна средствами таблиц можно свести к трем типам:

  1. «Фиксированный» (жесткий),
  2. «Резиновый» дизайн и
  3. Комбинированный из первых двух.

1. «Фиксированный» табличный дизайн (макет) сайта

При «фиксированном» дизайне макет страницы создается на основе таблиц определенной ширины, например макетная таблица шириной 1000px

«1000«>.

Пример 1. Табличная верстка сайта – «фиксированный» дизайн сайта. На рисунке 3 приведен пример кода фиксированного (жесткого) дизайна, в основе которого лежит макетная таблица шириной 1000px. На рисунке 4 – внешний вид этого макета.

Выбор ширины таблицы зависит от ориентации на определенное разрешение мониторов пользователей. Так, для разрешения экрана по горизонтали 1024px – следует брать ширину макетной таблицы 960-980 пикселей, для ширины экрана1280px – ширину макетной таблицы можно взять 1200-1220px и т.д.

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

1. Реализуйте web-страничку на основе рисунков 3 и 4. Сохраните файл.

2. Изменяя размеры браузера, проанализируйте поведение макета.

табличная верстка сайта табличный макет сайта уроки html и css

2. «Резиновый» табличный дизайн (макет) сайта

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

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

Пример 2. Табличная верстка сайта – «резиновый» дизайн сайта. На рисунке 5 приведен пример кода «резинового» дизайна, в основе которого лежит макетная таблица шириной 100% от экрана. На рисунке 6 – внешний вид этого макета.

табличная верстка сайта табличный макет сайта уроки html и css

1. Реализуйте web-страничку на основе рисунков 5 и 6. Сохраните файл.

2. Изменяя размеры браузера, проанализируйте поведение макета.

3. Комбинированный дизайн сайта

Можно сделать гибкую комбинированную структуру сайта (рис. 7) – комбинацию «фиксированного» и «резинового» дизайна, когда ширина некоторых ячеек таблицы задается абсолютным значением (в пикселах), а те ячейки, которые надо сделать резиновыми задаются в процентах от ширины макетной таблицы, либо параметр ширины (width) не указывается вообще. Например:

В вышеприведенном примере ширина «резиновой» ячейки не указана и будет изменяться в зависимости от оставшегося свободного места экрана.

Так, если ширина экрана равна 1600 пикселей, ширина «резиновой» ячейки будет 1600-100-50-150=1300 пикселей.

Если ширина экрана 1280 пикселей, ширина «резиновой» ячейки будет 1280-100-50-150=980 пикселей.

Если ширина экрана 1024 пикселя, ширина «резиновой ячейки» будет 1024-100-50-150=724 пикселя.

Пример 3. Комбинация «фиксированного» и «резинового» дизайна. На рисунке 8 приведен пример кода комбинированного дизайна, в основе которого лежит макетная таблица шириной 100% от экрана. На рисунке 9 – внешний вид этого макета.

1. Реализуйте web-страничку на основе рисунков 8 и 9. Сохраните файл.

2. Изменяя размеры браузера, проанализируйте поведение макета.

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

Пример 4. Резиновый сайт с вложенными таблицами

1. Реализуйте web-страничку на основе рисунков 10 и 11. Сохраните файл.

2. Изменяя размеры браузера, проанализируйте поведение макета.

Контрольное задание

1. Используя элементы сайта MyHouse.ru создайте две web-страницы с табличным комбинированным макетом сайта.

2. В верхней части сайта разместите бегущую строку.

3. В левой части сайта – меню, в правой части – содержимое web-страницы.

4. На каждой web-странице гиперссылку, ведущую на другую, созданную Вами страничку. Гиперссылки должны быть взаимными, т.е. с первой страницы должен быть переход на вторую страницу, а со второй страницы соответственно переход на первую страницу.

Источник

Создание таблиц в HTML. Все о HTML таблицах

+++++

В HTML для создания таблиц используются теги группы table. К ним относятся:

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

Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.

Простая HTML таблица

Чтобы создать простую таблицу HTML достаточно 3 тега: , и .

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

Пример простой таблицы HTML

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

Исходный код простой таблицы HTML

Заголовки таблицы HTML

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

Пример HTML таблицы с заголовком th

Исходный код таблицы HTML с заголовками th

Объединение ячеек в таблице HTML

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

Чтобы объединить ячейки по горизонтали используйте атрибут colspan=»х» , у ячейки или , где x — количество ячеек для объединения.

Чтобы объединить ячейки по вертикали используйте атрибут rowspan=»х» , у ячейки или , где x — количество ячеек для объединения.

Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

Пример HTML таблицы с объединением ячеек

Nissan
Модель Комплектация Наличие
Nissan Qashqai VISIA +
TEKNA +
Nissan X-Trail ACENTA +
CONNECTA

Исходный код таблицы HTML с объединенными ячейками

Колонтитулы и подпись в HTML таблицах

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

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

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

Подпись , при использовании, ставится сразу после открывающего тега .

Пример HTML таблицы с колонтитулами и подписью

Комплектации Renault Sandero Stepway

Характеристика SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R
Наличие + + +
Мощность двигателя 0,9 (90 л.с.) 0,9 (90 л.с.) 1,5 (90 л.с.)
Топливо бензин бензин дизель
Норма токсичности Евро-6 Евро-6 Евро-5

Исходный код таблицы с колонтитулами и подписью

Колонки и группы колонок

HTML таблицу можно делить на колонки и группы колонок с помощью тегов и .

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

Оба тега могут определять стили для одной или нескольких колонок. Атрибут span=»число» , указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.

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

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

Пример HTML таблицы с разделением на колонки

ZEN 2E2C AL A ZEN 2E2C J5 A INTENSE 2E3C AL A Характеристика
1.5 (90 л.с.) 1.2 (115 л.с.) 1.5 (90 л.с.) Мощность двигателя
дизель бензин дизель Топливо
АКП6 (EDC) АКП6 (EDC) АКП6 (EDC) Трансмиссия

Исходный код таблицы HTML c и

Таблицы в макете страниц сайта

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

Теги группы Table лучше использовать внутри страницы для отображения контента табличного формата.

Источник

При создании сайта создать таблицу

+++++

В HTML для создания таблиц используются теги группы table. К ним относятся:

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

Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.

Простая HTML таблица

Чтобы создать простую таблицу HTML достаточно 3 тега: , и .

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

Пример простой таблицы HTML

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

Исходный код простой таблицы HTML

Заголовки таблицы HTML

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

Пример HTML таблицы с заголовком th

Volkswagen AG Daimler AG BMW Group
Audi Mercedes-Benz BMW
Skoda Mercedes-AMG Mini
Lamborghini Smart Rolls-Royce

Исходный код таблицы HTML с заголовками th

Объединение ячеек в таблице HTML

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

Чтобы объединить ячейки по горизонтали используйте атрибут colspan=»х» , у ячейки или , где x — количество ячеек для объединения.

Чтобы объединить ячейки по вертикали используйте атрибут rowspan=»х» , у ячейки или , где x — количество ячеек для объединения.

Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

Пример HTML таблицы с объединением ячеек

Nissan
Модель Комплектация Наличие
Nissan Qashqai VISIA +
TEKNA +
Nissan X-Trail ACENTA +
CONNECTA

Исходный код таблицы HTML с объединенными ячейками

Колонтитулы и подпись в HTML таблицах

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

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

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

Подпись , при использовании, ставится сразу после открывающего тега .

Пример HTML таблицы с колонтитулами и подписью

Комплектации Renault Sandero Stepway

Характеристика SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R
Наличие + + +
Мощность двигателя 0,9 (90 л.с.) 0,9 (90 л.с.) 1,5 (90 л.с.)
Топливо бензин бензин дизель
Норма токсичности Евро-6 Евро-6 Евро-5

Исходный код таблицы с колонтитулами и подписью

Колонки и группы колонок

HTML таблицу можно делить на колонки и группы колонок с помощью тегов и .

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

Оба тега могут определять стили для одной или нескольких колонок. Атрибут span=»число» , указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.

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

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

Пример HTML таблицы с разделением на колонки

ZEN 2E2C AL A ZEN 2E2C J5 A INTENSE 2E3C AL A Характеристика
1.5 (90 л.с.) 1.2 (115 л.с.) 1.5 (90 л.с.) Мощность двигателя
дизель бензин дизель Топливо
АКП6 (EDC) АКП6 (EDC) АКП6 (EDC) Трансмиссия

Исходный код таблицы HTML c и

Таблицы в макете страниц сайта

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

Теги группы Table лучше использовать внутри страницы для отображения контента табличного формата.

Источник

Таблица для сайта. Сделать/вставить таблицу

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ID опроса

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

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

Опросы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник