31:01:2014

Html таблицы – создание с помощью тегов(Td, Tr, Table) и редакция с помощью(Rowspan,Colspan)

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

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

Ответ: Возможно легче, но не всегда. Вам нужно искать этот плагин и не факт, что он будет правильно работать с вашим шаблоном, да и каждый установленный плагин по чуть-чуть замедляет работу вашего сайта… Так что HTML это лучшее решение подобных проблем, ведь с его помощью вы можете делать практически все, что вам вздумается(ну, конечно, чтобы создавать что-то более крутое, чем таблицы или что-то подобное, вам потребуются знания в области Javascript, но это не много позже).

Вот так вот, так что настройтесь на то, что без HTML ваша жизнь будет не так прекрасна, налейте себе чаю и подготовьте себя морально к изучению данного цикла статей

Чтобы было проще, я буду публиковать статьи одну за одной, чтобы не создавать путаницу для себя и вас. Ах, да, пока не забыл, я не буду давать самые-самые основы HTML(то есть основные тэги), это, как я считаю, не нужная информация – просто вбейте в гугл запрос “Основные тэги HTML” и посмотрите их.

Создание таблицы на сайте с помощью HTML

Формирование происходит по следующему принципу. Таблица окружается открывающим и закрывающим тегом <table> </table> внутри которых тэги <tr></tr> создают строки:

<table><tr></tr></table>

Внутри тэгов <tr></tr> происходит создание ячеек таблицы с помощью тэгов <td></td> чтобы было понятней просто запомните, что <tr> – создает столбец, а <td> кол-во ячеек в этом столбце, например:

<table>

<tbody>

<tr>

<td>Это первая ячейка 1-й строки нашей таблицы</td>

<td>Это Вторая ячейка 1-й строки нашей таблицы</td>

<td>Это Третья ячейка 1-й строки нашей таблицы</td>

</tr>

<tr>

<td>Это первая ячейка 2-й строки нашей таблицы</td>

<td>Это Вторая ячейка 2-й строки нашей таблицы</td>

<td>Это Третья ячейка 2-й строки нашей таблицы</td>

</tr>

<tr>

<td>Это первая ячейка 3-й строки нашей таблицы</td>

<td>Это Вторая ячейка 3-й строки нашей таблицы</td>

<td>Это Третья ячейка 3-й строки нашей таблицы</td>

</tr>

</tbody>

</table>

Вот как это должно выглядеть:

Это первая ячейка 1-й строки нашей таблицы Это вторая ячейка 1-й строки нашей таблицы Это третья ячейка 1-й строки нашей таблицы
Это первая ячейка 2-й строки нашей таблицы Это вторая ячейка 2-й строки нашей таблицы Это третья ячейка 2-й строки нашей таблицы
Это первая ячейка 3-й строки нашей таблицы Это вторая ячейка 2-й строки нашей таблицы Это третья ячейка 3-й строки нашей таблицы

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

Редактируем таблицу с помощью тэгов (Rowspan,Colspan, cellspacing, cellpadding)

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

 <table border=”1″ cellspacing=”5″ cellpadding=”15″>
<tbody>
<tr>
<td>Вот код рамки в которой он сам и находится, обратите внимание на теги cellspacing и cellpadding</td>
</tr>
</tbody>
</table>

В этой мини-таблице у тэгов cellspacing и cellpadding указано значение “5″ и “15″, давайте посмотрим, что будет если их изменить на 0:

 <table border=”1″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td>Вот код рамки в которой он сам и находится, обратите внимание на теги cellspacing и cellpadding</td>
</tr>
</tbody>
</table>

Как вы видите у нас получилась одна сплошная линия(тоже достаточно красиво, в рамках перфекционистов :) ), но большинство людей предпочитают устанавливать хотя бы отступ контента от границы таблицы, поэтому давайте изменим значение cellpadding с “нуля” на “10″:

 <table border=”1″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td>Вот код рамки в которой он сам и находится, обратите внимание на теги cellspacing и cellpadding</td>
</tr>
</tbody>
</table>

Вот что у нас вышло. Надеюсь теперь вы можете и сами создать таблицу на сайте под себя, а мы пойдем дальше.

Теперь давайте обратим внимание на тэг “Border” который почему-то всегда равен “1″. Что же это за тэг такой? На самом деле он отвечает за линию, которая является внешней границей вашей таблицы. Чем больше значение, которому равен этот тэг, тем толще линия, пример:

Тут у нас вроде как какая-то информация, но все внимание на толщину внешней линии, пожалуйста

Вот как выглядит наш код:

<table border= “5″ cellspacing= “10″ cellpadding= “10″>
<tbody>
<tr>
<td>Тут у нас вроде как какая-то информация, но все внимание на толщину внешней линии пожалуйста</td>
</tr>
</tbody>
</table>

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

Теперь переходим к тэгам (Rowspan,Colspan) с помощью которых мы можем объединять ячейки нашей таблицы. Чтобы лучше понять лучше объяснять все на примерах:

<table><tbody><tr><td colspan=2>Мы объединили две ячейки в одну данной командой в 1-й строке</td></tr></tbody></table>

Что мы видим? Команда colspan объединяет ячейки в строке(прошу заметить, что именно в строке) в одну, а сколько ячеек объединить выбираете вы, я вот выбрал = 2.

Теперь о команде rowspan:

<table><tr><td rowspan=2>Мы объединили две ячейки из разных строк</td></tr></table>

Фактически rowspan это тоже самое, что и colspan, только объединяет ячейки из разных строк. Надеюсь все понятно, если же нет, то пишите в комментариях.

Теперь, давайте создадим таблицу с использованием тэгов rowspan и colspan:

 <table border= “1″ cellpadding= “5″><tr><td colspan=2>Объединили две ячейки в 1-й строке</td></tr><tr><td rowspan=2>Объединили две ячейки из 2-й и 3-й строки и вставили во 2-ю строку</td>

<td>Для более понятного облика создадим во 2-й строке обычную ячейку</td>

</tr>

<tr>

<td>Просто ячейка</td>

</tr>

</table>

Вот, что у нас получилось:

Объединили две ячейки в 1-й строке
Объединили две ячейки из 2-й и 3-й строки и вставили во 2-ю строку Для более понятного облика создадим во 2-й строке обычную ячейку
Просто ячейка

Вот, теперь вы научились создавать таблицы на сайте с помощью HTML тэгов, если возникли какие-либо вопросы – пишите в комментариях.
Чтобы не пропустить выпуск новых статей советую вам подписаться на обновления блога по e-mail, будьте всегда в курсе!

Seogeeks.ru – создание и продвижение сайтов

3 Responses к “Html таблицы – создание с помощью тегов(Td, Tr, Table) и редакция с помощью(Rowspan,Colspan)”

  1. Ирина пишет:

    Спасибо, все понятно. Но вот почему-то в редакторе на сайте рамка таблицы видна отчетливо, особенно после того, как border=”5″ , а на сайте рамка остается едва видимой… иногда бывает нужно, чтобы все же были видны границы таблицы… я и тег color добавляла… результат то же.. не подскажете, в чем дело?

  2. admin | Seogeeks | Evgeniy пишет:

    Если вы пишите border=”5″, то таблицу должно быть идеально видно… Возможно, вы делаете ошибку в какой-то другой части… Напишите полный код таблицы в комментарий, я вам расскажу, в чем ошибка

  3. Trey gost пишет:

    Очень доступно все объяснили, спасибо

Ответить


 Seogeeks.ru