Как в wordpress сделать таблицу на странице?
Таблицы, созданные линией переноса из Excel, имели до 590-та промахов, какие показывал Валидатор, порекомендовавший использовать CSS!
Желая таблицы вроде бы нормально отображались браузерами, разрешил переделать их так, чтобы они отвечали нынешним стандартам.
Вначале размышлял использовать плагин, но после постиг, что надо натужиться и привнести изменения в файл манеров style. css, ибо плагины задерживают вывод страниц сайта, и к тому же надо использовать нынешние методы создания таблиц.
Всё-таки 15.03.14 не удержался и опробовал плагин TablePress, прельстившись тем, что был заявлен ввоз таблиц Excel. Любой нормальный человек мастерит таблицы в Excel, а не на сайте. Чтобы сделать таблицу 4*5, не необходим плагин: довольно скопировать любую таблицу из Excel и разобраться с несколькими тэгами. На странице плагина было предупреждение о том, что ввоз экспериментальный.
Победив ряд трудностей, вделал код облика [table /] и тот же код с взамен скобок, но итог нулевой. Предварительный просмотр таблицы показал, что плагин её создал.
Понимать с тем, как добиться отображения таблицы на экране, не сделался: нет жажды расходовать на это пора, меня вполне устраивают уже созданные таблицы, нечего и сложно основывать другой вариант существующих таблиц, удалять первоначальный, к тому я уверен, что таблицы после плагина будут владеть немало долгий код. Аргументы ещё не истощились, но размышляю, что и приведенных довольно.
Мой вывод таков: плагин 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) все символы в словах таблицы потолстели, а ранее доводилось персонально утолщать слова и словосочетания, заключая их между тэгами (звучит прекрасно, но вернее строчить — тегами) и (уместно, теги и им эквивалентны и позволяют экономить по 10-ть символов на чете тегов).
Текст вставки кода в файл style. css пристроен под таблицей.
Привожу для всеобщего использования фрагмент кода, отвечающего за формирование всех таблиц сайта, для вставки в файл style. css — он пристроен в самый крышка файла, чтобы ничто не храбро перешибать его руководства.
Обратите внимание, все ширины и вышины формируются самодействующи: ширина колонок и вышина строк таблицы определяется введенным в ячеи текстом, — отведайте в Редакторе страниц впрыскивать фразу из нескольких слов и понаблюдайте за итогом.
Чтобы откорректировать всю таблицу страницы Меню сайта, проделал вытекающие поступки:
1) Скопировал соответственный фрагмент HTML-кода в редактор Notepad. К сожалению, редактор WordPress не подаёт возможности применять типовую команду замены «Ctrl+H«, какая позволяет удалять разом масса излишних равных кусов кода.
2) Сохранил этот фрагмент в файле табл_0.txt, используя кодировку UTF-8.
3) Сохранил этот фрагмент в файле табл_1.txt, используя кодировку UTF-8.
4) Заменил над тегом
строки(Имейте в облику, что в слове 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-код любой строки таблицы заключён между тэгами
, перехожу на экран Текст, нахожу завершающий тэг вышележащей строки и вставляю под ним порожнюю строку; в неё копирую целиком HTML-код вышележащей строки таблицы;
б) вернувшись на экран Визуально, удаляю нательнее дублирующее наименование и на его пункт (или правее, если необходимо добавить наименование дочерней страницы) вставляю ссылку на наименование необходимой страницы, скопировав её со страницы, где такая ссылка кушать;
в) вернувшись на экран Текст, удаляю тэг (завершающий тэг WordPress вышлет сам) и удаляю совместно с записью, заключённой в кавычки и находящейся справа от него;
г) обеспечивает вывод на экран Анкора (Заголовка) ссылки — их я нахожу излишними в таблице Меню сайта, ибо их присутствие мощно удлиняет код этой страницы и обыкновенно почти ничего не подаёт посетителю: пришагал к убеждению, что любой Анкор ссылки желательно превращать в фразу, завлекающую на соответственную страницу, — это уже усердствую мастерить при оформлении ссылок, но не готов сделать немало 600-т Анкоров ссылок в таблице Меню сайта.
Чтобы убавить потребное число замен, имеет резон копировать вначале фрагмент таблицы Excel на порожний Лист 1, там выравнивать вышины всех строк и ширины всех колонок, и лишь так подготовленный фрагмент выносить на страницу сайта.
Напоследок примечу, что для формирования таблицы в любом пункте страницы сайта необходимо ведать и использовать узкое число тегов: table, tbody, th, tr, td, … В распорядке эксперимента создал таблицу на странице Как сделать скорый сайт, набирая код на клавиатуре. Вот код таблицы с заголовком, двумя строками и пятью колонками:
| № пп | Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 |
|---|---|---|---|---|
| 1 | А1 | Б1 | В1 | Г1 |
| 2 | А2 | Б2 | В2 | Г2 |
А вот как выглядит эта вручную созданная таблица:
| № пп | Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 |
|---|---|---|---|---|
| 1 | А1 | Б1 | В1 | Г1 |
| 2 | А2 | Б2 | В2 | Г2 |
Сейчас можно в окне Текст размножать строки и в окне Визуально заполнять ячеи таблицы.
К маю 2014-го года освободил все таблицы, пристроенные на страницах сайта, от промахов валидности.
Кушать вполне легитимный проблема: На что воздействуют промахи валидности? Моё суждение таково: они удлиняют HTML-код страницы и увеличивают пора отображения страниц браузером посетителя как за счёт удлинения кода, так и за счёт нужды немало пристального разбора невалидного кода. Особые эксперименты для подтверждения этого коротать не сделался, чтобы не расходовать на это пора. Если кушать жажда, можете сами измерить пора загрузки страницы до и после ликвидации промахов валидности.
Экзальтированные отзывы в Комментариях приветствую.
Критику и замечания — тем немало!
Нажатия на кнопки социальных сетей под Комментариями порадуют меня ещё мощнее!
Продолжение тут…
Победив ряд трудностей, вделал код облика table и тот же код с взамен скобок, но итог нулевой.
Обратите внимание, все ширины и вышины формируются самодействующи: ширина колонок и вышина строк таблицы определяется введенным в ячеи текстом, — отведайте в Редакторе страниц впрыскивать фразу из нескольких слов и понаблюдайте за итогом.
css пристроен под таблицей.