Блог Хасанова Ильи о сайтостроении
  • База знаний
    • Создай свой сайт сам
      • 1 шаг (подготовка)
      • 2 шаг (оформление)
      • 3 шаг (юзабилити)
      • 4 шаг (хостинг/домен)
    • Миграция Joomla
      • C версии 2.5 на 3x
    • Расширения Joomla
      • Компоненты
      • Плагины
      • Модули
    • CSS, HTML, JavaScript
      • Магия CSS стилей
      • Готовые CSS3 кнопки
      • Скрипты
    • Графика и текст
      • Бесшовные фоны
      • Шрифты для сайта
    • Прочее
      • Нужно знать!
      • FAQ Joomla
      • Это интересно!
  • Онлайн-сервисы
    • CSS генераторы
      • Создать градиент
      • Создать кнопку
      • Создать тень у текста
      • Создать тень у блоков
  • Заказать сайт
    • Потенциальному заказчику
      • Вопросы и ответы
      • Заказ-онлайн
  • Отзывы
  • Контакты
Блог Хасанова Ильи о сайтостроении
Партнерская компания AIR для каналов видеохостинга youtube
  • База знаний
  • CSS, HTML, JavaScript
  • Магия CSS стилей
  • CSS3 оформление таблицы №2
30 июня2014

CSS3 оформление таблицы №2

30 июня 2014. Категория: Магия CSS стилей

CSS3 оформление таблицы

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

Разберем еще один вариант оформления таблицы. На этот раз будут использоваться не только CSS3 стили, но еще и библиотека JQuery.

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

Пример оформления таблицы

Совместимость Пиво Водка Коньяк Виски Вино
Пиво Да Да Да Да Да
Водка Да Да Да Да Да
Коньяк Да Да Да Да Да
Виски Да Да Да Да Да
Вино Да Да Да Да Да

HTML разметка таблицы

styletable aller - заданный класс таблицы, определяющий её оформление;
width: 100% - свойство, делающее таблицу адаптивной для различных размеров экрана;
text-align: center - свойство, выравнивающее текст таблицы по центру.

<table class="styletable aller" style="width: 100%; text-align: center;">
 <thead>
  <tr>
   <th style="background-color: #ec3e31;">Совместимость</th>
   <th>Пиво</th>
   <th>Водка</th>
   <th>Коньяк</th>
   <th>Виски</th>
   <th>Вино</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td style="background-color: #118ec7;"><span style="color: #ffffff;">Пиво</span></td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
  </tr>
  <tr>
   <td style="background-color: #118ec7;"><span style="color: #ffffff;">Водка</span></td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
  </tr>
  <tr>
   <td style="background-color: #118ec7;"><span style="color: #ffffff;">Коньяк</span></td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
  </tr>
  <tr>
   <td style="background-color: #118ec7;"><span style="color: #ffffff;">Виски</span></td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
  </tr>
   <tr>
   <td style="background-color: #118ec7;"><span style="color: #ffffff;">Вино</span></td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   <td>Да</td>
   </tr>
 </tbody>
</table>

CSS стили оформления таблицы

table{border:1px solid #343434}
table th{background: #118EC7;color:#fff;padding:10px;text-align:center;
border:1px solid #343434;font-weight:100;}
table tr{background:#FFFFFF;}
table tr:nth-child(even){background:rgba(52,52,52,0.06);color:#343434;}
table td{border:1px solid #343434;padding:10px;text-align:center}
table td:nth-child(even){text-align:center}
.hover{background-color:#575757;color:#fff}
.hovercell{background-color:#ec3e31;color:#fff}
.click{background-color:#ec3e31;text-align:center;color:#fff}

Видео инструкция по оформлению таблицы при помощи CSS3

Для подключения файлов stylecsstable.css и jquery.tablehover.js понадобится следующий код:

<link rel="stylesheet" href="/путь до файла stylecsstable.css" type="text/css" />
<script src="/путь до файла jquery.tablehover.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(document).ready(function() {
  $('.styletable').tableHover({
  colClass: 'hover',
  cellClass: 'hovercell', 
  clickClass: 'click' }); });
 </script>

Скачать исходные файлы Смотреть демо

Комментарии

  • Нет комментариев. Ваш будет первым!

Закрепленные

Понравившиеся

Чтобы оставить комментарий, необходимо авторизоваться!
Надежный хостинг, который стоит своих денег!

Авторизация

           

Последние комментарии

Илья Хасанов
Добрый день, на сайте https://yootheme.com/joomla-templates есть бесплатный шаблон https://prnt.sc/vqe77q, https://prnt.sc/vqe7rh
1 шаг к созданию собственного ...
26.11.2020
Дмитрий Филев
Добрый день!! Посоветуйте где взять хороший бесплатный шаблон, для сайта-визитка, блог? В вашем обучении на сайте yootheme.com нет бесплатных шаблонов...
1 шаг к созданию собственного ...
26.11.2020
Хасанов Илья
Здравствуйте, Олег! http://prntscr.com/hbnd1l
2 шаг к созданию собственного ...
17.11.2017
Олег Насиканов
Привет Илья, откуда на 3 минуте из папки дополнительные материалы берётся файл стилей. Где их взять? Заранее благодарен.
С уважением, Олег.
2 шаг к созданию собственного ...
17.11.2017
Роберт Сидоров
Существует ли модуль, отображения новостей как у Вас на сайте реализовано? Нужно, чтобы было разграничение новостей и дата отображалась как у Вас. Воз...
Mj Simple News - модуль вывода...
23.09.2017
Сергей Лаврик
Есть какой видосик по созданию безшовного фона?
Бесшовные фоны для сайта
17.07.2017

Полезные ссылки

  • Скачать
    • Актуальная версия CMS Joomla
    • Актуальная версия Denwer
    • Текстовый редактор Notepad++
    • FTP-менеджер Filezilla
  • Оптимизация кода сайта
    • Анализ сайта PageSpeed Insights
    • Анализ файла robots.txt
    • Проверка скорости загрузки сайта
    • Сжатие JS кода
    • Сжатие CSS кода
  • Ускорение индексации сайта
    • Ускорение индексации в Yandex
    • Ускорение индексации в Google
    • Ускорение индексации в Bing
    • Ускорение индексации в Mail.ru
  • Работа с текстом
    • Подбор ключевых слов Wordstat
    • Проверка текста на уникальность
  • Работа с графикой
    • Сжатие PNG без потерь качества
    • Сжатие JPG без потерь качества
    • Преобразовать PNG в SVG
    • Создать свой бесшовный фон
  • Прочее
    • Онлайн-конструктор карт
    • Генератор надежных паролей
    • Генератор QR-кода

Подписывайся на канал Youtube

Подписывайся на группу в ВК

 

Финансовая поддержка блога

Поддержка блога

Если Вы особо цените труд автора блога и желаете не просто отблагодарить его словестно, но еще и материально - данный раздел сайта создан специально для Вас!

  • Создать сайт на CMS Joomla
  • 1 шаг (подготовка)
  • 2 шаг (оформление)
  • 3 шаг (юзабилити)
  • 4 шаг (хостинг/домен)
  • Миграция сайта на CMS Joomla
  • С версии 2.5 на 3x
  • Расширения CMS Joomla
  • Компоненты
  • Плагины
  • Модули
  • CSS, HTML, JavaScript
  • Магия CSS стилей
  • Готовые CSS3 кнопки
  • Бесшовные фоны на чистом CSS
  • Скрипты
  • Графика и текст
  • Бесшовные фоны/паттерны
  • Шрифты для сайта
  • Прочее
  • Это должен знать каждый сайтостроитель!
  • Вопросы и ответы Joomla
  • Онлайн CSS генераторы
  • Создать CSS градиент
  • Создать CSS кнопку
  • Создать тень у текста
  • Создать тень у блоков
  • Заказать создание сайта
  • Вопросы и ответы
  • Оставить заявку на разработку сайта
  • Об авторе блога
  • Отзывы
  • Контактная информация

При полном или частичном копировании материалов сайта - ссылка на данный ресурс обязательна!
Бесплатные авторские видеоуроки и статьи о CMS Joomla | Ilyakhasanov.ru © 2017

  • База знаний
    • Создай свой сайт сам
      • 1 шаг (подготовка)
      • 2 шаг (оформление)
      • 3 шаг (юзабилити)
      • 4 шаг (хостинг/домен)
    • Миграция Joomla
      • C версии 2.5 на 3x
    • Расширения Joomla
      • Компоненты
      • Плагины
      • Модули
    • CSS, HTML, JavaScript
      • Магия CSS стилей
      • Готовые CSS3 кнопки
      • Скрипты
    • Графика и текст
      • Бесшовные фоны
      • Шрифты для сайта
    • Прочее
      • Нужно знать!
      • FAQ Joomla
      • Это интересно!
  • Онлайн-сервисы
    • CSS генераторы
      • Создать градиент
      • Создать кнопку
      • Создать тень у текста
      • Создать тень у блоков
  • Заказать сайт
    • Потенциальному заказчику
      • Вопросы и ответы
      • Заказ-онлайн
  • Отзывы
  • Контакты