АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

ТЕОРЕТИЧНА ЧАСТИНА

Читайте также:
  1. VІІІ. Теоретична база
  2. Б) Змістовна частина тестових завдань.
  3. Вступ Основна частина Висновки ПИТАННЯ-
  4. Графічна частина
  5. Графічна частина
  6. Графічна частина курсового коректу
  7. ГРАФІЧНА ЧАСТИНА ПРОЕКТУ
  8. Графічна частина.
  9. Графічна частина:_____________________________________________________
  10. Допит потерпілого проводиться з дотриманням правил, передбачених частинами другою, третьою, п'ятою - чотирнадцятою статті 352 цього Кодексу.
  11. ДОХОДНА ЧАСТИНА БЮДЖЕТУ ЗМІЇВСЬКОГО РАЙОНУ
  12. ЕКСПЕРИМЕНТАЛЬНА ЧАСТИНА

1. Основи роботи з таблицями

Таблиці є дуже зручним засобом форматування даних на Web-сторінці. Основна зручність полягає в тому, що браузер виконує функцію креслення рамки таблиці. Розмір рамки може бути автоматично погоджений з розміром вікна перегляду у браузері і, зрозуміло, з розміром таблиці рядків тексту і малюнків, що знаходиться в ячейках. Крім того, таблиці дозволяють вирішувати чисто дизайнерські завдання: вирівнювати частини сторінки один відносно одного, розміщувати поруч малюнки і текст, управляти кольоровим оформленням і так далі. При створенні таблиць використовується принцип вкладення: усередині основного елементу таблиці (<TABLE>) створюється ряд елементів, що визначають рядки (<TR>), а усередині цих елементів розміщуються елементи для опису кожного ячейки в рядку (<TD>, <TН>):

< TABLE>
< TR> < TD> </ TD> < TD> </ TD> </ TR>
< TR> < TD> </ TD> < TD> </ TD> </ TR>
< TR> < TD> </ TD> < TD> </ TD> </ TR>

</ 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>
<TR> < TD colspan=4> </TD> </TR>
<TR> <TD> </TD> <TD> </TD> </TR>
<TR> <TD> </TD> <TD> </TD> </TR>

</ TABLE>

Атрибут rowspan

Атрибут rowspan=n визначає, скільки табличних рядків (n) займе ячейка в межах стовпця:

< TABLE>
<TR> < TD rowspan=2> </TD> </TD> <TD> </TD> </TR>
<TR> </TD> <TD> </TD> </TR>
<TR> <TD> </TD> <TD> </TD> </TR>

</ TABLE>


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 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |

Поиск по сайту:



Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.008 сек.)