Html таблицы (table), ссылки (a href), якоря, тэги HTML форм legend fieldset

Добрый день, уважаемые читатели блога TakProstoTak.ru. Прошлый выпуск относился к разделу "продвижение", в нем речь шла о том, как добавить сайт в Yandex и Google. В этой статье речь пойдет о html таблицах, рассмотрим тэги: table, tbody, tr, td, th. Поговорим о ссылках и якорях, а также рассмотрим тэги форм legend и fieldset.  Рассмотрим как при помощи таблиц сделать некоторые типовые макеты сайтов.

Последние посты из рубрики "html в примерах" были посвящены темам про: html формы, блочную верстку и табличную верстку. Данная статья будет полезна начинающим вебразработчикам, тем кто хочет быстро и легко освоить HTML и продвинуться дальше на пути к созданию своего сайта.

header

До появления каскадных таблиц стилей (CSS), на арене html верстки и вебдизайна рулили таблицы. Все мероприятия по созданию сайта, будь то дизайн или верстка, учитывали специфику таблиц и ориентировались на возможности предотавляемые таблицами (table). На сегодняшний день балом править CSS, а табличная верстка отошла на второй план, хотя некоторые вебразработчики активно пользуются табличной версткой. Каким видом верстки пользоваться описано в статье о видах верстки.
Применение таблиц не ограничивается использованием в макетах, таблицами можно и нужно пользоваться по их прямому назначению. Например, если вам нужно представить некий отчет по месяцам лучше всего для этого подойдет именно таблица

table-ex

, конечно, можно вставить данные в блокнот, расставить отступы, сделать более читабельно, но это будет архаично, ведь есть ms excel, ну или open office calc. Аналогично представлению таблиц в компьютерных программах выглядят таблицы в html, только в данном случае нужно писать html тэги table, tr, td (th) и задавать нужные атрибуты для тэгов. По опыту знаю, теория без практики смыла не имеет, а еще лучше, когда практическое применение есть и нужно под него притянуть теорию. Да будет так, одно из конкретных применений таблиц макет сайта представленный ниже

HTML макет сайта, трехколоночный на таблицах

шапка (header), задан атрибут colspan="3"
левый сайдбар (20%) контент (60%) правый сайдбар (20%)
подвал (footer), задан атрибут colspan="3"

Это возможный вариант макета простого сайта визитки. На этом макете есть стандартные области, встречающиеся на 99% web ресурсов: шапка (header) - обычно тут размещается рисунок, логотип, телефоны; левый сайдбар - содержит меню и возможно дополнительные модули; контент - тут все понятно, здесь выводят текст статей, фото из галерей, другими словами, основное содержимое сайта; правый сайдбар - возможно, список новостей, список популярных статей и т.д.; подвал (footer) - здесь помещают, как правило, копирайты, контактные данные, дублируют меню (если надо). Список модулей сайта условный и зависит целиком и полностью от фантазии вебразработчика. Например, меню может быть не слева, а справа, а модуль новостей наоборот слева. Левый и правый сайдбары занимают 20% (атрибут width="20%" для ячейки td) от общей ширины выделеной для таблицы, под контент остается 60% от общей ширины. Общая ширина задается в тэге table, это может быть 100% в случае резинового макета или фиксированное число пикселей в случае макета рассчитанного под определенное разрешение экрана. В нашем примере ширина таблицы задана 80% и занимает 80% ширины контейнера, в котором расположена. Если бы мы делали реальный макет, то расположили бы таблицу, непосредственно внутри тэгов <body></body> и тогда наша таблица занимала бы 80% от всего экрана.

Примечание: Термин "модуль", взят мной из концепции CMS joomla, так как с джумлой я хорошо знаком и данная терминология мне близка, на wordpress например меню может выводится виджетом и там немного другие термины.

HTML код нашего макета выглядит след. образом:

<table width="80%">
  <tr>
    <td colspan="3">
       шапка (header)
    </td>
  </tr>
  <tr>
    <td width="20%">
       левый сайдбар
    </td>
    <td>
       контент
    </td>
    <td width="20%">
       правый сайдбар
    </td>
  </tr>
  <tr>
    <td colspan="3">
      подвал (footer)
    </td>
  </tr>
</table>

Примечание: 1) Вложенные тэги лучше отделять в тексте отступами (табуляция), чтобы html код легче было читать, особенно это важно когда объем html кода велик.  2) Вид макета содержит цветные ячейки и текст выровненный по центру при помощи CSS правил для ячеек, в коде этого нет, чтобы не загромождать, к тому же это не относиться к теме статьи.

HTML тэги table, tr, td, th. Объединение ячеек colspan и rowspan

Вот теперь, когда есть конкретный пример, можно приступить к его разбору и изучению html тэгов используемых для построения таблиц. Все html таблицы (table) содержат парные тэги  <table> </table> , все остальные тэги таблицы (td, tr) располагаются внутри парных тэгов table. У таблиц есть строки (tr), и ячейки (td, th). Следом за тэгом table идет парный тэг <tr></tr> , который содержит любое количество парных тэгов  <td> </td>. Сколько ячеек в строке таблицы нужно, столько парных тэгов td следует разместить в строке HTML таблицы. Например, в нашем макете 3 строки (tr) и 5 ячеек (td), причем в верхней и нежней строках по одной ячейке, а в средней строке 3 ячейки. В нашем макете ячейки с шапкой и подвалом являются объединенными - объединяют по одной ячейке слева и справа. Чтобы объединить горизонтальные ячейки для этого нужно в тэге td указать атрибут colspan="число объединяемых ячеек по горизонтали". Рассмотрим пример таблицы состоящей из девяти ячеек:

ячeйka №1 ячeйka №2 ячeйka №3
ячeйka №4 ячeйka №5 ячeйka №6
ячeйka №7 ячeйka №8 ячeйka №9

Html код таблицы:

<table>
  <tr>
    <td>ячeйka №1</td>
    <td>ячeйka №2</td>
    <td>ячeйka №3</td>
  </tr>
  <tr>
    <td>ячeйka №4</td>
    <td>ячeйka №5</td>
    <td>ячeйka №6</td>
  </tr>
  <tr>
    <td>ячeйka №7</td>
    <td>ячeйka №8</td>
    <td>ячeйka №9</td>
  </tr>
</table>

Тэг th, заголовок таблицы

В место тэга td можно использовать тэг заголовка таблицы th, при этом текст,  заключенный в тэги th становиться жирным и выравнивается по центру.

(тэг TH) (тэг TD)
(тэг TD) (тэг TH)
<table>
  <tr>
    <th>(тэг TH)</th>
    <td>(тэг TD)</td>
  </tr>
  <tr>
    <td>(тэг TD)</td>
    <th>(тэг TH)</th>
  </tr>
</table>

Как видите, тэги th можно использовать не только в заголовке таблицы, но и везде где нужно.

Объединение ячеек (td)  таблицы (table) по горизонтали (colspan)

Объединим первые две ячейки html таблицы:

объединение ячеек №1 и №2 ячeйka №3
ячeйka №4 ячeйka №5 ячeйka №6
ячeйka №7 ячeйka №8 ячeйka №9

Код таблицы с объединеными ячeйkaми №1 и №2:

<table>
  <tr>
    <td colspan="2">объединение ячеек №1 и №2</td>
    <td>ячeйka №3</td>
  </tr>
  <tr>
    <td>ячeйka №4</td>
    <td>ячeйka №5</td>
    <td>ячeйka №6</td>
  </tr>
  <tr>
    <td>ячeйka №7</td>
    <td>ячeйka №8</td>
    <td>ячeйka №9</td>
  </tr>
</table>

Как видно в первой строке таблицы (tr) всего два парных тэга td, тогда как в остальных строках их 3. Это потому что первая ячeйka объединяет вторую за счет того что в ней указан атрибут (colspan="2"). Если нам нужно объединить 3 ячейки, тогда в первой ячейке указываем (colspan="3") и оставляем в строке один парный тэг (td) с этим атрибутом, то есть ячейку №3 удаляем из таблицы.
Чтобы не быть голословным приведу пример:

объединение ячеек №1, №2, №3
ячeйka №4 ячeйka №5 ячeйka №6
ячeйka №7 ячeйka №8 ячeйka №9

html код объединения первых 3х ячеек:

<table>
  <tr>
    <td colspan="3">объединение ячеек №1, №2, №3</td>
  </tr>
  <tr>
    <td>ячeйka №4</td>
    <td>ячeйka №5</td>
    <td>ячeйka №6</td>
  </tr>
  <tr>
    <td>ячeйka №7</td>
    <td>ячeйka №8</td>
    <td>ячeйka №9</td>
  </tr>
</table>

Еще один важный момент, ячейки объединяются по горизонтали слева направо, то есть если мы укажем в некой ячейке атрибут (colspan="2"), то эта ячeйka присоединит к себе правую соседнюю ячейку. Давайте объединим 5ю и 6ю ячейки нашей таблицы.

ячeйka №1 ячeйka №2 ячeйka №3
ячeйka №4 ячeйka №5 объединяет ячейку №6
ячeйka №7 ячeйka №8 ячeйka №9

html код таблицы с объединенными ячeйkaми №5 и №6:

<table>
  <tr>
    <td>ячeйka №1</td>
    <td>ячeйka №2</td>
    <td>ячeйka №3</td>
  </tr>
  <tr>
    <td>ячeйka №4</td>
    <td colspan="2">ячейка (поле) №5 объединяет поле №6</td>
  </tr>
  <tr>
    <td>поле №7</td>
    <td>поле №8</td>
    <td>поле №9</td>
  </tr>
</table>

Объединение ячеек по вертикали (rowspan)

Ячейки можно также объединять по вертикали, для этого в ячейке td нужно прописать атрибут rowspan="число ячеек". В данном случае объединение происходит сверху вниз, т.е. если задать для ячейки №4 атрибут rowspan="2", тогда поле №4 объединит ячейку №7, т.е.  нижнюю ячейку.

поле №1 поле №2 поле №3
поле №4 и №7 поле №5 поле №6
поле №8 поле №9

Html код таблицы с вертикальным объединением ячеек:

<table>
  <tr>
    <td>поле №1</td>
    <td>поле №2</td>
    <td>поле №3</td>
  </tr>
  <tr>
    <td rowspan="2">поле №4 и №7</td>
    <td>поле №5</td>
    <td>поле №6</td>
  </tr>
  <tr>
    <td>поле №8</td>
    <td>поле №9</td>
  </tr>
</table>

HTML атрибуты тэга table (border, width, height, cellpadding, cellspacing)

  • border - задает толщину рамки вокруг ячеек в пикселах  (border="0" - рамка отсутствует).
  • width - задает ширину таблицы в абсолютных (width="500") либо относительных единицах (width="60%"). Ширина в процентах определяется относительно допустимой ширины того контейнера, в котором находится таблица.
  • height - высота таблицы в абсолютных (height="700") либо относительных единицах (height="100%").
  • cellpadding - определяет отступ в пикселах от границы рамки.
  • cellspacing - определяет расcтояние между соседними полями в пикселах, отступ между полями.
  • align - задает выравнивание таблицы, параметры: left (по левому краю)| center (по центру) | right (по правому краю).
  • background - через этот параметр можно задать фоновый рисунок для таблицы
  • bgcolor - цвет фона таблицы

Пример:

table
код:

<table border="4" width="500" height="300" cellpadding="10" cellspacing="3">
  <tr>
    <td>поле №1</td>
    <td>поле №2</td>
  </tr>
  <tr>
    <td>поле №3</td>
    <td>поле №4</td>
  </tr>
</table>

HTML атрибуты тэга td

  • align - определяет выравнивание в ячейке по горизонтали, параметры: left (по левому краю)| center (по центру) | right (по правому краю).
  • valign - вертикальное выравнивание в ячейке, параметры: top (по верхнему краю) | middle (по серединке) | bottom (по нижнему краю).
  • width - задает ширину ячейки в абсолютных (width="500") либо относительных единицах (width="60%").
  • height - задает высоту ячейки абсолютных (height="20") либо относительных единицах (height="10%").
  • nowrap - запрет переноса строк, текст располагается в одну строчку.
  • rowspan - объединяет вертикальные ячейки.
  • colspan - объединяет горизонтальные ячейки.

Пример:
table1

html код:

<table width="500" height="300" border="1">
  <tr>
    <td align="center" valign="middle">align="center" valign="middle"</td>
    <td align="left" valign="top">align="left" valign="top"</td>
  </tr>
  <tr>
    <td align="right" valign="bottom">align="right" valign="bottom"</td>
    <td align="right" valign="top">align="right" valign="top"</td>
  </tr>
</table>

HTML Ссылки (a href) и якоря (name, anchor)


HTML ссылки и якоря (anchor) появились наверное еще до того как придумали интернет), это вещи настолько базовые и основополагающие, что и говорить, то они особо нечего, разве что вскользь упомянуть и рассмотреть некоторые нюансы использования на вашем блоге или сайте. Дело в том, что ссылки и якоря иногда нужно закрыть от поисковиков, сделать так чтобы поисковики их не индексировали. Такие закрытие ссылки (nofollow) не участвуют в формировании ТИЦ и PR страницы, вы просто сослались на некий ресурс, а поисковики сделали вид, что не заметили этого.

Основные атрибуты тэга A

  • href - тут указываем URL адрес источника. Адреса бывают абсолютные (http://takprostotak.ru) и относительные (/vebrazrabotchiku/html-v-primerax/azy-html.html). Относительный адрес указывается относительно url вашего сайта, в моем случае браузер воспримет относительный адрес как _http://takprostotak.ru/vebrazrabotchiku/html-v-primerax/azy-html.html.
  • target - указывает, как следует открывать новую ссылку (_blank - в новом окне браузера, _self - в этом же окне браузера, по умолчанию используется _self).
  • title - определяет всплывающую подсказку для ссылки.
  • rel - определяет отношение к объекту, на который ссылается.

более подробно про атрибуты ссылок можете посмотреть на htmlbook-e

Пример:

<a href="http://takprostotak.ru" target="_blank" title="ссылка">пример тэга A</a>

ссылка имеет название "пример тэга A" ведет на мой блог , содержит всплывающую подсказку (текст "ссылка"), при нажатии по ней ссылка откроется в новом окне.

Запрет индексации ссылок
если в ссылке указать атрибут rel="nofollow" то поисковики не будут учитывать такие ссылки при расчете веса страницы. Для пущей важности можно заключить ссылку в тэги <noindex></noindex>

Якоря (A name)

Якоря это полезная штука, например вы хотите сослаться на какой-то документ и вас интересует не весь документ, а конкретно какое-то место в нем. Если, скажем в середине документа стоит якорь, то можно на него сослаться. Якорь можно поставить так: <a name="o-ptichkah"></a> - якорь который можно поставить перед тем участком текста где речь "идет о птичках". ссылка на якорь будет выглядеть так _http://takprostotak.ru/statia.html#o-ptichkah. Вот пример якоря с моего блога: http://takprostotak.ru/joomla/kak-perenesti-sajt-sozdanyj-na-cms-joomla-bekap-sajta-akeeba-backup.html#perenos-site-joomla.

HTML Формы, тэги legend и fieldset

В одной из предыдущих статей мы рассмотрели тэги HTML форм (Input, Select, option, optgroup, textarea) , не рассмотреными остались теги legend и fieldset. Тэг fieldset группирует содержимое - обводит рамкой. Тэг legend находящийся внутри тэга fieldset задает надпись в заголовке рамки. Давайте рассмотрим на примере.

form

Код формы:

<form>
<fieldset>
<legend><strong>Личные данные</strong></legend>
<em>укажите ваш пол:</em>
<table>
  <tr><td>Мужской</td><td><input type="radio" name="sex" value="М"></td></tr>
  <tr><td>Женский</td><td><input type="radio" name="sex" value="Ж"></td></tr>
</table>
</fieldset>
<fieldset>
<legend><strong>Профессиональные предпочтения</strong></legend>
<em>какими браузерами пользуетесь?</em>
<table>
  <tr><td>IE</td><td><input type="checkbox" name="ie" value="1"></td></tr>
  <tr><td>FireFox</td><td><input type="checkbox" name="ff" value="1"></td></tr>
  <tr><td>Opera</td><td><input type="checkbox" name="opera" value="1"></td></tr>
  <tr><td>Chrome</td><td><input type="checkbox" name="Chrome" value="1"></td></tr>
</table>
</fieldset>
<input type="submit" value="Отправить">
</form>

Отличный видеоурок по CSS (практикум)

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



Похожие статьи:
↑ Наверх ↑
  • Комментарии
  • Марина (02/08/2012 - 12:48):

    Скажите, а можно ли поставить Якорь на определенную строку в таблице (например, на определенный вид услуги или товар в таблице). Желательно с примером кода.

  • TakProstoTak.ru (02/08/2012 - 13:00):

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

    Пример кода:

    <table>
      <tr><td><a name="ankor1"></a>бла бла</td><td>бла бла</td></tr>
      <tr><td><a name="ankor2"></a>бла бла</td><td>бла бла</td></tr>
    </table>
    
  • Виктория (28/08/2012 - 21:06):

    А если якорь таким образом формируется, через ID?

    Ознакомьтесь с птичками

    Виды птичек

    Стоит ли такой якорь закрыть от индексации?

    Ознакомьтесь с птичками

  • TakProstoTak.ru (29/08/2012 - 6:34):

    Виктория: Первый раз встречаю, чтоб так якоря записывали, результат одинаковый получается. Если вы ссылаетесь на внешний ресурс и хотите, закрыть ссылку от индексации, тогда стоит указать rel=”nofollow”.

  • Юра (02/10/2012 - 18:00):

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

    align=”center” valign=”middle”
    align=”left” valign=”top”

    align=”right” valign=”bottom”
    align=”right” valign=”top”

    Спасибо!

  • TakProstoTak.ru (02/10/2012 - 20:30):

    Юра: код не информативен. Картинку вставить можно и сделать ее слыкой тоже. про рубрику не совсем понял.

  • Юра (03/10/2012 - 19:13):

    Общем рубрика-будет ссылкой на картинке от,то-есть при нажатии на определенную картинку посетитель попадет в нужную рубрику.
    спасибо за ответ.

  • Grammar Nazi mode (18/03/2013 - 16:41):

    “неограничивается” – поправьте.

  • TakProstoTak.ru (18/03/2013 - 17:04):

    @Grammar Nazi mode, #8: Ага, попутно еще парочку поправил.

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

Подписаться, не комментируя

Видеоуроки для вебмастеров
  • Рубрики
  • Случайные

Идеальный хостинг