- HTML макет сайту, трехколоночной на таблицях
- HTML теги table, tr, td, th. Об'єднання осередків colspan і rowspan
- HTML Посилання (a href) і якоря (name, anchor)
- HTML Форми, теги legend і fieldset
Добрий день, шановні читачі блогу TakProstoTak.ru . Минулий випуск ставився до розділу " просування ", В ньому йшлося про те, як додати сайт в Yandex і Google . У цій статті мова піде про html таблицях, розглянемо теги: table, tbody, tr, td, th. Поговоримо про посилання і якорях, а також розглянемо теги форм legend і fieldset. Розглянемо як за допомогою таблиць зробити деякі типові макети сайтів.
До появи каскадних таблиць стилів (CSS), на арені html верстки і вебдизайну рулювали таблиці. Всі заходи по створенню сайту, будь то дизайн або верстка, враховували специфіку таблиць і орієнтувалися на можливості предотавляет таблицями (table). На сьогоднішній день балом правити CSS, а табличная верстка відійшла на другий план, хоча деякі Вебразработчик активно користуються табличній версткою. Яким видом верстки користуватися описано в статті про видах верстки .
Застосування таблиць не обмежується використанням в макетах, таблицями можна і потрібно користуватися за їх прямим призначенням. Наприклад, якщо вам потрібно представити якийсь звіт по місяцях найкраще для цього підійде саме таблиця
, Звичайно, можна вставити дані в блокнот, розставити відступи, зробити більш читабельно, але це буде архаїчно, адже є 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 №9Html код таблиці:
<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 видаляємо з таблиці.
Щоб не бути голослівним наведу приклад:
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 №9html код таблиці з об'єднаними яч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 поле №9Html код таблиці з вертикальним об'єднанням осередків:
<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 - колір фону таблиці
приклад:
код:
HTML атрибути тега td
- align - визначає вирівнювання в осередку по горизонталі, параметри: left (по лівому краю) | center (по центру) | right (по правому краю).
- valign - вертикальне вирівнювання в осередку, параметри: top (по верхньому краю) | middle (по серединці) | bottom (по нижньому краю).
- width - задає ширину осередку в абсолютних (width = "500") або відносних одиницях (width = "60%").
- height - задає висоту комірки абсолютних (height = "20") або відносних одиницях (height = "10%").
- nowrap - заборона перенесення рядків, текст розташовується в одну строчку.
- rowspan - об'єднує вертикальні осередки.
- colspan - об'єднує горизонтальні осередки.
приклад: 
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 - визначає ставлення до об'єкта, на який посилається.
більш детально про атрибути посилань можете подивитися на
приклад:
<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> <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.
