Таблица с скругленными уголками
Нажмите на картинку, чтобы посмотреть пример вживую.
HTML код таблицы выглядит следующим образом:
<table> <thead> <tr> <th>Purcus</th> <th>Hantis</th> <th>Mastron</th> <th>Jevicon</th> <th>Language</th> </tr> </thead> <tbody> <tr> <td>Gitsome</td> <td>Some one</td> <td>Take mose</td> <td>Likbes</td> <td>Racounter</td> </tr> <tr> <td>Linkage</td> <td>Fordor</td> <td>Miad ron me</td> <td>Diablo core</td> <td>Tidbade</td> </tr> <tr> <td>Hicura</td> <td>Warecom</td> <td>Xamicon</td> <td>Yamama</td> <td>Udoricano</td> </tr> <tr> <td>Lavistaro</td> <td>Micanorta</td> <td>Ebloconte ma</td> <td>Quad ri port</td> <td>Timesquer</td> </tr> </tbody> </table>
Как видно из кода, таблица состоит из головы (контейнер thead) и тела (контейнер tbody). В отдельном файле пропишем для нее стили. Сначала для всей таблицы:
table { width: 100%; /*Ширина таблицы*/ margin-bottom: 18px; /*Отступ снизу от таблицы*/ padding: 0; /*Отступы внутри таблицы*/ font-size: 13px; /*Размер шрифта*/ border: 1px solid #dddddd; /*Граница таблицы*/ border-spacing: 0; /*Отступы между границами ячеек*/ border-collapse: separate; /*Границы ячеек не склеиваются*/ -webkit-border-radius: 5px; /*Радиус скругления углов у таблицы Safari, Chrome*/ -moz-border-radius: 5px; /*Радиус скругления углов у таблицы Mozilla*/ border-radius: 5px; /*Радиус скругления углов у таблицы*/ color: #666666; /*Цвет текста в таблице*/ font-family: Arial; /*Семейство шрифтов*/ }
Общие свойства для ячеек заголовков таблицы и ячеек тела таблицы:
table th, table td { padding: 10px 10px 9px; /*Отступы внутри ячеек*/ line-height: 18px; /*Межстрочный интервал*/ text-align: left; /*Выравнивание текста по левому краю*/ }
Свойства для ячеек заголовков таблицы:
table th { padding-top: 9px; /*Отступы внутри ячеек*/ font-weight: bold; /*Установка жирного начертания шрифта*/ vertical-align: middle; /*Выравнивание по вертикали. Текст находится по середине*/ color: black; /*Черный цвет в ячейках заголовков таблицы*/ }
Свойства для ячеек в теле таблицы:
table td { vertical-align: top; /*Выравнивание содержимого ячейки по верхнему краю*/ border-top: 1px solid #ddd; /*Верхняя граница ячейки*/ }
Устанавливаем свойства для соседних ячеек, используя соседний селектор:
table th+th,table td+td,table th+td { border-left: 1px solid #ddd; /*Стиль для левой границы между двумя ячейками*/ }
Устанавливаем скругленные уголки для крайних ячеек в таблице:
table thead tr:first-child th:first-child, /*Первая строка первая ячейка в заголовке таблицы*/ table tbody tr:first-child td:first-child /*Первая строка первая ячейка в теле таблицы*/{ -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; border-radius: 5px 0 0 0; } table thead tr:first-child th:last-child, /*Первая строка последняя ячейка в заголовке таблицы*/ table tbody tr:first-child td:last-child /*Первая строка последняя ячейка в теле таблицы*/ { -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; border-radius: 0 5px 0 0; } table tbody tr:last-child td:first-child /*Последняя строка первая ячейка в теле таблицы*/ { -webkit-border-radius: 0 0 0 5px; -moz-border-radius: 0 0 0 5px; border-radius: 0 0 0 5px; } table tbody tr:last-child td:last-child /*Последняя строка последняя ячейка в теле таблицы*/{ -webkit-border-radius: 0 0 5px 0; -moz-border-radius: 0 0 5px 0; border-radius: 0 0 5px 0; }
Также можно указать цвет строки при наведении на нее курсора мыши:
table tr:hover { background-color: #f2f2f2; /*Цвет строки при наведении курсора мыши*/ }
И по вашему усмотрению можно указать цвет нечетных строк в таблице:
table tbody tr:nth-child(odd) td /*Подсветка нечетных строк в таблице*/ { background-color: #f8f8f8; }
Источник: http://psd-html-css.ru/css-notes/tablica-s-skruglennymi-ugolkami
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
Не делай другим то, что ты хотел бы, чтобы они делали для тебя. У вас могут быть разные вкусы Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.