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

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Ноябрь 2002   →
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

Автор

Александр Левитас

Статистика

1.344 подписчиков
-1 за неделю

• Выпуски
• Статистика

←   Все выпуски   →

Свой сайт - это очень просто!

Информационный Канал Subscribe.Ru

---

---

Таблицы как средство форматирования HTML-страницы. Построение более сложных таблиц. Некоторые хитрости и особенности в построении таблиц.

07.11.2002

Свой сайт - это очень просто!

нр 29.

Доброго Вам здоровья уважаемые подписчики!

   Сегодня в выпуске:
   Новости сайта:

• Появилась новая страничка: mycatalog - На нее я буду выкладывать кнопки всяческих каталогов, рейтингов, ТОПов, в которых буду регистрировать сайт :-) Большинство из них просят или требуют разместить их кнопку на сайте. Что делать? Размещаем. Желающие найдут на этой странице в скором времени неплухую подборку каталогов для раскрутки своих сайтов.
• В разделе "раскрутка" на сайте выложена статья Search Engine marketing - основные проблемы, возникающие в процессе оптимизации сайтов для поисковых систем. - это перевод статьи Ralph Tegtmeier - главного редактора fantomNews.
• Ну и множество других мелких перемен. Заходите, смотрите. Я не обижусь, если уходя с сайта, Вы кликнете по какому-нибудь банеру :-)

   Сегодня "по многочисленным просьбам трудящихся" я вновь возвращаюсь к теме таблиц. Судя по письмам, многие из Вас (а может быть, даже - все :-) уже выросли из "детского возраста" сайтостроительства и уже не удовлетворены "простейшими таблицами". Им, видите ли, посложнее материал нужен! Это, конечно, естественно, а поэтому - пожалуйста:
Примечание! Получающим рассылку в текстовом формате для того, чтобы посмотреть "правильную" статью, придется сходить по адресу: http://www.svoisait.ru/table2.shtml

Таблицы.

Форматирование страниц.

   Предупреждая критику со стороны знающих людей и уберегая их от излишнего беспокойства и затрат времени, сразу оговорюсь, что таблицы не являются единственным средством форматирования страницы. Более того, они сейчас играют в этом плане все меньшее и меньшее значение, отступая перед новыми технологиями. Но это вовсе не означает, что их нельзя теперь уже употреблять в этом качестве.
   Предупреждая критику со стороны незнающих людей, сразу скажу, что в качестве средства для форматирования и оформления страницы, таблицы предоставляют ВЕБ-мастеру большие возможности. Способов и вариантов в данном случае такое множество, что все их просто невозможно описать не только в этой статье, но и вообще. Если не лень, посчитайте сами количество вариантов: у тегов TR и TD десятки параметров, у которых десятки значений, плюс возможность употреблять все это неограниченное число раз, и т.д., и т.п. Поэтому я приведу в этой статье лишь неколько простых примеров, как бы это можно было бы сделать, в надежде, что эти примерчики натолкнут Вас на ту единственно правильную мысль, которая поможет Вам сделать Вашу страничку неотразимой. Ну, или хотябы просто удобной для пользователя.
   Примечание: в целях экономии места и времени я не буду приводить в статье куски ХТМЛ-кода, при помощи которых создавались эти таблицы. Я их просто выделю в самом документе примечаниями "пример", а Вы сможете посмотреть их, щелкнув по странице правой кнопкой мыши и выбрав "просмотр в виде HTML". Из тех же соображений я не буду описывать теги, которые уже встречались в статье Простейшие таблицы.
   Итак,

Вариант первый.

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

Здесь будет меню.

Заголовок страницы А здесь будет информативная часть страницы.

   В этом примере мы построили таблицу из одной строчки с двумя столбцами, в один из которых можно поместить меню, а в другой (в данном примере - в правый) - информацирнную часть. Правую часть от левой мы отделили при помощи атрибута FRAME. Вернее, наоборот - с его помощью мы убрали рамку вокруг таблицы, оставив border только между столбцами. Атрибут FRAME тега TABLE показывает браузеру, какие стороны кадра, окружающего таблицу, будут видимы. Может принимать значения:

• void - сторон нет.
• above - только верхняя часть
• below - только нижняя часть
• hsides - только верхняя и ниэняя части
• vsides - только лувая и правая части
• lhs - только левая часть
• rhs - только правая часть
• box - все четыре састи
• border - все четыре части

Очевидно, что два последних значения употреблять нет смысла, так как по умолчанию, то есть, если атрибут frame не употребляется вообще, рамка рисуется вокруг всей таблицы.
   Замечу также, что совсем не обязательно делать эту таблицу на всю страницу. Можно, например, заголовок или название страницы поместить сверху таблицы, а еще что-то - ниже таблицы:

Здесь заголовок
(заголовок страницы, не таблицы)

Здесь будет меню.

А здесь будет информативная часть страницы.

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

   Дальше уже возможны варианты. Например так:

Здесь заголовок
(заголовок страницы, не таблицы)

Здесь будет меню.

А здесь будет информативная часть страницы.

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

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

• none - перегородки не отображаются.
• groups - не отображаются только между группами строк (THEAD, TFOOT, TBODY) и между группами столбцов (COLGROUP, COL).
• rows - не отбражаются только между строками
• cols - не отображаются только между столбцами
• all - отображаются между строками и столбцами

   Или так:

Здесь заголовок
(заголовок страницы, не таблицы)

Здесь будет меню.

А здесь будет информативная часть страницы.

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

   Можно нарисовать более капитальную таблицу, где будет определено место под другие (или под все) элементы страницы. Пример:

Здесь могут быть счетчики, банеры, украшения
Здесь - меню	Здесь заголовок (заголовок страницы, не таблицы) А также вся остальная информация. Например, рисунки: и всякая другая инфа, которую Вы хотите нести в народ.
здесь ссылки:
а здесь опять банеры или копирайт:

   При построении этой таблицы использовались атрибуты colspan и rowspan.

• COLSPAN - определяет число столбцов, объеденяемых одной ячейкой,
• ROWSPAN - определяет число строк, объеденяемых одной ячейкой.

Употребление этих атрибутов требует небольшой тренировки, чтобы понять, сколько столбцов и строк (в смысле, сколько пар тегов TR и TD) нужно оставить при объединении, а сколько убрать. Сделайте простенькую табличку 3 на 3, пронумеруйте ячейки, и - потренируйтесь:

1	2	3
1.2	2.2	3.2
1.3	2.3	3.3

   Ну, и наконец, можно сделать несколько таблиц. Их можно также раскрасить разными цветами или вставить в каждую из них свой фоновый рисунок. Например (рамки вокруг таблиц я оставляю исключительно для наглядности. Если Вы не хотите, чтобы рамка вокруг таблицы была видна на странице, поставте значение параметра border=0):

Здесь может быть меню или счетчики или логотип Вашего сайта

Меню сайта может быть и здесь. А можно эту таблицу расположить справа. Как Вам больше нравится.

Здесь, естественно, в этом случае будет инфа. Обратите внимание, что после вот этого самого текста, который Вы читаете в этот момент, стоит тег BR с параметром clear. Это для того, чтобы нижняя таблица расположилась ниже этого текста, а главное - ниже таблицы, которая слева. Такой ма-аленький нюансик, а помогает ...

Туточки тоже что - нибудь поместить. Можно, конечно, и не помещать. Можно вообще, эту последнюю таблицу не делать. А можно сделать две таких или три...

   Вот, приблизительно, так можно использовать таблицы для разметки страницы. А можно и не так. Можно по другому. Можно так, как Вам понравится. Дорогу осилит идущий, а поэтому - пробуйте, экспериментируйте, штудируйте спецификацию HTML4.0. Ну и мой сайт, конечно, тоже можно прочитать повнимательнее. На нем, в общем-то уже много чего написано. Только вот судя по вопросам, которые Вы (или скажем так: некоторые из Вас :-) задаете, внимательно читают не все-е-е-е... (Шутка.)
   Пишите и задавайте ЛЮБЫЕ вопросы. Если смогу, отвечу. Не смогу - подскажу, где найти ответ. А если уже написано об этом - покажу, где написано.

---

Интересующимся заработком в сети советую посмотреть здесь и здесь.

---

Как всегда, приглашаю Вас посетить Свой сайт - это очень просто!. И, как всегда, Вы можете задавать мне любые вопросы.
    Всего Вам доброго.
   Сергей Червонящий.

на главную

---

http://subscribe.ru/ E-mail: ask@subscribe.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="Войти"> <!--</a>--> <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 class="gray_bg register_shadow"></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}