Нонче тут

Сейчас 42 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте

Метод, который я хочу предложить, не оригинален и возможно многим известен, но наверняка, не всем, придуман он не мной, а подсмотрен на GMail, немного развит и адаптирован, для его работы требуется только HTML и CSS.

Практические CSS3 таблицы с закругленными углами

Существуют некие дискуссии о том, когда и как использовать таблицы в веб-разработке. Вывод один: когда мы имеем дело с табличными данными, таблицы просто необходимы.

Проектирование дизайна таблицы всегда является сложной задачей. Если ваша таблица трудно сканируется взглядом, как правило, раздражает пользователей, они теряют фокус и путаются в столбцах и строках.

Сегодня мы создадим красивую таблицу с иcпользованием CSS3. Так же будем использовать jQuery для совместимости с некоторыми браузерами.

И что хорошего в оформлении этих таблиц?

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

  • закругленные углы без использования изображений
  • легкость обновления - нет дополнительных CSS идентификаторов и классов
  • удобно и легко читается.

 

Закругленные углы таблицы


Используем трюк: в то время как свойство border-collapse и имеет значение separate, нужно установить для свойства border-spacing значение 0.

table {
    *border-collapse: collapse; /* Для IE7 и ниже */
    border-spacing: 0;
}

Для IE7 и ниже нам необходимо добавить специальную строку, для обеспечения совместимости вывода таблицы.

Затем нам просто нужно закруглить некоторые углы:

th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
<< Первая < Предыдущая 1 2 Следующая > Последняя >>
(Страница 1 из 2)
Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.