Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Теги таблиці, рядка і комірки, теги заголовків таблиць. Логічне форматування таблиць.

Поиск

Таблиця – один з найважливіших інструментів для створення web-сторінок.

Навіть без використання CSS, тільки за допомогою таблиць можна створювати сторінки зі складним дизайном.

Будь-яка таблиця – це набір рядків та стовпчиків.

з точки зору HTML:

сама таблиця задається за допомогою тегів <table> </table>,

у таблиці є назва – тег <caption> </caption>,

таблиця складається з рядків – теги <tr> </tr>,

кожен рядок складається із стовпців – теги <td> </td>,

стовпці мають назви, розташовані в першому рядку – теги <th> </th>.

Створимо таблицю, де в якості вмісту вкажемо перетин номерів рядків і стовпців,
ось основний код, з яким ми будемо працювати:

<body>

<table>

<caption> Назва таблиці </caption>

<tr> <th> 1 </th> <th> 2 </th> <th> 3 </th> </tr>

<tr> <td> a/1 </td> <td> a/2 </td> <td> a/3 </td> </tr>

<tr> <td> b/1 </td> <td> b/2 </td> <td> b/3 </td> </tr>

<tr> <td> c/1 </td> <td> c/2 </td> <td> c/3 </td> </tr>

</table>

</body>

 

Для цього у тега <table> існує ряд параметрів:

width – задає ширину таблиці (в пікселах або % від ширини екрану),

bgcolor – задає колір фону комірок таблиці,

background – заливає фон таблиці малюнком,

border – задає рамку зазначеної ширини (у пікселях) навколо всієї таблиці,

cellpadding – задає відступ в пікселях між межею клітини і її вмістом.

align – задає вирівнювання таблиці: зліва (right), праворуч (left), по середині (center),

cellspacing – задає відстань між осередками таблиці (у пікселях),

cellpadding – задає відстань між текстом і внутрішнім краєм осередка таблиці (у пікселах).

Взагалі, за краї відповідають два параметри:

frame – задає вид рамки навколо таблиці і може приймати такі значення:

void – рамки немає,

above – тільки верхня рамка,

below – тільки нижня рамка,

hsides – тільки верхня і нижня рамки,

vsides – лише ліва та права рамки,

lhs – тільки ліва рамка,

rhs – тільки права рамка,

box – всі чотири частини рамки.

rules – задає вигляд внутрішніх країв таблиці і може приймати такі значення:

none – між осередками немає країв,

groups – межі лише між групами рядків та групами стовпців (будуть розглянуті трохи пізніше),

rows – межі лише між рядками,

cols – межі тільки між стовбцями,

all – відображати всі межі.

Слід зауважити, що межі в різних браузерах можуть відображатися по-різному.

HTML теги <tr> і <td>

Таблиці формуються порядково. Тому, задані в рядку (<tr>) параметри поширюють свою дію на всі комірки (<td>) рядка. У рядків можна використовувати три параметри:

align – вирівнює текст в осередках горизонтально, може мати такі значення:

right – ліворуч,

left – праворуч,

center – по середині,

valign – вирівнює текст в осередках по вертикалі, може мати значення:

top – вгору,

bottom – вниз,

middle – по центру,

bgcolor – задає колір рядка.

Ці ж параметри можна застосовувати і до окремих осередків, тобто до будь-якого тегу <td>, дія поширюватиметься тільки на сам осередок.

Але до комірок можна застосовувати ще два параметри:

width – задає ширину шпальти (у пікселях або у відсотковому співвідношенні, де за 100% приймається ширина таблиці),

height – задає висоту комірки, причому всі клітинки в цьому рядку стануть цієї ж висоти.

Слід зазначити, якщо не задавати ширину і висоту, то таблиця буде формуватися по вмісту.

 

Основні поняття CSS, їх призначення та використання при форматування HTML-документа.

Каскадні таблиці стилів (Cascading Style Sheets) — спеціальна мова, що використовується для опису сторінок, написаних мовами розмітки даних.

Найчастіше CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів.

Основним поняттям CSS є стиль - набір правил оформлення і форматування, який може бути застосований до різних елементів сторінки.
У стандартному HTML для присвоєння елементу певних властивостей (таких, як колір, розмір, розташування на сторінці і т. д.) доводилося кожного разу описувати ці властивості, навіть якщо на одній сторінці повинно розташовуватися десятки однакових елементів.

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

 

Способи застосування CSS.

Застосувати таблицю стилів до HTML-документу можна трьома способами:
• застосувати зовнішні стилі (у вигляді окремого текстового. css-файлу) за допомогою елементу link

<link rel="stylesheet" type="text/css" href="mystyle.css" media="all" />

Зустрівши в HTML-документі цей тег, браузер завантажить з сайту CSS-файл (у нашому випадку це mystyle.css) і застосує до документа стилі, що містяться в ньому. Файл не повинен містити нічого, крім CSS-інструкцій. Зовнішній файл зі стилями зручний тим, що одні й ті ж стилі можна застосовувати до множини документів на сайті - в кожному з них достатньо лише вписати один рядок з елементом link.
• вбудувати стилі безпосередньо в HTML-документ (у вигляді блоку css-тексту) за допомогою елемента style

<style type="text/css">
...
</ style>

Сам тег style (на відміну від link) може знаходитися в будь-якій частині документа, але звичайно його розміщують всередині елемента head.
• застосувати inline-стиль, тобто призначити стиль конкретному HTML-елементу безпосередньо в документі, за допомогою HTML-атрибуту style

Іноді потрібно призначити стиль окремого елементу на сторінці, не застосовуючи зовнішніх стилів і елемента style. Типовий випадок - елемент зустрічається один раз в документі або на сайті, але вимагає особливого оформлення. Скористаємося атрибутом style (саме атрибутом елементів, а не елементом!):

<p style="color: red">
Я абзац, виділений червоним кольором, інших таких на сайті немає
</p>
Атрибут style є у всіх HTML-елементів, що розташовуються в елементі body. Усередині атрибуту style можна написати кілька CSS оголошень, розділених крапкою з комою, фігурні дужки не використовуються.



Поделиться:


Последнее изменение этой страницы: 2016-08-10; просмотров: 957; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.140.197.140 (0.005 с.)