Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!
На многих сайтах используются таблицы. Сделать это просто, когда владеешь навыками. Для тех, кому нравится элегантные таблицы, этот урок будет как раз кстати. Их использование необходимо для отображения различной информации. К примеру, вы продаете товар, или хотите показать каталогизированный список. Все, что вам нужно, оформить информацию должным образом.
Приступим к рассмотрению CSS структуры, а далее и HTML.
#ruvisio-ru-table {
margin:0;
padding: 4px;
width: 578px; /* длина таблицы */
font: 11px Arial, Helvetica, sans-serif; /* шрифт таблицы */
color:#747474;
background-color:#0c2a62; /* фон таблицы */
}
#psdg-header {
margin:0;
padding: 14px 0 0 24px;
width: 554px; /* длина шапки */
height: 55px;
color:#FFF;
font-size:13px;
background: #0c2c65 url(images/head-bcg.jpg) no-repeat right top; /* шапка таблицы */
}
/* дальше идет настройка таблицы по столбцам и строкам */
.psdg-bold {
font: bold 22px Arial, Helvetica, sans-serif;
}
#psdg-top {
margin:0;
padding: 0;
width: 578px;
height: 46px;
border-top: 2px solid #FFF;
background: #eff4ff url(images/top-light-blue.png) repeat-x left top;
}
.psdg-top-cell {
float:left;
padding: 15px 0 0 0;
text-align:center;
width:105px;
height: 31px;
border-right: 1px solid #ced9ec;
color:#1f3d71;
font: 13px Arial, Helvetica, sans-serif;
}
#psdg-middle {
margin:0;
padding: 0;
width: 578px;
background: #f6f6f6 url(images/center-bcg.png) repeat-y right top;
}
.psdg-left {
float:left;
margin:0;
padding: 10px 0 0 24px;
width: 129px;
text-align: left;
height: 25px;
border-right: 1px solid #ced9ec;
border-bottom: 1px solid #b3c1db;
color:#1f3d71;
font: 13px Arial, Helvetica, sans-serif;
background: #e4ebf8 url(images/center-blue.png) repeat-y left top;
}
.psdg-right {
float:left;
margin:0;
padding: 11px 0 0 0;
width: 105px;
text-align:center;
height: 24px;
border-right: 1px solid #ced9ec;
border-bottom: 1px solid #b3c1db;
}
#psdg-bottom {
clear:both;
margin:0;
padding: 0;
width: 578px;
height: 48px;
border-top: 2px solid #FFF;
background: #e4e3e3 url(images/bottom-line.png) repeat-x left top;
}
.psdg-bottom-cell {
float:left;
padding: 15px 0 0 0;
text-align:center;
width:105px;
height: 33px;
border-right: 1px solid #ced9ec;
color:#070707;
font: 13px Arial, Helvetica, sans-serif;
}
#psdg-footer {
font-size: 10px;
color:#8a8a8a;
margin:0;
padding: 8px 0 8px 12px;
width: 566px;
background: #f6f6f6 url(images/center-bcg.png) repeat-y right top;
}
<div id="ruvisio-ru-table"> <div id="psdg-header"> <span class="psdg-bold">Дизайн таблицы - Модерн</span><br /> Скачать PSD ресурсы с сайта www.ruvisio.ru </div> <div id="psdg-top"> <div class="psdg-top-cell" style="width:129px; text-align:left; padding-left: 24px;">Категории</div> <div class="psdg-top-cell">Website.com</div> <div class="psdg-top-cell">Website.net</div> <div class="psdg-top-cell">Website.org</div> <div class="psdg-top-cell" style="border:none;">Website.info</div> </div> <div id="psdg-middle"> <div class="psdg-left">Уники в день</div> <div class="psdg-right">10 000</div> <div class="psdg-right">10 000</div> <div class="psdg-right">10 000</div> <div class="psdg-right">10 000</div> <div class="psdg-left">Уники</div> <div class="psdg-right">300 000</div> <div class="psdg-right">300 000</div> <div class="psdg-right">300 000</div> <div class="psdg-right">300 000</div> <div class="psdg-left">Браузер</div> <div class="psdg-right">Firefox</div> <div class="psdg-right">Firefox</div> <div class="psdg-right">Firefox</div> <div class="psdg-right">Firefox</div> <div class="psdg-left">ОС</div> <div class="psdg-right">Windows 7</div> <div class="psdg-right">Windows 7</div> <div class="psdg-right">Windows 7</div> <div class="psdg-right">Windows 7</div> <div class="psdg-left">Разрешение</div> <div class="psdg-right">1280x1024</div> <div class="psdg-right">1280x1024</div> <div class="psdg-right">1280x1024</div> <div class="psdg-right">1280x1024</div> <div class="psdg-left">Домен</div> <div class="psdg-right">.com</div> <div class="psdg-right">.com</div> <div class="psdg-right">.com</div> <div class="psdg-right">.com</div> <div class="psdg-left">Континент</div> <div class="psdg-right">Азия</div> <div class="psdg-right">Азия</div> <div class="psdg-right">Азия</div> <div class="psdg-right">Азия</div> <div id="psdg-bottom"> <div class="psdg-bottom-cell" style="width:129px; text-align:left; padding-left: 24px;">Статус:</div> <div class="psdg-bottom-cell">Принято</div> <div class="psdg-bottom-cell">Принято</div> <div class="psdg-bottom-cell">Принято</div> <div class="psdg-bottom-cell" style="border:none;">Принято</div> </div> </div> <div id="psdg-footer"> * Урок подготовлен сайтом <a style="text-decoration: none" href="http://ruvisio.ru/">www.ruvisio.ru</a> </div> </div>
Таблица в стиле Модерн (55.2 KB, 37 скачиваний)
Файл залит 08.09.2010 в 20:56
Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!
Комментарии
(16 weeks назад)
(19 weeks назад)
(19 weeks назад)
(43 weeks назад)
(43 weeks назад)