Таблицы. Часть 2-я :)



В прошлый раз для определения вида одной или нескольких строк таблицы использовался тег .
Действие тегов и аналогичны .
Тег определяет вид первой строки таблицы, а - последней.
Тег определяет вид последних строк, но в исходном коде он должен быть до тега

Создадим таблицу 4 строки 2 колонки

<table border="1" width="100%"> <thead align="left"> <tr> <td>Первая строка. Текст1</td> <td>Первая строка. Текст2</td> </tr> </thead> <tfoot align="right"> <tr> <td>Последняя строка. Текст1</td> <td>Последняя строка. Текст2</td> </tr> </tfoot> <tbody align="center"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </tbody> </table>

В первой строке текст размещен слева, в последней строке - справа, а в централной строке - посредине

Первая строка. Текст1	Первая строка. Текст2
Последняя строка. Текст1	Последняя строка. Текст2
Текст1	Текст2

Добавим заголовок к нашей таблице. Для этого используем тег . Для этого тега есть два параметра align - задает выравнивание заголовка и valign - определяет вверху таблицы или внизу будет выводится заголовок.

допустим только внутри тега сразу после открывающего тега.

Вид заголовка в зависимости от align будет отличаться в разных браузерах.

• left - В браузере Internet Explorer и Opera располагает заголовок сверху и выравнивает его по левому краю таблицы. В Firefox заголовок располагается слева от таблицы.
• right -В браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. В браузере Netscape параметр игнорируется, а в Firefox заголовок располагается от таблицы справа.
• center - Заголовок располагается сверху таблицы по ее центру.
• top - Результат аналогичен действию параметра center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
• bottom - Заголовок размещается внизу таблицы по ее центру.

<table border="1" width="70%"> <caption valign="top">Заголовок таблицы</caption> <thead align="left"> <tr> <td>Первая строка. Текст1</td> <td>Первая строка. Текст2</td> </tr> </thead> <tfoot align="right"> <tr> <td>Последняя строка. Текст1</td> <td>Последняя строка. Текст2</td> </tr> </tfoot> <tbody align="center"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </tbody> </table>

Заголовок таблицы

Первая строка. Текст1	Первая строка. Текст2
Последняя строка. Текст1	Последняя строка. Текст2
Текст1	Текст2

Если задать align="bottom" то заголовок будет внизу таблицы

Заголовок таблицы

Первая строка. Текст1	Первая строка. Текст2
Последняя строка. Текст1	Последняя строка. Текст2
Текст1	Текст2

Тег предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная.
Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.
Располагается этот тег только внутри тега

<table border="1" width="70%"> <tbody align="center"> <tr> <th>Заголовок1</th> <th>Заголовок2</th> </tr> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </tbody> </table>

Таблица с заголовками

Заголовок1	Заголовок2
Текст1	Текст2

Тег задает ширину и другие атрибуты одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег можно использовать совместно с тегом , который задает группу колонок, обладающих общими параметрами.

<table border="1" width="70%"> <colspan> <col width="40%"></col> <col width="60%"></col> </colspan> <tbody align="center"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> <tr> <td>Текст3</td> <td>Текст4</td> </tr> </tbody> </table>

Текст1	Текст2
Текст3	Текст4

Объеденим несколько ячеек таблицы. Для этого в теге нужно указать colspan - объеденяет горизонтальные ячейки, rowspan - вертикальные

Объеденим 2 ячейки первой строки в одну ячейку

<table border="1" width="70%"> <tbody align="center"> <tr> <td colspan="2" rowspan="1">Текст1</td> </tr> <tr> <td>Текст2</td> <td>Текст3</td> </tr> </tbody> </table>

Текст1
Текст2	Текст3

Объеденим 2 ячейки первого столбца в одну ячейку

<table border="1" width="70%"> <tbody align="center"> <tr> <td colspan="1" rowspan="2">Текст1</td> <td>Текст2</td> </tr> <tr> <td>Текст3</td> </tr> </tbody> </table>

Текст1	Текст2
	Текст3

И последнее. Параметры тега cellpadding - отступ от рамки до содержимого ячейки и cellspacing- расстояние между ячейками.

<table border="1" cellspacing="10" cellpadding="30"> <tbody align="center"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> <tr> <td>Текст3</td> <td>Текст3</td> </tr> </tbody> </table>

Текст1	Текст2
Текст3	Текст3

Вот собственно и все :))

Таблицы



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

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

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

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

<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

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

Изображения в дневнике

Разместим изображение в дневнике. Для этого просто прикрепим файл изображения к сообщению

Код солнышка:

<img src="//img0.liveinternet.ru/images/attach/c/0//46/290/46290064_solnuyshko.jpg" width="680" height="680" alt=" (680x680, 37Kb)" />

Сделаем всплывающую подсказку к рисунку. Для этого допишем в код рисунка title.

<img src="//img0.liveinternet.ru/images/attach/c/0//46/290/46290064_solnuyshko.jpg" width="680" height="680" alt=" (680x680, 37Kb)" title="Доброе утро! Удачного дня! Отличного настроения!"/>

Теперь при наведении мышки на рисунок будет появляться подсказка с нашим текстом

Есть еще один параметр рисунка который можно использовать для удобства при редактирования постов с рисунками. Это alt. Alt - Это текст который будет виден вместо картинки, если невозможно её показать.
Изначально в нем прописан размер рисунка, но этот текст можно изменить на любой другой. Например можно подписать рисунок.

<img src="//img0.liveinternet.ru/images/attach/c/0//46/290/46290064_solnuyshko.jpg" width="680" height="680" alt="Рисунок солнышка" title="Доброе утро! Удачного дня! Отличного настроения!"/>

width и height это ширины и высота рисунка. Можно показать рисунок другого размера просто указав в коде width и height

<img src="//img0.liveinternet.ru/images/attach/c/0//46/290/46290064_solnuyshko.jpg" width="200" height="200" alt="Рисунок солнышка" title="Доброе утро! Удачного дня! Отличного настроения!"/>

Мы получили рисунок уменьшеного размера, но реальный размер рисунка не изменился! Вы можете в этом убедиться если сохраните рисунок у себя на компьютере и посмотрите его

Рисунки можно использовать и в ссылках. Для примера загружу уменьшиную копию солнышка

Код маленького солнышка:

<img src="//img1.liveinternet.ru/images/attach/c/0//46/290/46290994_solnuyshko.jpg" width="100" height="100" alt=" (100x100, 3Kb)">

Для того что бы картинка была ссылкой сделаем вот такой код ( код я показал в сокращенном виде для простоты чтения)

<a target="_blank" href="http://....."><img src="http://...." /></a>

Сделаем код что бы видно было маленькое солнышко, а при клике на нем в новом окне выводилось солнышко в полном размере.
Для этого веред кодом маленького солнышка вставим код <a href="сслыка на большое солнце">, а после кода маленького солнышка - </a>

. <a target="_blank" href="//img0.liveinternet.ru/images/attach/c/0//46/290/46290064_solnuyshko.jpg" title="Посмотреть в полном размере"> <img src="//img1.liveinternet.ru/images/attach/c/0//46/290/46290994_solnuyshko.jpg" width="100" height="100" alt=" (100x100, 3Kb)"></a>

Обратите внимание на то что title прописан в коде ссылки, а не рисунка и на параметр ссылки target="_blank"!
Target Указывает где открывать ссылку. _blank - открыть в новом окне, Если вы не укажите target то ссылка откроется в текущем окне