Таблицы — сделать на сайте под WP корректные таблицы.

Пламенный привет посетителям этой страницы, пришедшим из социальных сетей, да и всем остальным тоже!

В апреле 2021-го года наблюдал удивительное явление: обильный поток посетителей из 4-х социальных сетей. В связи с этим настоятельно рекомендую всем неоднократно и регулярно посещать сайт rtbsm.ru — там в общих чертах изложена Российская Теннисная Балльная Система Марии (Шараповой).

Приглашаю всех полюбоваться на Фото и Видео красавицы Марии — надеюсь, что Вы поделитесь адресом сайта rtbsm.ru с друзьями и знакомыми.

Главная проблема — известить Марию, чтобы она лично как можно скорее заявила на весь мир о РТБСМ.

Таблицы — как их сделать на сайте под CMS WordPress, чтобы они соответствовали современным стандартам и не содержали ошибок, обнаруживаемых валидатором.

Таблицы, созданные путём переноса из Excel, имели до 590-та ошибок, которые обнаруживал Валидатор, порекомендовавший использовать CSS!

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

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

Всё-таки 15.03.14 не удержался и опробовал плагин TablePress, соблазнившись тем, что был заявлен импорт таблиц Excel. Любой нормальный человек делает таблицы в Excel, а не на сайте. Чтобы сделать таблицу 4*5, не нужен плагин: достаточно скопировать любую таблицу из Excel и разобраться с несколькими тэгами. На странице плагина было предупреждение о том, что импорт экспериментальный.

Преодолев ряд трудностей, вставил код вида [table id=1 /] и тот же код с < > взамен скобок, но результат нулевой. Предварительный просмотр таблицы показал, что плагин её создал.

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

Мой вывод таков: плагин TablePress сырой — быстро и беспроблемно в несколько кликов мышкой импортировать не умеет. Удалил его, чтобы не засорял сайт.

Кстати, можно таблицу из Excel скопировать в Paint, сохранить в jpg-файле и затем разместить на странице сайта. Замечательно то, что при этом сохраняются все цвета, стили, … Вот только объём данных возрастает многократно, поэтому этим способом размещения таблиц следует пользоваться только тогда, когда таблицу иными способами сложно или невозможно вместить на странице.

Примеры таких jpg-таблиц можете посмотреть на странице _Таблица. Обратите особое внимание на таблицу № 5: она внаглую вылезла вправо в область правого сайдбара, пользуясь тем, что там пусто.

Итак, валидатор выдавал 590-то ошибок кода нескольких типов с сообщениями вида

Строка 131, Столбец 62: ширина и атрибут ширины элемента таблицы являются устаревшими. Вместо них используйте CSS. (Валидатор выдаёт сообщения на английском языке…)

«——- tаble width=»882″ border=»0″ cellspacing=»0″ cellpadding=»0″  ——»

Начал разбираться…

Ниже помещен фрагмент таблицы Меню сайта: код фрагмента и файл style.css  постепенно  переделывал — добился желаемого вида таблицы, представленной ниже, и благосклонности валидатора.

Заметил, что некоторые команды, записанные в файл style.css, распространились на все таблицы сайта: например, 1) цвет линий, 2) толщина линий, 3) все символы в словах таблицы потолстели, а раньше приходилось персонально утолщать слова и словосочетания, заключая их между тэгами (звучит красиво, но правильнее писать — тегами) <b> и </b> (кстати, теги <b> и </b> им эквивалентны и позволяют экономить по 10-ть символов на паре тегов).

Текст вставки кода в файл style.css помещён под таблицей.

Контакты
Концепция
	Аллелопатия
	Аэробные бактерии
		2013 год
			Август
			Апрель
			Декабрь

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

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

table, td, th, tr {border-color:blue !important;border-width:1px;border-style:solid;
border-collapse:collapse;width:auto;height:auto;font:Arial;}

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

1) Скопировал соответствующий фрагмент HTML-кода в редактор Notepad. К сожалению, редактор WordPress не даёт возможности применять стандартную команду замены «Ctrl+H«, которая позволяет удалять сразу множество лишних одинаковых кусков кода.

2) Сохранил этот фрагмент в файле табл_0.txt, используя кодировку UTF-8.

3) Сохранил этот фрагмент в файле табл_1.txt, используя кодировку UTF-8.

4) Заменил над тегом <tbody> строки

<tаble width=»882″ border=»0″ cellspacing=»0″ cellpadding=»0″>

<colgroup> <col width=»370″ /> <col width=»161″ /> <col width=»157″ /> <col width=»194″ /> </colgroup>

на строку

<tаble>

(Имейте в виду, что в слове tаble латинский символ а заменен на русский символ а — это мне нужно для поиска tаble width в HTML-кодах страниц).

5) В файле табл_1.txt по командам замены «Ctrl+H» вырезал все куски » height=»28″», » height=»25″» и » height=»21″»

6) Индивидуально удалил куски типа » width=»370″»

7) По командам поиска «Ctrl+F» проверил забытые «height» и «width». Нашёл одну «height» и удалил её.

8) Сохранил файл табл_1.txt   Сравнил длины файлов и увидел, что произошло укорочение файла примерно на 7-мь Килобайт до 74-рёх.

9) Заменил целиком старый код фрагмента, отвечающего за формирование таблицы, на код из файла табл_1.txt

10) Опубликовал страницу, закрыл Редактор WordPress, очистил кэш, обновил страницу и проверил её валидатором. Обнаружил две ошибки: 1. Очень странный тэг title перед ссылкой на страницу — выкинул его целиком; 2. непонятно как возникший пробел в адресе одной страницы — выкинул и его.

На всякий случай проверил весь код на наличие тэгов title — обнаружил несколько и повыкидывал их. Теперь остались на странице Меню сайта лишь три ошибки: две от FeedBurner и одна от плагина Комментариев. Со временем избавлюсь и от них. К 22.03.14 избавился от них! FeedBurner временно удалил: буду устанавливать и настраивать заново, а в плагине Комментариев докопался до ошибки и исправил её.

Эти три ошибки присутствовали на всех страницах сайта — умножьте сами 3 на 567 и прибавьте 2 (число ошибок на Главной странице). В результате получится жутко большое число порядка 1700-т! Это число — веская причина устранить эти три ошибки даже ценой правки кода плагина и исправления или перемены кода скрипта FeedBurner.

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

Команды поиска «Ctrl+F» и замены «Ctrl+H» помогают сильно упростить этот процесс — попробую засечь секундомером время полной корректировки всех таблиц одной страницы и вычислить показатель скорости исправления ошибок с размерностью «исправленная ошибка/сек». Результаты опубликую на этой странице (шутка).

Откорректировал несколько таблиц некой страницы, копируя весь код страницы в Notepad, получил одну кривую таблицу — пришлось править.  Вывод: надо очень вдумчиво задавать верхнюю строку в окне замены и сначала делать по одной замене, а потом уж нажимать Заменить все.

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

Делаю это следующим образом:

а) так как HTML-код каждой строки таблицы заключён между тэгами <tr> и </tr>, перехожу на экран Текст, нахожу завершающий тэг вышележащей строки и вставляю под ним пустую строку; в неё копирую целиком HTML-код вышележащей строки таблицы;

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

в) вернувшись на экран Текст, удаляю тэг <b> (завершающий тэг </b> WordPress удалит сам) и удаляю <title> вместе с записью, заключённой в кавычки и находящейся справа от него;

г) <title> обеспечивает вывод на экран Анкора (Заголовка) ссылки — их я считаю лишними в таблице Меню сайта, ибо их наличие сильно удлиняет код этой страницы и обычно почти ничего не даёт посетителю: пришёл к убеждению, что каждый Анкор ссылки желательно превращать в фразу, завлекающую на соответствующую страницу, — это уже стараюсь делать при оформлении ссылок, но не готов сделать более 600-т Анкоров ссылок в таблице Меню сайта.

Чтобы уменьшить потребное число замен, имеет смысл копировать сначала фрагмент таблицы Excel на пустой Лист 1, там выравнивать высоты всех строк и ширины всех столбцов, и только так подготовленный фрагмент переносить на страницу сайта.

Напоследок замечу, что для формирования таблицы в любом месте страницы сайта нужно знать и использовать ограниченное число тегов: table, tbody, th, tr, td, … В порядке эксперимента создал таблицу на странице Как сделать быстрый сайт, набирая код на клавиатуре. Вот код таблицы с заголовком, двумя строками и пятью столбцами:

<table>
<tbody>
<tr>
<td>№ пп</td>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
<th>Заголовок 4</th>
</tr>
<tr>
<td>1</td>
<td>А1</td>
<td>Б1</td>
<td>В1</td>
<td>Г1</td>
</tr>
<tr>
<td>2</td>
<td>А2</td>
<td>Б2</td>
<td>В2</td>
<td>Г2</td>
</tr>
</tbody>
</table>

А вот как выглядит эта вручную созданная таблица:

№ пп	Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4
1	А1	Б1	В1	Г1
2	А2	Б2	В2	Г2

Теперь можно в окне Текст размножать строки и в окне Визуально заполнять ячейки таблицы.

К маю 2014-го года избавил все таблицы, помещённые на страницах сайта, от ошибок валидности.

Есть вполне законный вопрос: На что влияют ошибки валидности? Моё мнение таково: они удлиняют HTML-код страницы и увеличивают время отображения страниц браузером посетителя как за счёт удлинения кода, так и за счёт необходимости более пристального разбора невалидного кода. Специальные эксперименты для подтверждения этого проводить не стал, чтобы не тратить на это время. Если есть желание, можете сами измерить время загрузки страницы до и после ликвидации ошибок валидности.

Восторженные отзывы в Комментариях приветствую.
Критику и замечания — тем более!
Нажатия на кнопки социальных сетей под Комментариями порадуют меня ещё сильнее!
Продолжение тут…