Несколько слов о работе с таблицами в WordPress

18.11.2012   Соколов В.       WordPress       67 комментариев »

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

Чтобы работать с таблицей, желательно иметь некоторое представление о тегах html – это средство разметки текста веб-страницы, которое позволяет более-менее одинаково видеть сайт на компьютере с любой операционной системой: Windows, Linux, Mac.

Теги заключены в скобки, внутри которых имеется наименование тега:
<h2> – тег подзаголовка (заголовок второго уровня);
<table> – тег таблицы.

Как и кавычки, теги открываются и закрываются. Закрывающий тег имеет в начале слэш. Закрывающие теги подзаголовка и таблицы будут выглядеть так: </h2> </table>

Помимо наименования тега, внутрь него может быть добавлена различная информация. Это не должно вас смущать. Мы смотрим на начало тега, а что идет потом, мы научимся разбираться со временем.

Любая правильно построенная веб-страница должна иметь два раздела:

<head></head> – «голова» страницы, в ней содержится служебная информация;

<body></body> – «тело» веб-страницы, в этом разделе содержится всё, что мы увидим в окне браузера.

Таблица обозначается следующими тегами:
<table> – начало таблицы
<tr> – начало строки таблицы
<td> – начало ячейки
</td> – конец ячейки
</tr> – конец строки
</table> – конец таблицы.

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

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

Заголовок таблицы

Первая ячейка Вторая ячейка

Нажмите «Просмотр». Если таблица видна на странице, попробуем ее настроить. Для этого в окне редактирования записи мы нажимаем кнопку «Текст» (в прошлых версиях — «html»). Теперь мы видим код нашей таблицы:

<table border="1">

<tbody>

<tr>

<td width=«150» valign=«top»>Первая ячейка</td>

<td width=«150» valign=«top»>Вторая ячейка</td>

</tr>

</tbody>

</table>

Здесь добавился еще один тег — <tbody> (тело таблицы), он не играет особой роли.

Тег <table> содержит несколько параметров, которые можно настроить:

border="1" – это толщина линии. Если вам не нужно, чтобы все границы в таблице были очерчены, поставьте в кавычках значение border="0".

В большинстве тем граница таблицы прописана в стилевом файле, тогда граница убирается с помощью стилевого оформления:

<table style="border: 0;">

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

Если Вы давно не обновляли свой WordPress, могут быть еще атрибуты, которые в настоящее время считаются устаревшими:

cellspacing="0" – отступ между границами соседних ячеек, его лучше оставить нулевым.

cellpadding="0" – отступ текста от границы ячейки. Чтобы таблица выглядела красиво, ставим его равным 5px или 10px: cellpadding="5"

В конкретной теме этот параметр может не работать, т. к. определен в настройках темы, например, так:
table {
border-spacing: 0;
}

В тегах ячеек добавилась ширина ячейки: width="150". Я бы рекомендовал удалить этот параметр целиком. Если ширину не указывать, браузер сам компонует оптимальную ширину для того или иного разрешения монитора в зависимости от размера шрифта.

На практике в большинстве случаев ширина будет присутствовать и в теге <table>, определяя ширину всей таблицы. Тут можно указать 100%, чтобы таблица растягивалась на всю ширину блока с текстом. Или, если таблица уж совсем маленькая и растянутая смотрится некрасиво, можно поставить width="auto", чтобы браузер сам ставил необходимую ширину. Правда, этот параметр задан в теме оформления WordPress и не всегда ваши настройки будут работать. Если ваши указания ширины не работают, но хотелось бы установить именно такие параметры, попробуйте заменить этот параметр на следующий:
style=" width: auto;"
(в этом случае мы задействуем стилевое оформление, которое переопределит настройки темы оформления для данной таблицы).

Параметр valign="top" означает выравнивание по высоте ячейки – сверху. Если его убрать, будет выравнивание по умолчанию, которое в каждой теме может различаться.

Целиком код нашей учебной таблицы должен был получиться таким:

<table border="1" width="100%">

<tbody>

<tr>

<td valign=«top»>Первая ячейка</td>

<td valign=«top»>Вторая ячейка</td>

</tr>

</tbody>

</table>

Или при использовании стилевого оформления границ, ширины, вертикального выравнивания ячеек:

<table style="border: 0; width: 100%;">

<tbody>

<tr>

<td style=«vertical-align: top;»>Первая ячейка</td>

<td style=«vertical-align: top;»>Вторая ячейка</td>

</tr>

</tbody>

</table>

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

Первая ячейка Вторая ячейка

Теперь можно поменять выравнивание ячеек слева-по центру-по правому краю и прочее.

Напоследок, напомню, что работа в режиме «Текст» («html») требует аккуратности и внимания. Если ненароком стереть закрывающие кавычки (обозначают текстовую строку), то всё что пойдет дальше браузер будет считать параметрами тега и не покажет на мониторе. Аналогичный результат будет при нечаянном удалении закрывающей скобки > . А если не будет закрывающего тега, то всё дальнейшее будет вставлено в текущий элемент (таблицу, ячейку) и мы увидим нечто несообразное. Но не боги горшки обжигают, или, как говорят ученики, помучишься — научишься.

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

Оглавление Далее…

Комментариев: 67

  1. Елена

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

    • Соколов В.admin

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

      <p style="margin-top: 0.5em;">Текст нашего абзаца</p>

      или в пикселях:

      <p style="margin-top: 5px;">

      Обратите внимание, что дробные величины пишутся через точку, а не запятую: 0.5em

      • Алина

        Здравствуйте!
        Вопрос аналогичный, и речь не об абзаце в тексте, а об абзаце в ячейке. И у меня вопрос именно в enter» — как уменьшить интервалы между абзацами именно в ячейке таблицы?

  2. Елена

    Как хорошо, что мне встретился Ваш сайт! Долго искала нужную информацию. Спасибо! Буду пробовать.

  3. Борис

    Здравствуйте. Вставил таблицу из Ворда, а границ нет. Что можно сделать?

    Заранее спасибо!

    • Соколов В.admin

      Здравствуйте.
      Вначале смотрим в режиме «Текст» на тег таблицы (table). Если там стоит border="0" — заменяем на border="1".

      Если не помогает, то открываем в редакторе таблицу стилей и ищем (через поиск редактора) все параметры со словом border, пробуя заменить ноль на 1. (Или может быть быстрее создать класс, вставить его в тег table — смотрите первые комментарии).

      • Борис

        Спасибо большое! Вчера устал видимо, и комментарии первые не увидел, и все-равно не получилось ничего) Сегодня победил проблему.
        Вставил в каждый тег и это style="border: 1px solid #808080".
        Наверно это не совсем правильно, в каждый тег вручную код вставлять? Для этого надо создать класс. Как я понял он создается в таблице стилей, т.е. после обновления темы он слетит и надо заново прописывать?

  4. Борис

    *в каждый тег ТД и ТР

    • Соколов В.admin

      Прописывать границу в каждый тег IMHO не то чтобы неправильно, но хлопотно.

      Чтобы при обновлении не слетали внесенные изменения в тему, создаем дочернюю тему.
      Для этого в папке wp-content > themes создаем папку с названием темы, скажем, my-site. Копируем в нее стилевой файл из темы, которую Вы используете. Открываем редактором и прописываем в начале, внутри блока, ограниченного /* */


      Theme Name: my-site
      Template: twentyeleven

      — где вместо twentyeleven название папки с Вашей бывшей (материнской) темой

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

      Заходим в меню Темы, дочерняя должна появиться в списке доступных. Активируем дочернюю тему.

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

      • Соколов В.admin

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

        (К примеру, у темы twentyeleven при обновлении почему-то слетал русский язык, так я откатил назад и с тех пор не обновляю)

  5. ghoser

    Что делать, если в конкретной публикации не нужны границы таблицы, border="0" не работает?

    • Соколов В.admin

      По-видимому, у Вас в таблице стилей прописана граница ячейки таблицы. Три варианта:
      1. Для каждой ячейки в таблице прописываем стиль граница ноль:
      <td style="border: 0;">
      Может быть прописана конкретная граница таблицы, tbody или ячейки, тогда придется переписывать каждую:
      <tbody style="border-top: 0;">
      или
      <td style="border: 0; border-top: 0;">

      2. Открываем стилевой файл редактором, создаем класс таблицы (см. предыдущие комментарии), где прописываем отсутствие границ. Присваиваем этот класс нашей таблице:
      <table class="nazvanie">

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

      • ghoser

        работает спс, про css тоже как вариант, не подумал

        Ещe раз спасибо

  6. Сергей

    Спасибо большое! Намучился я с этой таблицей. В стиле везде ноль и для tr и для td и для table, тема Twenty Eleven, в свойствах таблицы тоже границы не прописаны, а границы есть))) причём только горизонтальные. Выставил в коде таблицы тоже не помогло, пришлось вручную все tr и td править на
    и только тогда исчезли полоски. Но теперь интересно — что это было)))

    • Соколов В.admin

      В Twenty Eleven, да, там горизонтальные линии по умолчанию видны, а остальные надо добавлять в таблице стилей, если нужны. Я давно с этой темой не работал, не помню. Ближе к 700 строке есть такие строки:

      .entry-content td,
      .comment-content td {
      border-top: 0px solid #ddd;

      Попробуйте обнулить нижнюю границу тоже:

      .entry-content td,
      .comment-content td {
      border-top: 0px solid #ddd;
      border-bottom: 0px solid #ddd;

      • Сергей

        Спасибо за ответ! Решил, что проще, при создании новой таблицы, сразу копировать код в редактор и пользоваться функцией — найти и заменить tr на и тоже самое с td, а потом вставлять в код сайта, чтобы избежать неожиданностей)))

        • Соколов В.admin

          Да, поначалу и я так делаю. Потом всё-равно нужно разобраться и создать нужные классы для каждой разновидности таблиц.

          Вы обратили внимание, что атрибуты cellpadding и cellspacing устарели, если использовались раньше, нужно и их замену на стилевое оформление предусмотреть. А то при проверке валидности кода валидатор ругается.

        • Сергей

          Код почему-то не вставляется в коменты, напишу без стрелок,
          Найти и заменить:
          <tr> на <tr style="border: 0;"> и <td> на <td style="border: 0;">

          • Соколов В.admin

            Понятно.

            Большинство движков блокируют вставку кода в комментарии. Чтобы вставить, нужно маскировать код: вместо скобок < > писать &lt; &gt; и пр.

            Это можно быстро делать на NVU ( вставляем в режиме обычный — копируем в режиме код), только не забывать удалять переводы строк, которые обильно вставляет NVU, а WP от них выпадает (в коде).

  7. Соколов В.admin

    А когда в своем блоге приводим примеры кода, окружаем его тегами «code».

Навигация по комментариям



Добавить вопрос или комментарий