Таблицы в HTML (2)

Таблицы в HTML(3) Основы HTML

Да, да – в той ячейке тоже достаточно прописать rowspan=”2″.
  А что, если в правой колонке нам надо три ячейки?

 

1 3 3b
2 3c
3d
<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, естественно, в той ячейке, которая занимает площадь нескольких.):

1
2 3

Так же следует отдельно запомнить, что параметры, вставляемые в тег открытия строки (<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)

Читать также:  Добавляем фон в HTML

итак.. теги выравнивания. Как правильно их прописывать и с чем они связаны? Вспоминаемпринцип наследования* тегов, про который шла речь во “введении“.
Назначая какой-либо части или всей таблице желаемое свойство, следует представлять, как оно повлияет на расположенную в таблице информацию:

выравнивание по левому краю
без параметров
тег выравнивания <centre></centre>, примененный на эту ячейку, на вложенную таблицу никоим образом не влияет – только на текст.
внутри ячейки применен параметр “выравнивание справа”, но ему
противостоит тег равнения по середине – как видим тег выравнивания по центру получает приоритетное влияние, как бы “забивая” старший тег.

в это же время тег равнения на центр совершенно не влияет на выравнивание внутри таблицы другой таблицы или картинки – тег <centre></centre>влияет только на текст.

 

 

 

 

 

 

 

применен тег выравнивания по левму краю, как в ячейке, так и в виде стандартного <centre>
в начало таблицы вставлен тег выравнивания по правому краю.
а текст, как видите, может и обтекать таблицу с краев, и прилегать к тому краю, по которому выравнен.

Примечание: окно при просмотре вышеприведенного примера должно быть распахнуто пошире – иначе выравнивание можно не заметить (если вложенные таблицы упрутся в края основной таблицы).

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

логотип
и баннер
меню

конкретно у моего сайта структура чуть посложнее:

меню
1

 

баннер
менюшка 2
содержимое
менюшка 2
баннер
меню
3

Основная таблица с двумя вертикальными разделителями, в ней вложены еще несколько таблиц, на рисунке они выделенны черной каймой. Всмотритесь в структуру в целом – она поделена на вертикальные области, в которых “плавают” таблицы блоков – левой части, центральной части и правой части страницы.
Зачем такие сложности? Очень просто – если сделать структуру в виде:

лого-тип ?

баннер
текст текст текст текст текст текст текст
меню? содержимое

Как видим из примера, единой таблицей наш дизайн не получится – ведь “распирающий” одну из ячеек текст исказит весь дизайн :0(
Вот именно поэтому и нужно пользоваться вложенными в одну большую таблицу несколькими таблицами-блоками. Кроме того, это открывает дополнительные возможности по разметке всего этого хозяйства.
Например у нас есть угол таблицы с менюшкой. От края надо отступить эндцать миллиметров, чтобы буквы не касались края экрана. Как это сделать? Способов есть много.
Например, ставим в ячейке главной таблицы выравнивание по правому краю, а в таблице, которую туда вкладываем, ставим выравнивание по левому. Вот что у нас получается:

логотип
1 пункт
2 пункт
3 пункт
4 пункт
5 пункт
Ширина левой колонки – 130 пикселей, ширина вложенной таблицы – 110.
В результате манипуляций с выравниванием имеем отступ от левого края 20 пихелей (разницу в ширине столбца и вложенной таблицы)
Регулируем ширину вложенной таблицы. Чем она шире, тем ее левый край и, ессно, текст в ней, ближе к краю экрана.
пункт 1
пункт 2
пункт 3
пункт 4
пункт 5
А можно сделать и такой эффект – тоже смотрится вполне прилично.

Но (более правильно!) чтобы улучшить восприятие текста, прежде всего советую воспользоваться в основной таблице отступом от краев (тег cellpadding), благодаря чему у вас останутся элегантные поля. Чтобы таблица не портила вида своей рамкой, советую основную таблицу делать “невидимой” при помощи тега border (назначьте “бордер=нуль” и рамки таблицы будет не видно). Также не забывайте пользоваться тегом “justify”, который, чтобы не пихать его в текст непосредственно, можно вписать в конкретную ячейку – <td align=”justify”><td>.

Продолжим? Читаем дальше…

Оцените статью
Новостной портал
Добавить комментарий