Красивые таблицы CSS в HTML

logo2 (2)
В это статье я буду собирать красиво оформленные таблицы через css, что я буду находить на просторах интернета.

Содержание

С градиентом

Признаки Сычи Ушастые совы Филин
Итого по размерам Мелкие Средние Крупные
Количество видов 3 6 16
Большые уши check check check
Латинское наименование Athene Asio Bubo

Подсмотрел оформление тут. Немного подредактировал под свои нужды.

Итак, добавьте в Ваш css файл следующий код:

Теперь в тексте Вашей статьи можете добавить:

Селектор nowrap не позволяет переносить строки. Полезный селектор, но не увлекайтесь, а то таблица "улетит".

Исходники:
features-table1.zip

Простая таблица

Update 18.04.2014. Css немного исправлен благодаря пользователю Алексею.

Алгоритмы Выполненность Наличие прогонов
Генетический алгоритм 100% Да
Муравьиный алгоритм 100% Да
Метод Ньютона 20% Нет
Дифференциальный алгоритм 80% Нет
Метод наискорейшего пуска 100% Да
Случайный поиск 23% Да
Гиперссылка 80% Да

Подсмотрел тут. Немного подредактировал под свои нужды.

Итак, добавьте в Ваш css файл следующий код:

Теперь в тексте Вашей статьи можете добавить:

Исходники:
simple-little-table1.zip

Рекомендую статьи:


32 комментариев

    1. Спасибо! Но как отметили, не браузеры поймут.

      P.S. Табличка прикольная, но темная... Может сделать белыми буквы?

    1. как бы сказать по-мягче... тем, кто даже ЭТОГО не понимает, нечего делать в веб-дизайне, в интернете, за компом, да и зачем он(она/оно) родился вообще

  1. Здравствуйте. Понравились очень примеры таблиц и одним примером решил воспользоватся, а именно 2й таблицей серой, но дело в том что она у меня пристыковывается к левому нижнему краю, и отступ от верхней части сайта выходит около 3 см. Подскажите пожалуйста как это исправить. Благодарю.

  2. А я что-то не могу сделать. Скопировал css-код в конец файла style.css и html-код в статью...
    Таблица появилась, но просто таблица, без фона, скруглений и т.п. В общем, css-код не работает. Может, не туда вставил? :) Вроде бы пунктуация соблюдена.

  3. Необычайно помогло! Спасибо большое.
    У новичок в вэб-программировании.

    Есть вопрос: если вставляю input внутрь тега td (), то в таблице получается белый прямоугольник, а как сделать, чтобы input был таким же цветом как и вся таблица?

    Спасибо заранее за ответ

  4. Спасибо, как раз то что надо, а главное все работает без проблем и дополнительной интеграции или перелопачивания css или html кода страниц :).

  5. Отличная подборочка, спасибо. Только во второй таблице в css, надо использовать псевдокласс.
    Вместо
    .simple-little-table tr.even td{
    надо
    .simple-little-table tr:nth-child(even) td{

    Тогда можно из html убрать имена классов для четных tr, раскрашиваться будут автоматически. Что полезно при выводе средствами php.

  6. Подскажите пожалуйста как изменить ширину каждой из колонок?
    На данный момент работает только общая ширина.
    .features-table tbody td
    {
    text-align: center;
    width: 100px;
    }

    1. Например, так:

  7. <img alt="check" src="images/cross.png" height="16" width="16"
    отсутствует закрывающая скобка > как правило и так работает, но... :)

Добавить комментарий

Ваш e-mail не будет опубликован.

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">