Основы сайтостроительства, дизайна, графики, html (хтмл)

Уникальный учебник. Создайте свою домашнюю страничку своими руками и без html редакторов

Учебник по Html

 Главная
 Вступление
 Словарь
 Оглавление
 Учебник


Советы

 Начинающему
     сайтостроителю

Интересные проекты

 Создание сайта
 Раскрутка сайта

Главная / Html / Учебник по Html. Ступенька 25-ая.

Учебник по Html для чайников. Таблицы.

Ступенька 25-ая.


Итак, мы остановились на такой таблице:



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



Такая красота достигается с помощью атрибута cellspacing, равного нулю:



     
<table cellspacing="0">
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>


Можно наоборот увеличить пространство между ячейками, допустим, пусть cellspacing="5", тогда получим следующее:



Как видите, и то, и другое мы можем использовать как дизайнерский прием, т.к. даже уже на наших примерах это смотрится не стандартно.

Обычно атрибут cellspacing, рассматривается в руководствах и учебниках в паре с атрибутом cellpadding, который задает верхнее, нижнее, правое и левое поля ячейки. Чтобы было видно нагляднее, я для начала прижму текст ячеек первого ряда к верху, и нижнего - к низу, используя атрибут valign:



Теперь зададим атрибут cellpadding="5":



В этих примерах мы отчетливо видим верхнее и нижнее поля (левое и правое тоже присутствуют, но на данном примере это не очевидно). Теперь вам должно быть понятно, что поля отделяют содержание ячейки от ее краев. Убрать поля можно, задав атрибут cellpadding равный нулю (по умолчанию небольшие поля все-таки у таблиц есть, как и пространство между ячеек). Для тех, кто все еще не может составить код сам - вот он (для последнего варианта таблицы):



     
<table cellpadding="5">
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2" valign="top"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>2x2</center> </td>
</tr>
</table>


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



<<< Ступенька 24-2 - дополнительная: Назад | Далее: Ступенька 26-ая >>>

Copyright © 2008  book-html при копировании любых материалов, ссылка на сайт обязательна!

Поиск




Ленты новостей:

 iXBT.com
 Новости Компьюлента
 SecurityLab.ru
 Газета.Ru
 www.AIF.ru



Проститутки Москвы и Питера


  Поиск работы и подбор персонала в Москве, регионах и за рубежом ABC - партнерская программа  CD/DVD диски от лучших производителей   Торговая площадка Если хотите что-то продать или купить. Вам сюда.  Тесты - проверь себя и близких.

Сайт создан в системе uCoz