Презентация на тему «Создание таблиц»

Создание таблиц

Язык HTML

Постановка задачи

Создать таблицу, состоящую из двух строк и трех столбцов размером 50 Х 35

Структура таблицы

<table> <tr> <td>1x1</td> <td>1x2</td> <td>1x3</td> </tr> <tr> <td>2x1</td> <td>2x2</td> <td>2x3</td> </tr> </table>

Добавление цвета фона

<table> <tr> <td bgcolor="#FFCC33">1x1</td> <td bgcolor="#336699">1x2</td> <td bgcolor="#FFCC33">1x3</td> </tr> <tr> <td bgcolor="#336699">2x1</td> <td bgcolor="#FFCC33">2x2</td> <td bgcolor="#336699">2x3</td> </tr> </table>

Размер ячеек

<table> <tr> <td height="35" width="50" bgcolor=#ffcc33>1x1</td> <td width="50" bgcolor="#336699">1x2</td> <td width="50" bgcolor="#FFCC33">1x3</td> </tr> <tr> <td height="35" bgcolor="#336699">2x1</td> <td bgcolor="#ffcc33">2x2</td> <td bgcolor="#336699">2x3</td> </tr> </table>

Выравнивание текста

<table> <tr align=“center”> <td height="35" width="50" bgcolor=#ffcc33>1x1</td> <td width="50" bgcolor=#336699>1x2</td> <td width="50" bgcolor=#ffcc33> 1x3 </td> </tr> <tr align="center"> <td height="35" bgcolor=#336699> 2x1 </td> <td bgcolor=#ffcc33>2x2</td> <td bgcolor=#336699>2x3</td> </tr> </table>

Вертикальное выравнивание

Valign="top" /* middle, bottom */

<tr> <td height=35 bgcolor=#ffcc33 colspan=2>1x1</td> <td width=50

bgcolor=#336699>1x2</td> </tr> <tr> <td height=35 width=50 bgcolor=#336699>2x1</td> <td width=50 bgcolor=#ffcc33>2x2</td> <td bgcolor=#336699>2x3</td> </tr>

Если прописать лишнюю ячейку

Объединение строк

Объединить ячейки в столбце можно с помощью атрибута rowspan, например, в ячейке 1х3 написать rowspan=2. Какая ячейка должна отсутствовать? Как записать размер объединенной ячейки?

Создайте самостоятельно

Расстояние между ячейками

<table cellspacing=0> … </table>

Отступ от границ ячейки

<table cellpadding=5> … </table>