Таблицы определяются с помощью тэга <table>.
Таблица разделена на строки (с помощью тэга <tr>), и каждая строка разделена на ячейки данных¹ (с помощью тэга <td>).

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

¹ Иначе говоря, ячейки данных – это столбцы, если их рассматривать по вертикали.

 <table border="1">

            <tr>

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

            <td>строка 1, ячейка 2</td>

            </tr>

            <tr>

            <td>строка 2, ячейка 1</td>

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

            </tr>

            </table>

Как это смотрится в браузере:

строка 1, ячейка 1	строка 1, ячейка 2
строка 2, ячейка 1	строка 2, ячейка 2

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Наверх

3. Таблицы и атрибут Border

Если Вы не определите атрибут border, то таблица будет отображена без всяких границ. Иногда это может быть полезно, но обычно, вам будет необходимо, чтобы границы у таблицы отображались.

Чтобы отобразить таблицу с границами, Вы должны использовать атрибут border:

 <table border="1">

             <tr>

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

             <td> строка 1, ячейка 2</td>

             </tr>

             </table>

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Наверх

4. Заголовки в таблице

Заголовки в таблице определяются тэгом <th>.

 <table border="1">

            <tr>

            <th>Заголовок</th>

            <th>Другой заголовок</th>

            </tr>

            <tr>

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

            <td> строка 1, ячейка 2</td>

            </tr>

            <tr>

            <td> строка 2, ячейка 1</td>

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

            </tr>

            </table>

Как это выглядит в браузере:

Заголовок	Другой заголовок
строка 1, ячейка 1	строка 1, ячейка 2
строка 2, ячейка 1	строка 2, ячейка 2

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Наверх

5. Пустые ячейки в таблице

Ячейки таблицы без какого-либо содержания, не очень хорошо отображаются в большинстве браузеров.

 <table border="1">

         <tr>

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

         <td> строка 1, ячейка 2</td>

         </tr>

         <tr>

         <td> строка 2, ячейка 1</td>

         <td></td>

         </tr>

         </table>

Как этого выглядит в браузере:

строка 1, ячейка 1	строка 1, ячейка 2
строка 2, ячейка 1

Отметьте, что границы вокруг пустой ячейки таблицы отсутствуют (Внимание! Mozilla Firefox может отобразить границу).

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

 <table border="1">

            <tr>

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

            <td> строка 1, ячейка 2</td>

            </tr>

            <tr>

            <td> строка 2, ячейка 1</td>

            <td>&nbsp;</td>

            </tr>

            </table>

Как этого выглядит в браузере:

строка 1, ячейка 1	строка 1, ячейка 2
строка 2, ячейка 1

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Наверх

6. Примечания - полезные советы

Элементы <thead>, <tbody> и <tfoot> редко используются (применяются в XHTML), из-за плохой поддержки браузера. Ожидается, что это изменится в будущих версиях XHTML.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Наверх

7. Примеры 1 часть

Таблицы
Этот пример демонстрирует, как создавать таблицы в HTML документе.

 <html>

 <body>
 <p>

            Каждая таблица начинается с тэга таблицы <table>.

            Каждая строка таблицы начинается с тэга <tr> (table  row).

            Каждая ячейка данных таблицы начинается с  тега <td> (table data).

   </p>
 <h4>Один столбец:</h4>

   <table  border="1">

   <tr>

            <td>100</td>

   </tr>

   </table>
 <h4>Одна строка и три столбца:</h4>

   <table  border="1">

   <tr>

            <td>100</td>

            <td>200</td>

            <td>300</td>

   </tr>

   </table>
 <h4>Две строки и три  столбца:</h4>

   <table  border="1">

   <tr>

            <td>100</td>

            <td>200</td>

            <td>300</td>

   </tr>

   <tr>

            <td>400</td>

            <td>500</td>

            <td>600</td>

   </tr>

   </table>
 </body>

   </html>

Границы таблицы
Этот пример демонстрирует различные границы таблицы.

 <html>

 <body>
 <h4>С нормальной границей  (бордюром):</h4> 

   <table  border="1">

   <tr>

            <td>Первая</td>

            <td>строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>строка</td>

   </tr>

   </table>
 <h4>С толстой границей:</h4> 

   <table  border="8">

   <tr>

            <td>Первая</td>

            <td>строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>строка</td>

   </tr>

   </table>
 <h4>С очень толстой  границей:</h4> 

   <table  border="15">

   <tr>

            <td>Первая</td>

            <td>строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>строка</td>

   </tr>

   </table>
 </body>

   </html>

Таблица без границ
Этот пример демонстрирует таблицу без границ.

 <html>

 <body>
 <h4>У этой таблицы нет  границ:</h4>

   <table>

   <tr>

            <td>100</td>

            <td>200</td>

            <td>300</td>

   </tr>

   <tr>

            <td>400</td>

            <td>500</td>

            <td>600</td>

   </tr>

   </table>
 <h4>И у этой таблицы границ  нет:</h4>

   <table  border="0">

   <tr>

            <td>100</td>

            <td>200</td>

            <td>300</td>

   </tr>

   <tr>

            <td>400</td>

            <td>500</td>

            <td>600</td>

   </tr>

   </table>
 </body>

   </html>

Заголовки в таблице
Этот пример показывает, каким образом можно отображать заголовки таблицы.

 <html>

 <body>
 <h4>Заголовки таблицы:</h4>

   <table  border="1">

   <tr>

            <th>Имя</th>

            <th>Телефон</th>

            <th>Телефон</th>

   </tr>

   <tr>

            <td>Билл Гейтс</td>

            <td>555 77 854</td>

            <td>555 77 855</td>

   </tr>

   </table>
 <h4>Вертикальные заголовки:</h4>

   <table  border="1">

   <tr>

            <th>Имя:</th>

            <td>Билл Гейтс</td>

   </tr>

   <tr>

            <th>Телефон:</th>

            <td>555 77 854</td>

   </tr>

   <tr>

            <th>Телефон:</th>

            <td>555 77 855</td>

   </tr>

   </table>
 </body>

   </html>

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

 <html>

 <body>
 <table  border="1">

   <tr>

            <td>Какой-то текст</td>

            <td>Какой-то  текст</td>

   </tr>

   <tr>

            <td></td>

            <td>Какой-то  текст</td>

   </tr>

   </table>
 <p>

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

   </p>
 <p>

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

   </p>
 <p>Неразрывной объект – это  символьный объект. Если вы не знаете или  не помните сто есть символьный объект,  то почитайте соответствующий  урок на эту тему.

   </p>
 <p>Неразрывной пробел  начинается с амперсанда ("&"),

            затем пишутся буквы "nbsp",  и в конце ставиться точка с запятой (";")

   </p>
 <p> 

   </p>
 </body>

   </html>

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Наверх

8. Примеры 2 часть

Таблица с надписью
Этот пример демонстрирует таблицу с надписью.

 <html>

 <body>
 <h4>

            Это таблица с надписью,

            и толстой границей:

   </h4>
 <table border="6">

   <caption>Моя надпись</caption>

   <tr>

            <td>100</td>

            <td>200</td>

            <td>300</td>

   </tr>

   <tr>

            <td>400</td>

            <td>500</td>

            <td>600</td>

   </tr>

   </table>
 </body>

   </html>

Ячейки таблицы, которые охватывают больше чем одну строку/столбец
Этот пример показывает, каким образом можно определить ячейки таблицы, которые охватывают больше чем одну строку или один столбец.

 <html>

 <body>
 <h4>Ячейка, которая  охватывает два столбца:</h4>

   <table  border="1">

   <tr>

            <th>Имя</th>

            <th colspan="2">Телефон</th>

   </tr>

   <tr>

            <td>Билл Гейтс</td>

            <td>555 77 854</td>

            <td>555 77 855</td>

   </tr>

   </table>
 <h4>Ячейка, которая  охватывает две строки:</h4>

   <table  border="1">

   <tr>

            <th>Имя:</th>

            <td>Билл Гейтс</td>

   </tr>

   <tr>

            <th rowspan="2">Телефон:</th>

            <td>555 77 854</td>

   </tr>

   <tr>

            <td>555 77 855</td>

   </tr>

   </table>
 </body>

   </html>

Тэги внутри таблицы
Этот пример показывает, каким образом можно отображать HTML элементы внутри других элементов.

 <html>

 <body>
 <table  border="1">

   <tr>

            <td>

            <p>Это  параграф</p>

            <p>Это  другой параграф</p>

            </td>

            <td>Эта  ячейка содержит таблицу:

            <table border="1">

            <tr>

            <td>A</td>

            <td>B</td>

            </tr>

            <tr>

            <td>C</td>

            <td>D</td>

            </tr>

            </table>

            </td>

   </tr>

   <tr>

            <td>Эта  ячейка содержит список

            <ul>

            <li>яблоки</li>

            <li>бананы</li>

            <li>ананасы</li>

            </ul>

            </td>

            <td>ПРИВЕТ</td>

   </tr>

   </table>
 </body>

   </html>

Cellpadding
Этот пример демонстрирует, как использовать cellpadding, чтобы увеличить расстояние между содержанием ячеек и её границами.

 <html>

 <body>
 <h4>Без  cellpadding:</h4>

   <table  border="1">

   <tr>

            <td>Первая</td>

            <td>Строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>Строка</td>

   </tr>

   </table>
 <h4>С  cellpadding:</h4>

   <table  border="1" 

            cellpadding="10">

   <tr>

            <td>Первая</td>

            <td>Строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>Строка</td>

   </tr>

   </table>
 </body>

   </html>

Cellspacing
Этот пример демонстрирует, как использовать cellspacing, чтобы увеличить расстояние между ячейками.

 <html>

 <body>
 <h4>Без  cellspacing:</h4>

   <table  border="1">

   <tr>

            <td>Первая</td>

            <td>Строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>Строка</td>

   </tr>

   </table>
 <h4>С  cellspacing:</h4>

   <table  border="1" 

            cellspacing="10">

   <tr>

            <td>Первая</td>

            <td>Строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>Строка</td>

   </tr>

   </table>
 </body>

   </html>

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Наверх

9. Примеры 3 часть

Добавить цвет фона или фоновое изображение в таблицу
Этот пример показывает, каким образом можно добавить фон для таблицы.

 <html>

 <body>
 <h4>Цвет фона:</h4>

   <table  border="1" bgcolor="red">

   <tr>

            <td>Первая</td>

            <td>Строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>Строка</td>

   </tr>

   </table>
 <h4>Фоновое изображение:</h4>

   <table border="1" background="fon.jpg">

   <tr>

            <td>Первая</td>

            <td>Строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>Строка</td>

   </tr>

   </table>
 </body>

   </html>

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

 <html>

 <body>
 <h4>Фоны ячеек:</h4> 

   <table  border="1">

   <tr>

            <td bgcolor="red">Первая</td>

            <td>Строка</td>

   </tr> 

   <tr>

            <td background="fon.jpg">Вторая</td>

            <td>Строка</td>

   </tr>

   </table>
 </body>

   </html>

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

 <html>

 <body>
 <table  width="400" border="1">

            <tr>

            <th  align="left">Деньги потраченные  на....</th>

            <th align="right">Январь</th>

            <th align="right">Февраль</th>

            </tr>

            <tr>

            <td align="left">Одежда</td>

            <td align="right">2410  RU</td>

            <td align="right">5000  RU</td>

            </tr>

            <tr>

            <td align="left">Парфюмерия</td>

            <td align="right">300  RU</td>

            <td align="right">445  RU</td>

            </tr>

            <tr>

            <td align="left">Питание</td>

            <td align="right">7300  RU</td>

            <td align="right">6500  RU</td>

            </tr>

            <tr>

            <th align="left">Сумма</th>

            <th align="right">10010  RU</th>

            <th align="right">11945  RU</th>

            </tr>

   </table>
 </body>

   </html>

Атрибут Frame
Этот пример демонстрирует, как использовать "frame" атрибут для управления границами вокруг таблицы.

 <html>

  <body>
 <p>

            Если Вы не видите границ вокруг таблиц в этих  примерах, значит ваш  браузер слишком стар или не поддерживает этот атрибут.

   </p>
 <h4>С атрибутом frame="border":</h4>

   <table  frame="border">

   <tr>

            <td>Первая</td>

            <td>Строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

             <td>Строка</td>

   </tr>

   </table>
 <h4>С атрибутом frame="box":</h4>

   <table  frame="box">

   <tr>

            <td>Первая</td>

            <td>Строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>Строка</td>

   </tr>

   </table>
 <h4>С атрибутом frame="void":</h4>

   <table  frame="void">

   <tr>

            <td>Первая</td>

            <td>Строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>Строка</td>

   </tr>

   </table>
 <h4>С атрибутом frame="above":</h4>

   <table  frame="above">

   <tr>

            <td>Первая</td>

            <td>Строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>Строка</td>

   </tr>

   </table>
 <h4>С атрибутом frame="below":</h4>

   <table  frame="below">

   <tr>

            <td>Первая</td>

            <td>Строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>Строка</td>

   </tr>

   </table>
 <h4>С атрибутом frame="hsides":</h4>

   <table  frame="hsides">

   <tr>

            <td>Первая</td>

            <td>Строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>Строка</td>

   </tr>

   </table>
 <h4>С атрибутом frame="vsides":</h4>

   <table  frame="vsides">

   <tr>

            <td>Первая</td>

            <td>Строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>Строка</td>

   </tr>

   </table>
 <h4>С атрибутом frame="lhs":</h4>

   <table  frame="lhs">

   <tr>

            <td>Первая</td>

            <td>Строка</td>

   </tr> 

   <tr>

            <td>Вторая</td>

            <td>Строка</td>

   </tr>

   </table>
 <h4>С атрибутом frame="rhs":</h4>

   <table  frame="rhs">

   <tr>

            <td>Первая</td>

             <td>Строка</td> 

   </tr>  

   <tr>

            <td>Вторая</td>

            <td>Строка</td>

   </tr>

   </table>
 </body>

   </html>

Атрибуты Frame и border
Как использовать атрибуты "frame" и "border" для управления границами вокруг таблицы.

 <html>

 <body>
 <p>

            Если Вы не видите границ вокруг таблиц в этих  примерах, значит ваш  браузер слишком стар или не поддерживает этот атрибут.

   </p>
 <table  frame="hsides" border="3">

   <tr>

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

   </tr> 

   </table>

   <br  />

   <table  frame="vsides" border="3">

   <tr>

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

   </tr> 

   </table>
 </body>

   </html>

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Наверх

10. Таблица изученных тэгов

Тэги форматирования текста
Тэг	Описание
<table>	Определяет таблицу
<th>	Определяет заголовок таблицы
<tr>	Определяет строку таблицы
<td>	Определяет ячейку таблицы
<caption>	Определяет надпись таблицы
<colgroup>	Определяет группу столбцов таблицы
<col>	Определяет значения атрибутов для одного или нескольких столбцов в таблице
<thead>	Определяет верхний колонтитул таблицы
<tbody>	Определяет тело таблицы
<tfoot>	Определяет нижний колонтитул таблицы

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Наверх

11. В следующем выпуске ( 06 янв. 09 )

Выпуск будет посвещён спискам. Мы узнаем о использовании в своей работе:

нумерованных списков;
маркированных списков;
списков определений.

Ближайшие специальные выпуски:

10 янв. 09 - "ЧаВо";
14 янв. 09 - "Свободная трибуна".

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Наверх

Правило пятое
Чтобы жить лучше
Стройте каждый день на фундаменте из приятных мыслей. Не горюйте о своих недостатках, реальных или воображаемых. Напоминайте себе так часто, как это будет необходимо, что Вы - Божье творение и властны осуществить любую мечту одной лишь силой своего духа. Вы можете летать, если поверите, что можете это делать. Даже не рассматривайте возможность поражения. Пусть ваши сокравенные мечты воплотятся в действительность. Улыбайтесь!

Ог Мондино , "Ключ к лучшей жизни ".

Шаблон для рассылки был взят с сайта www.woweb.ru

В избранное

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} {#if $P.login_register_tab == 1} <form class="authentication-form" method="post" action="/MEMBERLOGIN_authen_cred"> <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <h1>Войти на сайт</h1> {* {#include js_tmpl_auth_reg_button} *} {#include js_tmpl_auth_reg_action} <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones"><p>{#include js_tmpl_auth_reg_descr} </p></div> <div class="logreg_advice noPhones"> Если вы еще не с нами, то начните с <a href="#" onclick="rgNav('js_tab_reg');return false;" class="dashed" data-func="registr">регистрации</a> </div> <br><br> <a class="dashed auth-enter" href="/manage/author/"><b>Вход для авторов</b></a> </dt> </dl> </form> {#/if} {#if $P.login_register_tab == 2} <div class="rg_block_options"> <div id="js_tap_panel_auth"> <h1>Регистрация</h1> <div class="social_reg"> {* <div class="rg_description">{#include js_tmpl_soc_auth_reg_descr}</div> *} {#include js_tmpl_auth_reg_soc} <div class="rg_soc_auth_agree">{#include js_tmpl_auth_reg_agree}</div> </div> <div class="subscribe_reg"> {* <div class="rg_description"> #include js_tmpl_auth_reg_descr </div> *} {#include js_tmpl_auth_reg_action} </div> {* {#include js_tmpl_auth_reg_button} *} <div class="clr"> </div> <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones">{#include js_tmpl_auth_reg_descr} {#include js_tmpl_soc_auth_reg_descr} </div> </div> </div> {#/if} </div> {* <div class="gray_bg register_shadow"></div> *} </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_auth" class="{#if $P.login_register_tab == 1} rg_active_nav {#/if} rg_first_nav"><a onclick="rgNav('js_tab_auth');return false;" href="">Вход на сайт</a></li> <li id="js_tab_reg" class="{#if $P.login_register_tab == 2} rg_active_nav {#/if}"><a onclick="rgNav('js_tab_reg');return false;" href="">Регистрация </a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_action} {#if $P.login_register_tab == 1} {#include js_tmpl_auth_reg_soc} {#/if} <div class="rg_forms"> <input type="hidden" id="login_register_destination" value="{$P.login_register_destination}"/> {#if $P.login_register_tab == 1} <div class="rg_for_input"> <span class="rg_text_inner">E-mail или код подписчика</span> <input id="credential_0" class="js_keydown_selector rg_input_text" data-js_submit="no" data-js_next_input_name="credential_1" name="" type="text" /> </div> <div class="rg_for_input"> <span class="rg_text_inner">Пароль</span> <input id="credential_1" class="js_keydown_selector rg_input_text" data-js_submit="yes" data-js_action="js_loginFormBut" name="" type="password" onkeyup="showAttention(this,!!window.event.shiftKey)" /> <span class="pswd_attention" id="attention_pswd"> <span class="icon_attention"></span> <span class="pswd_attention-text" id="attention-text_pswd1">Русская раскладка клавиатуры!</span> <span class="pswd_attention-text" id="attention-text_pswd2">У вас включен Caps Lock!</span> <span class="pswd_attention-text" id="attention-text_pswd3">У вас включен Caps Lock и русская раскладка клавиатуры!</span> </span> </div> <div class="rg_for_input input-alien"> <span class="chk noPhones"><input id="chk_alien" name="" type="checkbox" /></span><label for="chk_alien" class="noPhones"> Чужой компьютер</label> <a class="forgot_pass" href="/member/totalrecall">Забыли пароль?</a> </div> <div class="rg_for_input"> <em id="auth_msg" class="reg_error"></em> <input id="lf_typeauthid" value="email" type="hidden"> <input type="submit" class="button button-red logreg_submit" id="js_loginFormBut" value="Войти">  <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} {#if $P.login_register_tab == 2} <div class="rg_for_input"> <span class="rg_text_inner">E-mail</span> <input id="arfemail" class="js_keydown_selector rg_input_text" name="" type="text" data-js_submit="yes" data-js_action="js_regFormBut"/> </div> <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a> </label> <br /> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_personal' type="checkbox" data-js_submit="yes" /></span> Нажимая на кнопку "Готово!", я даю <a class="link_txd logreg_accLink" href="/faq/persverordnung.html">согласие на обработку персональных данных</a> </label> </div> {* <div style="float: left;position: absolute;left: 11em;"> <img src="http://www.kupivip.ru/images/vip/logo.png?1604" style="width: 86px; vertical-align: middle;display: block;"> </div> <div class="rg_for_input rg_set_lineh"> <label class="js_tap_panel_checkbox"><input name="" id="js_tap_panel_checkbox_kupivip" type="checkbox" data-js_submit="yes"> Я хочу получать новости о скидках на одежду</label> </div> *} <div class="rg_for_input"> <em id="reg_msg" class="reg_error rg_for_input_wide"></em> <em id="reg_msg2" class="reg_error rg_for_input_wide"></em> <input id="rf_typeauthid" value="email" type="hidden"> <a class="button button-red logreg_submit" id="js_regFormBut" href="#">Готово!</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} </div> {#/template js_tmpl_auth_reg_action} {#template js_tmpl_auth_reg_agree} <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms_reg' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a></label> <em id="reg_msg_soc" class="reg_error rg_for_input_wide"></em> </div> {#/template js_tmpl_auth_reg_agree} {#template js_tmpl_auth_reg_button} <div class="rg_butons_socials"> {#if $P.login_register_tab == 1} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} {#if $P.login_register_tab == 2} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} </div> {#/template js_tmpl_auth_reg_button} {#template js_tmpl_auth_reg_descr} {#if $P.login_register_tab == 1} Для оформления подписки на выбранную рассылку, работы с интересующей вас группой или доступа в нужный вам раздел, просим авторизоваться на Subscribe.ru {#/if} {#if $P.login_register_tab == 2} Для регистрации укажите ваш e-mail адрес. Адрес должен быть действующим, на него сразу после регистрации будет отправлено письмо с инструкциями и кодом подтверждения. {#/if} {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_soc_auth_reg_descr} Или зарегистрируйтесь через социальную сеть. {#/template js_tmpl_soc_auth_reg_descr} {#template js_tmpl_auth_reg_soc} <div class="rg_soc"> {#if $P.login_register_tab == 1} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/login/vk/&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} {#if $P.login_register_tab == 2} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/join/vk&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} </div> {#/template js_tmpl_auth_reg_soc}

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <p class="rg_description">{#include js_tmpl_auth_reg_descr}</p> <div class="clr"> </div> {#include js_tmpl_auth_reg_action} <div class="clr"> </div> </dt> </dl> </div>  </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_reg" class="rg_active_nav rg_first_nav"><a href="" onclick="return false;" >Регистрация</a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_descr} <strong>Пожалуйста, подтвердите ваш адрес.</strong><br><br>Вам отправлено письмо для подтверждения вашего адреса {$P.register_confirm_mail}.<br>Для подтверждения адреса перейдите по ссылке из этого письма. {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_auth_reg_action} <div class="rg_forms confirm_code_from_letter"> <div class="rg_for_input"> <span class="rg_inp_descr" style="width:15em;">Или введите код из письма:</span> <input type="text" value="" id="confirm_code" name="" data-js_submit="yes" data-js_action="js_confirmFormBut" class="js_keydown_selector rg_input_text_conf" > </div> <div class="rg_for_input"><label>Не пришло письмо? <b>Пожалуйста, проверьте папку Спам</b><br /> (папку для нежелательной почты).</label><br /> <a href="" onclick="ajax_recall_code();return false" >Вышлите мне письмо еще раз!</a></div> <div class="rg_for_input"> <em class="reg_error" id="confirm_msg"></em> <a href="#" class="button button-red" id="js_confirmFormBut">Готово</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> <br> </div> </div> {#/template js_tmpl_auth_reg_action}

Tutos-web: обучение веб-технологиям. Шаг за шагом

Рассылка закрыта

Статистика

Tutos-web: обучение веб-технологиям. Шаг за шагом: Выпуск #10 : Урок 9. HTML таблицы

*Добро *пожаловать *в *рассылку*

* *Tutos-web ! * *

10

Добро пожаловать в рассылку*

*** *Tutos-web ! *** *