Як бачимо із прикладу, для того щоб задати кольори в цілому стовпці, необхідно встановити його в кожній комірці цього стовпця.
Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







Як бачимо із прикладу, для того щоб задати кольори в цілому стовпці, необхідно встановити його в кожній комірці цього стовпця.





Інший вигляд має справа при роботі з кольорами рядка – досить вказати кольори тегу рядка <TR>.

Наприклад, проілюструємо дії атрибута BGCOLOR команди <TR>.

 
 
<TABLE BORDER=0 CELLSPACING=0> <CAPTION> Протилежності </CAPTION> <TR GCOLOR=FFCCFF> <TD> Так </TD> <TD> Ні </TD> </TR> <TR BGCOLOR=CCFFCC> <TD> Гарячий </TD> <TD> Холодний </TD> </TR> <TR BGCOLOR=FFCCFF> <TD> М'який </TD> <TD> Твердий </TD> </TR> <TR BGCOLOR=CCFFCC> <TD> Добрий </TD> <TD> Злий </TD> </TR> </TABLE>


Зауваження. При оформленні таблиць іноді виникає необхідність задати фонову картинку для комірки таблиці. У таких випадках вдаються до допомоги стилів:

<TD STYLE="BACKGROUND-IMAGE:URI;">

Атрибут BACKGROUND для тегу <TD> не рекомендований стандартами HTML і не підтримується деякими браузерами, наприклад у браузері Opera.

Робота над складними таблицями

Розглянемо це питання на такому прикладі. Необхідно створити складну таблицю вигляду:

Теги HTML таблиць
Тег Атрибут Значення Примітка
<TABLE> None Початок таблиці
<TR> None Початок рядка
<CAPTION> None Заголовок таблиці
<TH> ColSpan Ширина (у стовпцях)
RowSpan Висота (у рядках)
Align Вирівнювання
<TD> ColSpan Ширина (у стовпцях)
RowSpan Висота (у рядках)
Align Вирівнювання

При створенні таких таблиць (з великою кількістю довільно об'єднаних по вертикалі й горизонталі комірок) корисно дотримуватися такої послідовності кроків:

Накреслити схему таблиці.

Провести до кінця пунктирними лініями ті перегородки, які не доходять до границь таблиці.

Написати HTML-код таблиці, уявивши, що пунктирні лінії – суцільні.

Вміст, параметри фону й вирівнювання комірок з пунктирними лініями прописати в тій комірці, що перебуває зверху та ліворуч.



5 Додати в <TD> кожної такої комірки атрибути ROWSPAN й COLSPAN з параметрами, що дорівнюють кількості комірок, які поєднуються по вертикалі й горизонталі відповідно.

6 Видалити порожні пари <TD></TD>.

Розглянемо HTML-код складної таблиці:


<TABLE BORDER=1>

<CAPTION>Теги HTML таблиць</CAPTION>

<TH>Тег</TH><TH>Атрибути</TH>

<TH>Значення</TH> <TH>Примітки</Th>

<TR> <TD>&ltTABLE&gt</TD>

<TD>NONE</td>

<TD COLSPAN=2 ALIGN=RIGHT> Початок таблиці </TD>

<TD></TD>

</TR>

<TR><TD>&ltTR&gt</TD>

<TD>NONE</TD>

<TD COLSPAN=2 ALIGN=RIGHT> Початок рядка </TD>

<TD></TD>

</TR>

<TR><TD>&ltCAPTION&gt</TD>

<TD>NONE</TD>

<TD COLSPAN=2 ALIGN=RIGHT> Заголовок таблиці </TD>

<TD></TD>

</TR>

<TR><TD ROWSPAN=3>&ltTH&gt</TD>

<TD>Colspan</TD>

<TDCOLSPAN=2 ALIGN=RIGHT> Ширина в стовпцях</TD>

<TD></TD>

</TR>

<TR><TD></TD>

<TD>Rowspan</TD>

<TD COLSPAN=2 ALIGN=RIGHT> Висота в стовпцях </TD>

<TD></TD>

</TR>

<TR><TD></TD>

<TD>Align</TD>

<TD COLSPAN=2 ALIGN=RIGHT> Вирівнювання в комірці </TD>

<TD></TD>

</TR>

<TR><TD ROWSPAN=3>&ltTD&gt</TD>

<TD>Colspan</TD>

<TD COLSPAN=2 ALIGN=RIGHT>Ширина в стовпцях</TD>

<TD></TD>

</TR>

<TR><TD></TD>

<TD>Rowspan</TD>

<TD COLSPAN=2 ALIGN=RIGHT> Висота в стовпцях </TD>

<TD></TD>

</TR>

<TR><TD></TD>

<TD>Align</TD>

<TD COLSPAN=2 ALIGN=RIGHT> Вирівнювання в комірці </TD>

<TD></TD>

</TR>

</TABLE>

Видаливши всі підкреслені теги з HTML-коду, одержимо підсумковий код складної таблиці, що у вікні браузера буде мати такий вигляд, як показано на рисунку 28.

Рисунок 28 – Приклад складної таблиці

Зауваження Атрибут ALIGN (=RIGHT|LEFT) команди <TABLE> призначений для того, щоб задати обтікання таблиці текстом. Наприклад, нижченаведений код у вікні браузера буде мати такий вигляд, як показано на рисунку 29.

 
 
<BODY> <TABLE BORDER=1 ALIGN=RIGHT> <TR> <TD>Це - проста таблиця </TD> </TR> </TABLE> Цей текст повинен обтікати таблицю, розміщену праворуч, тому що зазначено атрибут ALIGN=RIGHT команди &ltTABLE&gt </BODY>

 

 


Рисунок 29 – Обтікання таблиці текстом

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

<DIV STYLE="ALIGN:CENTER">

<TABLE> ... </TABLE>

</DIV>

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

<TABLE WIDTH="100%" HEIGHT="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">

<TR>

<TD ALIGN="CENTER" VALIGN="MIDDLE">

Текст, картинка або таблиця в центрі екрана

</TD>

</TR>

</TABLE>

3.5.4 Елементи на рівні тексту. Фізичний і логічний стилі форматування









Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:


©2015- 2018 zdamsam.ru Размещенные материалы защищены законодательством РФ.