Украшаем таблички

 Site making  No Responses »
Апр 042011
 

Для украшения табличек на наших ресурсах возможно применить следующие стили, которые достаточно добавить к любому уже подключенному к вашему документу CSS файлу

/* custom CSS */



.table_style_green{

     border-collapse: collapse;

     font-size: 11.0pt;  font-family: Calibri, sans-serif;

     border: 1.0pt solid #9BBB59;  padding: 3px;

     width: 850px;}



.td_style_green{

     border: 1px #9BBB59 solid;

     padding:2px;

     width:auto;}



.td_style_bg_green{

     border: 1px #9BBB59 solid;

     background-color: #9BBB59;

     color: #FFFFFF;

     font-weight: bold;}



.table_style_blue{

     border-collapse: collapse;

     font-size: 11.0pt;  font-family: Calibri, sans-serif;

     border: 1.0pt solid #4F81BD;  padding: 3px;

     width: 850px;}



.td_style_blue{

     border: 1px #4F81BD solid;

     padding:2px;

     width:auto;}



.td_style_bg_blue{

     border: 1px #4F81BD solid;

     background-color: #4F81BD;    color: #FFFFFF;     font-weight: bold;}



.table_style_red{

     border-collapse: collapse;

     font-size: 11.0pt;  font-family: Calibri, sans-serif;

     border: 1.0pt solid #C0504D;  padding: 3px;

     width: 850px;}



.td_style_red{

     border: 1px #C0504D solid;

     padding:2px;

     width:auto;}



.td_style_bg_red{

     border: 1px #C0504D solid;

     background-color: #C0504D;

     color: #FFFFFF;

     font-weight: bold;}



.table_style_cyan{

     border-collapse: collapse;

     font-size: 11.0pt;  font-family: Calibri, sans-serif;

     border: 1.0pt solid #4BACC6;  padding: 3px;

     width: 850px;}



.td_style_cyan{

     border: 1px #4BACC6 solid;

     padding:2px;

     width:auto;}



.td_style_bg_cyan{

     border: 1px #4BACC6 solid;

     background-color: #4BACC6;

     color: #FFFFFF;

     font-weight: bold;}



.table_style_orange{

     border-collapse: collapse;

     font-size: 11.0pt;  font-family: Calibri, sans-serif;

     border: 1.0pt solid #F79646;  padding: 3px;

     width: 850px;}



.td_style_orange{

     border: 1px #F79646 solid;

     padding:2px;

     width:auto;}



.td_style_bg_orange{

     border: 1px #F79646 solid;

     background-color: #F79646;

     color: #FFFFFF;

     font-weight: bold;}



.table_style_violet{

     border-collapse: collapse;

     font-size: 11.0pt;  font-family: Calibri, sans-serif;

     border: 1.0pt solid #8064A2;  padding: 3px;

     width: 850px;}



.td_style_violet{

     border: 1px #8064A2 solid;

     padding:2px;

     width:auto;}



.td_style_bg_violet{

     border: 1px #8064A2 solid;

     background-color: #8064A2;    color: #FFFFFF; font-weight: bold;}

Далее в наших таблицах прописываем класс отображения:

<table border="1" align="center" class="table_style_green">

    <tbody>

        <tr>

            <td class="td_style_bg_green"><strong>Вид ткани и применения</strong></td>

            <td valign="middle" align="center" class="td_style_bg_green"><strong>Плотность</strong></td>

            <td valign="middle" align="center" colspan="3" class="td_style_bg_green"><strong>720 dpi</strong></td>

            <td valign="middle" align="center" colspan="3" class="td_style_bg_green"><strong>1440 dpi</strong></td>

        </tr>

        <tr>

            <td class="td_style_green"></td>

            <td valign="middle" align="center" class="td_style_green"></td>

            <td valign="middle" align="center" class="td_style_green"><strong>1- 5 м</strong><sup><strong>2</strong></sup></td>

            <td valign="middle" align="center" class="td_style_green"><strong>5-20 м</strong><sup><strong>2</strong></sup></td>

            <td valign="middle" align="center" class="td_style_green"><strong>20-100 м</strong><sup><strong>2</strong></sup></td>

            <td valign="middle" align="center" class="td_style_green"><strong>1- 5 м</strong><sup><strong>2</strong></sup></td>

            <td valign="middle" align="center" class="td_style_green"><strong>5-20 м</strong><sup><strong>2</strong></sup></td>

            <td valign="middle" align="center" class="td_style_green"><strong>20-100 м</strong><sup><strong>2</strong></sup></td>

        </tr>

        <tr>

            <td class="td_style_green" style="width: 400px;">Самоклеющаяся пленка Orajet 3640 мат/глянец</td>

            <td valign="middle" align="center" class="td_style_green">80 мик.</td>

            <td valign="middle" align="center" class="td_style_green">410</td>

            <td valign="middle" align="center" class="td_style_green">355</td>

            <td valign="middle" align="center" class="td_style_green">288</td>

            <td valign="middle" align="center" class="td_style_green">490</td>

            <td valign="middle" align="center" class="td_style_green">410</td>

            <td valign="middle" align="center" class="td_style_green">355</td>

        </tr>

        <tr>

            <td class="td_style_green">Самоклеющаяся пленка Easyprint мат/глянец</td>

            <td valign="middle" align="center" class="td_style_green">80 мик.</td>

            <td valign="middle" align="center" class="td_style_green">410</td>

            <td valign="middle" align="center" class="td_style_green">355</td>

            <td valign="middle" align="center" class="td_style_green">288</td>

            <td valign="middle" align="center" class="td_style_green">490</td>

            <td valign="middle" align="center" class="td_style_green">410</td>

            <td valign="middle" align="center" class="td_style_green">355</td>

        </tr>

        <tr>

            <td class="td_style_green">Самоклеющаяся пленка AVERY мат/глянец</td>

            <td valign="middle" align="center" class="td_style_green">100 мик.</td>

            <td valign="middle" align="center" class="td_style_green">410</td>

            <td valign="middle" align="center" class="td_style_green">355</td>

            <td valign="middle" align="center" class="td_style_green">288</td>

            <td valign="middle" align="center" class="td_style_green">490</td>

            <td valign="middle" align="center" class="td_style_green">410</td>

            <td valign="middle" align="center" class="td_style_green">355</td>

        </tr>

        <tr>

            <td class="td_style_green">Самоклеющаяся Транслюцентная пленка ORAJET 8500</td>

            <td valign="middle" align="center" class="td_style_green">80 мик.</td>

            <td valign="middle" align="center" class="td_style_green">620</td>

            <td valign="middle" align="center" class="td_style_green">570</td>

            <td valign="middle" align="center" class="td_style_green">510</td>

            <td valign="middle" align="center" class="td_style_green">720</td>

            <td valign="middle" align="center" class="td_style_green">620</td>

            <td valign="middle" align="center" class="td_style_green">570</td>

        </tr>

        <tr>

            <td class="td_style_green">Самоклеющаяся пленка OraJet 620 (c сьемным кл. слоем)</td>

            <td valign="middle" align="center" class="td_style_green">100 мик.</td>

            <td valign="middle" align="center" class="td_style_green">410</td>

            <td valign="middle" align="center" class="td_style_green">355</td>

            <td valign="middle" align="center" class="td_style_green">288</td>

            <td valign="middle" align="center" class="td_style_green">490</td>

            <td valign="middle" align="center" class="td_style_green">410</td>

            <td valign="middle" align="center" class="td_style_green">355</td>

        </tr>

        <tr>

            <td class="td_style_green">Самоклеющаяся пленка AVERY (c сьемным кл. слоем)</td>

            <td valign="middle" align="center" class="td_style_green">100 мик.</td>

            <td valign="middle" align="center" class="td_style_green">410</td>

            <td valign="middle" align="center" class="td_style_green">355</td>

            <td valign="middle" align="center" class="td_style_green">288</td>

            <td valign="middle" align="center" class="td_style_green">490</td>

            <td valign="middle" align="center" class="td_style_green">410</td>

            <td valign="middle" align="center" class="td_style_green">355</td>

        </tr>

    </tbody>

</table>

<

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

Вид ткани и применения Плотность 720 dpi 1440 dpi
1- 5 м2 5-20 м2 20-100 м2 1- 5 м2 5-20 м2 20-100 м2
Самоклеющаяся пленка Orajet 3640 мат/глянец 80 мик. 410 355 288 490 410 355
Самоклеющаяся пленка Easyprint мат/глянец 80 мик. 410 355 288 490 410 355
Самоклеющаяся пленка AVERY мат/глянец 100 мик. 410 355 288 490 410 355
Самоклеющаяся Транслюцентная пленка ORAJET 8500 80 мик. 620 570 510 720 620 570
Самоклеющаяся пленка OraJet 620 (c сьемным кл. слоем) 100 мик. 410 355 288 490 410 355
Самоклеющаяся пленка AVERY (c сьемным кл. слоем) 100 мик. 410 355 288 490 410 355
 Posted by Verbix at 20:33  Tagged with: ,
© 2011 ADTL Blog Suffusion theme by Sayontan Sinha