Сервис позволяет сгенерировать html таблицу практически любой сложности с использованием colspan и rowspan.


Как работать

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

2 - Сначала определитесь какие ячейки будете объединять.

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

4 - Объединяем по вертикали
Тоже самое, только в вертикальном ряду.

5 - Объединяем блок
Тоже самое, только вторую метку ставим по диагонали чтобы захватить одновременно по несколько горизонтальных и вертикальных рядов.
Неважно в каком из четырёх углов блока будет поставлена первая метка, важно самому не напутать.

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

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

Исправление ошибок

Если ошиблись и объединили не те ячейки, то достаточно щёлкнуть по ненужному блоку правой кнопкой мыши. Удалить можно любой блок в любом месте, в любое время.
Если ошиблись с первой меткой, щёлкните по ней ещё раз.
Для полной и быстрой очистки матрицы нажмите кнопку "Создать матрицу".

Как получить сгенерированный код

Выделить и скопировать код из текстария.
Что окажется в текстарии зависит от наличия галок в checkbox: code, style, content, conceal, и radio: as is, zero, units.
code - это код самой таблицы
style - это несколько строк стилей для таблицы
content - это содержимое ячеек, в данном случае числа
conceal - если делается таблица с неравномерно распределёнными ячейками, то для этого используют специальный опорный ряд мелких ячеек который скрывают, сжимают в ноль, если будет галка, то к самому последнему тегу <tr> будет добавлен класс class="conceal", а при копировании стилей будет прибавлена соответствующая строка стилей
html - генерируется полноценный файл html в соответствии с выставленными галками
Что будет в content зависит от включённой радио кнопки.
as is - нумерация ячеек как есть после генерации, при объединении ячеек номера "выпадают", в ячейке остаётся самый младший номер
zero - последовательная нумерация от нуля
units - последовательная нумерация от единицы
При использовании colspan и/или rowspan в нумерации образуются "дырки", для их устранения используйте zero или units.

Лесенка

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

Подсказки

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

Размер шрифта

Выбираем наиболее удобный по размеру шрифт, может быть удобно для больших таблиц.

Помощь

Файл помощи, это то, что вы сейчас читаете. Повторное нажатие на кнопку закроет этот текст.

Плвающие окошко

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

Как не стоит делать

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

рис №1

рис №2

рис №3
Теоретически можно сделать таблицу изображённую на рисунке №1, но в реальности получается немного не то, обратите внимание, исчез ряд с номерами ячеек 10-14, этого ряда нет, он сжался в ноль, на рисунке №2 в центре, хорошо виден коленвал вместо этого ряда. Теоретически происходит следующие. В каждом столбце объединяем по три ячейки, казалось бы что у нас в столбце по пять ячеек, но это будет верно пока не сделаем как на рисунке. В итоге у нас получится не по пять, а по четыре ячейки в столбце. Как видно из третьего рисунка, наполнение ячеек только подтверждает вышесказанное.
Такое построение таблицы ошибки не вызывает, но и смысла так делать нет.

рис №4

рис №5
Как видно на рисунках №4 и №5 для вертикальных ячеек происходит тоже самое, ячейки №1 и №20 сжались.


рис №6

рис №7

рис №8

рис №9
Примеры на рисунках 6 и 7, 8 и 9, вообще не имеет смысла, это совсем другие таблицы. Матрица всё та же, 5х5.

Закрыть Файл помощи

Закрыть этот текст можно повторно нажав кнопку Файл помощи