Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Таблицы

Таблицы - один из основных разделов html. С помощью таблиц можно не только представлять информацию в табличном виде, но и верстать веб-страницы. Но обо всём по порядку.

Рассмотрим на примере как устроена таблица.

<table border=1>
 <caption>Заголовок таблицы</caption>
 <tr>
  <td>&nbsp;</td>
  <td>Первая строка, вторая ячейка</td>
 </tr>
 <tr>
  <td>Вторая строка, первая ячейка</td>
  <td>Вторая строка, вторая ячейка</td>
 </tr>
</table>

Посмотрим на результат выше написанного фрагмента текста, вот кстати и он:

Заголовок таблицы
  Первая строка, вторая ячейка
Вторая строка, первая ячейка Вторая строка, вторая ячейка

Теперь дадим комментарии, рассмотренному выше примеру.

Если в ячейке таблицы ничего не написано, а рамка вокруг ячейки задана, то она (рамка) не будет нарисована. Чтобы рамка была нарисована в пустой ячейке, нужно в этой ячейке написать символ &nbsp; (мы его уже встречали).

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

Рассмотрим теперь пример создания веб-страницы при помощи таблицы.

<html>
 <head>
  <title>Пример создания веб-страницы с помощью таблицы</title>
 </head>
 <body>
  <table width=100% border=1>
   <tr>
    <td colspan=3>
     <h1 align=center>Здесь будет шапка сайта, баннер например</h1>
    </td>
   </tr>
   <tr>
    <td width=15% valign="top">
     <h4>Главная</h4>
     <h4>Статьи</h4>
     <h4>Фотографии</h4>
     <h4>Файлы</h4>
     <h4>Карта сайта</h4>
    </td>
    <td width=60%>
     <h1 align=center>Основной текст</h1>
     <P>Представим, что в левой части экрана, вместо обычных заголовков расположились ссылки на страницы сайта.</P>
     <P align=center>
      <img src="space.JPG" alt="космос">
     </P>
    <td width=25% valign=top>А в этой графе таблицы будет место для рекламы.</td>
   </tr>
   <tr>
    <td colspan=3>
     <h2 align=center>Внизу тоже будут некоторые ссылки, навигация, счётчик посещений и надпись <em>"все права защищены"</em></h2>
    </td>
   </tr>
  </table>
 </body>
</html>

Результат смотри здесь.


<<Предыдущая | Оглавление | Следующая>>