Примеры таблиц на HTML и CSS

MnogoBlog > WordPress > Дизайн > CSS и теги > Примеры таблиц на HTML и CSS
Добавить комментарий

Здравствуйте, ниже рассмотрим код таблиц на HTML и CSS:

Скачать исходники для статьи можно ниже

PS: Статья в процессе написания…

1. Таблица 1

Ссылка на Codepen: “codepen.io/alassetter/pen/cyrfB”

Таблица реагирует на наведение курсора. Ничего чрезмерно экстравагантного, всё достаточно просто.

Разработчик использовал только HTML и CSS-код.

Вот код HTML:

Скрытый текст
<div class="table-title">
<h3>Data Table</h3>
</div>
<table class="table-fill">
<thead>
<tr>
<th class="text-left">Month</th>
<th class="text-left">Sales</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">January</td>
<td class="text-left">$ 50,000.00</td>
</tr>
<tr>
<td class="text-left">February</td>
<td class="text-left">$ 10,000.00</td>
</tr>
<tr>
<td class="text-left">March</td>
<td class="text-left">$ 85,000.00</td>
</tr>
<tr>
<td class="text-left">April</td>
<td class="text-left">$ 56,000.00</td>
</tr>
<tr>
<td class="text-left">May</td>
<td class="text-left">$ 98,000.00</td>
</tr>
</tbody>
</table>

Вот код CSS:

Скрытый текст
div.table-title {
   display: block;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
}

.table-title h3 {
   color: #fafafa;
   font-size: 30px;
   font-weight: 400;
   font-style:normal;
   font-family: "Roboto", helvetica, arial, sans-serif;
   text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
   text-transform:uppercase;
}


/*** Table Styles **/

.table-fill {
  background: white;
  border-radius:3px;
  border-collapse: collapse;
  height: 320px;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
 
th {
  color:#D5DDE5;;
  background:#1b1e24;
  border-bottom:4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:23px;
  font-weight: 100;
  padding:24px;
  text-align:left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

th:first-child {
  border-top-left-radius:3px;
}
 
th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}
  
tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
 
tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
}
 
tr:first-child {
  border-top:none;
}

tr:last-child {
  border-bottom:none;
}
 
tr:nth-child(odd) td {
  background:#EBEBEB;
}
 
tr:nth-child(odd):hover td {
  background:#4E5066;
}

tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
 
tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
 
td {
  background:#FFFFFF;
  padding:20px;
  text-align:left;
  vertical-align:middle;
  font-weight:300;
  font-size:18px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

td:last-child {
  border-right: 0px;
}

th.text-left {
  text-align: left;
}

th.text-center {
  text-align: center;
}

th.text-right {
  text-align: right;
}

td.text-left {
  text-align: left;
}

td.text-center {
  text-align: center;
}

td.text-right {
  text-align: right;
}

Таблицу легко вставить на wordpress сайт.

HTML код таблицы вставляем в “Редакторе записи” во вкладке “Текст”:

А для вставки CSS кода таблицы можно воспользоваться бесплатным плагином – Simple Custom CSS (https://ru.wordpress.org/plugins/simple-custom-css/):

После активации плагина в админке, в пункте “Внешний вид” появится подпункт “Пользовательский CSS”, вот там и вставляем CSS таблицы:

2. Таблица с прокруткой.

Таблица имеет фиксированный заголовок и прокручиваемый остальной контент.

Ссылка на Codepen: “codepen.io/ronaldo-dugerto/pen/GRKrgOO”

Разработчик использовал только HTML и CSS-код.

Вот код HTML:

Скрытый текст
<div id="top20"> 

<div class="row"> 

<div class="col s12"> 

<table class="responsive-table scroll" > 

<thead> 

<tr style="height: 40px;" > 

<th style="text-align:left;">User</th> 



<th style="text-align:right;">Sales RM</th> 



<th style="text-align:right;">Reimbursments</th> 



<th style="text-align:right;">GG RM</th> 



<th style="text-align:right;">GG RB</th> 



<th style="text-align:right;">GG RM&RB</th> 



<th style="text-align:right;">Discount</th> 



<th style="text-align:right;">Discount%</th> 

</tr> 

</thead> 



<tbody> 



<tr> 

<td style="text-align:left;">grandooi8888</td> 



<td style="text-align:right;">13,474</td> 



<td style="text-align:right;">10,000</td> 



<td style="text-align:right;">19,766</td> 



<td style="text-align:right;">-3,834</td> 



<td style="text-align:right;">15,932</td> 



<td style="text-align:right;">6,486</td> 



<td style="text-align:right;">25.46</td> 

</tr> 

<tr> 

<td style="text-align:left;">pooo3888</td> 



<td style="text-align:right;">12,300</td> 



<td style="text-align:right;">5,000</td> 



<td style="text-align:right;">16,300</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">16,300</td> 



<td style="text-align:right;">6,700</td> 



<td style="text-align:right;">41.10</td> 

</tr> 

<tr> 

<td style="text-align:left;">opale</td> 



<td style="text-align:right;">8,400</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">8,400</td> 



<td style="text-align:right;">7,251</td> 



<td style="text-align:right;">15,651</td> 



<td style="text-align:right;">9,300</td> 



<td style="text-align:right;">110.71</td> 

</tr> 

<tr> 

<td style="text-align:left;">jean</td> 



<td style="text-align:right;">8,100</td> 



<td style="text-align:right;">2,900</td> 



<td style="text-align:right;">5,150</td> 



<td style="text-align:right;">567</td> 



<td style="text-align:right;">5,717</td> 



<td style="text-align:right;">1,414</td> 



<td style="text-align:right;">17.45</td> 

</tr> 

<tr> 

<td style="text-align:left;">mpiii3y</td> 



<td style="text-align:right;">6,800</td> 



<td style="text-align:right;">6,500</td> 



<td style="text-align:right;">-425</td> 



<td style="text-align:right;">180</td> 



<td style="text-align:right;">-245</td> 



<td style="text-align:right;">800</td> 



<td style="text-align:right;">11.76</td> 

</tr> 

<tr> 

<td style="text-align:left;">sand</td> 



<td style="text-align:right;">6,798</td> 



<td style="text-align:right;">9,100</td> 



<td style="text-align:right;">-2,060</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">-2,060</td> 



<td style="text-align:right;">1,690</td> 



<td style="text-align:right;">24.86</td> 

</tr> 

<tr> 

<td style="text-align:left;">pooo12345</td> 



<td style="text-align:right;">5,600</td> 



<td style="text-align:right;">5,000</td> 



<td style="text-align:right;">600</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">600</td> 



<td style="text-align:right;">1,300</td> 



<td style="text-align:right;">23.21</td> 

</tr> 

<tr> 

<td style="text-align:left;">pommmh20d</td> 



<td style="text-align:right;">4,980</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">4,955</td> 



<td style="text-align:right;">865</td> 



<td style="text-align:right;">5,820</td> 



<td style="text-align:right;">2,353</td> 



<td style="text-align:right;">47.24</td> 

</tr> 

<tr> 

<td style="text-align:left;">emop2</td> 



<td style="text-align:right;">4,340</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">4,340</td> 



<td style="text-align:right;">1,428</td> 



<td style="text-align:right;">5,768</td> 



<td style="text-align:right;">2,230</td> 



<td style="text-align:right;">51.38</td> 

</tr> 

<tr> 

<td style="text-align:left;">Hagluck3</td> 



<td style="text-align:right;">3,950</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">3,950</td> 



<td style="text-align:right;">1,025</td> 



<td style="text-align:right;">4,975</td> 



<td style="text-align:right;">3,365</td> 



<td style="text-align:right;">85.18</td> 

</tr> 

<tr> 

<td style="text-align:left;">mesazz</td> 



<td style="text-align:right;">3,850</td> 



<td style="text-align:right;">10,000</td> 



<td style="text-align:right;">-6,150</td> 



<td style="text-align:right;">150</td> 



<td style="text-align:right;">-6,000</td> 



<td style="text-align:right;">650</td> 



<td style="text-align:right;">16.88</td> 

</tr> 

<tr> 

<td style="text-align:left;">Ompo</td> 



<td style="text-align:right;">2,800</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">2,710</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">2,710</td> 



<td style="text-align:right;">1,281</td> 



<td style="text-align:right;">45.75</td> 

</tr> 

<tr> 

<td style="text-align:left;">omeaz88</td> 



<td style="text-align:right;">2,612</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">2,612</td> 



<td style="text-align:right;">114</td> 



<td style="text-align:right;">2,726</td> 



<td style="text-align:right;">1,460</td> 



<td style="text-align:right;">55.89</td> 

</tr> 

<tr> 

<td style="text-align:left;">azz12a3</td> 



<td style="text-align:right;">2,600</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">2,600</td> 



<td style="text-align:right;">-1,700</td> 



<td style="text-align:right;">900</td> 



<td style="text-align:right;">3,000</td> 



<td style="text-align:right;">115.38</td> 

</tr> 

<tr> 

<td style="text-align:left;">mice</td> 



<td style="text-align:right;">2,240</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">2,240</td> 



<td style="text-align:right;">322</td> 



<td style="text-align:right;">2,562</td> 



<td style="text-align:right;">500</td> 



<td style="text-align:right;">22.32</td> 

</tr> 

<tr> 

<td style="text-align:left;">oazzem007</td> 



<td style="text-align:right;">2,200</td> 



<td style="text-align:right;">3,605</td> 



<td style="text-align:right;">2,200</td> 



<td style="text-align:right;">-5</td> 



<td style="text-align:right;">2,195</td> 



<td style="text-align:right;">1,590</td> 



<td style="text-align:right;">72.27</td> 

</tr> 

<tr> 

<td style="text-align:left;">poakk7</td> 



<td style="text-align:right;">1,695</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">1,690</td> 



<td style="text-align:right;">205</td> 



<td style="text-align:right;">1,895</td> 



<td style="text-align:right;">773</td> 



<td style="text-align:right;">45.60</td> 

</tr> 

<tr> 

<td style="text-align:left;">dddrs</td> 



<td style="text-align:right;">1,500</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">1,500</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">1,500</td> 



<td style="text-align:right;">2,000</td> 



<td style="text-align:right;">133.33</td> 

</tr> 

<tr> 

<td style="text-align:left;">3fr</td> 



<td style="text-align:right;">1,500</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">1,500</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">1,500</td> 



<td style="text-align:right;">1,750</td> 



<td style="text-align:right;">116.66</td> 

</tr> 

<tr> 

<td style="text-align:left;">ahmjjji</td> 



<td style="text-align:right;">1,450</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">1,449</td> 



<td style="text-align:right;">0</td> 



<td style="text-align:right;">1,449</td> 



<td style="text-align:right;">800</td> 



<td style="text-align:right;">55.17</td> 

</tr> </tbody> 

</table> 

</div> 

</div> 

</div>

Вот код CSS:

Скрытый текст
 table {
    font-size: 30px;
    width: 100%;
    table-layout: fixed;
    }

    .scroll {
    border: 0;
    border-collapse: collapse;
    }    
    .scroll tr {
    display: flex;
    }    
    .scroll td {
    flex: 1;
    }    
    .scroll thead tr:after {
    overflow-y: scroll;
    visibility: hidden;
    height: 0;
    }    
    .scroll thead th {
    flex: 1;
    display: block;
    }    
    .scroll tbody {
    display: block;

    overflow-y: auto;
    height: calc(100vh - 300px );
    }

Похожие записи:

Добавить комментарий