Запишите на HTML коды страниц, показанных на рисунках. Результаты
записываете в файлы с именами n.htm
(n — номер
задания).
Решения заданий расположены в каталоге work/unit13/1301/02/
.
Решение
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Таблица 01</TITLE>
<STYLE type="text/css">
TABLE.tab
{
margin: 0 10px 10px 0;
background:#ffbf00;
}
TABLE.tab TD {padding:10px;}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1>Таблица 01</H1>
<TABLE class=tab bordercolor=white border=1
align=left cellspacing=0>
<TR>
<TD>1,1</TD>
<TD>1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
<TR>
<TD>3,1</TD>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>
<P>
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
</BODY>
</HTML>
Решение
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Таблица 02</TITLE>
<STYLE type="text/css">
TABLE.tab
{
margin: 0 0 10px 10px;
background:#ffbf00;
border: 1px solid black;
border-collapse:collapse;
float:right;
}
TABLE.tab TD
{
padding:10px;
border: 1px solid black;
}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2>Таблица 02</H2>
<P>
<TABLE class=tab cellspacing=0>
<TR>
<TD>1,1</TD>
<TD>1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
<TR>
<TD>3,1</TD>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>
<P>
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
</BODY>
</HTML>
Решение
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Таблица 03</TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2>Таблица 03</H2>
<P>
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
</P>
<TABLE bgcolor="#ffbf00" border=1 bordercolor=gray
align=center cellpadding=10 cellspacing=0>
<TR>
<TD>1,1</TD>
<TD>1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
<TR>
<TD>3,1</TD>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>
<P>
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
</BODY>
</HTML>
Решение
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Таблица 04</TITLE>
<STYLE type="text/css">
TABLE.tab
{
margin: 1em 0 1em auto;
background:#ffbf00;
}
TABLE.tab TD {padding:10px;}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2>Таблица 04</H2>
<P>
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
</P>
<TABLE class=tab border=1 cellspacing=0>
<TR>
<TD>1,1</TD>
<TD>1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
<TR>
<TD>3,1</TD>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>
<P>
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
</BODY>
</HTML>
Решение
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Таблица 05</TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2>Таблица 05</H2>
<P>
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
</P>
<TABLE bgcolor="#ffbf00" border=1
cellpadding=10 cellspacing=0>
<TR>
<TD>1,1</TD>
<TD>1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
<TR>
<TD>3,1</TD>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>
<P>
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
</BODY>
</HTML>
Решение
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Таблица 06</TITLE>
<STYLE type="text/css">
BODY, HTML {height:100%}
BODY
{
margin:0;
padding:0;
}
TABLE.tab
{
background:#ffbf00;
border: 1px solid black;
border-collapse:collapse;
width:100%;
height:100%;
}
TABLE.tab TD
{
padding:10px;
border: 1px solid black;
text-align:center;
vertical-align:middle;
}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<TABLE class=tab cellspacing=0>
<TR>
<TD>1,1</TD>
<TD>1,2</TD>
</TR>
<TR>
<TD>2,1</TD>
<TD>2,2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Решение
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Таблица 07</TITLE>
<STYLE type="text/css">
BODY, HTML {height:100%}
BODY
{
margin:0;
padding:0;
}
TABLE.tab
{
background:#ffbf00;
border: 1px solid black;
border-collapse:collapse;
width:100%;
height:100%;
}
TABLE.tab TD
{
padding:10px;
border: 1px solid black;
text-align:left;
vertical-align:top;
}
TABLE.tab TD.col13
{
width:100px;
background:yellow;
}
TABLE.tab TD.col2
{
text-align:center;
}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<TABLE class=tab cellspacing=0>
<TR>
<TD class=col13>
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
</TD>
<TD class=col2>
<P>
Текст начинается сверху, выравнивание по центру
ячейки.
<P>
Таблица занимает всё пространство окна браузера.
</TD>
<TD class=col13>
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Решение
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Таблица 07</TITLE>
<STYLE type="text/css">
BODY, HTML {height:100%}
BODY
{
margin:0;
padding:0;
}
TABLE.tab
{
background:#ffbf00;
border: 1px solid black;
border-collapse:collapse;
width:100%;
height:100%;
}
TABLE.tab TD
{
padding:10px;
border: 1px solid black;
text-align:left;
vertical-align:top;
}
TABLE.tab TD.col13
{
width:100px;
background:yellow;
}
TABLE.tab TD.col2
{
text-align:center;
}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<TABLE class=tab cellspacing=0>
<TR>
<TD class=col13>
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
</TD>
<TD class=col2>
<P>
Текст начинается сверху, выравнивание по центру
ячейки.
<P>
Таблица занимает всё пространство окна браузера.
</TD>
<TD class=col13>
Текст. Текст. Текст. Текст. Текст. Текст. Текст.
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Решение
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Таблица 09</TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2>Таблица 09</H2>
<TABLE bgcolor="#ffffcc"
border=1 bordercolor="#4d4d4d"
cellpadding=10 cellspacing=0>
<CAPTION>Заголовок таблицы</CAPTION>
<TR bgcolor="#ffbf00">
<TH colspan=7>
Таблицы должны быть красивыми
</TH>
</TR>
<TR>
<TD> </TD>
<TD bgcolor="#4db3d9"
width=50 height=50> </TD>
<TD> </TD>
<TD bgcolor="#4db3d9" width=50> </TD>
<TD> </TD>
<TD bgcolor="#4db3d9" width=50> </TD>
<TD> </TD>
</TR>
<TR>
<TD bgcolor="#4db3d9"
width=50 height=50> </TD>
<TD> </TD>
<TD bgcolor="#4db3d9" width=50> </TD>
<TD> </TD>
<TD bgcolor="#4db3d9" width=50> </TD>
<TD> </TD>
<TD bgcolor="#4db3d9" width=50> </TD>
</TR>
</TABLE>
<P>
Если таблица некрасивая, не верь глазам своим.
</BODY>
</HTML>
Решение
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Таблица 10</TITLE>
<STYLE type="text/css">
BODY, HTML {height:100%}
BODY
{
margin:0;
padding:0;
}
TABLE.tab0
{
width:100%;
height:100%;
border:none;
}
TABLE.tab
{
margin: 0 auto;
background:#ffbf00;
border: 1px solid black;
border-collapse:collapse;
}
TABLE.tab TD
{
padding:10px;
border: 1px solid black;
text-align:center;
vertical-align:middle;
}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<TABLE class=tab0 cellspacing=0>
<TR>
<TD>
<TABLE class=tab cellspacing=0>
<TR>
<TD>1,1</TD>
<TD>1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
<TR>
<TD>3,1</TD>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>