Создание таблиц онлайн.

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

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

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

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

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

Сервис №1 - daruse.ru сгенерирует таблицу с заданным количеством столбцов и ячеек.

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

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

Сервис №2 - www.tablesgenerator.com . Расширенная функциональность, обилие предустановленных опций.

• шесть встроенных тем в разной цветовой гамме;
• можно создать собственный бэкграунд для одной или нескольких ячеек;
• на выбор шрифты, объединение и разбивка, центрирование;
• compact mode - версия с инлайн-встраиванием.

• неинтуитивен, сложно разобраться;
• интерфейс англоязычный;
• заявлена сортировка колонок, которая работает не во всех версиях браузеров.

Сервис №3 - www.apsolyamov.ru . Простейший из представленных онлайн генератор таблиц html.

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

• только Html-код, каскадные стили не предусмотрены;
• отсутствуют заголовки, темы и цветовые схемы.

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

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

Для работы понадобится редактор разметки. Если недоступен дорогой Dreamweaver, воспользуйтесь free-редакторами. Это Gedit (для Windows и Ubuntu), Brackets или приложение блокнот. Используя последний, не забывайте менять при сохранении расширения файлов с txt.

Это просто, так как разметка едина для всех вариаций. Обрамление задается тегом table. Внутрь вставляется необходимое количество строк и столбцов с помощью тегов td и tr.

Обратите внимание, в нашем исходном коде не указан элемент tbody. Но если открыть страницу в браузере и заглянуть в инструменты разработчика - он там присутствует и даже имеет стили. Это встроенное поведение браузеров. Если тег необходим для оформления, он прописывается вручную.

При необходимости указывается заголовок (thead), отступы от рамки до содержимого (cellpadding) или между ячейками (cellspacing). Тег colspan объединит заданное количество столбцов внутри одной строки.

Зададим собственный внешний вид конструкции - для этого создается таблица стилей. Добавляется в head таким образом:

Или используется готовая из шаблона сайта.

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

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

table {

-moz-

box-shadow: 0 1px 2px #d1d1d1;
}
thead {
font-weight: bold; /* жирный шрифт */
padding:21px 25px 22px 25px;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
}
/* фон заголовка с градиентом*/
thead td{
border: none;
background: rgb(252,255,244); /* старые браузеры */
background: -moz-linear-gradient(top, rgba(252,255,244,1) 0%, rgba(223,229,215,1) 40%, rgba(179,190,173,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fcfff4", endColorstr="#b3bead",GradientType=0); /* IE6-9 */
}
td {
padding: 18px; /* отступы ячеек */
}

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

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

tr:hover {background-color:#f2f2f2;} /*после знака решетки задайте свой цвет*/

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

Html

Альтернатива без нудных заполнений, поддерживается только новыми браузерами:

tr:nth-child(2n-1) {
background: #dcd7e4; /* горизонтальная зебра */
}

Эти параметры прописываются в CSS, но допустимо использование инлайновой вариации разметки. Синтаксис выглядит так:

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

Скроллинг

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

Окружаем table контейнером и ставим границы:

Html

/*здесь наша таблица*/

CSS
table {
background: #fafafa; /* фон таблицы */
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* шрифт */
color: #666; /* цвет текста */
text-shadow: 1px 1px 0px #fff; /* тень текста */
border:#ccc 1px solid; /* цвет бордюра */
border-collapse: collapse; /* игнор sellspasing, бордюр в одну линию */

/* == кроссбраузерная тень таблицы ==*/

-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
width: 470px; /* добавляем фиксированную ширину */
}

Scroller {
width: 490px; /* соответствует фиксированной ширине + 20 px на отступ */
height: 220px; /* задаем высоту прокрутки здесь */
overflow-y: scroll; /* прокрутка по оси y */
}

Фиксированный заголовок

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

Обычно для фиксации элемента в коде селектора указывается position:fixed. Альтернативный вариант решения с JQuery, который представлен здесь, устраняет проблему перелива, включает добавление поддержки двухосных заголовков. Когда исходная таблица прокручивается, заголовок останется “прилипшим” сверху для удобства представления информации.

Реализовано на свободных скриптах:

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

Пример ID
Столбец #1
Столбец #2
Столбец #3
Столбец #4

Сортируемые данные

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

Очередное решение на JQuery. Использовался его плагин tablesorter:

$(document).ready(function () {
$("#keys").tablesorter({
sortList: [, ]
});
});

Чтобы плагин сработал, потребуется упоминавшийся ранее атрибут tbody. К таблице добавляется id и соответствующий класс:

Html

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

cursor: pointer;

Теперь при нажатии на заголовок любого столбца происходит сортировка по убыванию или возрастанию.

Заключение

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

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

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

Тут Вы сможете скачать готовые исходники и коды таблиц для своего сайта:

• Основы + пример прокрутки ;
• Фиксированный заголовок .
• сортировка .

С уважением, Галиулин Руслан.

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

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

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

Я надеюсь, что воспользовавшись одним из этих генераторов, вы сможете достойно поздравить своих дам с 8 марта!

Содержание статьи:

Подтвердите переход на и задайте свое имя или никнейм.

Не забудьте загрузить аватар в вашем профиле Blogger.

Сегодня расскажу что такоеCSS3, с чем его едят, где его искать, как правильно его прописывать. Предупреждаю, буду рассказывать от себя, упрощенно для широкой публики, как я это вижу + примеры. Итак, начнем издалека.
CSS – это стили, в которых прописываются свойства объекта. Значит, они есть во всех существующих движках, если вы их не можете найти, значит либо не там смотрите, либо их действительно нет (кривой сайт ). Где же они обычно найти? Обычно это корень сайта, название файла style.css, хотя, в принципе, название не так важно, как расширение.css, если файл с таким расширением – это файл стилей.
Смотрите также на моём блоге.