2015-05-10
596
<HTML>
<HEAD>
<TITLE>ТАБЛИЦА</TITLE>
</HEAD>
<BODY>
<TABLE border="2" align=center>
<TR>
<TD colspan=2 align=center>
<B>Заголовок Таблицы.</B>
</TD>
</TR>
<TR>
<TD align="center">
Первая ячейка первой строки
</TD>
<TD align="center">
Вторая ячейка первой строки
</TD>
</TR>
<TR>
<TD align="center">
Первая ячейка второй строки
</TD>
<TD align="center">
Вторая ячейка второй строки
</TD>
</TR>
</TABLE> <
</BODY>
</HTML>
Тег <TABLE> задает таблицу
Атрибуты border="2" и align=center задают, соответственно, размер границ таблицы и выравнивание ее по центру страницы
Тег <TR> задает строку таблицы
Тег <TD> задает ячейку таблицы
Атрибут colspan=n объединяет n ячеек по горизонтали (по столбцам)
В результате получится следующая таблица, состоящая из двух столбцов и двух строк:
| Заголовок Таблицы. | |
| 1 ячейка первой строки | 2 ячейка первой строки |
| 1 ячейка второй строки | 2 ячейка второй строки |
1.2. Сложная таблица
<HTML>
<HEAD>
<TITLE>СЛОЖНАЯ ТАБЛИЦА</TITLE>
|
|
|
</HEAD>
<BODY>
<TABLE border="1" width="75%" align=center>
<TR>
<TD width="66%" colspan="2">
<P align="center">
Две ячейки, объединенные по горизонтали
</TD >
</TR >
<TR >
<TD width="33%" rowspan="2" valign="middle" >
Две ячейки, объединенные по вертикали
</TD >
<TD width="33%">
по левому краю
</TD>
</TR >
<TR <
<TD width="33%" <
<P align="right" >по правому краю
</TD >
</TR >
</TABLE >
</BODY >
</HTML >
Атрибут colspan=n объединяет n ячеек по горизонтали (по столбцам)
Атрибут rowspan=n объединяет n ячеек по вертикали (по строкам)
Атрибут valign="middle" выравнивает текст в ячейке по центру ячейки по вертикали
В результате получается следующая таблица:
| Две ячейки, объединенные по горизонтали | |
| Две ячейки, объединенные по вертикали | по левому краю |
| по правому краю |
1.3. Более сложная таблица
<HTML>
<HEAD>
<TITLE>УЧЕБНАЯ ТАБЛИЦА</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6"
CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime"
BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF">
<THEAD BGCOLOR="Aqua">
<TR><TH COLSPAN="3">УЧЕБНАЯ ТАБЛИЦА</TH></TR>
</THEAD>
<TBODY>
<TR>
<TD WIDTH="33%">Это первая ячейка</TD>
<TD WIDTH="33%">Это вторая ячейка</TD>
<TD ROWSPAN="3">А это три ячейки третьего столбца
объединились в одну большую</TD>
</TR>
<TR>
<TD COLSPAN="2">Это единственная ячейка второй строки,
объединяющая оба столбца</TD>
</TR>
<TR>
<TD>Это первая ячейка третьей строки</TD>
<TD WIDTH="33%">А это вторая ячейка третьей строки</TD>
</TR>
</TBODY>
<TFOOT BGCOLOR="Yellow">
|
|
|
<TR><TD COLSPAN="3" ALIGN="center">
<SMALL>конец</SMALL></TD></TR>
</TFOOT>
</TABLE>
</BODY>
</HTML>
Атрибут CELLSPACING="6" задает свободное пространство между ячейками таблицы
Атрибут CELLPADDING="20" задает свободное пространство между данными в ячейке и ее границами
Атрибут BORDERCOLORLIGHT="Lime" задает цвет левого и верхнего углов таблицы
Атрибут BORDERCOLORDARK="Green" задает цвет правого и нижнего углов таблицы
Атрибут BGCOLOR="#DFFFDF" задает цвет фона таблицы
В результате получается следующая таблица:
| УЧЕБНАЯ ТАБЛИЦА | ||
| Это первая ячейка | Это вторая ячейка | А это три ячейки третьего столбца объединились в одну большую |
| Это единственная ячейка второй строки, объединяющая оба столбца | ||
| Это первая ячейка третьей строки | А это вторая ячейка третьей строки | |
| конец |
