Построение таблиц при помоши HTML


Вернуться на главную
Стихи
Флеш-игры


Таблица HTML

Тег <TABLE> создает таблицу. Все прочие элементы таблицы должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица. Закрывающий тег обязателен

Тег <TR> определяет строку в таблице

Тег <TD> определяет отдельную ячейку в таблице

Количество тэгов TR внутри TABLE - это количество строк в таблице
Количество тэгов TD внутри TR - это количество ячеек в строке

Атрибуты тега <TABLE>

Практически все атрибуты таблиц
align- выравнивание,
background- фоновый рисунок в таблице, bgcolor -цвет фона таблицы.
border -толщина рамки в пикселях, bordercolor- цвет рамки,
cellpadding- отступ содержимого от рамки
cellspacing -расстояние между ячейками.
cols-число колонок в таблице.
width -ширина таблицы
все работают, хотя считаются устаревшими. Для таблиц рекомендуют использовать стили (CSS)

Атрибуты таблицы Пишется так Выглядит так
Ширина таблицы в % или пикселах
width=" "
(в примере 200 пикселей)
Толщина рамки в пикселах
border=" "
(в примере 1 пиксель)
Если атрибут не указан,
то таблица выводится без видимой рамки
<table width="200" border="1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
   
   
Выравнивание таблицы относительно документа
align="left"
<table width="200" border="1" align="left">
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr></table>
   
   

Выравнивание таблицы относительно документа
align="right"

<table width="200" border="1" align="right">
<tr><td></td><td></td>
</tr>
<tr><td></td><td></td>
</tr></table>
   
   
Выравнивание таблицы относительно документа
align="center"

<table width="200" border="1" align="center">

....................

</table>

   
   
Таблица
2 ряда и 2 столбца
ширина=200
граница=1
цвет границ красный
цвет фона синий

<table width="200" border="1" align="center" bordercolor="red" bgcolor="blue">

....................

</table>
вместо лучше Red и Blue лучше использовать обозначения цветов в Hex (шестнадцатиричная система), где цвета записываются в формате # и 6 знаков
Красный = "#FF0000"
Синий ="#0000FF"

   
   
Таблица 2 Х 2
выравнивание= центр
ширина=200
граница=1
каждая ячейка имеет свой цветовой фон (свой бэкграунд)
<table width="200" border="1" align="center" bordercolor="red">
<tr>
<td bgcolor="#FFFF00"> </td>
<td bgcolor="#FF0000"> </td>
</tr>
<tr>
<td bgcolor="#0000FF">&nbsp;</td>
<td bgcolor="#00FF00">&nbsp;</td>
</tr>
</table>
   
   

Таблица, где фон-
изображение (бэкграунд-имидж)
Фоновое изображение

<table width="200" border="0" align="center" background="image.gif">
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
</table>
   
   

TD COLSPAN
Объединение ячеек по горизонтали
td colspan="2" означает количество объединенных столбцов =2

 

<table width="200" border="2" align="center" bordercolor="#FF0000">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td> <td> </td>
</tr>
</table>
 
   
TD ROWSPAN
Объединение ячеек по вертикали
td rowspan="2" означает количество объединенных рядов =2

<table width="200" border="2" align="center" bordercolor="#FF0000">
<tr>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr><td></td></tr>
</table>
   
 
Содержание ячеек
Картинки или текст выравниваются внутри каждой ячейки. По умолчанию - left
Фрагмент кода
<td><img src="img.gif"></td>
<td><div align="right"><img src="img.gif"></div></td>
Картинка в таблице
Изображение в таблице
Изображение в таблице
Таблица с картинками
cellspacing
Задает расстояние между ячейками таблицы


Фрагмент кода -
<table width="200" border="1" align="center" cellspacing="15" bordercolor="#CC3300">

Картинка в таблице
Изображение в таблице
Изображение в таблице
Таблица с картинками
cellpadding
Задает расстояние между содержимым ячейки и ее рамкой
Фрагмент кода -
<table width="200" border="1" align="center" cellpadding="15" bordercolor="#CC3300">
Картинка в таблице
Изображение в таблице
Изображение в таблице
Таблица с картинками

Тэги <THEADL> </THEAD>, <TFOOT> </TFOOT>, <TBODY> </TBODY>

Используются в таблицах для выделения заголовочных и итоговых строк

 


.