Пример формирования сложной таблицы

Автор: | 04.03.2012

Основные вопросы статьи:

  1. Как правильно написать код таблицы?
  2. Как объединить столбцы таблицы?
  3. Как объединить строки таблицы?

Нередко web-дизайнеры для разметки страниц используют таблицы. Конечно наиболее правильный способ делать это с помощью таблиц стилей (файлов *.css), но еще много новичков, да и тех, кто по старинке еще используют обычные таблицы. В этом безусловно есть одно преимущество — при незагрузки файла css по какой либо причине, сайт все равно имеет более или менее задуманную дизайнером структуру. Потеря же файла css при разметке без использования таблиц грозит, как привило, полной потери дизайна.

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

Выглядит эта таблица вот так:

Шапка
Блок1 левой колонки Центральный блок Правая колонка
Блок2 левой колонки Левый блок1 центральной колонки Правый блок1 центральной колонки
Блок3 левой колонки Левый блок2 центральной колонки Правый блок2 центральной колонки
Подвал

А вот и сам код:

<table width=»100%» border=»1″>
  <tr>
    <td colspan=»4″>Шапка</td>
  </tr>
  <tr>
    <td>Блок1 левой колонки</td>
    <td colspan=»2″>Центральный блок</td>
    <td rowspan=»3″>Правая колонка</td>
  </tr>
  <tr>
    <td>Блок2 левой колонки</td>
    <td>Левый блок1 центральной колонки</td>
    <td>Правый блок1 центральной колонки</td>
  </tr>
  <tr>
    <td>Блок3 левой колонки</td>
    <td>Левый блок2 центральной колонки</td>
    <td>Правый блок2 центральной колонки</td>
  </tr>
  <tr>
    <td colspan=»4″>Подвал</td>
  </tr>
</table>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *