|
Чтобы все на страницах было аккуратно, нужны таблицы. Если сделать линии
таблицы невидимыми, то все размещенное в ячейках таблицы будет
выглядеть, как аккуратные столбцы текста и картинок. Что придает
страницам более привлекательный вид.
Работа с таблицами
1. Взять шаблон (который создан на 1 уроке). И
между тегами <BODY> </BODY>
вставте теги
<table> </ table>
Затем между тегами
<table> </
table> вставте теги <TR>
</TR> это строка таблицы.
Затем между тегами <TR> </TR>
вставляем теги <TD> </TD> это столбцы
таблицы.
И между тегами <TD> </TD> помещаем содержимое ячейки.
(текст, изображение или видео).
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<table>
<TR>
<TD> Здесь текст, изображение или видео </TD>
</TR>
</
table>
</BODY>
</HTML> |
Кликни. Посмотреть, что получилось.
Пример.
В этом примере мы не увидели таблицу потому что толщина линий по
умолчанию равна нулю.
Чтобы увидеть таблицу, нужно в тег
<TABLE> внести такие изменения -добавим
атрибут BORDER
вот так <TABLE BORDER=5> и теперь мы
увидим границу толщиной в 5 точек (пикселов).
Смотри
Пример.
Таблицы, состоящие из нескольких ячеек
Давайте построим таблицу, состоящую из четырех ячеек.
Внимание! каждая ячейка в отдельности заворачивается тегом <TD>,
а каждая строчка начинается с тега <TR>, а заканчивается - </TR>:
<HTML>
<HEAD>
<TITLE>Четыре ячейки</TITLE>
</HEAD>
<BODY>
<TABLE border=5 bgcolor="yellow">
<TR>
<TD>1 ячейка</TD>
<TD>2 ячейка</TD>
<TD>3 ячейка</TD>
<TD>4 ячейка</TD>
</TR>
</TABLE>
</BODY>
</HTML> |
Посмотрим, что получилось.
Пример.
Если же мы хотим сделать таблицу из нескольких строк,
в каждой строке по те же 4 ячейки, то это тоже просто сделать. Нужно
только новую строку начинать <TR>, а заканчивать </TR>. Вот так:
<TABLE border=5 bgcolor="green">
<TR>
<TD>1ячейка</TD>
<TD>2ячейка</TD>
<TD>3ячейка</TD>
<TD>4ячейка</TD>
</TR>
<TR>
<TD>5ячейка</TD>
<TD>6ячейка</TD>
<TD>7ячейка</TD>
<TD>8ячейка</TD>
</TR>
<TR>
<TD>9ячейка</TD>
<TD>10ячейка</TD>
<TD>11ячейка</TD>
<TD>12ячейка</TD>
</TR>
</TABLE> |
Посмотрим что получилось.
Пример.
Чтобы вставить в ячейку таблицы изображение нужно это
сделать между тегами <TD> </TD> вот так:
<HTML>
<BODY>
<TABLE border=5 bgcolor="yellow">
<TR>
<TD> < img
src="kartinka.jpg" > </TD>
<TD> <img src = "mous.gif"> </TD>
<TD>Жили у бабуси два веселых гуся.</TD>
<TD>У попа была собака.Он её любил. Она сьела кусок мяса...Он её
бах-бах и мимо...</TD>
</TR>
</TABLE>
</BODY>
</HTML> |
Посмотрим что получилось.
Пример.
Что еще можно сделать с таблицами? Посмотрите как работают другие
атрибуты.
Атрибуты таблиц
align выравнивает таблицу по
левому (left)
или правому (right) краю
или по центру (center) |
<TABLE align=left border=1> |
| Таблица выровнена по левому краю
|
|
| <TABLE align=right border=1> |
| Таблица выровнена по правому краю
|
|
| <TABLE align=center border=1>
|
|
Таблица выровнена по
центру |
|
background
указывает изображение, которым заполнится фон таблицы |
<TABLE background="fon.jpg">
|
| Таблица с фоновым изображением |
|
bgcolor
цвет фона таблицы |
<TABLE bgcolor=blue>
<TABLE bgcolor=#3300CC>
|
|
| border ширина рамки в пикселах |
<TABLE border=3> |
|
cellpadding
свободное пространство вокруг содержимого каждой ячейки |
<TABLE cellpadding=10 border=1> |
| вокруг текста свободное
пространство на 10 пикселов, видите?
|
|
cellspacing
свободное пространство между ячейками |
<TABLE cellspacing=10>
|
| первая ячейка |
вторая ячейка |
|
height
устанавливает высоту таблицы в пикселах |
<TABLE height=100 bgcolor=yellow> |
| Высота таблицы - 100 пикселов.
|
|
width
ширина таблицы в пикселах или в процентах |
<TABLE width=200 bgcolor=red border=1> |
| Эта таблица шириной в 200 пикселей.
|
|
|
