WEB-нотатки - записник он-лайн

Нічого складного тут немає, так в чому ж підступ? По-перше, в параметрах. Не всі параметри варто застосовувати, так само, як і не всі параметри з тих, що варто було б, ми застосовуємо. Так, наприклад, для тега TR не обов'язково застосування параметрів вирівнювання. З тегами TR, TD і TH може не застосовуватися параметр WIDTH, проте він дуже важливий, тому що впливає на відповідність розташування осередків в таблиці щодо один одного і таблиці в цілому. 

Таким чином, створюючи таблицю, необхідно вказати ширину самої таблиці (а іноді і її висоту - для "стрункості" дизайну), ширину рядка і осередки/осередків, горизонтальне вирівнювання таблиці і осередки, а також відстань між осередками і відступи в осередках. При цьому ширина кожної клітинки в рядку, якщо їх декілька, повинна бути відповідно вказана так, щоб їх сума відповідала ширині рядка. Однак якщо вказати ширину осередків, а опустити ширину рядка, то може з'явитися неприємний ефект - "з'їдання" об'єктів (наприклад, кнопок HTML), розташованих в осередках. 

При побудові таблиць з об'єднаними осередками не можна пропускати параметр COLSPAN, присутній в осередках заголовка та укладення таблиці. Він застосовується, коли осередків у рядках більше однієї і вказує, на ширину скількох колонок розтягнеться цей осередок. Параметр, аналогічний йому і що стосується кількості "перекритих" рядків, називається ROWSPAN. Пропуск цих параметрів, там, де вони необхідні, є дуже частою помилкою і приводить до спотворення одержуваного в браузері зображення. 

Окрім основних параметрів, в табличних тегах можуть застосовуватися додаткові, які особливо не впливають на правильне форматування таблиці. Це стандартні HTML-параметри фонового кольору, кольору рамки (основний, "світлої" і "темної"), параметри STYLE і CLASS каскадних таблиць стилів.

По-друге, підступ полягає в самих таблицях. У їх жорсткої структурі. При "розтягуванні" таблиці змінюється і вид інформації укладеної в клітинку. Вихід з цієї ситуації один - метод "матрьошки". Таблиці можна просто вкладати одна в іншу і тоді інформація буде залежати тільки від розміру і формату клітинок, в яких вона знаходиться, але не буде залежати від розміру і формату основної таблиці в цілому.

Таблиці і графіка.

Таблиці є незамінним інструментом будь-якого Web-дизайнера для розміщення графіки на сторінці. Так, використовуючи таблицю, можна згрупувати окремі графічні файли, які виконують самостійні функції, в закінчену зображення, наприклад заголовок. Однак, розміщення графіки в елементах таблиці теж може супроводжуватися вчиненням цілої низки помилок.

Однією з найбільш поширених помилок є вставка малюнка в клітинку таблиці без вживання параметра вирівнювання тега <IMG>. Власне, коли малюнок розташований в клітинці один і не супроводжується ні текстом, ні будь-якими іншими об'єктами, це не важливо. В іншому випадку, відсутність вирівнювання стає помітним і може зіпсувати весь дизайн. Справа в тому, що тег малюнка (зображення) не буде наслідувати параметрів вирівнювання осередку, він тільки підкоряється їм, як будь-який інший об'єкт у клітинці. Тому, наприклад, при будь-якому вирівнювання у комірці, текст обов'язково "піде" під зображення. Але ви ж хочете, щоб текст його "обтікав"? У даному випадку, необхідно вказати в тезі IMG параметр вирівнювання ALIGN рівний LEFT або RIGHT. Тоді зображення буде м'яко оточене текстом. 

Також має сенс вказати параметри вертикального і горизонтального відступів від зображення VSPACE і HSPACE, так як відступи, задані для клітинки також не успадковуються. У деяких випадках, необхідно, щоб частина тексту виводилася збоку від зображення, а решта йшла під нього. При цьому, поділ повинен бути дуже добре помітний. У цьому випадку, використовуються два варіанти. Або в тезі <BR> використовується параметр CLEAR=LEFT або CLEAR=RIGHT відповідно, і в цьому випадку частина тексту після тега <BR> буде йти під зображення, а у вирівнюванні останнього можна використовувати властивість MIDDLE, або, використовуючи, знову таки, табличні осередку, помістити зображення в одну, "бічний" текст до сусідньої, а "нижній" - відповідно, в клітинку, розташовану в нижчестоячому рядку і розгорнуту на всю цю строку (COLSPAN=2). Зрозуміло, останній спосіб громіздкий, зате гарантовано, що подібне розміщення правильно інтерпретує будь-який браузер, що розуміє таблиці. 

Розповсюдженою помилкою є невідповідність розмірів комірок з розмірами вставляється зображення. Це небезпечно, коли розміри зображення перевищують розміри осередку. У цьому випадку осередок безжально розтягується, що, безумовно, впливає на розташування сусідніх елементів на сторінці. Наприклад, використання графічної лінії як розділової риси, замість <BR>, без узгодження з розмірами осередку-«носія», може призвести до викривлення розмірів всієї таблиці. 

І ще один момент. Фон клітинки можна задати помістивши всередині неї картинку, але набагато практичніше використовувати параметр BACKGROUND. У цьому випадку ми можемо вставити в одну клітинку два різних самостійних зображення, один поверх іншого, створивши ілюзію їх пошарового розміщення. Одне буде задано параметром BACKGROUND тега <TD>, а інше тегом <IMG>. Треба тільки не забути, що розміри осередку повинні збігатися з розмірами зображення (тоді не з'явиться ефект "розмноження" картинки або її "обрізання"), розміщеного в фон, а самостійне зображення повинне бути значно менше фонового, інакше втрачається весь сенс подібного дизайну. 

Таким же чином можна групувати зображення і текст, що корисно при дизайні, наприклад, посилань (тільки в цьому випадку шрифт повинен бути фіксованої величини). Корисно це і просто при використанні до великих закінчених зображень (наприклад, групових фотографій) як фон ...