Как добавить таблицу на страницу в WordPress.

table

 

 

 

Сегодня урок «Как добавить таблицу» на любую страницу в блоге, или в статью, на моём блоге stopmig.ru в рамках технических дней в блог-марафоне. Как вставить картинки в ячейки таблицы? как изменить размер картинки? как добавить ячейку в строке или столбце ?

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

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

<table border=»1″ cellspacing=»0″ cellpadding=»10″ align=»center»>
<tbody>
<tr>
<td>текст 1</td>
<td>текст 1</td>
</tr>
<tr>
<td>текст 2</td>
<td>текст 2</td>
</tr>
<tr>
<td>текст 3</td>
<td>текст 3</td>
</tr>
</tbody>
</table>

январь февраль
март апрель
май июнь

border – задает толщину границы в таблице. В нашем случае – 1 пиксель. Если вы не хотите, чтобы у вашей таблицы были видны границы, то поставьте вместо единицы ноль.
cellspacing – определяет расстояние между ячейками таблицы. Если сделать это значение в несколько пикселей, то ячейки таблицы будут как бы отделены друг от друга. Это свойство можно оставить так как есть.
cellpadding – назначает отступы между границей ячейки и содержанием (текстом).   Рекомендую для него поставить значение 10-15 пикселей, чтобы текст в ячейках не прилипал к самой границе и был более читабельный. То же относится и к картинкам.
Но хочу вас сразу предупредить о том, что некоторые темы для блогов не позволяют настраивать значения для таких свойств таблицы, как cellpadding, border и некоторых других. Мой шаблон отказывается показывать рамку вокруг таблицы. И ему просто везёт, что меня это устраивает…пока.
Так же может быть указана ширина таблицы width. В моем случае она не указана, но вам никто не мешает прописать это значение. Если ширина таблицы больше, чем  ширина места под статью, то таблица может залезть на сайдбар. Рекомендую совсем удалить это свойство или задать такую ширину таблицы, чтобы она помещалась на странице.

 

 

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

 

 

Похожие записи:

Получать новости на e-mail:

  1. Здравствуйте, Галина! Через Твиттер попала на Ваш блог и нашла именно ту информацию, которая мне нужна. Спасибо. Веду сайт по кулинарии и столкнулась с проблемой вставки на сайт таблицы. После просмотра Вашего материала этот вопрос отпал.

  2. Спасибо за комментарий! Ну люблю я сладкое….

  3. Эта информация актуальная всегда. Я помню, как я учила HTML-теги, в том числе и для создания таблиц. Мне тогда никто готовой формулы предложить не мог, а тут все просто. Остается только текст вставить.

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

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

  6. А почему все сейчас для тех, кто в WordPress, объясняется? Благодарю за информацию.

  7. Спасибо! Беру в избранное. Буду учиться делать таблицы.

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

  9. Мало что в этом понимаю, но раз пишут, значит нужно.

  10. Благодарю, полезная информация. Век живи, век учись…

  11. Галина, спасибо!

    У меня не всегда нормально встают именно таблицы, иногда вместо того чтобы разобраться где ошибка, начинаю хитрить… Т.е. делаю её в Word, делаю ксрин и вставляю в блог уже картинкой… Ленивая я!

    С уважением, Ольга Батырева.

  12. Может пригодится, благодарю.

  13. Галина, очень полезный урок!

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

    Всё скопировала и сохранила. Спасибо!

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

  15. Галина, благодарю за очередную полезность для создания интересного контента на страницах наших сайтов.
    Мне всегда легче было воспринимать информацию, поданную табличным способом. И одну из первых статей на блоге я размещала с подачей табличных данных. Вот она http://repetitor-problem.net/257

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

    Ваш урок УПРОЩАЕТ все действия и высвобождает время на творчество и любование достигнутым результатом.

    Браво!
    Теперь, конечно, только таким способом я буду вставлять таблицы в свои статьи.

  16. Галина, а еще у меня вопрос. Можно ли ячейки таблицы на Вордпресс заливать цветом и проделывать подобные как в Ворде манипуляции.
    СПАСИБО за ответ.

  17. Галина, как всегда, порадовала полезным уроком! Я пока не задавалась вопросом создания таблиц, как-то обходилась без них. Но ведь когда-то понадобится! Спасибо за подробный урок!

    • Галя, спасибо! Пригодились твои таблицы! Сегодня в статье чего-то намудрила с шоткодами — хотелось «покрасивше», да и перекосило всю страницу! Решила не мучиться, поставила твою табличку и очень даже чудненько получилось. Рамочка у меня тоже не отобразилась, да и Бог с ней.

  18. А все намного проще делается в Windows Live Writer. Чего огород городить с этими кодами? Я понимаю, что это не проблема для тех, кто понимает. Но основной-то массе пользователей — какой HTML, Галина?!

  19. Я как года 2 назад его поставила, так на Блоггерский редактор больше ни разу не возвращалась. Вечно в Блоггере все елозит туда-сюда, шрифты меняются произвольно, размер фотографий не изменить толком, таблиц нету, фотографии отдельно загружать надо!… И в Вордпрессовский блог норовлю из него же постить. Он поддерживает многие платформы.
    Надеюсь, что тебе тоже приглянется!

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

  21. Спасибо за полезный материал, всегда интересно научится чему то новому.

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

  23. Спасибо, Галина! И для меня урок однозначно очень полезен. Пока ещё таблицы не приходилось размещать, но наверняка без них не обойтись, так что пост в закладочки. Вы молодец, разбираетесь во всех тонкостях HTML. Надо и себе заняться.

  24. Здорово, доступно и просто,а самое главное нужно.Удачи в работе.

  25. Как все просто! А я думала через эксель надо таблицу делать…

  26. Ещё раз убедилась, что всё приходит своевременно :) В шаблоне моего блога предусмотрены таблицы, но они не всегда соответствуют тому, как нужно сделать мне.
    Галина, благодарю Вас. Очень полезный урок, добавила страницу в закладки.

  27. Галина какая же вы молодец!!! Давно хотела научиться таблицу делать, я умела, но совсем забыла с чего начинать… а тут раз и ваша статья!!! СПАСИБО БОЛЬШОЕ!

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

  29. Полезная информация, воспользуюсь.

  30. Автору респект, спасибо за статью!

  31. Сайт понравился. Так держать.

  32. Очень важная часть всего сайта Спасибо большое за разъяснения и скрипты Теперь буду чаще заглядывать к Вам

  33. Елочка:

    Хорошая статья, я не знала, как убрать ячейки таблицы, чтобы они не были видны. А не подскажите, как зафиксировать ширину столбца или всей таблицы? У меня если много текста, таблица вставляется нормально, на всю ширину. А если мало, то она какая-то узкая, и не знаю, как ее «раздвинуть». Как-будто где-то по умолчанию стоит «по содержимомму».

  34. Ширину таблицы пропишите,какую надо.Ширина таблицы определяется значением width(=500px)

Прокомментировать

http://stopmig.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://stopmig.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://stopmig.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://stopmig.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://stopmig.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://stopmig.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://stopmig.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://stopmig.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://stopmig.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://stopmig.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://stopmig.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://stopmig.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://stopmig.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://stopmig.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://stopmig.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif