| |
Содержание:
Об этой книге
Введение
в HTML
Нужные программы
Шрифты, размер
Гиперссылки
Цвет
Таблицы
Вставляем картинку
Работаем с фоном
Спецсимволы
Фреймы
Слои
стили,
CSS
SSI
Локальный
сервер
JavaScript
понятия
специальные теги:
title=
alt=
| |
|
| |
| Таблицы в HTML. |
Таблицы в HTML являются одним из
самых необходимых элементов и самыми универсальными средствами
форматирования картинок и текста. Есть, конечно, и альтернативные
способы, такие как слои
например, но это громоздко, тяжко и неудобно... Дело в том,
что всякая бродилка видит слои по своему, и для более менее
приличного отображения слоев необходимо писать длинный и нудный
скрипт, да и тот не панацея... В то время, как таблицы, хоть
в некоторых нюансах нередко и расходятся, но расхождение-то
минимально.
Итак, код простейшей таблицы 2х2
ячейки:
<table width="200" border="1"
cellspacing="0" cellpadding="0">
начало таблицы содержит:
width - ширина (у нас 200
пихелей),
border - толщина каемки/бордюра нашей
таблицы (у нас 1 пихель)
cellspasing - расстояние
между ячейками,
cellspadding - отступ от границ
ячейки внутри нее.
остальной код:
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
|
тег открытия строки
тег ячейки 1
тег ячейки 2
конец строки
начало второй строки
тег ячейки 3
тег ячейки 4
конец второй строки
конец таблицы |
Вот такая вот табличка:
добавив в код сегмент:
<tr>
<td>3</td>
<td>4</td>
</tr>
мы получим третью строку с двумя столбиками.
Количество ячеек может располагаться и по-другому - например
так:
|
<table width="200" border="1"
cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
</tr>
</table> |
выделение жирным в коде соответствует закрашенности серым цветом
в таблице.
все отличие такого построения таблиц залючается в появлении
параметра rowspan="2"
цифра в котором соответствует количеству "подстрок",
т.е. буквально то, сколько строк слилось в этой ячейке:
| |
<table width="200" border="1"
cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>2</td>
<tr align="center">
<td>4</td>
<td>5</td>
</tr>
</table> |
Если в симметричной таблице мы читаем слева-направо,
то тут происходит то же самое, только почему же в коде впереди
2-ки стоит ячейка с цифрой 3? Все очень просто - буквально код
расшифровывается, как "ячейка 1", "ячейка 3,
состоящая из ДВУХ подстрок", ячейка 2, второй строки. Но
физически ячейка 3 принадлежит к ПЕРВОЙ строке! Ведь HTML читается
именно построчно - слева-направо ;0)
А что будет,
если поставить после 3-ки еще такую же ячейку? 3b например?
| |
<table width="200" border="1"
cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td rowspan="2">3</td>
<td rowspan="2">3b</td>
</tr>
<tr>
<td>2</td>
<tr align="center">
<td>4</td>
<td>5</td>
</tr>
</table> |
Да, да - в той ячейке тоже достаточно прописать
rowspan="2".
А что, если в правой колонке нам надо три ячейки?
| |
<table width="200" border="1"
cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td rowspan="3">3</td>
<td>3b</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>3c</td>
</tr>
<tr>
<td>3d</td>
</tr>
</table>
|
Читаем код: Ячейка 1 (обычная) > ячейка
3 (состоит из трех слитых воедино строк) > ячейка 3b (тоже
обычная); тут у нас начинается вторая строка. Начинается она
с ячейки №2, обозначаемой как "ячейка, состоящая из двух
строк, т.е. слитых по вертикали ячеек", а ячейки 3с и 3d
- совершенно обычные ячейки. Для упрочщения понимания строки
в таблице на примере обозначены разными тонами, т.е. каждый
тон соответствует строке. Это немного сложно осознать с наскока,
но это весьма важно - понимать очередность считывания и принцип
построения, так что напрягитесь и постарайтесь :0) От глубины
понимания процесса будет зависеть умение пользоваться ВСЕМИ
преимуществами таблиц, а не 10-15% которыми пользуется большинство.
Если же у нас наличествуют яейки, совмещенные
по горизонтали, то вместо тега rowspan используется тег
colspan, естетсвенно, в той ячейке, которая занимает
площадь нескольких.):
Так же следует отдельно запомнить, что
параметры, вставляемые в тег открытия строки (<tr>) IE
не воспринимаются!!! Вот, не хочет он их видеть и учитывать
и все тут! Некотрые видит, а некоторые - ни в какую. Поэтому
назначать теги будем только самим ячейкам или всей таблице сразу.
Рассмотрим, как задаются размеры
таблиц:
Мы можем задать
ширину всей таблицы в целом единой цифрой. Это может быть, как
100% (т.е. от края до края доступного пространства), так и четкая
ширина в пикселях (на примере - 200):
В коде это пишется так:
<table width="200"
border="1" cellpadding="0" cellspacing="0"> |
Или так:
<table
width="100%" border="1" cellpadding="0"
cellspacing="0"> |
По
умолчанию* (т.е. если в значении ширины после цифры
не идет знак процента (%)), число, указанное в кавычках, будет
расцениваться как пикселы. Главное отличие в том, что если размер
указан жестко, в пикселах, то при сужении окна таблица "упрется"
краями в тег, в который она вложена и не даст ему "сузиться",
если тот имеет ширину, заданную относительно, т.е. в
процентах от доступной ширины. Для большей наглядности рассмотрите
этот пример.
ширину мы задаем, вставляя в тег начала таблицы параметр
width="число ширины (можно в процентах)"
так же можно задать и вертикальный размер -
height="число
ширины (только в пикселях!)"
Имейте
в виду, что сужаемая таблица растягивается по вертикали. И этим
надо пользоваться. НЕ нужно пытаться подогнать текст под жестко-фиксированную
таблицу - это ламеризм. В таблице есть несколько видов выравнивания
содержимого относительно краев таблиц:
| align="left" |
align="middle" |
align="right" |
| valign="top" |
valign="middle"
align="center" |
valign="bottom"
align="right" |
в каждой ячейке указан тип примененного в ней выравнивания,
но кроме них существует еще и параметр justify. Это выравнивание
по ширине с обоих краев. На большинстве страничек причем, что
удивительно, даже на тех, которые делают казалось бы профессиональные
команды, присутствует такой ламеризм как отсутствие выравнивания
по правому краю:
...в
каждой ячейке указан тип примененного в ней выравнивания,
но кроме них существует еще и параметр justify.
Это выравнивание по ширине с обоих краев.
На большинстве страничек причем, что удивительно, даже
на тех, которые делают казалось бы профессиональные команды,
присутствует такой ламеризм как отсутствие выравнивания
по правому краю: |
обратите внимание на правый край - неровно, неряшливо, некрасиво...
и читать противно если это выстроено парой-тройкой столбцов,
как у многих интернет "газет" и "журналов".
Казалось бы - ну и подумаешь?!. однако скорость и простота восприятия
реально выше, когда глаз перескакивает на начало следующей строки
с всегда одинакового места, чем когда строки кончаются +/- 1
см от края. Особенно это касается больших и длинных текстов.
Именно поэтому я всем советую не забывать про
этот важный и нужный тег. Ведь и страничка станет куда красивее,
выстроившись ровными столбиками, а не чем-то на манер потерявшей
половину зубцов расчески :0)
итак.. теги выравнивания. Как правильно их прописывать и с чем
они связаны? Вспоминаем принцип
наследования* тегов, про который шла речь во "введении".
Назначая какой-либо части или всей таблице желаемое
свойство, следует представлять, как оно повлияет на расположенную
в таблице информацию:
выравнивание о левому краю
|
тег выравнивания <centre></centre>, примененный
на эту ячейку, на вложенную таблицу никоим образом не
влияет - только на текст.
внутри ячейки применен
параметр "выравнивание
справа", но ему
противостоит тег
равнения по середине -
как видим тег
выравнивания по центру
получает приоритетное
влияние, как бы "забивая"
старший тег.
|
в это же время тег равнения
на центр совершенно не влияет на выравнивание
внутри таблицы другой таблицы или картинки
- тег <centre></centre>влияет
только на текст. |
|
|
|
применен тег выравнивания по левму краю,
как в ячейке, так и в виде стандартного <centre>
|
в начало таблицы вставлен тег выравнивания по
правому краю. |
а текст, как видите, может и обтекать
таблицу с краев, и прилегать к тому краю, по которому
выравнен. |
Примечание: окно при просмотре вышеприведенного
примера должно быть распахнуто пошире - иначе выравнивание можно
не заметить (если вложенные таблицы упрутся в края основной
таблицы).
При помощи таблиц можно осуществить
самый замысловатый дизайн, расположить содержимое практически
как угодно.. Вот пример типичной организации сайта:
конкретно у моего сайта структура чуть посложнее:
Основная таблица с двумя вертикальными
разделителями, в ней вложены еще несколько таблиц, на рисунке
они выделенны черной каймой. Всмотритесь в структуру в целом
- она поделена на вертикальные области, в которых "плавают"
таблицы блоков - левой части, центральной части и правой части
страницы.
Зачем такие сложности? Очень просто
- если сделать структуру в виде:
| лого-тип
? |
баннер |
текст текст текст
текст текст текст текст |
| меню? |
содержимое |
|
Как видим из примера, единой таблицей наш дизайн
не получится - ведь "распирающий" одну из ячеек текст
исказит весь дизайн :0(
Вот именно поэтому
и нужно пользоваться вложенными в одну большую таблицу несколькими
таблицами-блоками. Кроме того, это открывает дополнительные
возможности по разметке всего этого хозяйства.
Например
у нас есть угол таблицы с менюшкой. От края надо отступить эндцать
миллиметров, чтобы буквы не касались края экрана. Как это сделать?
Способов есть много.
Например, ставим в ячейке
главной таблицы выравнивание по правому краю, а в таблице, которую
туда вкладываем, ставим выравнивание по левому. Вот что у нас
получается:
логотип |
|
1 пункт
2 пункт
3 пункт
4 пункт
5 пункт |
|
Ширина
левой колонки - 130 пихелей, ширина вложенной таблицы
- 110.
В результате манипуляций с выравниванием
имеем отступ от левого края 20 пихелей (разницу в ширине
столбца и вложенной таблицы)
Регулируем ширину вложенной таблицы. Чем
она шире, тем ее левый край и, ессно, текст в ней, ближе
к краю экрана.
|
пункт 1
пункт 2
пункт 3
пункт 4
пункт 5 |
|
А
можно сделать и такой эффект - тоже смотрится вполне
прилично. |
Но (более правильно!) чтобы улучшить
восприятие текста, прежде всего советую воспользоваться в основной
таблице отступом от краев (тег cellpadding), благодаря
чему у вас останутся элегантные поля. Чтобы таблица не портила
вида своей рамкой, советую основную таблицу делать "невидимой"
при помощи тега border (назначьте "бордер=нуль"
и рамки таблицы будет не видно). Также не забывайте пользоваться
тегом "justify", который, чтобы не пихать его в текст
непосредственно, можно вписать в конкретную ячейку - <td
align="justify"><td>.
Как
видим - таблицы позволяют сделать практически любой эффект,
кроме наложения - в этом у слоев большое преимущество, но о
них позже... Собственно, про таблицы на этом не заканчивается,
просто остальные области относятся скорее к манипуляциям стилями
и слоями.
Но напоследок уточним все параметры,
какими можно манипулировать в таблицах:
выравнивание
: width и height - пишутся последовательно или
одиночно. Транскрипция примерно <td width="число"
height="число"> </td>
Параметры задаются целым числом, либо же целым числом с
%, т.е. ="100%" - выравнять по ширине от стенки
до стенки.
|
<table width="100"
border="0" height="100" cellspacing="4"
cellpadding="0" bgcolor="#999999">
<tr bgcolor="#CCCCCC">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#CCCCCC">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#CCCCCC">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table> |
или вот так:
|
<table width="100"
border="0" height="100" cellspacing="4"
cellpadding="0" bgcolor="#999999">
<tr bgcolor="#CCCCCC">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#CCCCCC">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#CCCCCC">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table> |
занятно, да? Теперь уточним значение использованных тегов:
bgcolor="код из шести цифр вида #000000" -
задает фон ячейке, либо таблице - в зависимости, куда вставлен
этот параметр.
bordercolor="#FFFFFF" -
цвет бордюра (рамки)
Ну и про манипуляции
с cellspacing и cellpadding не забываем :0) поварьируйте
их размеры.
При помощи таблиц можно даже
рисовать - например, закругленные уголки. Вот как это выглядит
в сильно увеличенном варианте:
Такой способ куда экономичнее, чем подставление
картинок - ведь всяко меньшее количество кода HTML, чем в самой
маленькой картинке. Правда есть один нюанс - все раз загруженные
с сайта картинки кэшируются у вас в компьютере и если, например,
таких картинок-уголков у вас добрый десяток, это не означает,
что одна и та же картинка будет грузиться десять раз. Напротив,
она загрузится единожды и расставится по всем нужным местам.
С таблицей это реализовать куда сложнее, особенно, если ваш
хостинг не имеет ни SSI ни PHP. Так что в общем-то в большинстве
случаев проще все-таки пользоваться картинками со сторонами
пискселов по 5-10.
Да, еще мелкая, но полезная
фича - например, нам нужно вписать текст одной строкой, и чтоб
таблица подстроилась под ширину этой самой строки. Но зачастую,
если у таблицы не определен размер или определен заведомо меньший,
чем у вашей строки, эту самую строку бродилка перенесет во вторую.
Чтобы не позволить такого переноса, нужно в тег ячейки вставить
слово nowrap. Никаких параметров ему прописывать не нужно,
просто выделить с обеих сторон пробелами. Строка в такой ячейке
будет всегда прямая. Помните только, что она будет "распирать"
дизайн при попытке ужать окно до более узких размеров. Советую
проверить, как это будет смотреться и помнить об этом нюансе.
На этом про таблицы, пожалуй, все, но продолжение
вы еще встретите во многих смежных разделах. А покамест листаем
дальше. |
| <<
работа с цветом |
картинки
>> |
|
|
|
|
|
|
Рекомендую посетить:
|