Таблиці в HTML

      Таблиці в HTML є одним з найнеобхідніших елементів і самими універсальними засобами форматування картинок і тексту. Є, звичайно, і альтернативні способи, такі як шари наприклад, але це громіздко, тяжко і незручно ... Справа в тому, що всяка бродилка бачить шари по своєму, і для більш менш пристойного відображення шарів необхідно писати довгий і нудний скрипт, да і той не панацея ... У той час, як таблиці, хоч у деяких нюансах нерідко і розходяться, але розбіжність-то мінімально.
  Отже, код найпростішої таблиці 2х2 осередки:
<Table width = "200" border = "1" cellspacing = "0" cellpadding = "0">
початок таблиці містить:
width - ширина (у нас 200 піхелей),
border - товщина облямівки / бордюру нашої таблиці (у нас 1 піхель)
cellspasing - відстань між осередками,
cellspadding - відступ від кордонів осередку всередині неї.
решті код:
    <Tr>
          <Td> 1 </ td>
          <Td> 2 </ td>
   </ Tr>
   <Tr>
          <Td> 3 </ td>
         <Td> 4 </ td>
   </ Tr>
</ Table>

додавши в код сегмент:
<Tr>
          <Td> 3 </ td>
         <Td> 4 </ td>
   </ Tr>
ми отримаємо третій рядок з двома стовпчиками.
 <Table width = "200" border = "1" cellpadding = "0" cellspacing = "0">
<Tr>
    <Td rowspan = "2"> 1 </ td>
     <Td> 2 </ td>
</ Tr>
<Tr>
     <Td> 3 </ td>
</ Tr>
<Tr align = "center">
     <Td> 4 </ td>
     <Td> 5 </ td>
</ Tr>
</ Table>
виділення жирним в коді відповідає зафарбовані сірим кольором у таблиці.
всі відміну такого побудови таблиць залючается в появі параметра rowspan = "2"
цифра в якому відповідає кількості "подстрок", тобто буквально те, скільки рядків злилося в цьому осередку:

 <Table width = "200" border = "1" cellpadding = "0" cellspacing = "0">
<Tr>
     <Td> 1 </ td>
     <Td rowspan = "2"> 3 </ td>
</ Tr>
<Tr>
    <Td> 2 </ td>
    <Tr align = "center">
    <Td> 4 </ td>
    <Td> 5 </ td>
</ Tr>
</ Table>
  Якщо в симетричною таблиці ми читаємо зліва-направо, то тут відбувається те ж саме, тільки чому ж у коді попереду 2-ки коштує осередок з цифрою 3? Все дуже просто - буквально код розшифровується, як "осередок 1", "осередок 3, що складається з ДВОХ подстрок", осередок 2, другий рядки. Але фізично осередок 3 належить до ПЕРШОЇ рядку! Адже HTML читається саме через підрядник - зліва-направо; 0)
  А що буде, якщо поставити після 3-ки ще таку ж комірку? 3b наприклад?
3 січня 3b
2
4 Травня
 <Table width = "200" border = "1" cellpadding = "0" cellspacing = "0">
  <Tr>
      <Td> 1 </ td>
      <Td rowspan = "2"> 3 </ td>
      <Td rowspan = "2"> 3b </ td>
  </ Tr>
  <Tr>
      <Td> 2 </ td>
  <Tr align = "center">
      <Td> 4 </ td>
      <Td> 5 </ td>
  </ Tr>
</ Table>
   Так, так - в тій комірці теж досить прописати rowspan = "2".
  А що, якщо в правій колонці нам треба три осередки?
3 січня 3b
2 3c
3d
 <Table width = "200" border = "1" cellpadding = "0" cellspacing = "0">
  <Tr>
      <Td> 1 </ td>
      <Td rowspan = "3"> 3 </ td>
      <Td> 3b </ td>
  </ Tr>
  <Tr>
      <Td rowspan = "2"> 2 </ td>
      <Td> 3c </ td>
  </ Tr>
  <Tr>
      <Td> 3d </ td>
  </ Tr>
</ Table>
 
  Читаємо код: Осередок 1 (звичайна)> осередок 3 (складається з трьох злитих воєдино рядків)> осередок 3b (теж звичайна); тут у нас починається другий рядок. Починається вона з осередку №2, що позначається як "осередок, що складається з двох рядків, тобто злитих по вертикалі осередків", а осередки 3с і 3d - абсолютно звичайні комірки. Для упрочщенія розуміння рядки в таблиці на прикладі позначені різними тонами, тобто кожен тон відповідає рядку. Це трохи складно усвідомити з наскоку, але це досить важливо - розуміти черговість зчитування та принцип побудови, так що напружтеся і постарайтеся: 0) Від глибини розуміння процесу залежатиме вміння користуватися всіма перевагами таблиць, а не 10-15% якими користується більшість.
   Якщо ж у нас є в наявності яейкі, суміщені по горизонталі, то замість тега rowspan використовується тег colspan, естетсвенно, в тій комірці, яка займає площу декількох.):
1
2 Березня
   Так само слід окремо запам'ятати, що параметри, що вставляються в тег відкриття рядки (<tr>) IE не сприймаються !!! Ось, не хоче він їх бачити і враховувати і все тут! Некотрие бачить, а деякі - ні в яку. Тому призначати теги будемо тільки самим осередкам або всієї таблиці відразу.
    Розглянемо, як задаються розміри таблиць:
   Ми можемо задати ширину всієї таблиці в цілому єдиної цифрою. Це може бути, як 100% (тобто від краю до краю доступного простору), так і чітка ширина в пікселях (на прикладі - 200):
У коді це пишеться так:
<Table width = "200" border = "1" cellpadding = "0" cellspacing = "0"> Або так:
<Table width = "100%" border = "1" cellpadding = "0" cellspacing = "0">
За замовчуванням * (тобто якщо у значенні ширини після цифри не йде знак відсотка (%)), число, вказане в лапках, буде розцінюватися як пікселі. Головна відмінність в тому, що якщо розмір вказаний жорстко, у точках, то при звуженні вікна таблиця "упреться" краями в тег, в який вона вкладена і не дасть йому "звузитися", якщо той має ширину, задану відносно, тобто у відсотках від доступної ширини. Для більшої наочності розгляньте цей приклад.
ширину ми задаємо, вставляючи в тег початку таблиці параметр
width = "число ширини (можна у відсотках)"
так само можна задати і вертикальний розмір -
height = "число ширини (тільки в пікселях!)"
  Майте на увазі, що звужує таблиця розтягується по вертикалі. І цим треба користуватися. НЕ потрібно намагатися підігнати текст під жорстко-фіксовану таблицю - це ламерізм. У таблиці є кілька видів вирівнювання вмісту щодо країв таблиць:
align = "left" align = "middle" align = "right"
valign = "top" valign = "middle"
align = "center" valign = "bottom"
align = "right"
в кожному осередку зазначений тип застосованого в ній вирівнювання, але крім них існує ще й параметр justify. Це вирівнювання по ширині з обох країв. На більшості сторінок причому, що дивно, навіть на тих, які роблять здавалося б професійні команди, присутній такий ламерізм як відсутність вирівнювання по правому краю:
... В кожній комірці вказано тип застосованого в ній вирівнювання, але крім них існує ще й параметр justify.
  Це вирівнювання по ширині з обох країв. На більшості сторінок причому, що дивно, навіть на тих, які роблять здавалося б професійні команди, присутній такий ламерізм як відсутність вирівнювання по правому краю:
зверніть увагу на правий край - нерівно, неохайно, некрасиво ... і читати противно якщо це вибудувано парою-трійкою стовпців, як у багатьох інтернет "газет" і "журналів". Здавалося б - ну і подумаєш?!. проте швидкість і простота сприйняття реально вище, коли око перескакує на початок наступного рядка з завжди однакового місця, ніж коли рядки закінчуються +/- 1 см від краю. Особливо це стосується великих і довгих текстів.
  Саме тому я всім раджу не забувати про цей важливий і потрібний тег. Адже і сторінка стане куди красивіше, вишикувавшись рівними стовпчиками, а не чимось на манер втратила половину зубців гребінця: 0)
тож .. теги вирівнювання. Як правильно їх прописувати і з чим вони пов'язані? Згадуємо принцип успадкування * тегів, про який йшла мова у "введенні".
  Призначаючи будь-якої частини або всієї таблиці бажане властивість, слід уявляти, як воно вплине на розташовану в таблиці інформацію:
вирівнювання про лівому краю
без параметрів
 
тег вирівнювання <centre> </ centre>, застосований на цю клітинку, на вкладену таблицю жодним чином не впливає - тільки на текст.

всередині осередку застосований
параметр "вирівнювання
справа ", але йому
протистоїть тег
рівняння по середині -
як бачимо тег
вирівнювання по центру
отримує пріоритетне
вплив, як би "забиваючи"
старший тег.
в цей же час тег рівняння на центр абсолютно не впливає на вирівнювання всередині таблиці іншої таблиці або картинки - тег <centre> </ centre> впливає тільки на текст.
 
 
застосований тег вирівнювання по Левме краю, як в комірці, так і у вигляді стандартного <centre>
на початок таблиці вставлений тег вирівнювання по правому краю.
а текст, як бачите, може і обтікати таблицю з країв, і прилягати до того краю, за яким вирівнюються.
Примітка: вікно при перегляді вищенаведеного прикладу має бути відчинене ширше - інакше вирівнювання можна не помітити (якщо вкладені таблиці упрутся в краю основної таблиці).
  За допомогою таблиць можна здійснити самий хитромудрий дизайн, розташувати вміст практично як завгодно .. Ось приклад типової організації сайту:
логотип і банер
меню
конкретно у мого сайту структура трохи складніше:
меню
1
   
банер
менюшка 2
вміст
менюшка 2
банер
   меню
3
 
   Основна таблиця з двома вертикальними роздільниками, в ній вкладено ще кілька таблиць, на малюнку вони виділенням чорною облямівкою. Вдивіться в структуру в цілому - вона поділена на вертикальні області, в яких "плавають" таблиці блоків - лівій частині, центральної частини та правій частині сторінки.
  Навіщо такі складнощі? Дуже просто - якщо зробити структуру у вигляді:
лого-тип?
банер текст текст текст текст текст текст текст
меню? вміст
  Як бачимо з прикладу, єдиної таблицею наш дизайн не вийде - адже "распирающий" одну з комірок текст спотворить весь дизайн: 0 (
   Ось саме тому і потрібно користуватися вкладеними в одну велику таблицю декількома таблицями-блоками. Крім того, це відкриває додаткові можливості по розмітці всього цього господарства.
   Наприклад у нас є кут таблиці з менюшка. Від краю треба відступити ендцать міліметрів, щоб букви не торкалися краю екрана. Як це зробити? Способів є багато.
  Наприклад, ставимо в комірці головної таблиці вирівнювання по правому краю, а в таблиці, яку туди вкладаємо, ставимо вирівнювання по лівому. Ось що у нас виходить:

логотип
1 пункт
2 пункт
3 пункт
4 пункт
5 пункт
 Ширина лівої колонки - 130 піхелей, ширина вкладеної таблиці - 110.
  В результаті маніпуляцій з вирівнюванням маємо відступ від лівого краю 20 піхелей (різницю в ширині стовпчика і вкладеної таблиці)
  Регулюємо ширину вкладеної таблиці. Чим вона ширше, тим її лівий край і, ессно, текст в ній, ближче до краю екрана.
 
пункт 1
пункт 2
пункт 3
пункт 4
пункт 5
 А можна зробити і такий ефект - теж виглядає цілком пристойно.
   Але (більш правильно!) Щоб покращити сприйняття тексту, насамперед раджу скористатися в основній таблиці відступом від країв (тег cellpadding), завдяки чому у вас залишаться елегантні поля. Щоб таблиця не псувала виду своєї рамкою, раджу основну таблицю робити "невидимої" за допомогою тега border (призначте "бордер = нуль" і рамки таблиці буде не видно). Також не забувайте користуватися тегом "justify", який, щоб не пхати його в текст безпосередньо, можна вписати в конкретний осередок - <td align = "justify"> <td>.
   Як бачимо - таблиці дозволяють зробити практично будь-який ефект, крім накладення - в цьому у шарів велику перевагу, але про них пізніше ... Власне, про таблиці на цьому не закінчується, просто інші області ставляться скоріше до маніпуляцій стилями і шарами.
   Але наостанок уточнимо всі параметри, якими можна маніпулювати в таблицях:
 
   вирівнювання: width і height - пишуться послідовно або поодиноко. Транскрипція приблизно <td width = "число" height = "число"> </ td>
Параметри задаються цілим числом, або ж цілим числом з%, тобто = "100%" - вирівняти по ширині від стінки до стінки.
           
      
      
 <Table width = "100" border = "0" height = "100" cellspacing = "4" cellpadding = "0" bgcolor = "# 999999">
<Tr bgcolor = "# CCCCCC">
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
</ Tr>
<Tr bgcolor = "# CCCCCC">
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
</ Tr>
<Tr bgcolor = "# CCCCCC">
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
</ Tr>
</ Table>
 
або ось так:
      
      
      
 <Table width = "100" border = "0" height = "100" cellspacing = "4" cellpadding = "0" bgcolor = "# 999999">
<Tr bgcolor = "# CCCCCC">
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
</ Tr>
<Tr bgcolor = "# CCCCCC">
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
</ Tr>
<Tr bgcolor = "# CCCCCC">
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
<Td> & nbsp; </ td>
</ Tr>
</ Table>

цікаво, да? Тепер уточнимо значення використаних тегів:
bgcolor = "код з шести цифр виду # 000000" - задає фон комірці, або таблиці - залежно, куди вставлений цей параметр.
bordercolor = "# FFFFFF" - колір бордюру (рамки)
  Ну і про маніпуляції з cellspacing і cellpadding не забуваємо: 0) поваріюруйте їх розміри.      
  Такий спосіб куди простіший, ніж підставляння картинок - адже всяко меншу кількість коду HTML, ніж у найменшій картинці. Правда є один нюанс - все раз завантажені з сайту картинки кешируются у вас в комп'ютері і якщо, наприклад, таких картинок-куточків у вас добрий десяток, це не означає, що одна і та ж картинка буде грузиться десять разів. Навпаки, вона завантажиться одного разу і розставити по всіх потрібних місцях. З таблицею це реалізувати куди складніше, особливо, якщо ваш хостинг не має ні SSI ні PHP. Так що взагалі-то в більшості випадків простіше все-таки користуватися картинками зі сторонами піскселов по 5-10.
  Так, ще дрібна, але корисна фіча - наприклад, нам потрібно вписати текст одним рядком, і щоб таблиця підлаштувалася під ширину цієї самої рядка. Але найчастіше, якщо у таблиці не визначений розмір або визначений свідомо менший, ніж у вашій рядки, цю саму рядок бродилка перенесе в другу. Щоб не дозволити такого перенесення, потрібно в тег комірки вставити слово nowrap. Ніяких параметрів йому прописувати не потрібно, просто виділити з обох боків пропусками. Рядок в такій комірці буде завжди пряма. Пам'ятайте тільки, що вона буде "розпирати" дизайн при спробі стиснути вікно до більш вузьких розмірів. Раджу перевірити, як це буде виглядати і пам'ятати про цей нюанс.