База знаний по программированию и не только
PHP HTML JavaScript
Осталось...

Навигация

Облако тегов
1 сентября, 2014, center, Html-теги, Manxter, noindex, text-align, Аварии, Видео, Воспитание, ДТП, Дети, Дизайн, Ель, Здоровье, Индексирование, Кредит, Кресло, Мода, Нектар, Общество, Отсчет, Офис, Питание, Платья, Поведение, Покупка, Праздники, Ремонт, Свадьба, Семья, Сок, Сонник, Счетчик, Таблицы, Толкование, Тренд, Фрукты, Школа, Яндекс

Показать все теги

Реклама

Опрос

Дата: 4-03-2012, 14:28, Добавил: Grozniy, Раздел: HTML примеры
Пример формирования сложной таблицы Вопросы, которые затрагивает статья:

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

Нередко 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>

Просмотров: 6201, Комментариев: 0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Самое читаемое

Календарь
«    Июль 2018    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031 

Полезное

Архив статей
Июль 2015 (1)
Декабрь 2014 (3)
Ноябрь 2014 (10)
Октябрь 2014 (4)
Июнь 2014 (1)
Январь 2014 (2)