Материал: 1896
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Table</TITLE></HEAD><BODY>
<CENTER><TABLE BORDER="1">
<CAPTION ALIGN="CENTER">Интернет-ресурсы</CAPTION> <TR>
<TH COLSPAN="2">Список адресов Internet</TH> </TR>
<TR>
<TD> http://russia.uthscsa.edu/Music/</TD>
<TD> Музыка на сервере «Маленькая Россия» в Сан-Антонио</TD> </TR>
<TR>
<TD>http://www.deol.ru/queen/</TD> <TD>Русские странички о группе Queen</TD>
</TR>
<TR>
<TD>http://www.september.ru</TD> <TD>Сервер газеты «Первое сентября»</TD> </TR>
<TR>
<TD>http://www.glasnet.ru</TD> <TD>Сервер газеты «Информатика»</TD>
</TR>
<TR>
<TD>http://www.rector.msu.su</TD> <TD>Сервер МГУ</TD>
</TR>
<TR>
<TD>http://www.phys.msu.su</TD> <TD>Сервер физфака МГУ</TD> </TR>
</TABLE></CENTER>
</BODY></HTML>
На рис. 36 показано, как будет выглядеть файл в окне браузера.
Рис. 36. Вид Web-страницы в окне браузера
1.4.3. Цвета в таблице
Существует ряд новых тегов, позволяющих задавать цвета фона и сетки таблицы. В первом случае ключевое слово BGCOLOR вставляется в тег <TABLE> следующим образом:
…
<TABLE BORDER="2" BGCOLOR="YELLOW">
…
</TABLE>
…
Цвет фона всей таблицы будет желтый.
Кроме ключевого слова BGCOLOR, существуют и другие способы управления цветом:
BORDERCOLOR – изменяет цвет сетки таблицы;
BORDERCOLORDARK/BORDERCOLORLIGHT – используется для изменения цвета сетки с дополнительным эффектом трехмерности. Если установлены эти атрибуты, таблица выглядит трехмерной.
Рассмотрим простой пример использования всех новых ключевых слов сразу:
…
<TABLE BORDER="2" BGCOLOR="YELLOW" BORDERCOLOR="RED"
BORDERCOLORDARK="BLUE" BORDERCOLORLIGHT="GRAY">
…
</TABLE>
…
В приведенном ниже HTML-коде цвет каждой ячейки задается отдельно:
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Table</TITLE></HEAD><BODY>
<TABLE BORDER="6"> <TR>
<TD BGCOLOR="YELLOW">Желтый фон-черный текст</TD> <TD BGCOLOR="BLACK"><FONT COLOR="YELLOW">
Черный фон-желтый текст</FONT></TD> </TR>
<TR>
<TD BGCOLOR="BLACK"><FONT COLOR="YELLOW">
Черный фон-желтый текст</FONT></TD>
<TD BGCOLOR="YELLOW">Желтый фон-черный текст</TD> </TR></TABLE>
</BODY></HTML>
На рис. 37 показано, как будет выглядеть файл в окне браузера.
Рис. 37. Вид Web-страницы в окне браузера
Изменим ширину и высоту данной таблицы. Напомним, что величина высоты и ширины задается в пикселях или процентах от величины документа.
Например: WIDTH="300" или WIDTH="50%"
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Table</TITLE></HEAD><BODY>
<TABLE BORDER="6" WIDTH="488" HEIGHT="178"> <TR>
<TD BGCOLOR="YELLOW" WIDTH="340" HEIGHT="100">
Желтый фон-черный текст</TD>
<TD BGCOLOR="BLACK" WIDTH="122" HEIGHT="100"> <FONT COLOR="YELLOW">Черный фон-желтый текст</FONT> </TD>
</TR>
<TR>
<TD BGCOLOR="BLACK" WIDTH="340" HEIGHT="66"> <FONT COLOR="YELLOW">
Черный фон-желтый текст</FONT></TD>
<TD BGCOLOR="YELLOW" WIDTH="122" HEIGHT="66">
Желтый фон-черный текст</TD></TR></TABLE> </BODY></HTML>
На рис. 38 показано, как будет выглядеть файл в окне браузера.
Рис. 38. Вид Web-страницы в окне браузера
Контрольные вопросы
1.Для чего необходимы таблицы на Web-страницах?
2.Какие теги отображают заголовок таблицы?
3.Какие теги определяют строку таблицы?
4.Какие теги определяют текст каждой ячейки таблицы?
5.Что задает ключевое слово BORDER в теге <TABLE>?
6.Какое ключевое слово служит для объединения нескольких строк в таблице?
7.Какое ключевое слово служит для объединения нескольких столбцов в таблице?
8.Каким образом задается фон в таблице?
Практические задания
1.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 39):
Рис. 39. Вид Web-страницы в окне браузера
2.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 40):