Советы по HTML и Web-дизайну. Примеры страниц

Советы по дизайну 2 (таблицы)

• Таблицы
• Навигация по сайту 2

Таблицы

Таблицы - очень полезный компонент Web-дизайна. По стандарту HTML 4.0 их следует использовать только для размещения табличных данных, а визуальное форматирование возложить на контейнер блока <div>...</div>. Однако на практике более удобно работать с таблицами, т.к. они содержат жестко следующие друг за другом ячейки.

Таблицы (<table>...</table>) состоят из ячеек (<td>...</td>), находящихся в строках (<tr>...</tr>). Таблицы могут содержать общий заголовок (<caption>) и/или заглавные ячейки (<th>...</th>). Заголовок - это текст располагающийся рядом с таблицей. Единственное отличие заглавных ячеек от простых: текст в заглавных ячейках по умолчанию имеет полужирное начертание.

Ячейка может занимать несколько строк (параметр rowspan) или столбцов (параметр colspan), см. ячейки 2,1 и 2,2 в примере.

Таблицы могут быть вложенными.

Вся таблица, а также каждая ячейка могут иметь собственный цвета фона (параметр bgcolor) и рамки (параметр bordercolor).

а это HTML код приведенной таблицы

<table border="4" bgcolor="#00FF00" align="center">
 <caption>Это заголовок таблицы</caption>
  <tr>
    <td align="center">ячейка 1,1</td>
    <th align="center">заголовок 1,2</th>
    <th align="center">заголовок 1,3</th>
  </tr>
  <tr>
    <td rowspan="2" align="center">ячейка 2,1</td>
    <td colspan="2" align="center">ячейка 2,2</td>
  </tr>
  <tr>
    <th align="center" bgcolor="#008080">
        заголовок 3,2</th>
    <td align="center">ячейка 3,3</td>
  </tr>
  <tr>
    <td align="center" bgcolor="#FFFF00">
        ячейка 4,1</td>
    <td rowspan="2" colspan="2" align="center" 
        bordercolor="#008000">ячейка 4,2
      <table bgcolor="#6699CC" border="2">
       <tr><td colspan="2" align="center">Вложенная таблица</td></tr>
       <tr><td>ячейка 2,1</td><td>ячейка 2,2</td></tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align="center">ячейка 5,1</td>
  </tr>
</table>

Сами таблицы можно выравнивать относительно текста аналогично изображениям (параметр <table align=...>) .

Внутри ячейки таблицы задается как горизонтальное (параметр <td align), так и вертикальное выравнивание (<td valign).

Параметр <table width=...> позволяет задавать ширину таблицы в процентах относительно ширины окна или в пикселях.

Параметр <td width=...> позволяет задавать ширину ячейки в процентах относительно ширины таблицы или в пикселях.

Параметр <td nowrap... запрещает автоматический перенос содержимого ячейки на новую строку.

Навигация по сайту 2

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

Это достаточно популярный способ оформления web-страниц. Так сделано и на этой странице. Но этим было нарушено единообразие дизайна сайта, что очень плохо.