<TABLE RULES=“rows” FRAME=“void”
CELLSPACING=“0”>
<TR>
<TD> Первая строка </TD> </TR>
<TR>
<TD BGCOLOR=“gray”> Вторая строка </TD> </TR>
<TR>
<TD> Третья строка </TD> </TR>
</TABLE>
Атрибуты тегов <TR>, <TH> и <TD>
Атрибуты <TR>:
|
атрибут |
значение |
описание |
|
|
|
|
|
ALIGN |
left, right, center, jus- |
Горизонтальное выравнивание |
|
|
tify |
|
|
|
|
|
|
VALIGN |
top, middle, bottom |
Вертикальное выравнивание |
|
|
|
|
|
плюс атрибуты <TABLE> |
|
|
|
|
|
|
|
Атрибуты <TH> и <TD>: |
|
|
|
|
|
|
|
атрибут |
значение |
описание |
|
|
|
|
|
ALIGN |
left, right, center, jus- |
Горизонтальное выравнивание |
|
|
tify |
|
|
|
|
|
|
VALIGN |
top, middle, bottom |
Вертикальное выравнивание |
|
|
|
|
|
COLSPAN |
2 (шт) |
объединение ячеек по горизонтали |
|
|
|
|
|
ROWSPAN |
3 (шт) |
объединение ячеек по вертикали |
|
|
|
|
плюс атрибуты <TABLE>
Пример. Объединение ячеек.
1) Объединение ячеек по горизонтали:
|
|
А |
|
|
|
|
|
|
B |
|
C |
|
|
|
|
Описание в html-виде: |
|
|
|
<TABLE BORDER=“1”> <TR BGCOLOR=“silver”>
<TD COLSPAN=“2” ALIGN=“cente”r>А</TD> </TR>
<TR> <TD>В</TD>
<TD ALIGN=“right”>C</TD> </TR>
</TABLE>
2) Объединение ячеек по вертикали:
В
АС
D
Описание в html-виде:
<TABLE BORDER=“1” > <TR>
<TD ROWSPAN=“3“ ALIGN=“center”
BGCOLOR=“silver”> А</TD>
<TD ALIGN=“center”>В</TD> </TR>
<TR>
<TD ALIGN=“center”>C</TD> </TR>
<TR>
<TD ALIGN=“center”>D</TD> </TR>
</TABLE>
Внимание! Не нужно указывать соответсвующие размеры в объеденённых ячейках! В случае объединения по вертикали можно задать только ширину, при объединении по горизонтали – только высоту.
По умолчанию данные в ячейках таблицы выравниваются по горизонтали (ALIGN) по левому краю (left) и по вертикали (VALIGN) – по середине
(middle).
Таблицы могут вкладываться одна в другую. Но не стоит увлекаться. Используйте не более 3-х уровней вложения. Более сложную конструкцию труднее обновлять, находить и исправлять в ней ошибки.
Пример. Вложенные таблицы.
A B
C D
Описание в html-виде:
<TABLE BORDER=“1”> <TR>
<TD>
<TABLE BORDER=“0”> <TR>
<TD BGCOLOR=“silver”>A</TD> <TD>В</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>
<TABLE BORDER=“0”> <TR>
<TD ALIGN=“center”>C</TD>
<TD BGCOLOR=“red”>D</TD> </TR>
</TABLE>
</TD>
</TR>
</TABLE>
Практическое задание 6.
1. Пришло время окончательно оформить первую страницу нашего сайта. Добавляем ссылки: “как меня найти”, “партнеры”. Три ссылки располагаем слева от фотографии, три - справа. Для этого создаем таблицу 100%Х100% из пяти строк и трех столбцов. В нее помещаем все содержимое веб-страницы. Ячейке с фотографией задаем жесткие размеры - в пикселах, соответственно размерам фотографии. На меню слева отводим 50% и на меню справа - 50%.
В объединенных ячейках соответствующие размеры не задаем! Обновленная страница index.html:
Добро пожаловать к Василию Васильевичу Васильеву – профессионалу своего дела!
резюме |
фото |
партнеры |
юмор |
портфолио |
как меня найти |
|
Пишите мне: vasya@mail.ru |
2. Оформляем раздел “партнеры”, файл partners.html. Необходимо разместить фотографию и минимальные данные о каждом из партнеров (9 человек). Располагаем фотографии и текст в шахматном порядке:
3. Страница “фото” нуждается в доработке. Иконки вверху страницы следует поместить в таблицу из одной строки и выровнять по центру. Большие фотографии, расположенные ниже, также помещаем в таблицу, состоящую из одного столбца.