Приветствую всех любителей покодить на ночь глядя! На связи urbanpanda и сегодня мы будем создавать красивые таблицы CSS

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

Для размещения таблицы достаточно добавить код в то место, где вы хотите отобразить таблицу с данными. Ниже пример кода простой таблицы размерностью 2 столбца х 4 строки.

Код HTML

<table class=»rwd-table»>
<tr>
<th>Название фильма</th>

<th>Жанр</th>
</tr>
<tr>
<td data-th=»Movie Title»>Star Wars</td>
<td data-th=»Genre»>Фэнтези, приключения</td>

</tr>
<tr>
<td data-th=»Movie Title»>Howard The Duck</td>
<td data-th=»Genre»>Ужасы</td>

</tr>
<tr>
<td data-th=»Movie Title»>American Graffiti</td>
<td data-th=»Movie Title»>Комедия</td>
</tr>
</table>

Название фильма Жанр
Star Wars Фэнтези, приключения
Howard The Duck Ужасы
American Graffiti American GraffitiКомедия

Но это же просто таблица, скажете вы, простая таблица, Карл! Где супер эксклюзив?!

Спокойствие! Когда в дело вступает CSS, можно в корне изменить внешний вид этой же таблицы. Итак, берем эту таблицу, немного ее видоизменяем (добавим данных) и подключаем к ней «class«, прописанный в таблице стилей.

Код HTML

<table class=»rwd-table»>
<tr>
<th>Название</th>
<th>Жанр</th>
<th>Год</th>
<th>Бабло в прокате</th>
</tr>
<tr>
<td data-th=»Movie Title»>Star Wars</td>
<td data-th=»Genre»>Приключения</td>
<td data-th=»Year»>1977</td>
<td data-th=»Gross»>$460,935,665</td>
</tr>
<tr>
<td data-th=»Movie Title»>Howard The Duck</td>
<td data-th=»Genre»>Комедия</td>
<td data-th=»Year»>1986</td>
<td data-th=»Gross»>$16,295,774</td>
</tr>
<tr>
<td data-th=»Movie Title»>American Graffiti</td>
<td data-th=»Genre»>Комедия, драма, мыло</td>
<td data-th=»Year»>1973</td>
<td data-th=»Gross»>$115,000,000</td>
</tr>
</table>

В CSS Пропишем новый класс с такими параметрами:

Код CSS

@import «compass/css3»

$breakpoint-alpha: 480px; // настроика по необходимости

.rwd-table {
margin: 1em 0;
min-width: 300px; // Настройка ширины под ваши нужды

tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}

th {
display: none; // для доступности, использовать визуально скрытый способ здесь!
}

td {
display: block;

&:first-child {
padding-top: .5em;
}
&:last-child {
padding-bottom: .5em;
}

&:before {
content: attr(data-th)»: «; // кто знал, что ты сможешь это сделать? интернет знает все
font-weight: bold;

// дополнительный материал, для создания лучшего отображения
width: 6.5em; //магическое число ( отрегулируйте согласно вашим личным соображениям)
display: inline-block;
// конец настроек

@media (min-width: $breakpoint-alpha) {
display: none;
}
}
}

th, td {
text-align: left;

@media (min-width: $breakpoint-alpha) {
display: table-cell;
padding: .25em .5em;

&:first-child {
padding-left: 0;
}

&:last-child {
padding-right: 0;
}
}

}

}
//презентационное оформление

@import ‘http://fonts.googleapis.com/css?family=Montserrat:300,400,700’;

body {
padding: 0 2em;
font-family: Montserrat, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #444;
background: #eee;
}

h1 {
font-weight: normal;
letter-spacing: -1px;
color: #34495E;
}

.rwd-table {
background: #34495E;
color: #fff;
border-radius: .4em;
overflow: hidden;
tr {
border-color: lighten(#34495E, 10%);
}
th, td {
margin: .5em 1em;
@media (min-width: $breakpoint-alpha) {
padding: 1em !important;
}
}
th, td:before {
color: #dd5;
}
}

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

Цвет текста и фона соответственно можно настроить под дизайн своего сайта.
Ниже вы можете найти красивые примеры различного CSS оформления таблицы, на этом все, adios товарищи, до связи!

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

Стиль оформления красивой таблицы CSS. Для корректного отображения добавьте свои изображения и пропишите пути до них img src=»ваша картинка»

Красивые таблицы 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: linear-gradient(top, #fff, #eaeaea, #fff);
}

.features-table td {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #cdcdcd;
  box-shadow: 0 1px 0 white;
  white-space: nowrap;
  text-align: center;
}

/*Body*/
.features-table tbody td {
  text-align: center;
  font: normal 12px Verdana, Arial, Helvetica;
  width: 150px;
}

.features-table tbody td:first-child {
  width: auto;
  text-align: left;
}

.features-table td:nth-child(2), 
.features-table td:nth-child(3) {
  background: #efefef;
  background: rgba(144,144,144,0.15);
  border-right: 1px solid white;
}

.features-table td:nth-child(4) {
  background: #e7f3d4;  
  background: rgba(184,243,85,0.3);
}

/*Header*/
.features-table thead td {
  font: bold 1.3em 'trebuchet MS', 'Lucida Sans', Arial;  
  border-radius-topright: 10px;
  border-radius-topleft: 10px; 
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top: 1px solid #eaeaea; 
}

.features-table thead td:first-child {
  border-top: none;
}

/*Footer*/
.features-table tfoot td {
  font: bold 1.4em Georgia;  
  border-radius-bottomright: 10px;
  border-radius-bottomleft: 10px; 
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom: 1px solid #dadada;
}

.features-table tfoot td:first-child {
  border-bottom: none;
}
<table class="features-table">
  <thead>
    <tr>
      <td></td>
      <td>Standard</td>
      <td>Professional</td>
      <td>Enterprise</td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td></td>
      <td>$99</td>
      <td>$199</td>
      <td>$399</td>
    </tr>
  </tfoot>          
  <tbody>
    <tr>
      <td>Custom domain</td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>     
    </tr>
    <tr>
      <td>Advanced control</td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>     
    </tr>
    <tr>
      <td>Unlimited support</td>
      <td><img src="cross.png" width="16" height="16" alt="cross"></td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
    </tr>
    <tr>
      <td>User registration</td>
      <td><img src="cross.png" width="16" height="16" alt="cross"></td>
      <td><img src="cross.png" width="16" height="16" alt="cross"></td>
      <td><img src="check.png" width="16" height="16" alt="check"></td>
    </tr>
  </tbody>
</table>

Красивая таблица с блоками стоимости пакетов услуг

Красивые таблицы CSS
body{
 background: #303030;
}

#pricing-table {
 margin: 100px auto;
 text-align: center;
 width: 892px; /* total computed width = 222 x 3 + 226 */
}

#pricing-table .plan {
 font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
 text-shadow: 0 1px rgba(255,255,255,.8); 
 background: #fff; 
 border: 1px solid #ddd;
 color: #333;
 padding: 20px;
 width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */ 
 float: left;
 position: relative;
}

#pricing-table #most-popular {
 z-index: 2;
 top: -13px;
 border-width: 3px;
 padding: 30px 20px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
 -webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
 box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15); 
}

#pricing-table .plan:nth-child(1) {
 -moz-border-radius: 5px 0 0 5px;
 -webkit-border-radius: 5px 0 0 5px;
 border-radius: 5px 0 0 5px; 
}

#pricing-table .plan:nth-child(4) {
 -moz-border-radius: 0 5px 5px 0;
 -webkit-border-radius: 0 5px 5px 0;
 border-radius: 0 5px 5px 0; 
}

/* --------------- */ 

#pricing-table h3 {
 font-size: 20px;
 font-weight: normal;
 padding: 20px;
 margin: -20px -20px 50px -20px;
 background-color: #eee;
 background-image: -moz-linear-gradient(#fff,#eee);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); 
 background-image: -webkit-linear-gradient(#fff, #eee);
 background-image: -o-linear-gradient(#fff, #eee);
 background-image: -ms-linear-gradient(#fff, #eee);
 background-image: linear-gradient(#fff, #eee);
}

#pricing-table #most-popular h3 {
 background-color: #ddd;
 background-image: -moz-linear-gradient(#eee,#ddd);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd)); 
 background-image: -webkit-linear-gradient(#eee, #ddd);
 background-image: -o-linear-gradient(#eee, #ddd);
 background-image: -ms-linear-gradient(#eee, #ddd);
 background-image: linear-gradient(#eee, #ddd);
 margin-top: -30px;
 padding-top: 30px;
 -moz-border-radius: 5px 5px 0 0;
 -webkit-border-radius: 5px 5px 0 0;
 border-radius: 5px 5px 0 0; 
}

#pricing-table .plan:nth-child(1) h3 {
 -moz-border-radius: 5px 0 0 0;
 -webkit-border-radius: 5px 0 0 0;
 border-radius: 5px 0 0 0; 
}

#pricing-table .plan:nth-child(4) h3 {
 -moz-border-radius: 0 5px 0 0;
 -webkit-border-radius: 0 5px 0 0;
 border-radius: 0 5px 0 0; 
} 

#pricing-table h3 span {
 display: block;
 font: bold 25px/100px Georgia, Serif;
 color: #777;
 background: #fff;
 border: 5px solid #fff;
 height: 100px;
 width: 100px;
 margin: 10px auto -65px;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px;
 -moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
 -webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
 box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}

/* --------------- */

#pricing-table ul {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
}

#pricing-table li {
 border-top: 1px solid #ddd;
 padding: 10px 0;
}

/* --------------- */

#pricing-table .signup {
 position: relative;
 padding: 8px 20px;
 margin: 20px 0 0 0; 
 color: #fff;
 font: bold 14px Arial, Helvetica;
 text-transform: uppercase;
 text-decoration: none;
 display: inline-block; 
 background-color: #72ce3f;
 background-image: -moz-linear-gradient(#72ce3f, #62bc30);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30)); 
 background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
 background-image: -o-linear-gradient(#72ce3f, #62bc30);
 background-image: -ms-linear-gradient(#72ce3f, #62bc30);
 background-image: linear-gradient(#72ce3f, #62bc30);
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px; 
 text-shadow: 0 1px 0 rgba(0,0,0,.3); 
 -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
 -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
 box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
}

#pricing-table .signup:hover {
 background-color: #62bc30;
 background-image: -moz-linear-gradient(#62bc30, #72ce3f);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f)); 
 background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
 background-image: -o-linear-gradient(#62bc30, #72ce3f);
 background-image: -ms-linear-gradient(#62bc30, #72ce3f);
 background-image: linear-gradient(#62bc30, #72ce3f); 
}

#pricing-table .signup:active, #pricing-table .signup:focus {
 background: #62bc30; 
 top: 2px;
 -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
 -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
 box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset; 
}

/* --------------- */

.clear:before, .clear:after {
 content:"";
 display:table
}

.clear:after {
 clear:both
}

.clear {
 zoom:1
}
<div id="pricing-table" class="clear">
 <div class="plan">
 <h3>Enterprise<span>$59</span></h3>
 <a class="signup" href="">Sign up</a> 
 <ul>
 <li><b>10GB</b> Disk Space</li>
 <li><b>100GB</b> Monthly Bandwidth</li>
 <li><b>20</b> Email Accounts</li>
 <li><b>Unlimited</b> subdomains</li> 
 </ul> 
 </div>
 <div class="plan" id="most-popular">
 <h3>Professional<span>$29</span></h3>
 <a class="signup" href="">Sign up</a> 
 <ul>
 <li><b>5GB</b> Disk Space</li>
 <li><b>50GB</b> Monthly Bandwidth</li>
 <li><b>10</b> Email Accounts</li>
 <li><b>Unlimited</b> subdomains</li> 
 </ul> 
 </div>
 <div class="plan">
 <h3>Standard<span>$17</span></h3>
 <a class="signup" href="">Sign up</a>
 <ul>
 <li><b>3GB</b> Disk Space</li>
 <li><b>25GB</b> Monthly Bandwidth</li>
 <li><b>5</b> Email Accounts</li>
 <li><b>Unlimited</b> subdomains</li> 
 </ul>
 </div>
 <div class="plan">
 <h3>Basic<span>$9</span></h3>
 <a class="signup" href="">Sign up</a> 
 <ul>
 <li><b>1GB</b> Disk Space</li>
 <li><b>10GB</b> Monthly Bandwidth</li>
 <li><b>2</b> Email Accounts</li>
 <li><b>Unlimited</b> subdomains</li> 
 </ul>
 </div> 
</div>

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

Красивые таблицы CSS
body {
 background: #fafafa url(http://jackrugile.com/images/misc/noise-diagonal.png);
 color: #444;
 font: 100%/30px 'Helvetica Neue', helvetica, arial, sans-serif;
 text-shadow: 0 1px 0 #fff;
}

strong {
 font-weight: bold; 
}

em {
 font-style: italic; 
}

table {
 background: #f5f5f5;
 border-collapse: separate;
 box-shadow: inset 0 1px 0 #fff;
 font-size: 12px;
 line-height: 24px;
 margin: 30px auto;
 text-align: left;
 width: 800px;
} 

th {
 background: url(http://jackrugile.com/images/misc/noise-diagonal.png), linear-gradient(#777, #444);
 border-left: 1px solid #555;
 border-right: 1px solid #777;
 border-top: 1px solid #555;
 border-bottom: 1px solid #333;
 box-shadow: inset 0 1px 0 #999;
 color: #fff;
 font-weight: bold;
 padding: 10px 15px;
 position: relative;
 text-shadow: 0 1px 0 #000; 
}

th:after {
 background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
 content: '';
 display: block;
 height: 25%;
 left: 0;
 margin: 1px 0 0 0;
 position: absolute;
 top: 25%;
 width: 100%;
}

th:first-child {
 border-left: 1px solid #777; 
 box-shadow: inset 1px 1px 0 #999;
}

th:last-child {
 box-shadow: inset -1px 1px 0 #999;
}

td {
 border-right: 1px solid #fff;
 border-left: 1px solid #e8e8e8;
 border-top: 1px solid #fff;
 border-bottom: 1px solid #e8e8e8;
 padding: 10px 15px;
 position: relative;
 transition: all 300ms;
}

td:first-child {
 box-shadow: inset 1px 0 0 #fff;
} 

td:last-child {
 border-right: 1px solid #e8e8e8;
 box-shadow: inset -1px 0 0 #fff;
} 

tr {
 background: url(http://jackrugile.com/images/misc/noise-diagonal.png); 
}

tr:nth-child(odd) td {
 background: #f1f1f1 url(http://jackrugile.com/images/misc/noise-diagonal.png); 
}

tr:last-of-type td {
 box-shadow: inset 0 -1px 0 #fff; 
}

tr:last-of-type td:first-child {
 box-shadow: inset 1px -1px 0 #fff;
} 

tr:last-of-type td:last-child {
 box-shadow: inset -1px -1px 0 #fff;
} 

tbody:hover td {
 color: transparent;
 text-shadow: 0 0 3px #aaa;
}

tbody:hover tr:hover td {
 color: #444;
 text-shadow: 0 1px 0 #fff;
}
<table>
 <thead>
 <tr>
 <th>Option</th>
 <th>Default</th>
 <th>Description</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td><strong>showSpeed</strong></td>
 <td>15</td>
 <td>The speed of the show/reveal</td>
 </tr>
 <tr>
 <td><strong>showEasing</strong></td>
 <td>'linear'</td>
 <td>The easing of the show/reveal</td>
 </tr>
 <tr>
 <td><strong>hideSpeed</strong></td>
 <td>50</td>
 <td>The speed of the hide/conceal</td>
 </tr>
 <tr>
 <td><strong>hideEasing</strong></td>
 <td>'linear'</td>
 <td>The easing of the hide/conceal</td>
 </tr> 
 <tr>
 <td><strong>width</strong></td>
 <td>'auto'</td>
 <td>The width that the data will be truncated to - <em>('auto' or px amount)</em></td>
 </tr>
 <tr>
 <td><strong>ellipsis</strong></td>
 <td>true</td>
 <td>Set to true to enable the ellipsis</td>
 </tr>
 <tr>
 <td><strong>title</strong></td>
 <td>false</td>
 <td>Set to true to show the full data on hover</td>
 </tr>
 <tr>
 <td><strong>afterShow</strong></td>
 <td> $.noop</td>
 <td>The callback fired after the show/reveal</td>
 </tr>
 <tr>
 <td><strong>afterHide</strong></td>
 <td>$.noop</td>
 <td>The callback fired after the hide/conceal</td>
 </tr>
 </tbody>
</table>

Красивая таблица с цветным заголовком и полосатой разметкой для данных

Красивые таблицы CSS
body
 font-family: 'Helvetica Neue', Helvetica, Arial
 font-size: 14px
 line-height: 20px
 font-weight: 400
 color: #3b3b3b
 -webkit-font-smoothing: antialiased
 font-smoothing: antialiased
 background: #2b2b2b

.wrapper
 margin: 0 auto
 padding: 40px
 max-width: 800px

.table
 margin: 0 0 40px 0
 width: 100%
 box-shadow: 0 1px 3px rgba(0,0,0,0.2)
 display: table
 @media screen and (max-width: 580px)
 display: block

.row
 display: table-row
 background: #f6f6f6
 &:nth-of-type(odd)
 background: #e9e9e9
 &.header
 font-weight: 900
 color: #ffffff
 background: #ea6153
 &.green
 background: #27ae60
 &.blue
 background: #2980b9
 @media screen and (max-width: 580px)
 padding: 8px 0
 display: block

.cell
 padding: 6px 12px
 display: table-cell
 @media screen and (max-width: 580px)
 padding: 2px 12px
 display: block
<div class="wrapper">

 <div class="table">

 <div class="row header">
 <div class="cell">
 Name
 </div>
 <div class="cell">
 Age
 </div>
 <div class="cell">
 Occupation
 </div>
 <div class="cell">
 Location
 </div>
 </div>

 <div class="row">
 <div class="cell">
 Luke Peters
 </div>
 <div class="cell">
 25
 </div>
 <div class="cell">
 Freelance Web Developer
 </div>
 <div class="cell">
 Brookline, MA
 </div>
 </div>

 <div class="row">
 <div class="cell">
 Joseph Smith
 </div>
 <div class="cell">
 27
 </div>
 <div class="cell">
 Project Manager
 </div>
 <div class="cell">
 Somerville, MA
 </div>
 </div>

 <div class="row">
 <div class="cell">
 Maxwell Johnson
 </div>
 <div class="cell">
 26
 </div>
 <div class="cell">
 UX Architect & Designer
 </div>
 <div class="cell">
 Arlington, MA
 </div>
 </div>

 <div class="row">
 <div class="cell">
 Harry Harrison
 </div>
 <div class="cell">
 25
 </div>
 <div class="cell">
 Front-End Developer
 </div>
 <div class="cell">
 Boston, MA
 </div>
 </div>

 </div>

 <div class="table">

 <div class="row header green">
 <div class="cell">
 Product
 </div>
 <div class="cell">
 Unit Price
 </div>
 <div class="cell">
 Quantity
 </div>
 <div class="cell">
 Date Sold
 </div>
 <div class="cell">
 Status
 </div>
 </div>

 <div class="row">
 <div class="cell">
 Solid oak work table
 </div>
 <div class="cell">
 $800
 </div>
 <div class="cell">
 10
 </div>
 <div class="cell">
 03/15/2014
 </div>
 <div class="cell">
 Waiting for Pickup
 </div>
 </div>

 <div class="row">
 <div class="cell">
 Leather iPhone wallet
 </div>
 <div class="cell">
 $45
 </div>
 <div class="cell">
 120
 </div>
 <div class="cell">
 02/28/2014
 </div>
 <div class="cell">
 In Transit
 </div>
 </div>

 <div class="row">
 <div class="cell">
 27" Apple Thunderbolt displays
 </div>
 <div class="cell">
 $1000
 </div>
 <div class="cell">
 25
 </div>
 <div class="cell">
 02/10/2014
 </div>
 <div class="cell">
 Delivered
 </div>
 </div>

 <div class="row">
 <div class="cell">
 Bose studio headphones
 </div>
 <div class="cell">
 $60
 </div>
 <div class="cell">
 90
 </div>
 <div class="cell">
 01/14/2014
 </div>
 <div class="cell">
 Delivered
 </div>
 </div>

 </div>

 <div class="table">

 <div class="row header blue">
 <div class="cell">
 Username
 </div>
 <div class="cell">
 Email
 </div>
 <div class="cell">
 Password
 </div>
 <div class="cell">
 Active
 </div>
 </div>

 <div class="row">
 <div class="cell">
 ninjalug
 </div>
 <div class="cell">
 misterninja@hotmail.com
 </div>
 <div class="cell">
 ************
 </div>
 <div class="cell">
 Yes
 </div>
 </div>

 <div class="row">
 <div class="cell">
 jsmith41
 </div>
 <div class="cell">
 joseph.smith@gmail.com
 </div>
 <div class="cell">
 ************
 </div>
 <div class="cell">
 No
 </div>
 </div>

 <div class="row">
 <div class="cell">
 1337hax0r15
 </div>
 <div class="cell">
 hackerdude1000@aol.com
 </div>
 <div class="cell">
 ************
 </div>
 <div class="cell">
 Yes
 </div>
 </div>

 <div class="row">
 <div class="cell">
 hairyharry19
 </div>
 <div class="cell">
 harryharry@gmail.com
 </div>
 <div class="cell">
 ************
 </div>
 <div class="cell">
 Yes
 </div>
 </div>

 </div>

</div>

Таблица с цветным заголовком и однотонной разметкой для данных

Красивые таблицы CSS
@sR: #418a95;
@sRLight: #418a95 + #222;
@sRDark: #418a95 - #222;
@darkGrey:#6b6b6b;
@offWhite:#f6f3f7;
@bg:#f6f3f7 - #111;
@darkBg:#f6f3f7 - #222;

*{ 
 margin:0;
 padding:0;
 font-family:Lato;
}

body{
 padding:0px;
 background:@bg;
}

.flatTable{ 
 width:100%;
 min-width:500px;
 border-collapse:collapse; 
 font-weight:bold;
 color:@darkGrey;

 tr{
 height:50px;
 background:@darkBg;
 border-bottom:rgba(0,0,0,.05) 1px solid;
 }

 td{ 
 box-sizing:border-box;
 padding-left:30px;

 }

.titleTr{
 height:70px; 
 color:#f6f3f7; 
 background:@sR; 
 border:0px solid;
}

.plusTd{
 background:url(http://i.imgur.com/3hSkhay.png) center center no-repeat, rgba(0,0,0,.1);
}

.controlTd{ 
 position:relative;
 width:80px;
 background:url(http://i.imgur.com/9Q5f6cv.png) center center no-repeat;
 cursor:pointer;
}

.headingTr{
 height:30px;
 background:@sRLight;
 color:@offWhite; 
 font-size:8pt;
 border:0px solid;
} 
}

.button{
 text-align:center;
 cursor:pointer;
}

.sForm{
 position:absolute;
 top:0;
 right:-400px;
 width:400px;
 height:100%; 
 background:@darkBg; 
 overflow:hidden; 
 transition:width 1s, right .3s;
 padding:0px;
 box-sizing:border-box;

 .close{
 float:right; 
 height:70px;
 width:80px;
 padding-top:25px; 
 box-sizing:border-box;
 background:rgba(255,0,0,.4);

 }

 .title{
 width:100%;
 height:70px;
 padding-top:20px;
 padding-left:20px;
 box-sizing:border-box;
 background:rgba(0,0,0,.1);
 }
}
.open{ 
 right:0;
 width:400px !important;
}

.settingsIcons{
 position:absolute; 
 top:0;
 right:0;
 width:0;

 overflow:hidden;

}

.display{

 width:300px;
}

.settingsIcon{
 float:right; 
 background:@sR;
 color:@offWhite;
 height:50px;
 width:80px;
 padding-top:15px;
 box-sizing:border-box;
 text-align:center;
 overflow:hidden;
 transition:width 1s;
}

.settingsIcon:hover{
 background:@sRDark;
}

tr:nth-child(3){
 .settingsIcon{
 height:51px;
 }
}

.openIcon{
 width:80px; 
}
 

<table class="flatTable">
 <tr class="titleTr">
 <td class="titleTd">TABLE TITLE</td>
 <td colspan="4"></td>
 <td class="plusTd button"></td>
 </tr>
 <tr class="headingTr">
 <td>REFERENCE</td>
 <td>DATE ISSUED</td>
 <td>COMPANY</td>
 <td>AMOUNT</td>
 <td>STATUS</td>
 <td></td>
 </tr>

 <tr>
 <td>#2331212</td>
 <td>Feb 21,2013</td>
 <td>White Out</td>
 <td>$2,000</td>
 <td>Paid</td>
 <td class="controlTd">
 <div class="settingsIcons">
 <span class="settingsIcon"><img src="http://i.imgur.com/nnzONel.png" alt="X" /></span>
 <span class="settingsIcon"><img src="http://i.imgur.com/UAdSFIg.png" alt="placeholder icon" /></span>
 <div class="settingsIcon"><img src="http://i.imgur.com/UAdSFIg.png" alt="placeholder icon" /></div>
 </div> 
 </td>
 </tr>

 <tr>
 <td>#2331212</td>
 <td>Feb 21,2013</td>
 <td>White Out</td>
 <td>$2,000</td>
 <td>Paid</td>
 <td class="controlTd">
 <div class="settingsIcons">
 <span class="settingsIcon"><img src="http://i.imgur.com/nnzONel.png" alt="X" /></span>
 <span class="settingsIcon"><img src="http://i.imgur.com/UAdSFIg.png" alt="placeholder icon" /></span>
 <div class="settingsIcon"><img src="http://i.imgur.com/UAdSFIg.png" alt="placeholder icon" /></div>
 </div> 
 </td>
 </tr>

 <tr>
 <td>#2331212</td>
 <td>Feb 21,2013</td>
 <td>White Out</td>
 <td>$2,000</td>
 <td>Paid</td>
 <td class="controlTd"> 
 <div class="settingsIcons">
 <span class="settingsIcon"><img src="http://i.imgur.com/nnzONel.png" alt="X" /></span>
 <span class="settingsIcon"><img src="http://i.imgur.com/UAdSFIg.png" alt="placeholder icon" /></span>
 <div class="settingsIcon"><img src="http://i.imgur.com/UAdSFIg.png" alt="placeholder icon" /></div>
 </div> 
 </td>
 </tr>

</table>

<div id="sForm" class="sForm sFormPadding">
 <span class="button close"><img src="http://i.imgur.com/nnzONel.png" alt="X" class="" /></span>
 <h2 class="title">Add a New Record</h2> 
 </div>

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
$(".button").click(function () {
 $("#sForm").toggleClass("open"); 
});

$(".controlTd").click(function () {
 $(this).children(".settingsIcons").toggleClass("display"); 
 $(this).children(".settingsIcon").toggleClass("openIcon"); 
});

Таблица с чекбоксами

Красивые таблицы CSS
@import "compass/css3";

// More practical CSS...
// using mobile first method (IE8,7 requires respond.js polyfill https://github.com/scottjehl/Respond)

$breakpoint-alpha: 480px; // adjust to your needs

.responsive-table-input-matrix {
 margin: 1em 0;
 // min-width: 300px; // adjust to your needs
 width: 100%;

 @media (min-width: $breakpoint-alpha) {
 .responsive-table-input-matrix {
 width: auto;
 }
 }

 tr {
 border-top: 1px solid #ddd;
 border-bottom: 1px solid #ddd;

 td {
 text-align: left;

 @media (min-width: $breakpoint-alpha) {
 text-align: center;
 }
 }

 & td:first-of-type {
 text-align: left;
 }
 }

 th {
 display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit! 
 }

 td {
 display: block; 

 &:first-child {
 padding-top: .5em;
 }
 &:last-child {
 padding-bottom: .5em;
 }

 &:before {
 content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
 font-weight: bold;

 // optional stuff to make it look nicer
 width: 9em; // magic number :( adjust according to your own content
 display: inline-block;
 // end options

 @media (min-width: $breakpoint-alpha) {
 display: none;
 }
 }
 }

 & th:first-of-type {
 text-align: left;
 }

 th, td {
 text-align: center;

 @media (min-width: $breakpoint-alpha) {
 display: table-cell;
 padding: .25em .5em;

 &:first-child {
 padding-left: 0;
 }

 &:last-child {
 padding-right: 0;
 }
 }

 }

}

// presentational styling

@import 'http://fonts.googleapis.com/css?family=Montserrat:300,400,700';

body {
 padding: 0 2em;
 font-family: Montserrat, sans-serif;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
 color: #444;
 background: #eee;
}

h1 {
 font-weight: normal;
 letter-spacing: -1px;
 color: #34495E;
}

.responsive-table {
 background: #34495E;
 color: #fff;
 border-radius: .4em;
 overflow: hidden;
 tr {
 border-color: lighten(#34495E, 10%);
 }
 th, td {
 margin: .5em 1em;
 @media (min-width: $breakpoint-alpha) { 
 padding: 1em !important; 
 }
 }
 th, td:before {
 color: #dd5;
 }
}
<h1>Responsive Table Input Matrix</h1>
<table class="responsive-table responsive-table-input-matrix">
 <tr>
 <th>Role</th>
 <th>Add to Page</th>
 <th>Configure</th>
 <th>View</th>
 <th>Change Permissions</th>
 </tr>

 <tr>
 <td data-th="Role">Guest</td>
 <td data-th="Add to Page"><input type="checkbox" /></td>
 <td data-th="Configure"><input type="checkbox" /></td>
 <td data-th="View"><input type="checkbox" /></td>
 <td data-th="Change Permissions"><input type="checkbox" /></td>
 </tr>
 <tr>
 <td data-th="Role">Noob</td>
 <td data-th="Add to Page"><input type="checkbox" /></td>
 <td data-th="Configure"><input type="checkbox" /></td>
 <td data-th="View"><input type="checkbox" /></td>
 <td data-th="Change Permissions"><input type="checkbox" /></td>
 </tr>
 <tr>
 <td data-th="Role">Moderator</td>
 <td data-th="Add to Page"><input type="checkbox" /></td>
 <td data-th="Configure"><input type="checkbox" /></td>
 <td data-th="View"><input type="checkbox" /></td>
 <td data-th="Change Permissions"><input type="checkbox" /></td>
 </tr>

 <tr>
 <td data-th="Role">Administrator</td>
 <td data-th="Add to Page"><input type="checkbox" /></td>
 <td data-th="Configure"><input type="checkbox" /></td>
 <td data-th="View"><input type="checkbox" /></td>
 <td data-th="Change Permissions"><input type="checkbox" /></td>
 </tr>

 <tr>
 <td data-th="Role">Owner</td>
 <td data-th="Add to Page"><input type="checkbox" /></td>
 <td data-th="Configure"><input type="checkbox" /></td>
 <td data-th="View"><input type="checkbox" /></td>
 <td data-th="Change Permissions"><input type="checkbox" /></td>
 </tr>

</table>

<p>&larr; Drag window (in editor or full page view) to see the effect. &rarr;</p>

Таблица с ценами

Красивые таблицы CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
html {
 background: rgb(246, 248, 248);
}
body {
 padding: 40px;
 font-family: 'Open Sans', sans-serif;
 font-size: 14px;
 font-weight: 400; 
}
.promos {
 width: 800px;
 margin: 0 auto;
 margin-top: 50px;
}
.promo {
 width: 250px;
 background: #0F1012; 
 color: #f9f9f9;
 float: left;
}
.deal {
 padding: 10px 0 0 0;
}
.deal span {
 display: block;
 text-align: center;
}
.deal span:first-of-type {
 font-size: 23px; 
}
.deal span:last-of-type {
 font-size: 13px;
}
.promo .price {
 display: block;
 width: 250px; 
 background: #292b2e;
 margin: 15px 0 10px 0;
 text-align: center;
 font-size: 23px;
 padding: 17px 0 17px 0;
}
ul {
 display: block;
 margin: 20px 0 10px 0;
 padding: 0;
 list-style-type: none;
 text-align: center;
 color: #999999;
}
li {
 display: block;
 margin: 10px 0 0 0;
}
button {
 border: none;
 border-radius: 40px;
 background: #292b2e;
 color: #f9f9f9;
 padding: 10px 37px;
 margin: 10px 0 20px 60px;
}
.scale {
 transform: scale(1.2);
 box-shadow: 0 0 4px 1px rgba(20, 20, 20, 0.8);
}
.scale button {
 background: #64AAA4;
}
.scale .price {
 color: #64AAA4;
}
<div class="promos"> 
<div class="promo">
 <div class="deal">
 <span>Premium</span>
 <span>This is really a good deal!</span>
 </div>
 <span class="price">$79</span>
 <ul class="features">
 <li>Some great feature</li>
 <li>Another super feature</li>
 <li>And more...</li> 
 </ul>
 <button>Sign up</button>
</div>
<div class="promo scale">
 <div class="deal">
 <span>Plus</span>
 <span>This is really a good deal!</span>
 </div>
 <span class="price">$89</span>
 <ul class="features">
 <li>Some great feature</li>
 <li>Another super feature</li>
 <li>And more...</li> 
 </ul>
 <button>Sign up</button>
</div>
<div class="promo">
 <div class="deal">
 <span>Basic</span>
 <span>Basic membership</span>
 </div>
 <span class="price">$69</span>
 <ul class="features">
 <li>Choose the one on the left</li>
 <li>We need moneyy</li>
 <li>And more...</li> 
 </ul>
 <button>Sign up</button>
</div>
</div>

Таблица в стиле Flat. Красивые таблицы CSS помимо аккуратного вида, можно сделать и функциональными, например эта таблица, она с ссылками редактирования и удаления

Красивые таблицы CSS
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 color: #333;
}

table {
 text-align: left;
 line-height: 40px;
 border-collapse: separate;
 border-spacing: 0;
 border: 2px solid #ed1c40;
 width: 500px;
 margin: 50px auto;
 border-radius: .25rem;
}

thead tr:first-child {
 background: #ed1c40;
 color: #fff;
 border: none;
}

th:first-child,
td:first-child {
 padding: 0 15px 0 20px;
}

thead tr:last-child th {
 border-bottom: 3px solid #ddd;
}

tbody tr:hover {
 background-color: rgba(237, 28, 64, .1);
 cursor: default;
}

tbody tr:last-child td {
 border: none;
}

tbody td {
 border-bottom: 1px solid #ddd;
}

td:last-child {
 text-align: right;
 padding-right: 10px;
}

.button {
 color: #aaa;
 cursor: pointer;
 vertical-align: middle;
}

.edit:hover {
 color: #0a79df;
}

.delete:hover {
 color: #dc2a2a;
}
<table>
 <thead>
 <tr>
 <th colspan="3">Atividades do Projeto</th>
 </tr>
 <tr>
 <th>#</th>
 <th colspan="2">Atividade</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>1</td>
 <td>Atualizar página da equipe</td>
 <td>
 <i class="material-icons button edit">edit</i>
 <i class="material-icons button delete">delete</i>
 </td>
 </tr>
 <tr>
 <td>2</td>
 <td>Design da nova marca</td>
 <td>
 <i class="material-icons button edit">edit</i>
 <i class="material-icons button delete">delete</i>
 </td>
 </tr>
 <tr>
 <td>3</td>
 <td>Encontrar desenvolvedor front-end</td>
 <td>
 <i class="material-icons button edit">edit</i>
 <i class="material-icons button delete">delete</i>
 </td>
 </tr>
 </tbody>
</table>

Таблица с увеличением строк при наведении

Красивые таблицы CSS
* {font-family: Helvetica Neue, Arial, sans-serif; }

body { background-image: linear-gradient(#aaa 25%, #000);}

h1, table { text-align: center; }

table {border-collapse: collapse; width: 70%; margin: 0 auto 5rem;}

th, td { padding: 1.5rem; font-size: 1.3rem; }

tr {background: hsl(50, 50%, 80%); }

tr, td { transition: .4s ease-in; } 

tr:first-child {background: hsla(12, 100%, 40%, 0.5); }

tr:nth-child(even) { background: hsla(50, 50%, 80%, 0.7); }

td:empty {background: hsla(50, 25%, 60%, 0.7); }

tr:hover:not(#firstrow), tr:hover td:empty {background: #ff0; pointer-events: visible;}
tr:hover:not(#firstrow) { transform: scale(1.2); font-weight: 700; box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.5);}
<h1>Race Times</h1>

<table id="racetimes">
<tr id="firstrow"><th>Race</th><th>Location</th><th>Distance (in kilometres)</th><th>Time</th></tr>
<tr><td>SAIT Open</td><td>Calgary</td><td>5</td><td></td></tr>
<tr><td>CALTAF Classic</td><td>Calgary</td><td>1.5</td><td>5.00</td></tr>
<tr><td>Calgary Marathon</td><td>Calgary</td><td>21.1</td><td>2:00.00</td></tr>
<tr><td>Zombie Survivor</td><td>Cochrane</td><td>5</td><td>25.00</td></tr>
<tr><td>Run for Women</td><td>Calgary</td><td>5</td><td>20.00</td></tr>
<tr><td>Mother's Day Run</td><td>Calgary</td><td>10</td><td>45.00</td></tr>
<tr><td>Edmonton Marathon</td><td>Edmonton</td><td>21.1</td><td>1:30.00</td></tr>
</table>

Таблица подходящая для любых данных

Красивые таблицы CSS
/* elements */
body {
 font: 400 16px 'Muli', sans-serif !important;
 margin: 0;
 padding: 0;
}

header {
 margin: 0;
 max-width: 100%;
 padding: 5px;
 text-align: center;
 overflow: auto;
}

ul{
 list-style-type: none;
 margin: 0 auto;
 padding: 0
}

li{
 background: slategrey;
 display: inline-block;
 margin: 5px;
 padding: 5px 7px;
}

li > a {
 color: white; 
 font-size: 16px;
}

li > a:hover{
 color: #262626;
 text-decoration: none;
}

.inner {
 padding: 30px;
}
/* headings */

.container-fluid h2 {
 font-family: 'Montserrat', sans-serif;
}

.site-title {
 font-size: 50px;
 font-weight: 300;
 text-transform: uppercase;
}

/* text colors */

.black,
.k {
 font-color: #262626;
}

/* background colors */

.sq {
 /* alignment */
 float: left;
 margin: 5px;
 /* size */
 width: 200px;
 height: 200px;
 /* box text */
 color: #262626;
 text-align: center;
}

.sq:hover {
 border: 6px solid rgba(255,255,255, 0.5);
}

.sq p {
 vertical-align: middle;
 text-align: center;
 position: relative;
 top: 40px;
}

.c {
 display: block;
 width: 100px;
 height: 100px;
 border-radius: 100%;
 margin: 10px;
}

/* table */
table{
 margin: 10px auto;
}

table > tbody > tr.tableizer-firstrow > th {
 padding: 10px;
 background: lavenderblush;
}

body > div.container-fluid.inner > table > tbody > tr > td{
 border: 4px solid #fff;
 width: 170px;
 padding: 10px;
 background: #f8f8f8;
}
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="">
 <meta name="author" content="">
 <title></title>

<link href="http://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Muli:300,400" rel="stylesheet" type="text/css">

<!-- CSS for 147 Colors -->
<link href="http://www.colorname.xyz/style.css" rel="stylesheet" type="text/css"> 

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<header class="lv-bg">
 <h1 class="site-title">colors by list</h1>
 <p>this is my colorname experiment</p> 
</header>

<!-- color palettes -->

 <div class="container-fluid inner">
 <table class="tableizer-table">
 <tr class="tableizer-firstrow"><th>HTML</th><th>Colorname</th><th>Hex Value</th><th>RGB Value</th><th>RGBA Value</th><th>Class Selector</th></tr>

 <tr><td><div class="c ab-bg"></div></td><td>aliceblue</td><td>#F0F8FF</td><td>rgb(240,248,255)</td><td>rgba(240,248,255,0)</td><td>.ab-bg</td></tr>
 <tr><td><div class="c aw-bg"></div></td><td>antiquewhite</td><td>#FAEBD7</td><td>rgb(250,235,215)</td><td>rgb(250,235,215)</td><td>.aw-bg</td></tr>
 <tr><td><div class="c aq-bg"></div></td><td>aqua</td><td>#00FFFF</td><td>rgb(0,255,255)</td><td>rgba(0,255,255,0)</td><td>.aq-bg</td></tr>
 <tr><td><div class="c am-bg"></div></td><td>aquamarine</td><td>#7FFFD4</td><td>rgb(127,255,212)</td><td>rgba(127,255,212,0)</td><td>.am-bg</td></tr>
 <tr><td><div class="c az-bg"></div></td><td>azure</td><td>#F0FFFF</td><td>rgb(240,255,255)</td><td>rgba(240,255,255,0)</td><td>.az-bg</td></tr>
 <tr><td><div class="c bi-bg"></div></td><td>beige</td><td>#F5F5DC</td><td>rgb(245,245,220)</td><td>rgba(245,245,220,0)</td><td>.be-bg</td></tr>
 <tr><td><div class="c bi-bg"></div></td><td>bisque</td><td>#FFE4C4</td><td>rgb(255,228,196)</td><td>rgba(255,228,196,0)</td><td>.bi-bg</td></tr>
 <tr><td><div class="c k-bg"></div></td><td>black</td><td>#000000</td><td>rgb(0,0,0)</td><td>rgba(0,0,0)</td><td>.k-bg</td></tr>
 <tr><td><div class="c ba-bg"></div></td><td>blanchedalmond</td><td>#FFEBCD</td><td>rgb(255,235,205)</td><td>rgba(255,235,205,0)</td><td>.ba-bg</td></tr>
 <tr><td><div class="c b-bg"></div></td><td>blue</td><td>#0000FF</td><td>rgb(0,0,255)</td><td>rgba(0,0,255,0)</td><td>.b-bg</td></tr>
 <tr><td><div class="c bv-bg"></div></td><td>blueviolet</td><td>#8A2BE2</td><td>rgb(138,43,226)</td><td>rgba(138,43,226,0)</td><td>.bv-bg</td></tr>
 <tr><td><div class="c bn-bg"></div></td><td>brown</td><td>#A52A2A</td><td>rgb(165,42,42)</td><td>rgba(165,42,42,0)</td><td>.bn-bg</td></tr>
 <tr><td><div class="c bw-bg"></div></td><td>burlywood</td><td>#DEB887</td><td>rgb(222,184,135)</td><td>rgba(222,184,135,0)</td><td>.bw-bg</td></tr>
 <tr><td><div class="c cb-bg"></div></td><td>cadetblue</td><td>#5F9EA0</td><td>rgb(95,158,160)</td><td>rgba(95,158,160,0)</td><td>.cb-bg</td></tr>
 <tr><td><div class="c ca-bg"></div></td><td>chartreuse</td><td>#7FFF00</td><td>rgb(127,255,0)</td><td>rgba(127,255,0,0)</td><td>.ca-bg</td></tr>
 <tr><td><div class="c ch-bg"></div></td><td>chocolate</td><td>#D2691E</td><td>rgb(210,105,30)</td><td>rgba(210,105,30,0)</td><td>.ch-bg</td></tr>
 <tr><td><div class="c co-bg"></div></td><td>coral</td><td>#FF7F50</td><td>rgb(255,127,80)</td><td>rgba(255,127,80,0)</td><td>.co-bg</td></tr>
 <tr><td><div class="c cf-bg"></div></td><td>cornflowerblue</td><td>#6495ED</td><td>rgb(100,149,237)</td><td>rgba(100,149,237,0)</td><td>.cf-bg</td></tr>
 <tr><td><div class="c cs-bg"></div></td><td>cornsilk</td><td>#FFF8DC</td><td>rgb(255,248,220)</td><td>rgba(255,248,220,0)</td><td>.cs-bg</td></tr>
 <tr><td><div class="c cr-bg"></div></td><td>crimson</td><td>#DC143C</td><td>rgb(220,20,60)</td><td>rgba(220,20,60,0)</td><td>.cr-bg</td></tr>
 <tr><td><div class="c c-bg"></div></td><td>cyan</td><td>#00FFFF</td><td>rgb(0,255,255)</td><td>rgba(0,255,255,0)</td><td>.c-bg</td></tr>
 <tr><td><div class="c db-bg"></div></td><td>darkblue</td><td>#00008B</td><td>rgb(0,0,139)</td><td>rgba(0,0,139,0)</td><td>.db-bg</td></tr>
 <tr><td><div class="c dc-bg"></div></td><td>darkcyan</td><td>#008B8B</td><td>rgb(0,139,139)</td><td>rgba(0,139,139,0)</td><td>.dc-bg</td></tr>
 <tr><td><div class="c dgr-bg"></div></td><td>darkgoldenrod</td><td>#B8860B</td><td>rgb(184,134,11)</td><td>rgba(184,134,11,0)</td><td>.dgr-bg</td></tr>
 <tr><td><div class="c de-bg"></div></td><td>darkgray</td><td>#A9A9A9</td><td>rgb(169,169,169)</td><td>rgba(169,169,169,0)</td><td>.de-bg</td></tr>
 <tr><td><div class="c dg-bg"></div></td><td>darkgreen</td><td>#006400</td><td>rgb(0,100,0)</td><td>rgba(0,100,0,0)</td><td>.dg-bg</td></tr>
 <tr><td><div class="c de-bg"></div></td><td>darkgrey</td><td>#A9A9A9</td><td>rgb(169,169,169)</td><td>rgba(169,169,169,0)</td><td>.de-bg</td></tr>
 <tr><td><div class="c dk-bg"></div></td><td>darkkhaki</td><td>#BDB76B</td><td>rgb(189,183,107)</td><td>rgba(189,183,107,0)</td><td>.dk-bg</td></tr>
 <tr><td><div class="c dm-bg"></div></td><td>darkmagenta</td><td>#8B008B</td><td>rgb(139,0,139)</td><td>rgba(139,0,139,0)</td><td>.dm-bg</td></tr>
 <tr><td><div class="c dog-bg"></div></td><td>darkolivegreen</td><td>#556B2F</td><td>rgb(85,107,47)</td><td>rgba(85,107,47,0)</td><td>.dog-bg</td></tr>
 <tr><td><div class="c do-bg"></div></td><td>darkorange</td><td>#FF8C00</td><td>rgb(255,140,0)</td><td>rgba(255,140,0,0)</td><td>.do-bg</td></tr>
 <tr><td><div class="c dh-bg"></div></td><td>darkorchid</td><td>#9932CC</td><td>rgb(153,50,204)</td><td>rgba(153,50,204,0)</td><td>.dh-bg</td></tr>
 <tr><td><div class="c dr-bg"></div></td><td>darkred</td><td>#8B0000</td><td>rgb(139,0,0)</td><td>rgba(139,0,0,0)</td><td>.dr-bg</td></tr>
 <tr><td><div class="c ds-bg"></div></td><td>darksalmon</td><td>#E9967A</td><td>rgb(233,150,122)</td><td>rgba(233,150,122,0)</td><td>.ds-bg</td></tr>
 <tr><td><div class="c dsg-bg"></div></td><td>darkseagreen</td><td>#8FBC8F</td><td>rgb(143,188,143)</td><td>rgba(143,188,143,0)</td><td>.dsg-bg</td></tr>
 <tr><td><div class="c dsb-bg"></div></td><td>darkslateblue</td><td>#483D8B</td><td>rgb(72,61,139)</td><td>rgba(72,61,139,0)</td><td>.dsb-bg</td></tr>
 <tr><td><div class="c dse-bg"></div></td><td>darkslategray</td><td>#2F4F4F</td><td>rgb(47,79,79)</td><td>rgba(47,79,79,0)</td><td>.dse-bg</td></tr>
 <tr><td><div class="c dse-bg"></div></td><td>darkslategrey</td><td>#2F4F4F</td><td>rgb(47,79,79)</td><td>rgba(47,79,79,0)</td><td>.dse-bg</td></tr>
 <tr><td><div class="c dt-bg"></div></td><td>darkturquoise</td><td>#00CED1</td><td>rgb(0,206,209)</td><td>rgba(0,206,209,0)</td><td>.dt-bg</td></tr>
 <tr><td><div class="c dv-bg"></div></td><td>darkviolet</td><td>#9400D3</td><td>rgb(148,0,211)</td><td>rgba(148,0,211,0)</td><td>.dv-bg</td></tr>
 <tr><td><div class="c dp-bg"></div></td><td>deeppink</td><td>#FF1493</td><td>rgb(255,20,147)</td><td>rgba(255,20,147,0)</td><td>.dp-bg</td></tr>
 <tr><td><div class="c dyb-bg"></div></td><td>deepskyblue</td><td>#00BFFF</td><td>rgb(0,191,255)</td><td>rgba(0,191,255,0)</td><td>.dyb-bg</td></tr>
 <tr><td><div class="c di-bg"></div></td><td>dimgray</td><td>#696969</td><td>rgb(105,105,105)</td><td>rgba(105,105,105,0)</td><td>.di-bg</td></tr>
 <tr><td><div class="c di-bg"></div></td><td>dimgrey</td><td>#696969</td><td>rgb(105,105,105)</td><td>rgba(105,105,105,0)</td><td>.di-bg</td></tr>
 <tr><td><div class="c dob-bg"></div></td><td>dodgerblue</td><td>#1E90FF</td><td>rgb(30,144,255)</td><td>rgba(30,144,255,0)</td><td>.dob-bg</td></tr>
 <tr><td><div class="c fb-bg"></div></td><td>firebrick</td><td>#B22222</td><td>rgb(178,34,34)</td><td>rgba(178,34,34,0)</td><td>.fb-bg</td></tr>
 <tr><td><div class="c fw-bg"></div></td><td>floralwhite</td><td>#FFFAF0</td><td>rgb(255,250,240)</td><td>rgba(255,250,240,0)</td><td>.fw-bg</td></tr>
 <tr><td><div class="c fg-bg"></div></td><td>forestgreen</td><td>#228B22</td><td>rgb(34,139,34)</td><td>rgba(34,139,34,0)</td><td>.fg-bg</td></tr>
 <tr><td><div class="c fu-bg"></div></td><td>fuchsia</td><td>#FF00FF</td><td>rgb(255,0,255)</td><td>rgba(255,0,255,0)</td><td>.fu-bg</td></tr>
 <tr><td><div class="c gb-bg"></div></td><td>gainsboro</td><td>#DCDCDC</td><td>rgb(220,220,220)</td><td>rgba(220,220,220,0)</td><td>.gb-bg</td></tr>
 <tr><td><div class="c gw-bg"></div></td><td>ghostwhite</td><td>#F8F8FF</td><td>rgb(248,248,255)</td><td>rgba(248,248,255,0)</td><td>.gw-bg</td></tr>
 <tr><td><div class="c gd-bg"></div></td><td>gold</td><td>#FFD700</td><td>rgb(255,215,0)</td><td>rgba(255,215,0,0)</td><td>.gd-bg</td></tr>
 <tr><td><div class="c gr-bg"></div></td><td>goldenrod</td><td>#DAA520</td><td>rgb(218,165,32)</td><td>rgba(218,165,32,0)</td><td>.gr-bg</td></tr>
 <tr><td><div class="c ge-bg"></div></td><td>gray</td><td>#808080</td><td>rgb(128,128,128)</td><td>rgba(128,128,128,0)</td><td>.ge-bg</td></tr>
 <tr><td><div class="c g-bg"></div></td><td>green</td><td>#008000</td><td>rgb(0,128,0)</td><td>rgba(0,128,0,0)</td><td>.g-bg</td></tr>
 <tr><td><div class="c gy-bg"></div></td><td>greenyellow</td><td>#ADFF2F</td><td>rgb(173,255,47)</td><td>rgba(173,255,47,0)</td><td>.gy-bg</td></tr>
 <tr><td><div class="c ge-bg"></div></td><td>grey</td><td>#808080</td><td>rgb(128,128,128)</td><td>rgba(128,128,128,0)</td><td>.ge-bg</td></tr>
 <tr><td><div class="c hd-bg"></div></td><td>honeydew</td><td>#F0FFF0</td><td>rgb(240,255,240)</td><td>rgba(240,255,240,0)</td><td>.hd-bg</td></tr>
 <tr><td><div class="c hp-bg"></div></td><td>hotpink</td><td>#FF69B4</td><td>rgb(255,105,180)</td><td>rgba(255,105,180,0)</td><td>.hp-bg</td></tr>
 <tr><td><div class="c ir-bg"></div></td><td>indianred</td><td>#CD5C5C</td><td>rgb(205,92,92)</td><td>rgba(205,92,92,0)</td><td>.ir-bg</td></tr>
 <tr><td><div class="c ig-bg"></div></td><td>indigo</td><td>#4B0082</td><td>rgb(75,0,130)</td><td>rgba(75,0,130,0)</td><td>.ig-bg</td></tr>
 <tr><td><div class="c iv-bg"></div></td><td>ivory</td><td>#FFFFF0</td><td>rgb(255,255,240)</td><td>rgba(255,255,240,0)</td><td>.iv-bg</td></tr>
 <tr><td><div class="c kh-bg"></div></td><td>khaki</td><td>#F0E68C</td><td>rgb(240,230,140)</td><td>rgba(240,230,140,0)</td><td>.kh-bg</td></tr>
 <tr><td><div class="c lr-bg"></div></td><td>lavender</td><td>#E6E6FA</td><td>rgb(230,230,250)</td><td>rgba(230,230,250,0)</td><td>.lv-bg</td></tr>
 <tr><td><div class="c ln-bg"></div></td><td>lavenderblush</td><td>#FFF0F5</td><td>rgb(255,240,245)</td><td>rgba(255,240,245,0)</td><td>.lr-bg</td></tr>
 <tr><td><div class="c ln-bg"></div></td><td>lawngreen</td><td>#7CFC00</td><td>rgb(124,252,0)</td><td>rgba(124,252,0,0)</td><td>.ln-bg</td></tr>
 <tr><td><div class="c lf-bg"></div></td><td>lemonchiffon</td><td>#FFFACD</td><td>rgb(255,250,205)</td><td>rgba(255,250,205,0)</td><td>.lf-bg</td></tr>
 <tr><td><div class="c lb-bg"></div></td><td>lightblue</td><td>#ADD8E6</td><td>rgb(173,216,230)</td><td>rgba(173,216,230,0)</td><td>.lb-bg</td></tr>
 <tr><td><div class="c la-bg"></div></td><td>lightcoral</td><td>#F08080</td><td>rgb(240,128,128)</td><td>rgba(240,128,128,0)</td><td>.la-bg</td></tr>
 <tr><td><div class="c lc-bg"></div></td><td>lightcyan</td><td>#E0FFFF</td><td>rgb(224,255,255)</td><td>rgba(224,255,255,0)</td><td>.lc-bg</td></tr>
 <tr><td><div class="c lgry-bg"></div></td><td>lightgoldenrodyellow</td><td>#FAFAD2</td><td>rgb(250,250,210)</td><td>rgba(250,250,210,0)</td><td>.lgry-bg</td></tr>
 <tr><td><div class="c le-bg"></div></td><td>lightgray</td><td>#D3D3D3</td><td>rgb(211,211,211)</td><td>rgba(211,211,211,0)</td><td>.le-bg</td></tr>
 <tr><td><div class="c lg-bg"></div></td><td>lightgreen</td><td>#90EE90</td><td>rgb(144,238,144)</td><td>rgba(144,238,144,0)</td><td>.lg-bg</td></tr>
 <tr><td><div class="c le-bg"></div></td><td>lightgrey</td><td>#D3D3D3</td><td>rgb(211,211,211)</td><td>rgba(211,211,211,0)</td><td>.le-bg</td></tr>
 <tr><td><div class="c lp-bg"></div></td><td>lightpink</td><td>#FFB6C1</td><td>rgb(255,182,193)</td><td>rgba(255,182,193,0)</td><td>.lp-bg</td></tr>
 <tr><td><div class="c ls-bg"></div></td><td>lightsalmon</td><td>#FFA07A</td><td>rgb(255,160,122)</td><td>rgba(255,160,122,0)</td><td>.ls-bg</td></tr>
 <tr><td><div class="c lsg-bg"></div></td><td>lightseagreen</td><td>#20B2AA</td><td>rgb(32,178,170)</td><td>rgba(32,178,170,0)</td><td>.lsg-bg</td></tr>
 <tr><td><div class="c lsb-bg"></div></td><td>lightskyblue</td><td>#87CEFA</td><td>rgb(135,206,250)</td><td>rgba(135,206,250,0)</td><td>.lsb-bg</td></tr>
 <tr><td><div class="c lse-bg"></div></td><td>lightslategray</td><td>#778899</td><td>rgb(119,136,153)</td><td>rgba(119,136,153,0)</td><td>.lse-bg</td></tr>
 <tr><td><div class="c lse-bg"></div></td><td>lightslategrey</td><td>#778899</td><td>rgb(119,136,153)</td><td>rgba(119,136,153,0)</td><td>.lse-bg</td></tr>
 <tr><td><div class="c lsl-bg"></div></td><td>lightsteelblue</td><td>#B0C4DE</td><td>rgb(176,196,222)</td><td>rgba(176,196,222,0)</td><td>.lsl-bg</td></tr>
 <tr><td><div class="c ly-bg"></div></td><td>lightyellow</td><td>#FFFFE0</td><td>rgb(255,255,224)</td><td>rgba(255,255,224,0)</td><td>.ly-bg</td></tr>
 <tr><td><div class="c lm-bg"></div></td><td>lime</td><td>#00FF00</td><td>rgb(0,255,0)</td><td>rgba(0,255,0,0)</td><td>.lm-bg</td></tr>
 <tr><td><div class="c lmg-bg"></div></td><td>limegreen</td><td>#32CD32</td><td>rgb(50,205,50)</td><td>rgba(50,205,50,0)</td><td>.lmg-bg</td></tr>
 <tr><td><div class="c li-bg"></div></td><td>linen</td><td>#FAF0E6</td><td>rgb(250,240,230)</td><td>rgba(250,240,230,0)</td><td>.li-bg</td></tr>
 <tr><td><div class="c m-bg"></div></td><td>magenta</td><td>#FF00FF</td><td>rgb(255,0,255)</td><td>rgba(255,0,255,0)</td><td>.m-bg</td></tr>
 <tr><td><div class="c ma-bg"></div></td><td>maroon</td><td>#800000</td><td>rgb(128,0,0)</td><td>rgba(128,0,0,0)</td><td>.ma-bg</td></tr>
 <tr><td><div class="c mam-bg"></div></td><td>mediumaquamarine</td><td>#66CDAA</td><td>rgb(102,205,170)</td><td>rgba(102,205,170,0)</td><td>.mam-bg</td></tr>
 <tr><td><div class="c mb-bg"></div></td><td>mediumblue</td><td>#0000CD</td><td>rgb(0,0,205)</td><td>rgba(0,0,205,0)</td><td>.mb-bg</td></tr>
 <tr><td><div class="c mo-bg"></div></td><td>mediumorchid</td><td>#BA55D3</td><td>rgb(186,85,211)</td><td>rgba(186,85,211,0)</td><td>.mo-bg</td></tr>
 <tr><td><div class="c mp-bg"></div></td><td>mediumpurple</td><td>#9370DB</td><td>rgb(147,112,219)</td><td>rgba(147,112,219,0)</td><td>.mp-bg</td></tr>
 <tr><td><div class="c msg-bg"></div></td><td>mediumseagreen</td><td>#3CB371</td><td>rgb(60,179,113)</td><td>rgba(60,179,113,0)</td><td>.msg-bg</td></tr>
 <tr><td><div class="c msb-bg"></div></td><td>mediumslateblue</td><td>#7B68EE</td><td>rgb(123,104,238)</td><td>rgba(123,104,238,0)</td><td>.msb-bg</td></tr>
 <tr><td><div class="c mpg-bg"></div></td><td>mediumspringgreen</td><td>#00FA9A</td><td>rgb(0,250,154)</td><td>rgba(0,250,154,0)</td><td>.mpg-bg</td></tr>
 <tr><td><div class="c mt-bg"></div></td><td>mediumturquoise</td><td>#48D1CC</td><td>rgb(72,209,204)</td><td>rgba(72,209,204,0)</td><td>.mt-bg</td></tr>
 <tr><td><div class="c mvr-bg"></div></td><td>mediumvioletred</td><td>#C71585</td><td>rgb(199,21,133)</td><td>rgba(199,21,133,0)</td><td>.mvr-bg</td></tr>
 <tr><td><div class="c mib-bg"></div></td><td>midnightblue</td><td>#191970</td><td>rgb(25,25,112)</td><td>rgba(25,25,112,0)</td><td>.mib-bg</td></tr>
 <tr><td><div class="c mc-bg"></div></td><td>mintcream</td><td>#F5FFFA</td><td>rgb(245,255,250)</td><td>rgba(245,255,250,0)</td><td>.mc-bg</td></tr>
 <tr><td><div class="c mr-bg"></div></td><td>mistyrose</td><td>#FFE4E1</td><td>rgb(255,228,225)</td><td>rgba(255,228,225,0)</td><td>.mr-bg</td></tr>
 <tr><td><div class="c mn-bg"></div></td><td>moccasin</td><td>#FFE4B5</td><td>rgb(255,228,181)</td><td>rgba(255,228,181,0)</td><td>.mn-bg</td></tr>
 <tr><td><div class="c nw-bg"></div></td><td>navajowhite</td><td>#FFDEAD</td><td>rgb(255,222,173)</td><td>rgba(255,222,173,0)</td><td>.nw-bg</td></tr>
 <tr><td><div class="c na-bg"></div></td><td>navy</td><td>#000080</td><td>rgb(0,0,128)</td><td>rgba(0,0,128,0)</td><td>.na-bg</td></tr>
 <tr><td><div class="c ol-bg"></div></td><td>oldlace</td><td>#FDF5E6</td><td>rgb(253,245,230)</td><td>rgba(253,245,230,0)</td><td>.ol-bg</td></tr>
 <tr><td><div class="c oi-bg"></div></td><td>olive</td><td>#808000</td><td>rgb(128,128,0)</td><td>rgba(128,128,0,0)</td><td>.oi-bg</td></tr>
 <tr><td><div class="c od-bg"></div></td><td>olivedrab</td><td>#6B8E23</td><td>rgb(107,142,35)</td><td>rgba(107,142,35,0)</td><td>.od-bg</td></tr>
 <tr><td><div class="c o-bg"></div></td><td>orange</td><td>#FFA500</td><td>rgb(255,165,0)</td><td>rgba(255,165,0,0)</td><td>.o-bg</td></tr>
 <tr><td><div class="c or-bg"></div></td><td>orangered</td><td>#FF4500</td><td>rgb(255,69,0)</td><td>rgba(255,69,0,0)</td><td>.or-bg</td></tr>
 <tr><td><div class="c oc-bg"></div></td><td>orchid</td><td>#DA70D6</td><td>rgb(218,112,214)</td><td>rgba(218,112,214,0)</td><td>.oc-bg</td></tr>
 <tr><td><div class="c pgr-bg"></div></td><td>palegoldenrod</td><td>#EEE8AA</td><td>rgb(238,232,170)</td><td>rgba(238,232,170,0)</td><td>.pgr-bg</td></tr>
 <tr><td><div class="c pg-bg"></div></td><td>palegreen</td><td>#98FB98</td><td>rgb(152,251,152)</td><td>rgba(152,251,152,0)</td><td>.pg-bg</td></tr>
 <tr><td><div class="c pt-bg"></div></td><td>paleturquoise</td><td>#AFEEEE</td><td>rgb(175,238,238)</td><td>rgba(175,238,238,0)</td><td>.pt-bg</td></tr>
 <tr><td><div class="c pvr-bg"></div></td><td>palevioletred</td><td>#DB7093</td><td>rgb(219,112,147)</td><td>rgba(219,112,147,0)</td><td>.pvr-bg</td></tr>
 <tr><td><div class="c pw-bg"></div></td><td>papayawhip</td><td>#FFEFD5</td><td>rgb(255,239,213)</td><td>rgba(255,239,213,0)</td><td>.pw-bg</td></tr>
 <tr><td><div class="c pp-bg"></div></td><td>peachpuff</td><td>#FFDAB9</td><td>rgb(255,218,185)</td><td>rgba(255,218,185,0)</td><td>.pp-bg</td></tr>
 <tr><td><div class="c pe-bg"></div></td><td>peru</td><td>#CD853F</td><td>rgb(205,133,63)</td><td>rgba(205,133,63,0)</td><td>.pe-bg</td></tr>
 <tr><td><div class="c pi-bg"></div></td><td>pink</td><td>#FFC0CB</td><td>rgb(255,192,203)</td><td>rgba(255,192,203,0)</td><td>.pi-bg</td></tr>
 <tr><td><div class="c pl-bg"></div></td><td>plum</td><td>#DDA0DD</td><td>rgb(221,160,221)</td><td>rgba(221,160,221,0)</td><td>.pl-bg</td></tr>
 <tr><td><div class="c pb-bg"></div></td><td>powderblue</td><td>#B0E0E6</td><td>rgb(176,224,230)</td><td>rgba(176,224,230,0)</td><td>.pb-bg</td></tr>
 <tr><td><div class="c pr-bg"></div></td><td>purple</td><td>#800080</td><td>rgb(128,0,128)</td><td>rgba(128,0,128,0)</td><td>.pr-bg</td></tr>
 <tr><td><div class="c r-bg"></div></td><td>red</td><td>#FF0000</td><td>rgb(255,0,0)</td><td>rgba(255,0,0,0)</td><td>.r-bg</td></tr>
 <tr><td><div class="c rr-bg"></div></td><td>rosybrown</td><td>#BC8F8F</td><td>rgb(188,143,143)</td><td>rgba(188,143,143,0)</td><td>.rr-bg</td></tr>
 <tr><td><div class="c rb-bg"></div></td><td>royalblue</td><td>#4169E1</td><td>rgb(65,105,225)</td><td>rgba(65,105,225,0)</td><td>.rb-bg</td></tr>
 <tr><td><div class="c sd-bg"></div></td><td>saddlebrown</td><td>#8B4513</td><td>rgb(139,69,19)</td><td>rgba(139,69,19,0)</td><td>.sd-bg</td></tr>
 <tr><td><div class="c sa-bg"></div></td><td>salmon</td><td>#FA8072</td><td>rgb(250,128,114)</td><td>rgba(250,128,114,0)</td><td>.sa-bg</td></tr>
 <tr><td><div class="c sw-bg"></div></td><td>sandybrown</td><td>#F4A460</td><td>rgb(244,164,96)</td><td>rgba(244,164,96,0)</td><td>.sw-bg</td></tr>
 <tr><td><div class="c sg-bg"></div></td><td>seagreen</td><td>#2E8B57</td><td>rgb(46,139,87)</td><td>rgba(46,139,87,0)</td><td>.sg-bg</td></tr>
 <tr><td><div class="c ss-bg"></div></td><td>seashell</td><td>#FFF5EE</td><td>rgb(255,245,238)</td><td>rgba(255,245,238,0)</td><td>.ss-bg</td></tr>
 <tr><td><div class="c sn-bg"></div></td><td>sienna</td><td>#A0522D</td><td>rgb(160,82,45)</td><td>rgba(160,82,45,0)</td><td>.sn-bg</td></tr>
 <tr><td><div class="c si-bg"></div></td><td>silver</td><td>#C0C0C0</td><td>rgb(192,192,192)</td><td>rgba(192,192,192,0)</td><td>.si-bg</td></tr>
 <tr><td><div class="c sb-bg"></div></td><td>skyblue</td><td>#87CEEB</td><td>rgb(135,206,235)</td><td>rgba(135,206,235,0)</td><td>.sb-bg</td></tr>
 <tr><td><div class="c sl-bg"></div></td><td>slateblue</td><td>#6A5ACD</td><td>rgb(106,90,205)</td><td>rgba(106,90,205,0)</td><td>.sl-bg</td></tr>
 <tr><td><div class="c se-bg"></div></td><td>slategray</td><td>#708090</td><td>rgb(112,128,144)</td><td>rgba(112,128,144,0)</td><td>.se-bg</td></tr>
 <tr><td><div class="c se-bg"></div></td><td>slategrey</td><td>#708090</td><td>rgb(112,128,144)</td><td>rgba(112,128,144,0)</td><td>.se-bg</td></tr>
 <tr><td><div class="c so-bg"></div></td><td>snow</td><td>#FFFAFA</td><td>rgb(255,250,250)</td><td>rgba(255,250,250,0)</td><td>.so-bg</td></tr>
 <tr><td><div class="c sr-bg"></div></td><td>springgreen</td><td>#00FF7F</td><td>rgb(0,255,127)</td><td>rgba(0,255,127,0)</td><td>.sr-bg</td></tr>
 <tr><td><div class="c su-bg"></div></td><td>steelblue</td><td>#4682B4</td><td>rgb(70,130,180)</td><td>rgba(70,130,180,0)</td><td>.su-bg</td></tr>
 <tr><td><div class="c ta-bg"></div></td><td>tan</td><td>#D2B48C</td><td>rgb(210,180,140)</td><td>rgba(70,130,180,0)</td><td>.ta-bg</td></tr>
 <tr><td><div class="c te-bg"></div></td><td>teal</td><td>#008080</td><td>rgb(0,128,128)</td><td>rgba(0,128,128,0)</td><td>.te-bg</td></tr>
 <tr><td><div class="c th-bg"></div></td><td>thistle</td><td>#D8BFD8</td><td>rgb(216,191,216)</td><td>rgba(216,191,216,0)</td><td>.th-bg</td></tr>
 <tr><td><div class="c to-bg"></div></td><td>tomato</td><td>#FF6347</td><td>rgb(255,99,71)</td><td>rgba(255,99,71,0)</td><td>.to-bg</td></tr>
 <tr><td><div class="c tu-bg"></div></td><td>turquoise</td><td>#40E0D0</td><td>rgb(64,224,208)</td><td>rgba(64,224,208,0)</td><td>.tu-bg</td></tr>
 <tr><td><div class="c v-bg"></div></td><td>violet</td><td>#EE82EE</td><td>rgb(238,130,238)</td><td>rgba(238,130,238,0)</td><td>.v-bg</td></tr>
 <tr><td><div class="c wh-bg"></div></td><td>wheat</td><td>#F5DEB3</td><td>rgb(245,222,179)</td><td>rgba(245,222,179,0)</td><td>.wh-bg</td></tr>
 <tr><td><div class="c w-bg"></div></td><td>white</td><td>#FFFFFF</td><td>rgb(255,255,255)</td><td>rgba(255,255,255,0)</td><td>.w-bg</td></tr>
 <tr><td><div class="c ws-bg"></div></td><td>whitesmoke</td><td>#F5F5F5</td><td>rgb(245,245,245)</td><td>rgba(245,245,245,0)</td><td>.ws-bg</td></tr>
 <tr><td><div class="c y-bg"></div></td><td>yellow</td><td>#FFFF00</td><td>rgb(255,255,0)</td><td>rgba(255,255,0,0)</td><td>.y-bg</td></tr>
 <tr><td><div class="c yg-bg"></div></td><td>yellowgreen</td><td>#9ACD32</td><td>rgb(154,205,50)</td><td>rgba(154,205,50,0)</td><td>.yg-bg</td></tr>
 </table>

 </div>

Таблица с выборкой сортировки по каждому столбцу

Красивые таблицы CSS
@import url('http://fonts.googleapis.com/css?family=Amarante');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 outline: none;
 -webkit-font-smoothing: antialiased;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
html { overflow-y: scroll; }
body { 
 background: #eee url('http://i.imgur.com/eeQeRmk.png'); /* http://subtlepatterns.com/weave/ */
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 font-size: 62.5%;
 line-height: 1;
 color: #585858;
 padding: 22px 10px;
 padding-bottom: 55px;
}

::selection { background: #5f74a0; color: #fff; }
::-moz-selection { background: #5f74a0; color: #fff; }
::-webkit-selection { background: #5f74a0; color: #fff; }

br { display: block; line-height: 1.6em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
 -webkit-font-smoothing: antialiased;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; } 

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

h1 { 
 font-family: 'Amarante', Tahoma, sans-serif;
 font-weight: bold;
 font-size: 3.6em;
 line-height: 1.7em;
 margin-bottom: 10px;
 text-align: center;
}

/** page structure **/
#wrapper {
 display: block;
 width: 850px;
 background: #fff;
 margin: 0 auto;
 padding: 10px 17px;
 -webkit-box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.35);
}

#keywords {
 margin: 0 auto;
 font-size: 1.2em;
 margin-bottom: 15px;
}

#keywords thead {
 cursor: pointer;
 background: #c9dff0;
}
#keywords thead tr th { 
 font-weight: bold;
 padding: 12px 30px;
 padding-left: 42px;
}
#keywords thead tr th span { 
 padding-right: 20px;
 background-repeat: no-repeat;
 background-position: 100% 100%;
}

#keywords thead tr th.headerSortUp, #keywords thead tr th.headerSortDown {
 background: #acc8dd;
}

#keywords thead tr th.headerSortUp span {
 background-image: url('http://i.imgur.com/SP99ZPJ.png');
}
#keywords thead tr th.headerSortDown span {
 background-image: url('http://i.imgur.com/RkA9MBo.png');
}

#keywords tbody tr { 
 color: #555;
}
#keywords tbody tr td {
 text-align: center;
 padding: 15px 10px;
}
#keywords tbody tr td.lalign {
 text-align: left;
}
$(function(){
 $('#keywords').tablesorter(); 
});
<body>
 <div id="wrapper">
 <h1>Sortable Table of Search Queries</h1>

 <table id="keywords" cellspacing="0" cellpadding="0">
 <thead>
 <tr>
 <th><span>Keywords</span></th>
 <th><span>Impressions</span></th>
 <th><span>Clicks</span></th>
 <th><span>CTR</span></th>
 <th><span>Rank</span></th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td class="lalign">silly tshirts</td>
 <td>6,000</td>
 <td>110</td>
 <td>1.8%</td>
 <td>22.2</td>
 </tr>
 <tr>
 <td class="lalign">desktop workspace photos</td>
 <td>2,200</td>
 <td>500</td>
 <td>22%</td>
 <td>8.9</td>
 </tr>
 <tr>
 <td class="lalign">arrested development quotes</td>
 <td>13,500</td>
 <td>900</td>
 <td>6.7%</td>
 <td>12.0</td>
 </tr>
 <tr>
 <td class="lalign">popular web series</td>
 <td>8,700</td>
 <td>350</td>
 <td>4%</td>
 <td>7.0</td>
 </tr>
 <tr>
 <td class="lalign">2013 webapps</td>
 <td>9,900</td>
 <td>460</td>
 <td>4.6%</td>
 <td>11.5</td>
 </tr>
 <tr>
 <td class="lalign">ring bananaphone</td>
 <td>10,500</td>
 <td>748</td>
 <td>7.1%</td>
 <td>17.3</td>
 </tr>
 </tbody>
 </table>
 </div> 
</body>

Таблица с возможностью визуального редактирования данных по клику в необходимое поле, также добавление полей и экспорт данных

Красивые таблицы CSS
@import "compass/css3";

.table-editable {
 position: relative;

 .glyphicon {
 font-size: 20px;
 }
}

.table-remove {
 color: #700;
 cursor: pointer;

 &:hover {
 color: #f00;
 }
}

.table-up, .table-down {
 color: #007;
 cursor: pointer;

 &:hover {
 color: #00f;
 }
}

.table-add {
 color: #070;
 cursor: pointer;
 position: absolute;
 top: 8px;
 right: 0;

 &:hover {
 color: #0b0;
 }
}
var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');

$('.table-add').click(function () {
 var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
 $TABLE.find('table').append($clone);
});

$('.table-remove').click(function () {
 $(this).parents('tr').detach();
});

$('.table-up').click(function () {
 var $row = $(this).parents('tr');
 if ($row.index() === 1) return; // Don't go above the header
 $row.prev().before($row.get(0));
});

$('.table-down').click(function () {
 var $row = $(this).parents('tr');
 $row.next().after($row.get(0));
});

// A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;

$BTN.click(function () {
 var $rows = $TABLE.find('tr:not(:hidden)');
 var headers = [];
 var data = [];

 // Get the headers (add special header logic here)
 $($rows.shift()).find('th:not(:empty)').each(function () {
 headers.push($(this).text().toLowerCase());
 });

 // Turn all existing rows into a loopable array
 $rows.each(function () {
 var $td = $(this).find('td');
 var h = {};

 // Use the headers from earlier to name our hash keys
 headers.forEach(function (header, i) {
 h[header] = $td.eq(i).text(); 
 });

 data.push(h);
 });

 // Output the result
 $EXPORT.text(JSON.stringify(data));
});
<div class="container">
 <h1>HTML5 Editable Table</h1>
 <p>Through the powers of <strong>contenteditable</strong> and some simple jQuery you can easily create a custom editable table. No need for a robust JavaScript library anymore these days.</p>

 <ul>
 <li>An editable table that exports a hash array. Dynamically compiles rows from headers</li> 
 <li>Simple / powerful features such as add row, remove row, move row up/down.</li>
 </ul>

 <div id="table" class="table-editable">
 <span class="table-add glyphicon glyphicon-plus"></span>
 <table class="table">
 <tr>
 <th>Name</th>
 <th>Value</th>
 <th></th>
 <th></th>
 </tr>
 <tr>
 <td contenteditable="true">Stir Fry</td>
 <td contenteditable="true">stir-fry</td>
 <td>
 <span class="table-remove glyphicon glyphicon-remove"></span>
 </td>
 <td>
 <span class="table-up glyphicon glyphicon-arrow-up"></span>
 <span class="table-down glyphicon glyphicon-arrow-down"></span>
 </td>
 </tr>
 <!-- This is our clonable table line -->
 <tr class="hide">
 <td contenteditable="true">Untitled</td>
 <td contenteditable="true">undefined</td>
 <td>
 <span class="table-remove glyphicon glyphicon-remove"></span>
 </td>
 <td>
 <span class="table-up glyphicon glyphicon-arrow-up"></span>
 <span class="table-down glyphicon glyphicon-arrow-down"></span>
 </td>
 </tr>
 </table>
 </div>

 <button id="export-btn" class="btn btn-primary">Export Data</button>
 <p id="export"></p>
</div>
Поделиться с друзьями: