Jquery таблицы: Перебор ячеек таблицы jQuery

Содержание

Адаптивная таблица (table) на jQuery

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

ДЕМО

ИСХОДНИКИ

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

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

Поэтому я больше думал о стороне UX и о коде ниже.

Создание структуры

Мы использовали section как контейнер таблицы. Заголовок содержит функции (какие свойства мы сравниваем?). Причина, по которой столбцы и заголовок не упакованы в один и тот же div, заключается в том, что на мобильном телефоне заголовок фиксирован (в абсолютном положении), а родительский элемент, определяющий его позицию, является section. С другой стороны столбцы будут прокручиваться на меньших устройствах.

Как и ожидалось, данные столбцов — это просто элементы списка.

<section>
<header>
<h3>Features</h3>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>...</li>
</ul>
</header><div>
<div>
<div>
<h3>Plan 1</h3>
<ul>
<li>1 GB</li>
<li>2</li>
<li>. ..</li>
</ul>
</div> <!-- cd-table-column -->
<div>
 <h3>Plan 2</h3>
<ul>
<li>2 GB</li>
<li>5</li>
<li>...</li>
</ul>
</div> <!-- cd-table-column -->
</div> <!-- cd-table-wrapper -->
</div> <!-- cd-table-container -->
</section>

Добавление стиля

Ничто не зацикливается на CSS. Просто одно замечание: мы обернули столбцы в 2 div, .cd-table-container и .cd-table-wrapper. Почему два, а не только один? Потому что я установил ширину первой из них равной 90% с помощью переполнения-x: auto, тогда как ширина второго поля задается суммой всех значений ширины столбцов. Таким образом, у меня может быть некоторый запас справа, и пусть контент прокручивается, если его ширина больше 90% от области просмотра.

Обработка событий

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

Статья переведена с зарубежного источника!

Вот и всё!

Статьи по теме

🧚 Раскрутка в соцсетях

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

Перейти в Блог

20 лучших jQuery плагинов фильтра и сортировки

Сортировка и фильтрация очень полезны, если у вас есть определенные наборы данных, такие как таблицы или гриды, однако вы также можете использовать их для управления представлениями списка, например, для страницы портфолио. Фильтры jQuery и плагины сортировки позволяют вам контролировать порядок, размещение, разбиение по страницам и организацию элементов страницы / таблицы.

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

1. Shuffle

Shuffle.js – это плагин jQuery для сортировки, фильтрации и размещения группы элементов. ОН быстродействующий, отзывчивый и быстрый. Ссылка

к содержанию ↑

2. Sortable

jQuery Sortable – гибкий, удобный сортировочный плагин. Он позволяет сортировать элементы списка (или таблицы и т. Д.) По горизонтали и вертикали с помощью мыши. Поддерживает вложенные списки и чистые контейнеры перетаскивания. jQuery Sortable не зависит от jQuery UI и хорошо работает с Twitter Bootstrap (вы даже можете сортировать навигацию Bootstrap). Ссылка

к содержанию ↑

3. HTML5 Sortable

HTML5 Sortable – это плагин jQuery для создания сортируемых списков и сеток с использованием встроенного API перетаскивания HTML5. Ссылка

к содержанию ↑

4. jQuery DataTables

jQuery DataTables – мощный плагин, который может сортировать, разбивать на страницы и фильтровать миллионы записей. Ссылка

к содержанию ↑

5. jPList

jPList – гибкий плагин jQuery для сортировки, разбивки на страницы и фильтрации любой HTML-структуры. Поддерживаются источники данных: PHP + MySQL, ASP.NET + Sql Server, PHP + SQLite. Он работает с такими шаблонами JavaScript, как Handlebars, Mustache и т. Д. JPList поддерживает XML + XSLT. Работает во всех основных браузерах. Для некоммерческих, личных или открытых проектов и приложений вы можете использовать jPList бесплатно в соответствии с условиями лицензии GPL V3. Ссылка

к содержанию ↑

6. Mixitup

MixItUp – это плагин jQuery, обеспечивающий анимированную фильтрацию и сортировку. Он отлично подходит для управления любым категоризованным или упорядоченным контентом, таким как портфолио, галереи и блоги, но также может служить мощным инструментом для привлечения пользовательского интерфейса приложения и визуализации данных. MixItUp прекрасно работает с вашими существующими HTML и CSS, что делает его отличным выбором для адаптивных макетов. В отличии от подобного рода плагинов (isotope и т.п) данный плагин решает проблему динамической высоты. Если вдруг блок у Вас планирует сменить высоту, то обязательно используйте данный плагин. Ссылка

к содержанию ↑

7. Tiny Sort

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

к содержанию ↑

8. List.js

List.js – это легкий кросс-браузерный собственный JavaScript, который делает ваши простые списки HTML очень гибкими, доступными для поиска, сортируемыми и фильтруемыми. Также есть возможность добавлять, редактировать и удалять элементы с помощью простых шаблонов. Ссылка

к содержанию ↑

9. JTPS

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

к содержанию ↑

10. Columns

Столбцы – это простой способ создания данных JSON в HTML-таблицах с возможностью сортировки, поиска и разбивки на страницы. Все, что вам нужно, это предоставить данные, а Columns сделает все остальное. Ссылка

к содержанию ↑

11. Quicksand

Quicksand – это плагин jQuery для переупорядочивания и фильтрации элементов с хорошей анимацией тасования. Ссылка

к содержанию ↑

12. Stupid Table

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

к содержанию ↑

13. Pour Over

PourOver – это библиотека для простой, быстрой фильтрации и сортировки больших коллекций – например, 100 000 единиц – в браузере. Он позволяет создавать приложения и архивы для исследования данных со скоростью 60 кадров в секунду, которые не должны ждать вызова базы данных для отображения результатов запроса. Ссылка

к содержанию ↑

14. jQuery Sortable Lists

jQuery Sortable Lists позволяет сортировать html-списки, а также создавать древовидные структуры путем перетаскивания мышью с плавным движением, функции обратного вызова isAllowed или экспорта и многое другое. Ссылка

к содержанию ↑

15. jQuery Sort and Order Portfolio

Плагин jQuery Sort and Order Portfolio имеет ряд функций, таких как расширяемый фильтр и кнопки заказа, настройка анимации, управляемой css3, постепенное ухудшение качества, опциональный обратный порядок, вы можете установить, поддерживает ли кнопка заказа поддержку или нет, и многое другое. Ссылка

к содержанию ↑

16. Isotope

Isotope – это изысканный плагин jQuery для магических макетов. Вы можете выявить и скрыть элементы с помощью фильтрации и переупорядочить элементы с помощью сортировки. Синтаксис очень прост, но макеты могут быть действительно динамичными и интеллектуальными. А также, прогрессивно улучшен для CSS3 преобразований и переходов. Ссылка

к содержанию ↑

17. Dynatable

Dynatable – это динамичный, семантический интерактивный плагин для таблиц, использующий jQuery, HTML5 и JSON. И это не только для таблиц. Dynatable предоставляет платформу для реализации наиболее распространенных элементов из коробки, включая сортировку, поиск и фильтрацию. Прежде всего, Dynatable – это чистый и элегантный API, который интересно использовать. Ссылка

к содержанию ↑

18. Bootstrap Dropdown

Bootstrap Dropdown Filter – это элемент управления для jPList, библиотеки с открытым исходным кодом для сортировки, фильтрации и разбиения на страницы. Он позволяет фильтровать любую структуру HTML (DIVs, UL / LI, таблицы и т. Д.) По заданному пути jQuery и использует стандартный раскрывающийся компонент Bootstrap для макета. Ссылка

к содержанию ↑

19. Table Sorter

Tablesorter – это плагин jQuery для преобразования стандартной таблицы HTML с тегами THEAD и TBODY в сортируемую таблицу без обновления страницы. Tablesorter может успешно анализировать и сортировать многие типы данных, включая связанные данные в ячейке. Ссылка

к содержанию ↑

20. WaTable

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

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

Селекторы jQuery

Селекторы jQuery выбирают элементы веб-страницы, а методы выполняют операции с этими элементами.

Чтобы выбрать элементы, нужно передать селектор функции $(), например, $("img:odd"). Данный селектор будет применен ко всему дереву DOM, и чтобы ограничить процедуру отбора элементов, можно указать определенный фрагмент дерева DOM — $("img:odd", "div#slideshow"). Таким образом будут выбраны все четные картинки из блока с

id=slideshow.

Для более точного выбора элементов селекторы можно комбинировать, например, следующая запись позволит выбрать все флажки полей формы, которые были выделены пользователем — $("input[type=checkbox][checked]").

А с помощью этой комбинации селекторов $("input:checkbox:checked:enabled") можно выбрать только активные и отмеченные флажки полей формы.

Также, допускается объединять несколько селекторов в одно выражение, разделяя селекторы запятой — $("p,span"), что позволит отобрать все элементы <p> и <span>

Таблица 1. Селекторы jQuery
Селектор	Описание, пример
Элемента	Выбирает все элементы данного типа на странице, например, `$("div")`.
Элемент1 элемент2	Выбирает все элементы2, вложенные непосредственно в элемент1, например, `$("p img")`.
Класса	Выбирает все элементы заданного класса, например, `$(".sidebar")`.
Идентификатора	Выбирает элемент с указанным идентификатором, например, `$("#main")`.
Элемент класс	Выбирает из элементов данного типа только те элементы, которым назначен указанный класс, например, `$("p. first")`.
Потомка	Выбирает все указанные элементы выбранного селектора, например, `$(".sidebar a")`.
Дочерние	Выбирает элементы, соответствующие второму селектору, которые содержатся непосредственно внутри первого селектора, являющиеся дочерними по отношению к нему, например, `$("body > p")`.
Сестринские	Выбирает элементы, соответствующие второму селектору, идущие непосредственно за первым элементом, являющимся для него сестринским, например, `$("h3 + p")`.
Сестринские	Выбирает элементы, соответствующие второму селектору, являющиеся сестринскими по отношению к первому элементу и расположенные после него, например, `$("h3 ~ p")`.
Атрибута	Выбирает все элементы, которые содержат данный атрибут или указанно значение атрибута, например, `$("img[alt]")`, `$("a[href]")`, `$("input[type='text']")`. =’http://’]»).
	Выбирает все элементы, заканчивающиеся на определенное значение, например, `$("a[href$='.pdf']")`.
	Выбирает все элементы, содержащие в любом месте определенное значение, например, `$("a[target*='blank']")`.
	`:even`	Выбирает элементы по четным значениям индекса 0, 2, 4…, т.е. выбирает 1, 3, 5… элементы, например, `$("li:even")`.
`:odd`	Выбирает элементы по нечетным значениям индекса, т.е. выбирает 0, 2, 4… элементы.
`:first`	Выбирает только один элемент, первый из подходящих, например, `$("p:first")`.
`:last`	Выбирает только один элемент, последний из подходящих.
`:first-child`	Выбирает элементы, которые являются первыми дочерними элементами своих родителей.
`:last-child`	Выбирает элементы, которые являются последними дочерними элементами своих родителей.
`:only-child`	Выбирает элементы, являющиеся единственными дочерними элементами своих родителей.
`:nth-child(n)`	Выбирает элементы, которые являются n-дочерними элементами своих родителей.
`:nth-child(Xn+Y)`	Выбирает n-элемент, порядковый номер которого рассчитывается по формуле в круглых скобках.
`:nth-of-type(n)`	Выбирает элементы, являющиеся n-ми дочерними элементами данного типа для своих родителей.
`:parent`	Выбирает непустые элементы, которые имеют вложенные (дочерние) элементы, а также содержащие текст.
`:eq(n)`	Выбирает элементы с индексом `n`, при этом индексы отсчитываются от нуля.
`:gt(n)`	Выбирает все элементы, индекс которых больше `n`, индексы отсчитываются от нуля.
`:lt(n)`	Выбирает все элементы, расположенные перед n-элементом, не включая n-элемент.
`:not(селектор)`	Позволяет выбрать элемент, не соответствующий данному типу селектора, например, `$("a:not(.link)")`, `$("a:not([href$='.pdf'])")`.
`:has(селектор)`	Выбирает элементы, которые содержат внутри себя указанный селектор, например, элементы списка, содержащие внутри себя ссылки: `$("li:has(a)")`.
`:contains(текст)`	Выбирает элементы, которые содержат указанный в скобках текст, например, `$("a:contains(Скачать)")`.
`:hidden`	Выбирает скрытые элементы, для которых установлено значение `display: none;`, а также элементы форм со значением `type="hidden"` например, `$("ul:hidden").show()` — делает скрытые элементы видимыми.
`:visible`	Выбирает видимые элементы, к видимым элементам относятся элементы, размеры которых больше нуля, а также элементы со значением `visibility: hidden` и `opacity: 0`.
`:active`	Выбирает элемент, который активизирован пользователем, например, с помощью щелчка мыши.
`:checked`	Выбирает только отмеченные флажки или радиокнопки.
`:focus`	Выбирает элемент, находящийся в фокусе.
`:hover`	Выбирает элемент, на который наведен указатель мыши.
`:disabled`	Выбирает неактивные элементы (форм).
`:enabled`	Выбирает активные элементы (форм).
`:empty`	Выбирает элементы, не содержащие дочерних элементов.
`:target`	Выбирает элементы, на которые ссылается идентификатор фрагмента в url-адресе.
`:animated`	Выбирает все анимируемые в данный момент элементы.
`:button`	Выбирает все кнопки `input[type=submit]`, `input[type=reset]`, `input[type=button]`, `button`.
`:checkbox`	Выбирает элементы-флажки `input[type=checkbox]`.
`:file`	Выбирает элементы типа `file`, `input[type=file]`.
`:header`	Выбирает элементы-заголовки от `h2` до `h6`.
`:image`	Выбирает изображения в элементах форм `input[type=image]`.
`:input`	Выбирает элементы форм `input, select, textarea, button`.
`:password`	Выбирает элементы ввода пароля `input[type=password]`.
`:radio`	Выбирает радиокнопки `input[type=radio]`.
`:reset`	Выбирает кнопки сброса `input[type=reset]`, `button[type=reset]`.
`:selected`	Выбирает выделенные элементы `option`.
`:submit`	Выбирает кнопки отправки формы `input[type=submit]`, `button[type=submit]`.
`:text`	Выбирает элементы ввода текста`input[type=text]`.

Таблицы | Учебник HTML | schoolsw3.com

HTML таблицы позволяют веб-разработчикам упорядочивать данные в строки и столбцы

Пример

Компания	Контакты	Страна
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Попробуйте сами »

Определение таблицы HTML

Тег <table> определяет таблицу HTML.

Каждая строка таблицы определяется с помощью тега <tr>. Каждый заголовок таблицы определяется с помощью тега <th>. Каждая таблица данных/ячейка определяется с помощью тега <td>.

По умолчанию текст элементы <th> выделены жирным шрифтом и центрированы.

По умолчанию текст элементы <td> являются регулярными и выровненными по левому краю.

Пример

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

<table>
<tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Лет</th>
</tr>
<tr>
<td>Джилл</td>
    <td>Смит</td>
    <td>50</td>
</tr>
<tr>
    <td>Ева</td>
    <td>Джексон</td>
    <td>94</td>
</tr>
</table>

Попробуйте сами »

Примечание: Элемент <td> — контейнеры данных таблицы.
Они могут содержать все виды HTML элементов: текст, изображения, списки, другие таблицы и т. д.

HTML Таблица — Добавление границы

Чтобы добавить границу в таблицу, используйте CSS свойство border:

Не забудьте определить границы как для таблицы, так и для ячеек таблицы.

HTML Таблица — Крах ганиц

Чтобы позволить границам свернуться в одну границу, добавьте CSS свойство border-collapse:

HTML Таблица — Добавить заполнение ячеек

Заполнение ячейки задает пространство между содержимым ячейки и ее границами.

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

Чтобы установить отступ, используйте CSS свойство padding:

HTML Таблица — Выравнивание заголовков по левому краю

По умолчанию заголовки таблиц выделены жирным шрифтом и центрированы.

Чтобы выровнять заголовки таблиц по левому краю, используйте CSS свойство text-align:

HTML Таблица — Добавить интервал между границами

Расстояние между границами определяет расстояние между ячейками.

Чтобы задать интервал между границами таблицы, используйте CSS свойство border-spacing:

Примечание: Если таблица имеет свернутые границы, border-spacing это не имеет никакого эффекта.

HTML Таблица — Ячейка, охватывающая много столбцов

Чтобы сделать ячейку охватывающей более одного столбца, используйте атрибут colspan:

Пример

<table>
<tr>
    <th>Имя</th>
    <th colspan=»2″>Телефон</th>
</tr>
<tr>
    <td>Билл Гейтс</td>
    <td>55577854</td>
    <td>55577855</td>
</tr>
</table>

Попробуйте сами »

HTML Таблица — Ячейка, охватывающая много строк

Чтобы сделать ячейку охватывающей более одной строки, используйте атрибут rowspan:

Пример

<table>
<tr>
    <th>Имя:</th>
    <td>Билл Гейтс</td>
</tr>
<tr>
    <th rowspan=»2″>Телефон:</th>
    <td>55577854</td>
</tr>
<tr>
    <td>55577855</td>
</tr>
</table>

Попробуйте сами »

HTML Таблица — Добавить подпись

Чтобы добавить подпись к таблице, используйте тег <caption>:

Пример

<table>
<caption>Ежемесячные сбережения</caption>
<tr>
    <th>Месяц</th>
    <th>Экономия</th>
</tr>
<tr>
    <td>Январь</td>
    <td>$100</td>
</tr>
<tr>
    <td>Февраль</td>
    <td>$50</td>
</tr>
</table>

Попробуйте сами »

Примечание: Тег <caption> должен быть вставлен сразу же после тега <table>.

Особый стиль для одного стола

Чтобы определить специальный стиль для одной конкретной таблицы, добавьте атрибут id к таблице:

Пример

<table>
<tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Лет</th>
</tr>
<tr>
    <td>Ева</td>
    <td>Джексон</td>
    <td>94</td>
</tr>
</table>

Теперь вы можете определить специальный стиль для этой таблицы:

#t01 {
width: 100%;
background-color: #f1f1c1;
}

Попробуйте сами »

И добавьте больше стилей:

#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}

Попробуйте сами »

Краткое содержание

Используйте в HTML элемент <table> для определения таблиц
Используйте в HTML элемент <tr> чтобы определить строку таблицы
Используйте в HTML элемент <td> для определения табличных данных
Используйте в HTML элемент <th> чтобы определить заголовок таблицы
Используйте в HTML элемент <caption> чтобы определить надпись таблицы
Используйте в CSS свойство border чтобы определить границы
Используйте в CSS свойство border-collapse чтобы рухнули границы ячеек
Используйте в CSS свойство padding чтобы добавить отступы для ячеек
Используйте в CSS свойство text-align для выравнивания текста в ячейке
Используйте в CSS свойство border-spacing чтобы задать интервал между ячейками
Используйте атрибут colspan для создания ячейки охватывают множество столбцов
Используйте атрибут rowspan чтобы сделать промежуток ячейке несколько строк
Используйте атрибут id для определения одной таблицы

HTML Упражнения

HTML Теги таблицы

Тег	Описание
<table>	Определяет таблицу
<th>	Определяет заголовок ячейки в таблице
<tr>	Определяет строки в таблице
<td>	Определяет ячейку в таблице
<caption>	Определяет надпись таблицы
<colgroup>	Задает группу из одного или нескольких столбцов в таблице для форматирования
<col>	Задает свойства столбца для каждого столбца в элементе <colgroup>
<thead>	Группирует содержимое заголовка в таблице
<tbody>	Группирует содержимое тела в таблице
<tfoot>	Группирует содержимое нижнего колонтитула в таблице

Альтернатива закреплению шапки и первого столбца таблицы

2020/10/02

Это динамическая статья. Время от времени она может пополнятся новым контентом, а старый может изменяться или исчезать.

Чтобы понять, появилось ли что-то новенькое взгляните на дату.
Первая дата — дата выхода первой версии статьи.
Вторая дата — дата последних изменений.
Правда, иногда, я забываю обновлять вторую дату… ‘:)
Чтобы было проще найти новое воспользуйтесь кнопками для подсветки свежих изменений. Заголовки новых добавленных глав, либо фрагменты текста целиком станут выделены в тексте вот таким образом[ NEW! ]. Так что вы сможете либо найти их глазами, либо, если текста много, можете воспользоваться поиском меток [ NEW! ] при помощи поиска по странице.
Если тема для вас очень важна и совсем не хочется пропустить обновления информации лучше будет подписаться на новости и обновления: в группе VK.

подсветить самое свежее подсветить за нужную дату

Скачать скрипт версии 0.1

Чтобы при наведении курсора на ячейку таблицы выводилась всплывающая подсказка с заголовком этого столбца и ещё одна со значением первой ячейки в строке сделайте вот что:

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

Имейте в виду, что скрипт не сработает для таблиц в iframe, например для тех что выводятся в WYSIWYG редакторе вроде Xinha. Для работы с ними потребуется другой плагин, подключаемый непосредственно к самому редактору.

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

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

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

Количество откликнувшихся: 4

Ручная

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

Для

DataTables 1.10+ и его расширений требуется jQuery 1.7 или новее.

DataTables 1.10 совместим с IE6 и новее. Для расширений требуется IE8 или новее. Все остальные вечнозеленые браузеры (Chrome, Firefox, Safari, Opera) полностью поддерживаются.

Заявленная цель DataTables — «повысить доступность данных в таблицах HTML». Для этого мы признаем, что у DataTables есть две категории пользователей, которые взаимодействуют с интерфейсами, имеющимися у программного обеспечения:

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

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

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

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

Руководство по таблицам данных

Установка

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

Данные

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

Ajax

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

Параметры

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

API

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

Стиль

Важно стилизовать расширенные таблицы DataTables таким образом, чтобы они соответствовали вашему дизайну, чтобы таблицы легко вписывались в остальную часть вашего сайта / приложения. С этой целью DataTables предоставляет ряд вариантов стилизации таблиц, включая собственный настраиваемый CSS, интеграцию с CSS-фреймворками, такими как Bootstrap и Foundation, а также предварительно созданные темы. Прочитайте больше »

Events

Информация о том, когда DataTables выполнила операцию, часто может играть важную роль в сложном и динамичном веб-приложении. По этой причине DataTables будет запускать пользовательские события DOM, которые можно прослушивать с помощью метода jQuery on () и пространства имен dt . Прочитайте больше »

Обработка на стороне сервера

Обработка на стороне сервера позволяет DataTables напрямую использовать возможности и мощь механизмов базы данных, позволяя им выполнять тяжелую работу по упорядочиванию, поиску и разбивке по страницам. Это делается путем вызова Ajax для каждой страницы, отображаемой DataTables, и подходит для очень больших наборов данных.Прочитайте больше »

Интернационализация

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

Безопасность

Безопасность — фундаментальная тема в веб-разработке, и это тема, которую не должен упускать из виду ни один разработчик, от стажеров до технических директоров.Громкие случаи взлома часто появляются в заголовках во всем мире, но при тщательном продумывании и планировании вы можете быстро создавать безопасные приложения. На этой странице обсуждаются атаки на веб-безопасность, которые имеют непосредственное отношение к DataTables, а также методы борьбы с ними. Прочитайте больше »

Разработка подключаемых модулей

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

Технические примечания

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

Разработка

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

DataTables / DataTables: плагин таблиц для jQuery

DataTables — это надстройка для улучшения таблиц для библиотеки jQuery Javascript, добавляющая возможности сортировки, разбиения по страницам и фильтрации в простые таблицы HTML с минимальными усилиями. Заявленная цель DataTables:

Для повышения доступности данных в таблицах HTML.

Для достижения этой цели DataTables разработан с учетом двух отдельных групп пользователей:

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

Установка таблиц данных

Чтобы использовать DataTables, основной способ получить программное обеспечение — использовать загрузчик DataTables. Вы также можете включить отдельные файлы из CDN DataTables. См. Подробную информацию в документации.

NPM и Bower

Если вы предпочитаете использовать диспетчер пакетов, такой как NPM или Bower, репозитории распространения доступны с программным обеспечением, созданным из этого репозитория, под именем datatables.net . Пакеты стилей для Bootstrap, Foundation и других библиотек стилей также доступны путем добавления суффикса к имени пакета.

Дополнительную информацию см. На страницах установки DataTables NPM и Bower. В руководстве по установке DataTables также есть подробности о том, как использовать менеджеры пакетов с DataTables.

Использование

В простейшем случае DataTables можно инициализировать одной строкой Javascript:

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

 $ ('таблица'). DataTable ({
  paginate: false,
  scrollY: 300
});

отключит листание и включит прокрутку.

Полный список параметров, доступных для DataTables, доступен в документации.

Документация

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

Поддержка

Поддержка DataTables доступна на форумах DataTables, также доступны коммерческие варианты поддержки.

Лицензия

DataTables выпущен под лицензией MIT. Вы можете свободно использовать, изменять и распространять это программное обеспечение при условии, что заголовок авторских прав не поврежден (в частности, блок комментариев, который начинается с / *! ).

150+ Лучший подключаемый модуль таблиц jQuery и таблица данных jQuery с демонстрационным примером

fancyTable — это подключаемый модуль jQuery, позволяющий сделать таблицы HTML доступными для поиска и сортировки с разбивкой на страницы.

FXB Grid — это удобный для мобильных устройств элемент управления сеткой JavaScript.

Функции:

Адаптивное отображение и скрытие столбцов в зависимости от ширины контейнера
Оперативное изменение высоты строки в зависимости от размера шрифта
Низкое использование процессора — продление срока службы батареи
Полная поддержка сенсорных устройств
Специальные сенсорные жесты

Многоцелевая адаптивная таблица с анимированными сворачиваемыми столбцами и липкой головой, созданная с помощью CSS3, jQuery и GSAP’s TweenMax.

Frappe DataTable — это простая, современная и интерактивная библиотека данных для отображения табличных данных. Первоначально созданный для ERPNext, он может использоваться для визуализации большого количества строк без ущерба для производительности и имеет базовые функции сетки данных, такие как встроенное редактирование и навигация с клавиатуры. Он не требует jQuery, как большинство существующих гридов данных.

x-spreadsheet — это электронная таблица на основе JavaScript (холст) на базе Интернета.

Легкая и простая таблица данных без зависимостей.

Функции:

Отображение данных (массив с объектами) в простой таблице
Ленивая загрузка данных (вы можете загружать данные в любое время)
Поддержка пользовательских скинов
Небольшой размер пакета
Нет зависимостей
Поддержка настраиваемых событий (обновление, добавление, удаление)
Fluent API
Распознавание данных во вводе и изменение типа ввода

Toast UI Grid — мощный компонент для отображения и редактирования данных.Испытайте Ultimate Data Transformer!

Функции:

Пользовательский форматер и преобразователь ячеек
Различные типы ввода (флажок, радио, выбор, пароль и т. Д.)
Полная навигация с клавиатуры (перемещение, выбор, копирование, вставка, удаление и т. Д. )
Виртуальная прокрутка (Обработка большого набора данных без потери производительности)
Копирование и вставка с использованием буфера обмена с помощью стороннего приложения (например, MS-Excel или Google-таблица)
Изменение размера столбца, изменение порядка, отображение и скрытие
Заголовки нескольких столбцов
Проверка
Разбиение на страницы
Объединение ячеек

Библиотека javascript, предлагающая прокрутку элементов по горизонтали с помощью значка указателя.

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

Dgtable — это табличное представление для jQuery, которое должно быть высокопроизводительным и допускающим простое взаимодействие пользователя с пользовательским интерфейсом, например:

Сортировка
Сортировка по более чем одному столбцу
Перемещение столбцов
Изменение размера столбцы
Полный предварительный просмотр ячейки при наведении курсора
Встроенная поддержка RTL

Плагины jQuery для HTML-таблиц [Статья]

(Фото пользователя Flickr Джереми Левина)

таблиц HTML плохая репутация.В 1990-х и 2000-х годах многие веб-профессионалы использовали таблицы для размещения текста и изображений на веб-страницах. Использование таблиц для разметки — это плохо, но, к сожалению, это сообщение иногда сокращается до «таблицы плохие», что совсем не соответствует действительности. Таблицы HTML не следует использовать для позиционирования на веб-страницах, но они необходимы для отображения табличных данных , таких как спортивные результаты, данные о питании, финансовые транзакции и многое другое.

Таблицы содержат информацию в столбцах и строках, как и приложения для работы с электронными таблицами, такие как Google Таблицы, Microsoft Excel и Apple Pages.Однако таблицы по умолчанию не являются интерактивными, и у пользователя обычно нет возможности сортировать столбцы, фильтровать данные или редактировать ячейки. Таблицы не всегда хорошо выглядят на мобильных устройствах. Хорошей новостью является то, что существует множество — а может быть, и слишком много — подключаемых модулей jQuery, которые добавляют эту функциональность. Их так много, что бывает сложно найти активные проекты с хорошей поддержкой последних стандартов и передовых методов, поэтому я собрал для вашего рассмотрения несколько, которые я считаю лучшими.

Stackable.js

См. Демонстрационный форк на GitHub

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

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

Столовая пила

См. Демонстрационный форк на GitHub

Tablesaw — это группа плагинов для интерактивных таблиц от Filament Group, известной студии дизайна и интерфейсной разработки. Столовая пила бывает двух видов: полная и стопочная.Полная версия требует небольшой настройки, но включает в себя наложение таблиц (аналогично stackable.js), а также жесты смахивания, сортируемые столбцы и несколько различных инструментов для просмотра столбцов на маленьких экранах.

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

Таблицы данных

См. Демонстрационный форк на GitHub

DataTables — еще более надежное решение, чем Tablesaw.Плагин DataTables может создавать адаптивные таблицы с сортируемыми столбцами. Он также включает такие функции, как разбиение на страницы, поиск и источники данных AJAX, что идеально подходит для больших наборов данных. Возможно, лучшая часть всего заключается в том, что DataTables легко настраиваются для популярных фреймворков, таких как Bootstrap или Foundation. На сайте DataTable гораздо больше, поэтому обязательно прочтите документацию.

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

Ручной

См. Демонстрационный форк на GitHub

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

Дополнительные ресурсы

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

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

jquery-response-tables — npm

jquery-response-tables

Облегченный плагин jQuery, который позволяет разметке HTML-таблицы стать адаптивной.Он обеспечивает чистый список через устройства с маленькими экранами, а затем возвращается к традиционному виду для больших экранов. Он может работать с несколькими таблицами на одной странице, а также с таблицами, содержащими различные комбинации объединенных ячеек. Он использует CSS для рендеринга и легко настраивается.

Демо

Использование

  npm установить jquery-response-tables - сохранить

Для подключаемого модуля требуется jQuery 1.11 или выше.
Включите jquery .responseive-tables.js и responsive-tables.css в вашем проекте. Свойства CSS можно переопределить в соответствии с вашими потребностями.
Вызов плагина в файле пользовательских скриптов:

  $ (документ) .ready (функция () {
  $ .responsiveTables (); 
 });

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

...

Пример
Заголовок
Образец

Настройки

В таблице стилей responsive-tables.css изменение значений свойств ‘top’ и ‘left’ изменит воспринимаемое заполнение заголовка таблицы в «мобильном» представлении. Это обеспечит согласованность между заголовком таблицы и заполнением данных таблицы:

  .jrt td: before {
  
  top: 8px; 
  слева: 6 пикселей;

В пределах отзывчивых таблиц.css , при необходимости измените точку останова медиа-запроса:

  @media only screen and (max-width: 768px);

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

  $ .responsiveTables ('768px');

Автор

Райан Уэллс: ryanwells.com

Лицензия

Лицензия MIT.Наслаждаться.

мобильных таблиц jQuery

Адаптивные таблицы

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

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

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

Существует два типа адаптивных таблиц: reflow и column toggle .

Стол оплавления

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

Создайте таблицу, добавьте data-role = «table» и класс «ui-responsive» в элемент

и элементы.
Не используйте rowspan или colspan атрибуты; они не поддерживаются в адаптивных таблицах.

	Для правильной работы адаптивной таблицы необходимо включить

Переключить столбец таблицы

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

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

следующее:

<таблица данных-роль = "таблица" data-mode = "columntoggle" id = "myTable">

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

) и укажите число от 1 (высший приоритет) до 6 (низший приоритет):

я никогда не будет скрыт

I очень важен — я, вероятно, не буду скрыт

Я менее важно — меня могут спрятать

Я не так уж и важен — есть хороший шанс, что меня скроют

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

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

Пример

<таблица данных-роль = "таблица" data-mode = "columntoggle" id = "myTable">

CustomerID
CustomerName
ContactName
Адрес
Город
PostalCode
Страна

1
Альфредс Футтеркисте
Мария Андерс
Обере, ул.57
Берлин
12209
Германия

Попробуй сам »

Чтобы изменить текст кнопки таблицы переключения, используйте атрибут data-column-btn-text:

Пример

<таблица данных-роль = "таблица" data-mode = "columntoggle" data-column-btn-text = "Щелкните меня, чтобы скрыть или показать столбцы!" id = "myTable">

Попробуй сам »

Таблицы для укладки

Используйте класс «ui-shadow», чтобы добавить тени к таблице:

Добавить тень

<таблица данных-роль = "таблица" data-mode = "columntoggle" id = "myTable">

Попробуй сам »

Для дальнейшей стилизации таблиц используйте CSS:

Добавить нижнюю границу ко всем строкам таблицы

Попробуй сам »

Добавить нижнюю границу ко всем элементам

и цвет фона для всех четных строк таблицы
th {
border-bottom: 1 пиксель сплошной # d6d6d6;
}

tr: nth-child (even) {
background: # e9e9e9;
}

Попробуй сам »

Грифер, Чарли: 9781782164685: Amazon.com: Books

Расширяйте и добавляйте интерактивность ваших HTML-таблиц с помощью jQuery

Overview

Узнайте что-то новое в одно мгновение! Краткое, быстрое и целенаправленное руководство, дающее немедленные результаты.
Используйте простые функции jQuery для улучшения ваших HTML-таблиц
Продемонстрируйте функциональность на стороне клиента и добавьте AJAX для интеграции на стороне сервера
Измените свои таблицы, не редактируя HTML

Подробно

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

Instant jQuery 2.0 Table Manipulation How-to показывает, как быстро и легко добавить стиль и функциональность в ваши HTML-таблицы. Вы будете удивлены, увидев, насколько это просто. Только не дайте знать вашим клиентам!

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

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

Независимо от вашего уровня навыков работы с JavaScript или jQuery, эта книга проведет вас через обманчиво простые шаги, необходимые для добавления функциональности и интерактивности в ваши HTML-таблицы.

Что вы узнаете из этой книги

Разметьте свой код для эффективного использования селекторов jQuery
Изучите jQuery, чтобы значительно упростить задачи, которые были бы намного сложнее в обычном старом JavaScript
Создавайте интерактивные страницы без перезагрузки страницу или обратный вызов на сервер
Воспользуйтесь преимуществами мощных методов AJAX, которые позволяют вам общаться с сервером без обновления страницы
Используйте простые функции jQuery для улучшения ваших HTML-таблиц

Подход

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