Объединенный Открытый Проект - Сайт для Настоящих Компьютерщиков

Объединенный Открытый Проект

Сайт для Настоящих Компьютерщиков

; Логин:
  Пароль:
Обычный
Безопасный
Запомнить пользователя



Зарегистрироваться
Забыли пароль?
 
 
 
Объединенный Открытый Проект »   Дизайн, HTML, CSS, JavaScript »   Эффективная верстка таблиц
RSS

Эффективная верстка таблиц

Несколько полезных советов по использованию CSS

Текущий рейтинг темы: Нет

<<Назад  Вперед>>Модератор: GramПечать
 
4X_Pro
Руководитель Проекта
Настоящий Компьютерщик
4X_Pro
Откуда: Москва
Всего сообщений: 2994
Рейтинг пользователя: 79





Дата регистрации на форуме:
29 сен. 2001
Неоднократно сталкивался с проблемой, когда требовалось сверстать таблицу так, чтобы верхняя и нижняя строка были одним стилем, а все остальные — другим (в основном, это требуется для форм).
Раньше я решал эту проблему следующим образом: для каждого тега TR прописывал соответствующий class, что хотя и позволяло достичь нужного результата, создавало большой объем кода.
Однако есть более простое и красивое решение: использование тегов thead, tbody и tfoot в сочетании с возможностью задавать стили для вложенных тегов. В этом случае достаточно будет в HTML прописать класс только для таблицы в целом:

<form>

<table class="frmtbl" cellspacing=1>

<thead><tr><td colspan=2>Это заголовок таблицы!</thead>

<tr><td width=50%>Описание поля 1<td><input type=text name=field1>

.....

<tfoot><tr><td colspan=2><input type=submit value='Отправить'></tfoot>

</table></form>


В этом случае в CSS должны быть прописаны следующие стили:

.frmtbl { /*задание стиля таблицы в целом*/ }

.frmtbl thead { /*задание стиля для заголовка таблицы */ }

.frmtbl tbody { /*задание стиля для основной части таблицы*/ }

.frmtbl tfoot { /* задание стиля для нижней части таблицы */ }


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

Кроме этого, не следует забывать, что стандарт HTML 4 допускает отсутствие закрывающих тегов </td> и </tr>, что также существенно уменьшает обьем кода.

---
Каждый человек всегда может найти, чем он может быть полезен окружающим. Проблема только в одном: слишком многие не хотят это искать.
4X_Pro
Руководитель Проекта
Настоящий Компьютерщик
4X_Pro
Откуда: Москва
Всего сообщений: 2994
Рейтинг пользователя: 79





Дата регистрации на форуме:
29 сен. 2001
А вот способ избавиться от аттрибутов cellspacing и cellpadding с помощью CSS:

/* cellspacing=0 */
TABLE {border-collapse: collapse;}

/* cellpadding=0 */
TABLE TD {padding: 0px}

/* cellspacing=5 */
TABLE {border-collapse: separate; border-spacing: 5px}

/* cellpadding=3 */
TABLE TD {padding: 3px}

---
Каждый человек всегда может найти, чем он может быть полезен окружающим. Проблема только в одном: слишком многие не хотят это искать.
<<Назад  Вперед>>Модератор: GramПечать
Объединенный Открытый Проект »   Дизайн, HTML, CSS, JavaScript »   Эффективная верстка таблиц
RSS
Быстрый переход в раздел:


Время выполнения скрипта: 0.0330. Количество выполненных запросов: 17, время выполнения запросов 0.0250