Таблица определяется тегами и .
Внутри этих тэгов допускаются теги
- предназначен для создания заголовка к таблице.
- задает ширину и другие атрибуты одной или нескольких колонок таблицы.
- предназначен для задания ширины и стиля одной или нескольких колонок таблицы.
- предназначен для хранения одной или нескольких строк таблицы.
- определяет колонку таблицы.
- определяет строку таблицы.
- предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы.
- предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная.
- предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы.
Начало строки таблицы определяется тегом и заканчивается
Внутри строки располагаются теги столбцов
Построим простейшую таблицу, состоящую из одной строки и двух столбцов.
<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" _fcksavedurl="//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" _fcksavedurl="//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 |
Пожалуй пока все. В следущий раз расскажу о других возможностях вывода таблиц
