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

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

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

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

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

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

Онлайн генератор таблиц html: обзор сервисов

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

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

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

Плюсы:

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

Минусы:

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

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

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

Плюсы:

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

Минусы:

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

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

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

Плюсы:

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

Минусы:

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

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

Самостоятельная верстка

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

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

Шаг 1. Создаем Html код таблицы

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

<table border=”1″>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
</table>

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

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

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

<table border=”1″ cellpadding=”8″ cellspacing=”3″>
<thead>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</thead>
<tr>
<td>ячейка</td>
<td colspan=”3″>ячейка</td>
<td>ячейка</td>
</tr>

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

Шаг 2. Индивидуальное оформление

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

<link href=”style.css” rel=”stylesheet”>

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

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

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

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, бордюр в одну линию */

/* == кроссбраузерная тень таблицы ==*/
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
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; /* отступы ячеек */
}

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

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

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

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

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

Html
<tr class=”odd”>
Css
.odd {
background: #f6f6f6; /* горизонтальная зебра */
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}

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

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

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

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

<table style=”border-collapse:collapse; background: #f2f2f2; font-family: Arial, “Helvetica CY”, “Nimbus Sans L”, sans-serif; color: #444;border: #aaa7b5;border-collapse: collapse;”>

Шаг 3. Функциональность

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

Скроллинг

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

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

Html
<div class=”scroller”>
/*здесь наша таблица*/
</div>
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, бордюр в одну линию */

/* == кроссбраузерная тень таблицы ==*/
-moz-box-shadow: 0 1px 2px #d1d1d1;
-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 */
}

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

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

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

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

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

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script src=”http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js”></script>

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

<thead>
<th>Пример ID</th>
<th>Столбец #1</th>
<th>Столбец #2</th>
<th>Столбец #3</th>
<th>Столбец #4</th>
</thead>
<tr>
<th>Строка #1</th>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>

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

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

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

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

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script src=”jquery.tablesorter.js”></script>
<script>
$(document).ready(function () {
$(“#keys”).tablesorter({
sortList: [[0, 0], [1, 0]]
});
});
</script>

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

Html
<table id=”keys” class=”tablesorter”>
<thead>
<th>Пример ID</th>
<th>Столбец #1</th>
<th>Столбец #2</th>
<th>Столбец #3</th>
<th>Столбец #4</th>
</thead>
<tbody>
<tr>
<td>Строка #1</td>

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

cursor: pointer;

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

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

Заключение

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

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

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

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

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

Рейтинг
( 1 оценка, среднее 5 из 5 )
Руслан Галиулин/ автор статьи
Если вы решили чему-то научиться и познать что-то новое в сфере заработка в интернете и построении бизнеса, то вы на правильном пути, и мой блог — Вам в помощь.
Понравилась статья? Поделиться с друзьями:
FIRELINKS.RU
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: