»

 Будь в курсе событий:

table on css

Таблица на CSS
Таблица на CSS

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

Таблица на CSS

Всем привет, сегодня я посвящу урок таблице на CSS. Идея создания таблицы при помощи использования CSS родилась в моей голове не случайно. Дело в том, что многие пользователи сайтов напрочь забывают о том, что оформление таблиц - это ни что иное как дизайн, который очень сильно влияет на внешний вид и привлекательность сайта. Многие конечно не парятся над этим вопросом, особенно пользователи Jimdo. Да, есть стандартное решение создания таблицы - это конечно же большой плюс, есть так же возможность сменить цвета и поработать со свойствами ячеек, но иногда этого бывает недостаточно...

Поэтому я приведу простой пример как можно на css проработать привлекательный дизайн таблицы.

Шаг 1. Используем встроенные функции CMS Jimdo

Для создания нужной нам таблицы используем стандартные функции Jimdo. Надо всего лишь нажать на кнопку Добавить новый модуль и выбрать из предлагаемого меню надпись Таблица. Если не вносить никаких изменений в стандартную таблицу, то выглядеть ее html-код будет так:

html
    <table border="0" cellspacing="0" cellpadding="3">
        <tbody>
            <tr>
                <td>
                    <strong>Фамилия</strong>
                </td>
                <td>
                    <strong>Имя</strong>
                </td>
                <td>
                    <strong>Телефон</strong>
                </td>
            </tr>

            <tr>
                <td>
                    Петр
                </td>
                <td>
                    Петров
                </td>
                <td>
                    12345-12345
                </td>
            </tr>

            <tr>
                <td>
                    Иван
                </td>
                <td>
                    Иванов
                </td>
                <td>
                    0123-12345
                </td>
            </tr>
        </tbody>
    </table>

Структура данного html-кода максимально простая, поэтому на ней заострять внимания не станем, так как она формируется автоматически в wysiwyg - редакторе CMS Jimdo. На примере ниже можно увидеть как нелепо выглядит такая стандартная таблица без дополнительного оформления.

Фамилия Имя Телефон
Петр Петров 12345-12345
Иван Иванов 0123-12345

Шаг 2. CSS-код новой таблицы

Но для того, чтобы наша таблица вышла на более качественное оформление, нам необходимо использовать css-код и его можно вписать различными способами в Jimdo. Заострять внимания на этом я так же не стану, так как данная интеграция css-кода ранее была рассмотрена в уроке Интеграция CSS.

css
.CSSTable-Ex1{ /* Применяем параметры тени к таблице при помощи box-shadow с кроссбраузерностью */
margin:0px;
padding:0px;
width:100%;
border:1px solid #ffffff;

/*box-shadow*/
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color=#747474)"; /*IE 8*/
-webkit-box-shadow:1px 1px 3px #747474; /*FF 3.5+*/
   -moz-box-shadow:1px 1px 3px #747474; /*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
        box-shadow:1px 1px 3px #747474; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color=#747474); /*IE 5.5-7*/
}

.CSSTable-Ex1 table{
border-collapse:collapse; /* Линия между ячейками отображается только одна */
border-spacing:0;
width:100%;
height:100%;
margin:0px;
padding:0px;
}

/* задаем значения округлости при необходимости использования для первых и последних элементов таблицы - нижний правый */
.CSSTable-Ex1 tr:last-child td:last-child{
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}

/* задаем значения округлости при необходимости использования для первых и последних элементов таблицы - верхний левый */
.CSSTable-Ex1 table tr:first-child td:first-child{
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}

/* задаем значения округлости при необходимости использования для первых и последних элементов таблицы - верхний правый */
.CSSTable-Ex1 table tr:first-child td:last-child{
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}

/* задаем значения округлости при необходимости использования для первых и последних элементов таблицы - нижний левый */
.CSSTable-Ex1 tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}

.CSSTable-Ex1 tr:hover td{
}

.CSSTable-Ex1 tr:nth-child(odd){ /* чередуем цвет заливки нечетных строк таблицы */
background-color:#969696;
}

.CSSTable-Ex1 tr:nth-child(even){ /* чередуем цвет заливки четных строк таблицы */
background-color:#eaeaea;
}

.CSSTable-Ex1 td{
vertical-align:middle;
border:1px solid #ffffff;
border-width:0px 1px 1px 0px;
text-align:left;
padding:9px;
font-size:12px;
font-family:Arial;
font-weight:normal;
color:#2d2d2d;
}

.CSSTable-Ex1 tr:last-child td{
border-width:0px 1px 0px 0px;
}

.CSSTable-Ex1 tr td:last-child{
border-width:0px 0px 1px 0px;
}

.CSSTable-Ex1 tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}

.CSSTable-Ex1 tr:first-child td{ /* заливаем градиентом первую строку таблицы */
/*linear-gradient*/
background:-webkit-gradient(linear,left bottom,left top,color-stop(#d3d3d3,0.05),color-stop(#9b9b9b,1));
background:-webkit-linear-gradient(bottom, #d3d3d3 5%, #9b9b9b 100%);
background:   -moz-linear-gradient(bottom, #d3d3d3 5%, #9b9b9b 100%);
background:     -o-linear-gradient(bottom, #d3d3d3 5%, #9b9b9b 100%);
background:        linear-gradient(bottom, #d3d3d3 5%, #9b9b9b 100%);
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d3d3d3), color-stop(1, #9b9b9b) );
background:-webkit-gradient(linear,,color-stop(#d3d3d3,0.05),color-stop(#9b9b9b,1));
background:-webkit-linear-gradient( center top, #d3d3d3 5%, #9b9b9b 100% );
background:   -moz-linear-gradient( center top, #d3d3d3 5%, #9b9b9b 100% );
background:     -o-linear-gradient( center top, #d3d3d3 5%, #9b9b9b 100% );
background:        linear-gradient( center top, #d3d3d3 5%, #9b9b9b 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#d3d3d3", endColorstr="#9b9b9b");
background:-webkit-gradient(linear,left top,left bottom,from(#d3d3d3),to(#d3d3d3));

/* нет значения */
background:-webkit-linear-gradient(top,#d3d3d3,9b9b9b);
background:   -moz-linear-gradient(top,#d3d3d3,9b9b9b);
background:     -o-linear-gradient(top,#d3d3d3,9b9b9b);
background:        linear-gradient(top,#d3d3d3,9b9b9b);
background-color:#d3d3d3;

border:0px solid #ffffff;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:16px;
font-family:Times New Roman;
font-weight:bold;
color:#353535;
}
.CSSTable-Ex1 tr:first-child:hover td{ /* заливаем градиентом первую строку таблицы при наведении */
/*linear-gradient*/
background:-webkit-gradient(linear,left bottom,left top,color-stop(#9b9b9b,0.05),color-stop(#d3d3d3,1));
background:-webkit-linear-gradient(bottom, #9b9b9b 5%, #d3d3d3 100%);
background:   -moz-linear-gradient(bottom, #9b9b9b 5%, #d3d3d3 100%);
background:     -o-linear-gradient(bottom, #9b9b9b 5%, #d3d3d3 100%);
background:        linear-gradient(bottom, #9b9b9b 5%, #d3d3d3 100%);
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9b9b9b), color-stop(1, #9d3d3d3) );
background:-webkit-gradient(linear,,color-stop(#9b9b9b,0.05),color-stop(#d3d3d3,1));
background:-webkit-linear-gradient( center top, #9b9b9b 5%, #d3d3d3 100% );
background:   -moz-linear-gradient( center top, #9b9b9b 5%, #d3d3d3 100% );
background:     -o-linear-gradient( center top, #9b9b9b 5%, #d3d3d3 100% );
background:        linear-gradient( center top, #9b9b9b 5%, #d3d3d3 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#9b9b9b", endColorstr="#d3d3d3");
background:-webkit-gradient(linear,left top,left bottom,from(#9b9b9b),to(#9b9b9b));

/* нет значения */
background:-webkit-linear-gradient(top,#9b9b9b,d3d3d3);
background:   -moz-linear-gradient(top,#9b9b9b,d3d3d3);
background:     -o-linear-gradient(top,#9b9b9b,d3d3d3);
background:        linear-gradient(top,#9b9b9b,d3d3d3);
background-color:#d3d3d3;
}

.CSSTable-Ex1 tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}

.CSSTable-Ex1 tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}

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

 

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. А значения данного псевдакласса используем подобным образом: odd - все нечетные номера элементов, even - все четные номера элементов. Это позволяет чередавать цветовые палитры нашей таблицы по четным и нечетным строкам.

 

Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя.

 

Псевдокласс :last-child задает стилевое оформление последнего элемента своего родителя.

Шаг 3. Добавляем класс

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

<div class="CSSTable-Ex1"> ... </div> - где между дивами как раз и заключен стандартный html-код. Прописать эти теги можно свободно нажав в редакторе таблиц на кнопку HTML.

html
<div class="CSSTable-Ex1"><!-- Добавим класс нашей таблице с именем CSSTable-Ex1 -->
    <table border="0" cellspacing="0" cellpadding="3">
        <tbody>
            <tr>
                <td>
                    <strong>Фамилия</strong>
                </td>
                <td>
                    <strong>Имя</strong>
                </td>
                <td>
                    <strong>Телефон</strong>
                </td>
            </tr>

            <tr>
                <td>
                    Петр
                </td>
                <td>
                    Петров
                </td>
                <td>
                    12345-12345
                </td>
            </tr>

            <tr>
                <td>
                    Иван
                </td>
                <td>
                    Иванов
                </td>
                <td>
                    0123-12345
                </td>
            </tr>
        </tbody>
    </table>
</div>           

В итоге применения класса мы получаем нашу таблицу в таком вот замечательном виде:

 
Фамилия Имя Телефон
Петр Петров 12345-12345
Иван Иванов 0123-12345

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

Оставить комментарий

Комментарии: 1
  • #1

    Farengate Pulse (Воскресенье, 26 Январь 2014 07:47)

    Сегодня установил для проверки кроссбраузерности градиента Opera 18.0.1284.68, а так же заглянул в Internet Explorer 11.0.9600.16476 и обнаружил, что никакой поддержки нет, не смотря на то, что все префиксы для поддержки прописаны в коде. Для меня данный момент важен, так как некоторые клиенты требуют использования градиента на сайте. В ближайшее время я напишу урок о том, как можно выйти из данной ситуации с минимальными потерями для производительности при загрузке сайта.