Кольорове оформлення таблиць
Кольорове оформлення таблиць виконують за допомогою атрибута BGCOLOR, який приймає як значення колір у вигляді назви кольору англійською мовою або у вигляді шістнадцяткового числа. Якщо потрібно встановити колір для цілої таблиці, то атрибут BGCOLOR вставляється в тег <TABLE>. Для зміни кольору лише в одному рядку цей атрибут вставляється в тег <TR>. Налаштування кольору окремої комірки забезпечується атрибутом BGCOLOR всередині тега <TD> або <TH>.
Якщо в таблиці є рамки, можна задати їх колір за допомогою таких атрибутів:
BORDERCOLOR – колір цілої рамки;
BORDERCOLORLIGHT – колір світлої частини рамки;
BORDERCOLORDARK – колір темної частини рамки.
Ці атрибути вставляються в тег <TABLE>. Щоб вони працювали, необхідно, щоб був присутній ще й атрибут BORDER, що задає ширину рамки. Розглянемо ще один приклад з використанням управління дизайном таблиці, в якому використовується налаштування кольорів.
<HTML> <TITLE> Приклад керування кольором </TITLE>
<BODY>
<TABLE BGCOLOR="#F0F0F0" BORDER=10 BORDERCOLOR="#808080" BORDERCOLORLIGHT ="#99CCFF" BORDERCOLORDARK="#9900FF">
<TR BGCOLOR=lightblue>
<TH COLSPAN="3"> Групи</TH>
</TR>
<TR>
<TD BGCOLOR=pink>МТ 11 </TD>
<TD BGCOLOR=cyan>МТ 21 </TD>
<TD BGCOLOR=plum>МТ 31 </TD>
</TR>
</TABLE>
</BODY> </HTML>
Якщо необхідно задати шрифт всередині комірок таблиці, то це можна зробити за допомогою тега FONT всередині відповідних тегів <TD>. Наприклад, <TD BGCOLOR=magenta> <FONT COLOR=pink> Текст</FONT></TD>.
Розмітка веб-сторінок за допомогою таблиць
При відображенні веб-сторінок браузером елементи вміщуються на екрані один за одним в тому порядку, в якому вони записувались у HTML-документі. Для позиціонування елементів існують спеціальні засоби мови HTML. Проте часто з цією метою використовують таблиці. Для цього веб-сторінку розбивають на комірки з прозорими границями і вміщають різні елементи в різні комірки на свій розсуд. Елементи можна розташовувати як по горизонталі, так і по вертикалі в межах деякої області. Це дозволяє економити місце або ефектно розподіляти елементи на сторінці.
Комірки таблиці можна заповнювати не тільки текстом, але й вміщувати зображення, в комірку таблиці можна вмістити іншу таблицю, вставити рухому стрічку. Текст або зображення всередині комірки може бути гіперпосиланням. Наприклад,
<TD><A HREF=”11b.HTML”> 11-Б </A></TD>
Приклад
Виконати таблицю засобами мови HTML відповідно до заданої схеми таблиці. У комірки таблиці помістити короткі текстові повідомлення, наприклад, надрукувати назву кольору тла комірки.
<HTML> <TITLE> Приклад створення таблиці</TITLE>
<BODY>
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2 BGCOLOR=brown WIDTH=60%> brown </TD>
<TD ROWSPAN=2 BGCOLOR=blueviolet>blueviolet </TD>
</TR>
<TR>
<TD COLSPAN=2 BGCOLOR=gold> gold </TD>
</TR>
<TR>
<TD BGCOLOR=yellow WIDTH=30%> yellow</TD>
<TD ROWSPAN=2 COLSPAN=2 BGCOLOR=purple>purple</TD>
</TR>
<TR>
<TD BGCOLOR=pink>pink</TD>
</TR>
</TABLE>
</BODY> </HTML>
Зі схеми видно, що перший рядок складається з двох комірок - комірки коричневого кольору шириною, що складає 60% від ширини цілої таблиці, ця комірка об'єднує два стовпці, та комірки, що об'єднує два рядки, ця комірка буде розташована в наступному рядку також, її колір синьо-фіолетовий. Другий рядок складається теж з двох комірок, одна під об'єднаною коміркою першого стовпця золотого кольору, а друга вже оголошена. Третій рядок складається з комірки жовтого кольору шириною, що складає 30% від ширини цілої таблиці, та комірки, що об'єднує два рядки і два стовпці, ця комірка буде розташована в наступному рядку також, її колір пурпуровий. Четвертий рядок складається з двох комірок - одна під коміркою третього стовпця рожевого кольору, а друга вже оголошена у попередньому рядку об’єднаною коміркою.