Урок 8 HTML Таблицы Таблицы вошли очень прочно в веб дизайн и теперь без них сложно представить даже самую простую страничку. Удобство при их использовании сложно описать словами, да и не нужно.
Таблицы Тег таблиц называется <table>. Вся таблица должна находиться внутри него, и при этом закрывающую скобку </table> надо обязательно указывать.
Параметрами этого тега задается общий вид таблицы, ее цвет, толщина рамки и многое другое. И вот какие аргументы могут быть:
align Ну как и всегда этот параметр задает выравнивание таблицы. Если таблица находится в выравненных участках текста, т.е. где указаны <div> или <center> то сами понимаете выравнивание можно не указывать.
По умолчанию таблица выравнивается по левому краю.
width Этот параметр задает ширину таблицы. Как правило браузер подбирает размер таблицы таким образом, чтобы там все хорошенько уместилось, но вы если вам нужен конкретный размер, то вы можете его указать в пикселах или в процентах от свободного пространства.
border Используется для указания ширины границы таблицы в пикселах. По умолчанию имеет размер равный 0, и при этом границы таблицы не отображаются, т.е. получается прозрачная таблица :-).
cellspacing Каждую ячейку браузер обводит своей собственной рамкой, и этот параметр задает ширину пространства между ними.
cellpadding Этот параметр тоже задает ширину пространства, но только уже между рамкой ячейки таблицы и ее содержанием внутри.
bgcolor Задает цвет фона таблицы.
background Изображение, которое будет отображатся в виде фона таблицы.
Для того чтобы создать новый ряд ячеек в таблице существует тег <tr>. Для создания новой ячейки предназначен тег <td> или <th>. Количество ячеек (т.е. элементов <td> и <th>) должно быть одинаково в каждом ряду таблицы, т.е. внутри каждого тега <tr>
Пример простейшей таблицы:
<table border=1> <tr><td>Первая ячейка<td>Вторая ячейка <tr><td>новый<td>ряд </table>
Тег <tr> имеет несколько атрибутов.
align Задает выравнивание внутри всех ячеек таблицы. Если, например указать align=center, то содержимое каждой ячейки будет выравнено по центру. valign Также задает выравнивание, но уже по вертикали. Может принимать значения top - выравнивание по верху,middle - по центру, ну и bottom по низу.
bgcolor и background
Задают цвет или изображение фона одной строки таблицы.
Ячейки таблицы более богаты своими параметрами. Чтобы не писать снова, скажу что в них входят все параметры строк таблицы описанные выше, ну и еще парочка другая следующих :-) :
rowspan Объединяет указанное количество ячеек в одну по вертикали.
colspan Объединяет ячейки по горизонтали.
width и height Задают рекомендуемые размеры ячейки по горизонтали и вертикали.
Наверно многие не поняли как это могут ячейки объединяться. А вот как !!! Пример:
<table border=2> <tr><td>1<td>2<td>3<td>4<td>5 <tr><td colspan=2 rowspan=2>6<td colspan=2>7<td rowspan=2>8 <tr><td>9<td>10 <tr><td>11<td>12<td>13<td>14<td>15 </table>
В общем понять это не просто, но Вы научитесь. Кстати очень замечательная особенность Html, в том что в ячейке можно сделать вложенную таблицу, а в ней еще одну и т.д. пока таблицы не кончатся :-).
|