Приветствую, мои уважаемые читатели блога. Сегодня поговорим про верстку таблиц для своего сайта. Существует несколько способов создать красивые таблицы с помощью сервисов вроде Гугл Докс или же самим научиться это делать используя онлайн генератор таблиц html. Ну давайте рассмотрим все на конкретных примерах.
Таблица — привычный способ представления информации со сложной структурой. Цены на продукцию, сравнительные характеристики товаров и услуг, описания, планы, статистические выкладки логично выкладывать в табличном виде.
Что касается верстки, элемент table и его начинка традиционно считается одним из сложнейших объектов из-за трудоемкой разметки и обилия деталей. Время, затрачиваемое на кодинг, нивелирует гибкие возможности оформления, поэтому для ускорения процесса пользователи все чаще ищут онлайн генератор таблиц html.
Но так ли хороши онлайн-сервисы, способны ли они превзойти индивидуальный код? Выясним это, оценив их функциональность и наборы опций в сравнении с примерами возможностей ручной верстки.
Онлайн генератор таблиц 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.
Шаг 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. Но если открыть страницу в браузере и заглянуть в инструменты разработчика — он там присутствует и даже имеет стили. Это встроенное поведение браузеров. Если тег необходим для оформления, он прописывается вручную.
При необходимости указывается заголовок (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>
Шаг 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; /* отступы ячеек */
}
После двоеточий внутри фигурных скобок установите свои значения оттенков и отступов по аналогии.
Это лишь база, на которую накладываются параметры оформления таблицы, и задается поведение. Чтобы строка изменяла цвет при наведении мыши, добавим деталей:
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; /* горизонтальная зебра */
}
Эти параметры прописываются в 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 */
}
Фиксированный заголовок
Применяется чаще вкупе с прокруткой, чтобы для уточнения не требовалась отмотка.
Обычно для фиксации элемента в коде селектора указывается 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>
Сортируемые данные
Этот вариант подходит для сортировки заданных столбцов по возрастанию или убыванию. Применим для слов и чисел. Вариант полезен для быстрого сравнения содержимого ячеек, чаще используется при работе с объемным набором строк.
Очередное решение на 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;
Теперь при нажатии на заголовок любого столбца происходит сортировка по убыванию или возрастанию.
Заключение
Собственный код даст фору любому сервису. Каждая деталь и элемент настраивается самостоятельно, отсутствуют ограничения в функциональности. Впрочем, если говорить о скорости, коды, создаваемые онлайн, предпочтительней.
Для тех, кто ценит время, но хочет получить нестандартный результат, альтернативным решением будет взять за основу сгенерированный код, но добавить к нему свои элементы и опции по аналогии с вышеописанными примерами.
Пользуйтесь на здоровье и делайте свои проекты красивыми и интересными для людей. Всех благ и не забываем подписаться на блог.
Тут Вы сможете скачать готовые исходники и коды таблиц для своего сайта:
С уважением, Галиулин Руслан.
