Приветствую Вас Гость | RSS
Меню
Главная » Файлы » Все для Ucoz » Скрипты для ucoz
Красивые таблицы CSS в HTML,меняем вид таблицы на сайте ucoz
Сегодня мы рассмотри с Вами Красивые таблицы CSS в HTML , как их правильно оформить и привести к нужному виду.
Таблица может быть как ссылками торрент файлов или просто местом для отображения информации в приятном для глаза виде.

И так приступим:
Вариант #1:

Код в низ CSS.
Код
.features-table
{
  width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  text-shadow: 0 1px 0 #fff;
  color: #2a2a2a;
  background: #fafafa;
  background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */
  background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff));
  margin-top:20px;
  margin-bottom:20px;
}
   
.features-table td
{
  height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #cdcdcd;
  box-shadow: 0 1px 0 white;
  -moz-box-shadow: 0 1px 0 white;
  -webkit-box-shadow: 0 1px 0 white;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
   
.features-table tbody td
{
  text-align: center;
  width: 150px;
}
   
   
.features-table td.grey
{
  background: #efefef;
  background: rgba(144,144,144,0.15);
  border-right: 1px solid white;
}
   
.features-table td.green
{
  background: #e7f3d4;
  background: rgba(184,243,85,0.3);
}
   
.features-table td:nowrap
{
  white-space: nowrap;
}
   
.features-table thead td
{
  font-size: 120%;  
  font-weight: bold;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-topleft: 10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top: 1px solid #eaeaea;
}
   
.features-table tfoot td
{
  font-size: 120%;  
  font-weight: bold;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom: 1px solid #dadada;
}  


В место где будет находиться таблица:


Расположение файла Размер Ссылка
uTorrent 1.5 mb скачать
Letitbib.net 1.6 mb скачать
ЯндексНарод 1.7 mb скачать


Код
<table class="features-table">
<thead>
  <tr>
  <td>Расположение файла</td>
   
  <td class="grey" nowrap="">Размер</td>
  <td class="green">Ссылка</td>
  </tr>
</thead>

<tfoot>
   
</tfoot>

<tbody>
  <tr>
  <td nowrap="">uTorrent</td>
   
  <td class="grey">1.5 mb</td>
  <td class="green"><a href="http://blog.harrix.org/?p=513" target="_blank">скачать</a></td>
  </tr>

  <tr>
  <td nowrap="">Letitbib.net</td>
  <td class="grey">1.6 mb</td>
  <td class="green"><a href="http://blog.harrix.org/?p=513" target="_blank">скачать</a></td>
  </tr>

  <tr>
  <td nowrap="">ЯндексНарод</td>
   
  <td class="grey">1.7 mb</td>
  <td class="green"><a href="http://blog.harrix.org/?p=513" target="_blank">скачать</a></td>
  </tr>
</tbody>
</table>


Или же оригинал:


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

Код

<table class="features-table">
<thead>
  <tr>
  <td>Признаки</td>
  <td class="grey">Сычи</td>
  <td class="grey" nowrap>Ушастые совы</td>
  <td class="green">Филин</td>
  </tr>
</thead>

<tfoot>
  <tr>
  <td nowrap>Итого по размерам</td>
  <td class="grey">Мелкие</td>
  <td class="grey">Средние</td>
  <td class="green">Крупные</td>
  </tr>
</tfoot>

<tbody>
  <tr>
  <td nowrap>Количество видов</td>
  <td class="grey">3</td>
  <td class="grey">6</td>
  <td class="green">16</td>
  </tr>

  <tr>
  <td nowrap>Большые уши</td>
  <td class="grey"><img alt="check" src="images/cross.png" height="16" width="16"</td>
  <td class="grey"><img alt="check" src="images/check.png" height="16" width="16"></td>
  <td class="green"><img alt="check" src="images/check.png" height="16" width="16"></td>
  </tr>

  <tr>
  <td nowrap>Латинское наименование</td>
  <td class="grey">Athene</td>
  <td class="grey">Asio</td>
  <td class="green">Bubo</td>
  </tr>
</tbody>
</table>


Вариант #2:


В CSS :

Код

table a:link { color: #666;font-weight: bold;text-decoration:none;}
table a:visited {color: #999999;font-weight:bold;text-decoration:none;}
table a:active,table a:hover { color: #bd5a35; text-decoration:underline;}
table { width:800px; font-family:Arial, Helvetica, sans-serif;color:#666;font-size:12px;text-shadow: 1px 1px 0px #fff;background:#eaebec; margin:0 auto; border:#ccc 1px solid;
  -moz-border-radius:3px; -webkit-border-radius:3px;border-radius:3px;
  -moz-box-shadow: 0 1px 2px #d1d1d1; -webkit-box-shadow: 0 1px 2px #d1d1d1;box-shadow: 0 1px 2px #d1d1d1;}
table th {padding:21px 25px 22px 25px; border-top:1px solid #fafafa; border-bottom:1px solid #e0e0e0;
  background: #ededed; background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));background: -moz-linear-gradient(top, #ededed, #ebebeb);}
table th:first-child{text-align: left;padding-left:20px;}table tr:first-child th:first-child{ -moz-border-radius-topleft:3px; -webkit-border-top-left-radius:3px; border-top-left-radius:3px;}
table tr:first-child th:last-child{ -moz-border-radius-topright:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;}
table tr{text-align: center;padding-left:20px;}table tr td:first-child{ text-align: left;padding-left:20px;border-left: 0;}
table tr td {padding:18px;border-top: 1px solid #ffffff;border-bottom:1px solid #e0e0e0;border-left: 1px solid #e0e0e0; background: #fafafa;background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));background: -moz-linear-gradient(top, #fbfbfb, #fafafa);}
table tr.even td{background: #f6f6f6; background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);}
table tr:last-child td{ border-bottom:0;}
table tr:last-child td:first-child{-moz-border-radius-bottomleft:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;}
table tr:last-child td:last-child{-moz-border-radius-bottomright:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;}
table tr:hover td{background: #f2f2f2;background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);}


В место где будет таблица:

Код

<table cellspacing='0'> <!-- cellspacing='0' is important, must stay -->
  <tr><th>Первый столбец</th><th>Второй</th><th>Третий</th></tr><!-- Table Header -->
  <tr><td>Create pretty table design</td><td>100%</td><td>Yes</td></tr><!-- Table Row -->
  <tr class='even'><td>Take the dog for a walk</td><td>100%</td><td>Yes</td></tr><!-- Darker Table Row -->
  <tr><td>Waste half the day on Twitter</td><td>20%</td><td>No</td></tr>
  <tr class='even'><td>Feel inferior after viewing Dribble</td><td>80%</td><td>No</td></tr>
  <tr><td>Wince at "to do" list</td><td>100%</td><td>Yes</td></tr>
  <tr class='even'><td>Vow to complete personal project</td><td>23%</td><td>yes</td></tr>
  <tr><td>Procrastinate</td><td>80%</td><td>No</td></tr>
  <tr class='even'><td><a href="">Hyperlink Example</a></td><td>80%</td><td><a href="">Another</a></td></tr>
</table>


Вариант # 3:

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

В CSS :

Код

.simple-little-table {
  font-family:Arial, Helvetica, sans-serif;
  color:#666;
  font-size:12px;
  text-shadow: 1px 1px 0px #fff;
  background:#eaebec;
  margin:20px;
  border:#ccc 1px solid;
  border-collapse:separate;

  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;

  -moz-box-shadow: 0 1px 2px #d1d1d1;
  -webkit-box-shadow: 0 1px 2px #d1d1d1;
  box-shadow: 0 1px 2px #d1d1d1;
}

.simple-little-table th {
  font-weight:bold;
  padding:21px 25px 22px 25px;
  border-top:1px solid #fafafa;
  border-bottom:1px solid #e0e0e0;

  background: #ededed;
  background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
  background: -moz-linear-gradient(top, #ededed, #ebebeb);
}
.simple-little-table th:first-child{
  text-align: left;
  padding-left:20px;
}
.simple-little-table tr:first-child th:first-child{
  -moz-border-radius-topleft:3px;
  -webkit-border-top-left-radius:3px;
  border-top-left-radius:3px;
}
.simple-little-table tr:first-child th:last-child{
  -moz-border-radius-topright:3px;
  -webkit-border-top-right-radius:3px;
  border-top-right-radius:3px;
}
.simple-little-table tr{
  text-align: center;
  padding-left:20px;
}
.simple-little-table tr td:first-child{
  text-align: left;
  padding-left:20px;
  border-left: 0;
}
.simple-little-table tr td {
  padding:18px;
  border-top: 1px solid #ffffff;
  border-bottom:1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
   
  background: #fafafa;
  background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
  background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
.simple-little-table tr.even td{
  background: #f6f6f6;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
  background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
.simple-little-table tr:last-child td{
  border-bottom:0;
}
.simple-little-table tr:last-child td:first-child{
  -moz-border-radius-bottomleft:3px;
  -webkit-border-bottom-left-radius:3px;
  border-bottom-left-radius:3px;
}
.simple-little-table tr:last-child td:last-child{
  -moz-border-radius-bottomright:3px;
  -webkit-border-bottom-right-radius:3px;
  border-bottom-right-radius:3px;
}
.simple-little-table tr:hover td{
  background: #f2f2f2;
  background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
  background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);  
}

.simple-little-table a:link {
  color: #666;
  font-weight: bold;
  text-decoration:none;
}
.simple-little-table a:visited {
  color: #999999;
  font-weight:bold;
  text-decoration:none;
}
.simple-little-table a:active,
.simple-little-table a:hover {
  color: #bd5a35;
  text-decoration:underline;
}


В место где будет находиться таблица: 

Код

<table class="simple-little-table" cellspacing='0'>
  <tr>
  <th>Алгоритмы </th>
  <th>Выполненность</th>
  <th>Наличие прогонов</th>
  </tr><!-- Table Header -->
   
  <tr>
  <td>Генетический алгоритм</td>
  <td>100%</td>
  <td>Да</td>
  </tr><!-- Table Row -->
   
  <tr class='even'>
  <td>Муравьиный алгоритм</td>
  <td>100%</td>
  <td>Да</td>
  </tr><!-- Darker Table Row -->

  <tr>
  <td>Метод Ньютона</td>
  <td>20%</td><td>Нет</td>
  </tr>
   
  <tr class='even'>
  <td>Дифференциальный алгоритм</td>
  <td>80%</td>
  <td>Нет</td>
  </tr>
   
  <tr>
  <td>Метод наискорейшего пуска</td>
  <td>100%</td>
  <td>Да</td>
  </tr>
   
  <tr class='even'>
  <td>Случайный поиск</td>
  <td>23%</td>
  <td>Да</td>
  </tr>
   
  <tr class='even'>
  <td><a href="blog.harrix.org">Гиперссылка</a></td>
  <td>80%</td>
  <td><a href="blog.harrix.org">Да</a></td>
  </tr>
</table>
/ --------------- \
/ Как нужно качать? \
Категория: Скрипты для ucoz | Просмотров: 15245 | Добавил: drak-zp | Рейтинг: 5.0/19 | Загрузок: 0



UcozВконтакте
Всего комментариев: 0
Войдите:
avatar
-->

Реклама
Топ материалов
"Все материалы на сайте предоставлены исключительно в ознакомительных целях.Администрация сайта ответственности не несёт."
H1tan.ru (2012-2015)
Конструктор сайтов - uCoz