Таблица с скругленными уголками
Нажмите на картинку, чтобы посмотреть пример вживую.
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
Новые статьи и публикации
- 2025-04-08 » Горшочек, рисуй: 10 бесплатных сервисов для генерации картинок
- 2025-04-08 » SEO-продвижение в 2025 году: 15 трендов, без которых ТОП не светит
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
"Самый чепуховый и бесперспективный проект, но уже запущенный и работающий в Сети, принесет гораздо больше результатов и прибыли, чем самый совершенный проект, который из-за своего постоянного предстартового совершенствования никогда не будет запущен." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp