Вернуться   Форум ChatPlanet.ru > Сервис «Мой чат» aka «Август» > Уроки

Важная информация

Ответ
 
Опции темы Опции просмотра
Старый 04.07.2009, 04:52   #1
 
Регистрация: 06.05.2007
Сообщений: 939
Вы сказали Спасибо: 271
Поблагодарили 2,651 раз
Репутация: 2546
Отправить сообщение для Mickeleangelo с помощью ICQ
Mickeleangelo вне форума
По умолчанию Изучаем HTML. Часть 7 — Таблицы

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

Будем идти от простого к сложному. Итак, таблицы состоят из строк, которые, в свою очередь, состоят из ячеек. Количество ячеек в разных строках одной таблицы должно быть одним и тем же.

Основные элементы

<TABLE>…</TABLE> — Таблица
<TR>…</TR> — Строка
<TD>…</TD> — Ячейка

Простой пример, таблица 3х3:
Код HTML:
<table>
<tr><td>Лево+Верх</td><td>Верх</td><td>Право+Верх</td></tr>
<tr><td>Лево</td><td>Центр</td><td>Право</td></tr>
<tr><td>Лево+Низ</td><td>Низ</td><td>Право+Низ</td></tr>
</table>
У тегов таблицы довольно много параметров. Давайте разделим их на 2 группы: параметры для позиционирования и параметры для внешнего вида. Нигде ни в каких справочниках такого разделения нет, я сделал его для упрощения рассказа.

Параметры для позиционирования.

Для таблицы:

ALIGN — выравнивание таблицы по ширине. Может быть:
  • left — по левому краю
  • center — по середине
  • right — по правому краю
Внимание! Этот параметр определяет только выравнивание самой таблицы относительно остального содержимого страницы, а не выравнивание внутри этой таблицы.

WIDTH и HEIGHT — ширина и высота таблицы. Если для таблицы или её ячеек не заданы размеры (или содержимое не помещается в заданные размеры), то таблица «растягивается» в зависимости от содержимого. Если же размеры указаны, то браузер будет пытаться им следовать. Высота и ширина таблицы (и в дальнейшем её ячеек) может задаваться либо в пикселях, либо в процентах. Если вы используете пиксели, то в качестве значения параметра записывайте просто число без «px». Примеры:

Таблица, растянутая на всю ширину:
Код HTML:
<table width="100%">
<tr><td>Лево+Верх</td><td>Верх</td><td>Право+Верх</td></tr>
<tr><td>Лево</td><td>Центр</td><td>Право</td></tr>
<tr><td>Лево+Низ</td><td>Низ</td><td>Право+Низ</td></tr>
</table>
Таблица, шириной 300 пикселей, выровненная по правому краю:
Код HTML:
<table width="300" align="right">
<tr><td>Лево+Верх</td><td>Верх</td><td>Право+Верх</td></tr>
<tr><td>Лево</td><td>Центр</td><td>Право</td></tr>
<tr><td>Лево+Низ</td><td>Низ</td><td>Право+Низ</td></tr>
</table>
CELLSPACING — отступы между ячейками. Задается в пикселях, числом, без «px».
CELLPADDING — отсупы внутри ячеек. Задается в пикселях, числом, без «px».

Разница между cellspacing и cellpadding хорошо видна, если для таблицы и её ячеек добавить границу (border). Если cellspacing не равно 0, а cellpadding равно 0, то для каждой ячейки будет «своя» граница, между ячейками будет расстояние, равное cellspacing. Если же наоборот, cellspacing равно 0, а cellpadding не равно 0, то границы ячеек будут прижаты друг к другу, а содержимое ячеек будет отодвинуто от границ на расстояние, равное cellpadding.

Для строки и ячейки:

ALIGN — выравнивание внутри ячеек. Может быть:
  • left — по левому краю
  • center — по середине
  • right — по правому краю
  • justify — по ширине
VALIGN — выравнивание внутри ячеек по вертикали. Может быть:
  • top — по верхнему краю
  • middle — по середине
  • bottom — по нижнему краю
  • baseline — по базовой линии шрифта
Внимание! Значение по-умолчанию для вертикального выравнивания — middle, т.е. выранивание внутри ячеек по середине. Не забывайте об этом при верстке таблиц, у которых в разных ячейках разное количество содержимого.

Только для ячеек:

WIDTH и HEIGHT — ширина и высота ячейки. Действуют аналогично ширине и высоте для всей таблицы.

Параметры для внешнего вида

Для таблицы:

BACKGROUND — фоновый рисунок. В качестве значения указывается адрес изображения (абсолютный или относительный). Если размер изображения меньше, чем размер таблицы, то оно повторяется мозаикой.

BGCOLOR — цвет фона таблицы. Как всегда, либо через "#RRGGBB", либо одним из системных названий.

BORDER — толщина рамки вокруг таблицы в пикселях. В качестве значения принимается число без «px». Если не задан параметр bordercolor (см. ниже), то рамка рисуется трехмерной, иначе все зависит от браузера.

BORDERCOLOR — цвет рамки. Некоторые браузеры при задании этого параметра начинают рисовать рамку сплошным цветом, а не в трехмерном режиме.

Тут следует отметить, что разные браузеры по-разному «переносят» значение этих двух параметров с таблицы на её строки и ячейки. Так, в IE запись <table border="3" bordercolor="#ff000">…</table> определяет и границу таблицы, и границу её ячеек, а, к примеру, в FF границы ячеек будут стандартными.

Для строк:

BORDER — толщина рамки вокруг строки в пикселях.
BORDERCOLOR — цвет рамки.

Для ячеек:

BACKGROUND — фоновый рисунок.
BGCOLOR — цвет фона ячейки.
BORDERCOLOR — цвет рамки.

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

Объединение ячеек

Также, как и в популярных редакторах Word и Excel, ячейки в таблицах можно объединять. Применений этой возможности масса: заголовки для всей таблицы или группы колонок, создание видимости разделения одной ячейки на несколько и другие. Для объединения используется 2 параметра ячеек:

COLSPAN — Количество ячеек, которые надо объединить по горизонтали.
ROWSPAN — Количество ячеек, которые надо объединить по вертикали.

Пример:
Код HTML:
<table>
<tr><td colspan="2">Лево+Верх + Верх</td><td>Право+Верх</td></tr>
<tr><td>Лево</td><td>Центр</td><td rowspan="2">Право<br />Право+Низ</td></tr>
<tr><td>Лево+Низ</td><td>Низ</td></tr>
</table>
Как вы видите, я объединил две верхние ячейки по горизонтали и две правые по вертикали. При объединении ячеек «исчезнувшие» ячейки не надо обозначать тегами <td>…</td>, браузер сам поймет, что и как рисовать. Особенно легко запутаться при объединении ячеек по вертикали. Еще пример:
Код HTML:
<table>
<tr><td>Лево+Верх</td><td rowpan="3">Верх + Центр + Низ</td><td>Право+Верх</td></tr>
<tr><td>Лево</td><td>Право</td></tr>
<tr><td>Лево+Низ</td><td>Право+Низ</td></tr>
</table>
Как вы видите, во второй и третьей строках я описал только левые и правые ячейки, место под средние ячейки (а точнее под одну большую ячейку) браузер определит сам.

Дополнительные параметры и сведения

Для таблицы можно задать параметр:
COLS — число столбцов в таблице. Считается, что без этого параметра браузер будет рисовать таблицу только после того, как получит всё её содержимое (хотя для того же FF это не так), а при заданном параметре браузер будет заранее подготовлен к тому, что будет в таблице и будет меньше тупить при её выводе. В современном интернете не используется.

Для ячейки можно задать параметр:
NOWRAP — определяет, что текст ячейки нельзя переносить на новые строки. Пример: <td nowrap="nowrap">2009 год</td>. Даже если остальные ячейки будут «давить» на эту своими размерами, её содержимое не будет разделено на 2 строчки.

Ячейки таблицы можно задавать не только тегом <td>…</td>, но и тегом:
<TH>…</TH> — заголовочная ячейка. Отличие заголовочной ячейки от обычной в том, что по-умолчанию текст в ней выравнивается по центру и отображается жирным шрифтом. В остальном она ничем не отличается от обычной. Для заголовочных ячеек можно задавать отдельные параметры стиля, так, в админке чата в дизайнах есть параметр «заголовки таблиц», в котором вы и определяете параметры для заголовочных ячеек.

Для таблицы можно определить заголовок:
<CAPTION>…</CAPTION> — заголовок таблицы. Тег может располагаться только внутри таблицы и должен идти сразу после её открытия. Пример:
Код HTML:
<table>
<caption>Я таблица</caption>
<tr><td>Лево+Верх</td><td>Верх</td><td>Право+Верх</td></tr>
<tr><td>Лево</td><td>Центр</td><td>Право</td></tr>
<tr><td>Лево+Низ</td><td>Низ</td><td>Право+Низ</td></tr>
</table>
У заголовка есть 2 параметра, использование которых сильно зависит от браузера. Поэтому заголовки для таблиц лучше не использовать.

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

Структура таблицы, на самом деле, несколько сложнее, чем строки, разделенные на ячейки. Таблицы состоят из: строк заголовка, строк тел (именно тел, а не тела, так как тел может быть несколько) и строк подвала. Эти строки обозначаются тегами:

<THEAD>…</THEAD> — Строки заголовка
<TBODY>…</TBODY> — Строки тела
<TFOOT>…</TFOOT> — Строки подвала

Блоки со строками заголовка и подвала могут быть только одни в таблице, а блоков с основными строками может быть несколько. Для них можно определять разные стили. Вне зависимости от того, в какой последовательности следуют эти блоки в тексте страницы, блок заголовка будет отображен вверху таблицы, а блок подвала — внизу таблицы.

Поясню на примере:
Код HTML:
<table>
<thead>
    <tr><td>Я буду вверху</td></tr>
</thead>
<tfoot>
    <tr><td>Я буду внизу</td></tr>
</tfoot>
<tbody>
    <tr><td>Я буду посередине</td></tr>
</tbody>
<tbody>
    <tr><td>И я тоже посередине</td></tr>
</tbody>
</table>
Если мы не указываем никакой вид блока, а сразу начинаем определять строки и ячейки, то браузер сам за нас определяет всю таблицу как единый блок <tbody>.

Для всех трех блоков имеются следующие параметры:

ALIGN — выравнивание текста внутри ячеек блока.
VALIGN — вертикальное выравнивание внутри ячеек блока.
BGCOLOR — цвет фона ячеек блока.

Единые свойства для колонок нескольких строк

Если у вас не поехала крыша от разных видов блоков, то она поедет сейчас… Дело в том, что строки таблицы можно объединять не видами блоков, а другими тегами:

<COLGROUP> — определяет свойства нескольких колонок таблицы. Тег может служить контейнером для аналогичного тега:
<COL> — определяет свойства одной колонки. (На самом деле можно и не одной, об этом чуть позже).

В случае, если используется связка тегов <COLGROUP> и <COL>, то необходим закрывающий тег </COLGROUP>. Примеры:

Код HTML:
<table rules="groups">
    <colgroup width="150">
    <colgroup span="9" align="center" width="50">
        <col span="5" valign="top">
        <col span="4" valign="middle">
    </colgroup>
    <tr><!-- Тут 10 ячеек --></tr></table>
Код HTML:
<table width="400" border="0" cellpadding="5" cellspacing="0">
   <col width="150">
   <col width="250">
   <tr>
    <td>Первая ячейка
    </td>
    <td>Вторая ячейка 
    </td>
   </tr>
  </table>
Как вы видите, теги абсолютно идентичны, за исключением того, что <COLGROUP> может «делиться» на отдельные <COL>. Прежде, чем описывать все параметры тегов, давайте разберем примеры.
В первом примере для первой колонки задается ширина 150 пикселей, а для следующих девяти ширина в 50 пикселей и выравнивание по центру, из них в пяти вертикальное выравнивание будет по верху, а в остальных четырех — по центру.
Во втором примере задается 2 колонки с шириной 150 и 250 пикселей.

Параметры тегов:
ALIGN — выравнивание содержимого ячеек колонки.
VALIGN — вертикальное выравнивание содержимого ячеек колонки.
SPAN — количество колонок, к которым следует применять параметры.
WIDTH — Ширина колонок.

Частые ошибки, возникающие при использовании таблиц

Довольно часто меня просят разобраться, почему на той или иной стартовой страничке что-то отображается не так, как было задумано автором. Самые часто встречающиеся ошибки:
  1. Попытка вписать текст вне ячеек таблицы.

    Пример:
    Код HTML:
    <table>Я лишний текст
    <tr>И я тоже лишний текст
    <td>Лево+Верх</td><td>Верх</td><td>Право+Верх</td></tr>
    <tr><td>Лево</td><td>Центр</td><td>Право</td></tr>
    <tr><td>Лево+Низ</td><td>Низ</td><td>Право+Низ</td></tr>
    </table>
    В примере 2 лишних текста, вставленных вне ячеек таблицы. Где такое содержимое будет отображаться зависит от браузера, но в любом случае такая запись считается ошибочной.

  2. Незакрытые и неправильно закрытые теги.

    Так писать нельзя:
    Код HTML:
    <tr><td>Раз<td>Два<td>Три</tr>
    И так тоже:
    Код HTML:
    <tr><td>Я ошибка</tr></td>
  3. Лишние ячейки, разное количество ячеек в строках.

    Пример:
    Код HTML:
    <table>
    <tr><td>Лево+Верх</td><td>Верх</td><td>Право+Верх</td></tr>
    <tr><td>Лево</td><td>Центр</td><td>Право</td><td>Самое право</td></tr>
    <tr><td>Лево+Низ</td><td>Низ</td><td>Право+Низ</td></tr>
    </table>
    Обратите внимание, что во второй строке появилась еще одна ячейка. Скорее всего, браузер дополнит первую и третью строки еще одной пустой ячейкой, но если при этом заданы размеры для таблицы и ячеек, поведение браузера предсказать будет трудно.

  4. Использование пустых ячеек.

    Собственно, это не является ошибкой, это просто надо знать. Почти все браузеры не применяют стили к ячейке (границы, фон), если в ней ничего нет, т.е. когда ячейка задается так: <td></td>. В этом случае обычно в ячейку добавляют неразрывный пробел: <td>&nbsp;</td>.
Если у вас есть вопросы по таблицам, прошу не стесняться и задавать их в этой теме. Постараюсь ответить.

© Mickeleangelo
__________________

Html, css, js, php, mysql. Быстро, качественно, дешево — выберите два.
Report Post
Ответить с цитированием

Последний раз редактировалось Mickeleangelo; 04.07.2009 в 05:02.
Эти 16 пользователя(ей) сказали Спасибо Mickeleangelo за это полезное сообщение:
-=ОхотниК=- (25.10.2009), Black widow (15.04.2010), Domino (12.01.2011), Evgeny aKa СгУщЕнКa (02.08.2010), eXandr (06.07.2009), Girl Vip (24.01.2010), Heartbeat (07.08.2012), InfinitI (04.07.2009), Mistik (04.07.2009), Rebel Yell (04.07.2009), Star (04.07.2009), Vice (20.10.2009), xxx (12.06.2010), ЗлаЯ_БякО (09.05.2010), Ночная Волчица (29.03.2010), Твиш (12.02.2010)
Старый 11.08.2009, 14:04   #2
 
Сообщений: n/a
По умолчанию

Конечно на таблицах легче писать сайт, но на css лучше) и больше преимуществ у него)))
Report Post
Ответить с цитированием
Старый 20.10.2009, 13:08   #3
 
Регистрация: 20.11.2007
Сообщений: 180
Вы сказали Спасибо: 79
Поблагодарили 63 раз
Репутация: 67
™†москва†™ вне форума
По умолчанию

лучше на дивах)
Report Post
Ответить с цитированием
Старый 21.02.2010, 05:25   #4
 
Регистрация: 25.03.2009
Адрес: Красноярск
Сообщений: 51
Вы сказали Спасибо: 79
Поблагодарили 20 раз
Репутация: 30
Отправить сообщение для Baunti с помощью ICQ Отправить сообщение для Baunti с помощью Skype™
Baunti вне форума
По умолчанию

немного не поняла, а как сделать, чтоб не табличка была, а просто раздилительная полоска по вертикале? от по горизонтале тэг <HR> , а по вертикали? или я что-то не догоняю(
Report Post
Ответить с цитированием
Старый 21.02.2010, 12:41   #5
 
Регистрация: 06.05.2007
Сообщений: 939
Вы сказали Спасибо: 271
Поблагодарили 2,651 раз
Репутация: 2546
Отправить сообщение для Mickeleangelo с помощью ICQ
Mickeleangelo вне форума
По умолчанию

Baunti, тега вертикальной разделительной полосы нет.
__________________

Html, css, js, php, mysql. Быстро, качественно, дешево — выберите два.
Report Post
Ответить с цитированием
Этот пользователь сказал Спасибо Mickeleangelo за это полезное сообщение:
Baunti (21.02.2010)
Ответ

Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изучаем HTML. Часть 8 — Что такое CSS Mickeleangelo Уроки 6 31.10.2009 13:15
Изучаем HTML. Часть 6 — Списки Mickeleangelo Уроки 0 20.03.2009 00:19
Изучаем HTML. Часть 5 — Ссылки Mickeleangelo Уроки 0 14.03.2009 16:57
Изучаем HTML. Часть 3 — Атрибуты тегов Mickeleangelo Уроки 0 09.03.2009 17:25
Изучаем HTML. Часть 1 — Основы Mickeleangelo Уроки 0 06.03.2009 12:56


Текущее время: 13:36. Часовой пояс GMT +4.


Рейтинг Chat Planet Top
Посетителей всего
Просмотров сегодня
Посетителей сегодня
Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd. Перевод: zCarot
При перепечатке материалов форума обязательна активная ссылка на тему — источник информации.