...

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

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

Как видим – таблицы позволяют сделать практически любой эффект, кроме наложения – в этом у слоев большое преимущество, но о них позже… Собственно, про таблицы на этом не заканчивается, просто остальные области относятся скорее к манипуляциям стилями и слоями.
Но напоследок уточним все параметры, какими можно манипулировать в таблицах:

выравнивание : width и height – пишутся последовательно или одиночно. Транскрипция примерно<td width=”число” height=”число”> </td>
Параметры задаются целым числом, либо же целым числом с %, т.е. =”100%” – выравнять по ширине от стенки до стенки.

<table width=”100″ border=”0″ height=”100″ cellspacing=”4″ cellpadding=”0″ bgcolor=”#999999″>
<tr bgcolor=”#CCCCCC”>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr bgcolor=”#CCCCCC”>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr bgcolor=”#CCCCCC”>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

или вот так:

<table width=”100″ border=”0″ height=”100″ cellspacing=”4″ cellpadding=”0″ bgcolor=”#999999″>
<tr bgcolor=”#CCCCCC”>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr bgcolor=”#CCCCCC”>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr bgcolor=”#CCCCCC”>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

занятно, да? Теперь уточним значение использованных тегов:
bgcolor=”код из шести цифр вида #000000″ – задает фон ячейке, либо таблице – в зависимости, куда вставлен этот параметр.

bordercolor=”#FFFFFF” – цвет бордюра (рамки)

Ну и про манипуляции с cellspacing и cellpadding не забываем :0) поварьируйте их размеры.

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

Такой способ куда экономичнее, чем подставление картинок – ведь всяко меньшее количество кода HTML, чем в самой маленькой картинке. Правда есть один нюанс – все раз загруженные с сайта картинки кэшируются у вас в компьютере и если, например, таких картинок-уголков у вас добрый десяток, это не означает, что одна и та же картинка будет грузиться десять раз.    Напротив, она загрузится единожды и расставится по всем нужным местам. С таблицей это реализовать куда сложнее, особенно, если ваш хостинг не имеет ни SSI ни PHP. Так что в общем-то в большинстве случаев проще все-таки пользоваться картинками со сторонами пикселов по 5-10.

Да, еще мелкая, но полезная фича – например, нам нужно вписать текст одной строкой, и чтоб таблица подстроилась под ширину этой самой строки. Но зачастую, если у таблицы не определен размер или определен заведомо меньший, чем у вашей строки, эту самую строку бродилка перенесет во вторую. Чтобы не позволить такого переноса, нужно в тег ячейки вставить слово nowrap. Никаких параметров ему прописывать не нужно, просто выделить с обеих сторон пробелами. Строка в такой ячейке будет всегда прямая. Помните только, что она будет “распирать” дизайн при попытке ужать окно до более узких размеров. Советую проверить, как это будет смотреться и помнить об этом нюансе.

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

Спонсоры статьи:
Оцените статью
Добавить комментарий