Цитата сообщения Великовозрастное_дитя Таблицы



Таблица определяется тегами и .
Внутри этих тэгов допускаются теги

• предназначен для создания заголовка к таблице.
• задает ширину и другие атрибуты одной или нескольких колонок таблицы.
• предназначен для задания ширины и стиля одной или нескольких колонок таблицы.
• предназначен для хранения одной или нескольких строк таблицы.
• определяет колонку таблицы.
• определяет строку таблицы.
• предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы.
• предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная.
• предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы.

Начало строки таблицы определяется тегом и заканчивается
Внутри строки располагаются теги столбцов

Построим простейшую таблицу, состоящую из одной строки и двух столбцов.

<table> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>
Мы получим такую таблицу ( фоновый цвет сделан для того что бы выделить границы таблицы)

Текст1

Текст2

Добавим рамку к нашей таблице. Для этого нужно в тег добавить border="1" ( Этот параметр определяет ширину рамки таблицы ), если нужна рамка толщиной 1 пиксель то можно написать border без параметров

<table border="1"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>
Получим таблицу с рамкой

Текст1

Текст2

Рамка появилась, но она какая то мрачная :) Попробуем разукрасить рамку, добавив еще один параметр bordercolor который определяет цвет рамки. Сделаем нашу рамку ядовито-красного цвета :).

<table border="1" bordercolor="#FF0000"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>

Вот наша таблица с красной рамкой

Текст1

Текст2

Теперь изменим цвет фона таблицы. Для этого добавим bgcolor

<table border="1" bordercolor="#FF0000" bgcolor="#ffffcc"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>

Вот как выглядит наш пример

Текст1

Текст2

Сделаем нашу таблицу с фоновым рисунком

Для этого зальем фоновый рисунок в черновик

Код нашего фонового рисунка

<img src="//img1.liveinternet.ru/images/attach/c/0//46/139/46139423_images.jpg" width="116" height="116" alt=" (116x116, 2Kb)" />

Теперь добавим к нашей таблице параметр background и укажем ссылку на наш фоновый рисунок

<table border="1" bordercolor="#FF0000" bgcolor="#ffffcc" background="//img1.liveinternet.ru/images/attach/c/0//46/139/46139423_images.jpg"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>

Наша таблица теперь выглядит повеселее :)

Текст1

Текст2

Попробуем теперь использовать для фона таблицы рисунок сравнительно больного размера. Например вот такой веселый цветочек

Код рисунка

<img src="//img1.liveinternet.ru/images/attach/c/0//46/140/46140506_3Dgraphics_ICQ_flower_005283_.jpg" width="640" height="480" alt=" (640x480, 145Kb)" />

Код таблицы будет таким

<table border="1" bordercolor="#FF0000" bgcolor="#ffffcc" background="//img1.liveinternet.ru/images/attach/c/0//46/140/46140506_3Dgraphics_ICQ_flower_005283_.jpg"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>

Текст1

Текст2

Фоновый рисунок есть, но он обрезан по размеру таблицы. Что бы это исправить нужно добавить ширину width и высоту height таблицы. Ширину и высоту таблицы сделаем такими же как и ширина и высота фонового рисунка

<table border="1" bordercolor="#FF0000" bgcolor="#ffffcc" background="//img1.liveinternet.ru/images/attach/c/0//46/140/46140506_3Dgraphics_ICQ_flower_005283_.jpg" width="640" height="480"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>

Вот как будет выглядеть наша таблица

Текст1

Текст2

Наша таблица размещается на странице слева, разместим её посредине страницы добавив параметр align. Допустимы значения этого параметра left - слева, right - справа, center - разместить по центру

<table border="1" bordercolor="#FF0000" bgcolor="#ffffcc" background="//img1.liveinternet.ru/images/attach/c/0//46/140/46140506_3Dgraphics_ICQ_flower_005283_.jpg" width="640" height="480" align="center"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </table>

Вот как это будет выглядеть

Текст1

Текст2

Текст с ячейках таблицы расположен слева и по центру вертикали. Оставим первую ячейку без изменения, а во второй ячейке таблицы разместим текст в верхнем правом углу. Для этого добавим к ячейке 2 параметра align - выравнивание по горизонтале и valign - выравнивание по вертикале.

<table border="1" bordercolor="#FF0000" bgcolor="#ffffcc" background="//img1.liveinternet.ru/images/attach/c/0//46/140/46140506_3Dgraphics_ICQ_flower_005283_.jpg" width="640" height="480" align="center"> <tr> <td>Текст1</td> <td align="right" valign="top">Текст2</td> </tr> </table>

Текст1

Текст2

Если расположение текста в ячейках одинаковое то можно добавить тег . Этот тег позволяет задавать вид одной или несколько строк таблицы.

Обратите внимание что значения align и valign теперь прописаны в теге .

<table border="1" bordercolor="#FF0000" bgcolor="#ffffcc" background="//img1.liveinternet.ru/images/attach/c/0//46/140/46140506_3Dgraphics_ICQ_flower_005283_.jpg" width="640" height="480" align="center"> <tbody align="center" valign="top"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </tbody> </table>

Теперь в обеих ячейках таблицы текст располагается вверху и по центру.

valign может принимать значения top - вверху. middle - по центру, bottom - внизу

Текст1

Текст2

Рамка таблицы теперь портит весь вид. Уберем её и окончательно получим такую таблицу

<table background="//img1.liveinternet.ru/images/attach/c/0//46/140/46140506_3Dgraphics_ICQ_flower_005283_.jpg" width="640" height="480" align="center"> <tbody align="center" valign="top"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </tbody> </table>

Текст1

Текст2

Пожалуй пока все. В следущий раз расскажу о других возможностях вывода таблиц