 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
ТЕОРЕТИЧНА ЧАСТИНА
1. Основи роботи з таблицями
Таблиці є дуже зручним засобом форматування даних на Web-сторінці. Основна зручність полягає в тому, що браузер виконує функцію креслення рамки таблиці. Розмір рамки може бути автоматично погоджений з розміром вікна перегляду у браузері і, зрозуміло, з розміром таблиці рядків тексту і малюнків, що знаходиться в ячейках. Крім того, таблиці дозволяють вирішувати чисто дизайнерські завдання: вирівнювати частини сторінки один відносно одного, розміщувати поруч малюнки і текст, управляти кольоровим оформленням і так далі. При створенні таблиць використовується принцип вкладення: усередині основного елементу таблиці (<TABLE>) створюється ряд елементів, що визначають рядки (<TR>), а усередині цих елементів розміщуються елементи для опису кожного ячейки в рядку (<TD>, <TН>):
< TABLE>
</ TABLE> |
Щоб розібратися в структурі існуючої таблиці або створити нову, необхідно пам'ятати, що послідовність елементів описує таблицю зверху вниз і справа наліво. Наприклад, після елементу <TABLE> вказаний елемент <TR>, це означає, що почитається опис нового рядка таблиці. Усе, що розташовано за цим елементом, буде розміщено в одному рядку (справа наліво). Це може бути послідовність елементів <TD> (ячеєк), інша таблиця і так далі. Після того, як зустрічається новий елемент <TR>, починається опис наступного рядка, і так далі до кінця таблиці (тегу </TABLE>):
| <HTML> <HEAD> <TITLE>Таблица </TITLE> </HEAD> <BODY> <TABLE border=1> <TR> <TD>(1,1)</TD> <TD>(1,2)</TD> </TR> <TR> <TD>(2,1)</TD> <TD>(2,2)</TD> </TR> <TR> <TD>(3,1)</TD> <TD>(3,2)</TD> </TR> </TABLE> </BODY> </HTML> |
|
< TABLE>...</TABLE>
Зовнішній елемент таблиці дозволяє задавати загальні властивості таблиці і відділяє структуру таблиці від іншої частини Web-сторінки. Більшість його атрибутів можуть використовуватися і в інших елементах таблиці.
Атрибути <TABLE>.</TABLE>
| Атрибут | Значення | Опис |
| align | Left, right, center | Вирівнювання по горизонталі |
| width | Число або відсоток | Ширина таблиці |
| cellpadding | число | Відстань між вмістом ячейки і рамкою |
| cellspacing | число | Відстань між елементами таблиці |
| bgcolor | колір | Колір фону таблиці |
| background | колір | Фонова картинка |
| border | число | Товщина ліній рамки |
| bordercolor | колір | Колір ліній рамки |
| bordercolordark | колір | Колір рамки (знизу і справа) |
| bordercolorlight | колір | Колір рамки (згори і ліворуч) |
| frame | void, above, below, hsides vsides, lhs, rhs, border, box | Вид рамки таблиці |
| rules | none, rows, cols, all | Вид сітки усередині таблиці |
Атрибут align
Цей атрибут дозволяє визначати положення таблиці по відношенню до сусідніх елементів документу, тобто має для таблиць той же сенс, що і для картинок.
| align=left - вирівнювання ліворуч align=center - вирівнювання по центру align=right - вирівнювання справа |
Атрибут width
Задає ширину таблиці. Якщо атрибут не заданий, браузер малює таблицю мінімальних розмірів навколо даних, які вона містить. Запис width =число примушує браузер малювати таблицю шириною у вказане число пікселів. Якщо реально для таблиці потрібно більше місця, значення width ігнорується. Якщо заданий розмір відводить таблицю за правий кордон вікна, браузер додає до вікна горизонтальну лінійку протягання.
Намагайтеся формувати вікно документу таким чином, щоб горизонтальне протягання не з'являлося. По-перше, лінійка протягання зменшує корисний розмір вікна, по-друге, погіршує сприйняття документу і дратує користувача.
Можна також задавати ширину таблиці в процентному відношенні до ширини вікна браузеру: відсоток (наприклад: width =90%).
Атрибути cellpadding і cellspacing
Перший атрибут задає відстань між рамкою таблиці і вмістом ячейки, тобто розмір порожнього простору, що оточує дані в ячейках:
| cellpadding=число пікселів cellpadding=відсоток |
Завдання цього атрибуту робити ячейки більше. Між рамкою і даними завжди зберігається певна відстань. В деяких випадках це дозволяє поліпшити сприйняття таблиці, зробити текст в ячейках легко читаним.
Атрибут cellspacing задає відстань між рамками сусідніх ячеєк (ширину фронтальної грані рамки). Якщо значення цього атрибуту дорівнює нулю, рамка виходить тонкою, загостреною.
Коли атрибути не задані, браузер встановлює їх по режиму умовчання, зазвичай: cellpadding =1 і cellspacing =2.
Приклад:
Атрибути bgcolor і background
Якщо атрибути не задані, елементи виводяться прямо на фон документу і таблиця виглядає прозорою. Атрибут bgcolor задає колір фону таблиці, а атрибут background - паркетне укладання картинкою.
Приклад:
Атрибути border і bordercolor
Перший атрибут визначає товщину рамки навколо усієї таблиці, другий – її колір. Якщо border =0, то рамка і прямокутники клітин, не рисуються.
Приклад:
Атрибути bordercolordark і bordercolorlight
Браузер Netscape Navigator ці атрибути не підтримує. У Microsoft Internet Explorer вони дозволяють при необхідності намалювати на екрані об'ємну рамку. Перший задає колір її нижньої і правої сторони, другий - лівої і верхньої. Якщо необхідно намалювати рамку плоскою (одноколірною), то ці атрибути не задаються.
Приклад:
Атрибут frame
Використовується тільки для елементу <TABLE> і дозволяє задати вид рамки таблиці:
frame =параметр
Існують наступні стандартні параметри:
| frame=void – рамка відсутня; frame=above – верхня сторона рамки; frame=below – нижня сторона рамки; frame=hsides – частини рамки згори і знизу; frame=vsides – частини рамки ліворуч і справа; frame=lhs – ліва частина рамки; frame=rhs – права частина рамки; frame=border – рамка показана повністю; frame=box – значення повторює frame=border. | |||
| 
| 
| 
|
| 
| 
| 
|
Атрибут rules
Визначає вид сітки таблиці усередині, тобто між ячейками:
| rules=none – сітка відсутня; rules=rows – горизонтальні лінії між рядками; rules=cols – вертикальні лінії між колонками; rules=all – звичайна сітка. |
Приклад:
| 
| 
| 
|
Атрибути <TR>...</TR>
Використовуючи атрибути команди <TR>, можна встановити ті або інші властивості одночасно для усіх ячеєк рядка.
| Атрибут | Значення | Опис |
| align | left, center, right | Вирівнювання по горизонталі |
| valigh | top (верхній край), middle (центр), bottom (нижній), baseline (по самому верхньому текстовому рядку) | Вирівнювання по вертикалі |
| bgcolor | колір | Колір фону |
| bordercolor | колір | Колір ліній рамки |
| bordercolordark | колір | Колір рамки (знизу і справа) |
| bordercolorlight | колір | Колір рамки (згори і ліворуч) |
Атрибут align
Горизонтальне вирівнювання. Якщо атрибут не заданий, вміст ячеєк вирівнюється по лівому краю межі ячейки.
Атрибут valign
Вертикальне вирівнювання вмісту ячеєк. Приймає наступні значення:
| valign=top - вирівнює по верхньому краю ячейки; valign=bottom - вирівнює по нижньому краю ячейки (не завжди працює); valign=center - вирівнює по центру; valign=baseline - вирівнює по першому рядку. |
Атрибут bgcolor
Якщо атрибут не заданий, ячейки виводяться на фон, встановлений для таблиці, або на фон документу, якщо фон таблиці не заданий. Дозволяє задати власний фоновий колір для усіх ячеєк в рядку.
Атрибути <TD> (<TH>)
Кожен табличний рядок складається з ячеєк, які послідовно описуються командами <TD> (звичайна ячейка) і або <TH> (ячейка заголовку).
Вміст звичайної ячейки за умовчанням вирівнюється по лівому краю, ячейки-заголовку – по центру. Крім того, текст в ячейки-заголовку виділяється напівжирним шрифтом.
| Атрибут | Значення | Опис |
| align | Left, right, blееdleft (притискує вміст ячейки впритул до лівого краю) | Вирівнювання по горизонталі |
| valign | Top, middle, bottom, baseline | Вирівнювання по вертикалі |
| width | Число або відсоток | Ширина ячейки |
| bgcolor | колір | Колір фону |
| background | колір | Фонова картинка |
| border | число | Товщина ліній рамки |
| bordercolor | колір | Колір ліній рамки |
| bordercolordark | колір | Темний колір рамки (знизу і справа) |
| bordercolorlight | колір | Світлий колір рамки (згори і ліворуч) |
| nowrap | Виключення автоматичного розриву рядку | |
| colspan | Визначає скільки табличних стовпців (n) займе в межах рядка | Ширина великого ячейки в стовпцях |
| rowspan | Визначає скільки рядків (n) займе в межах стовпця | Висота великого ячейки в рядках |
Атрибути для тегу <TD> (<TH>), що співпадають з атрибутами тегу <TR>, мають той же сенс, але відносяться не до рядка, а до окремої ячейки.
Атрибути width і background мають той же сенс, що і для тегу <TABLE>, але відносяться до окремої ячейки. Наявність у тегу <TD> (<TH>) атрибуту background означає, що кожна ячейка може мати свою власну фонову картинку (навіть якщо для усієї таблиці в цілому фонова картинка вже вказана).
Атрибут nowrap
Зазвичай абзац форматується браузером в клітині таблиці так само, як і на повному вікні, тобто, коли чергове слово не поміщається в рядку, воно разом із залишком абзацу переноситься на наступну. І так відбувається до тих пір, поки увесь текст не буде розміщений браузером у віконні рядки. Отриманий абзац видно на екрані по ширині цілком і не вимагає горизонтальної прокрутки, навіть якщо він дуже довгий.
Атрибут nowrap (у нього немає привласнюваних значень) забороняє браузеру виконувати описане вище автоматичне форматування. На довгих абзацах і невеликих розмірах вікна прийом змушує браузер показувати горизонтальну лінійку прокрутки.
Горизонтальна прокрутка не сприяє поліпшенню комфорту для користувача, тому застосування атрибуту nowrap обмежується спеціальними (і досить рідкісними) випадками.
Атрибут colspan
Атрибут colspan =n визначає, скільки табличних стовпців (n) займе ячейка в межах рядку:
< TABLE>
</ TABLE> |
Атрибут rowspan
Атрибут rowspan=n визначає, скільки табличних рядків (n) займе ячейка в межах стовпця:
< TABLE>
</ TABLE> Поиск по сайту: |
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.01 сек.) |