Ciekawa tabelka w CSS

12 sierpnia, 2012 w kategoriach: Web developing, CSS, Podstawy

3,573 0
Dane:
  • Czas pracy: 5min
  • Poziom: Średnio zaawansowany
Opis:

Chciałbym przedstawić jak zrobić ciekawą tabelkę w CSS na podstawie tutoriala ze strony http://www.sanjaykhemlani.com/

Pokaż/Ukryj wszystko

Najpierw zrobimy czyste dane do tabelki (dane są oczywiście wymyślone, można dać cokolwiek innego i modyfikować całość)

<table border="0">
<tr>
<th>Payment Number</th>
<th>Client</th>
<th>Date</th>
<th>Total</th>
</tr>
<tr>
<td>0524/0156643435891</td>
<td>ACME Company</td>
<td>10/18/2011</td>
<td>$320.00</td>
</tr>
<tr>
<td>0524/45645853011</td>
<td>ACME Company</td>
<td>10/18/2011</td>
<td>$320.00</td>
</tr></p>
<tr></p>
<td>0524/0343432453423211</td>
<td>ACME Company</td>
<td>10/18/2011</td>
<td>$320.00</td>
</tr>
</table>

Zapiszmy to w naszym index.html. Powinno nam wyjść coś takiego

Alt jbnwyuy


Wydawnictwo Strefa Kursów

Teraz musimy zrobić jakiś wygląd tej tabelki, w tym celu zróbmy coś takiego

table{
width:100%;
border:5px solid #386977;
border-collapse: collapse;
border-spacing: 0;</p>
}
tr, td{</p>
font-size:14px;
color:#222222;
text-shadow:0 1px 1px #fff;
padding:5px;
text-align:center;
border-bottom:1px solid #D3DDE2;
border-right:1px dashed #D3DDE2;
background: #feffff; /* Old browsers */
background: -moz-linear-gradient(top,  #feffff 0%, #e6f1f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#e6f1f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #feffff 0%,#e6f1f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #feffff 0%,#e6f1f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #feffff 0%,#e6f1f7 100%); /* IE10+ */
background: linear-gradient(top,  #feffff 0%,#e6f1f7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#e6f1f7',GradientType=0 ); /* IE6-9 */
}
th{
color:#097799;
text-shadow:0 1px 1px #fff;
font:bold 16px Arial, Helvetica, sans-serif;
padding:10px 15px;
background:#090;
border-bottom:1px solid #0591BC;
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background: linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
ilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}

Powinno nam już wyjść coś takiego

Alt ifbanme

To też jest nasz efekt końcowy, myślę, że nie ma co tłumaczyć. Do zrobienia gradientu użyłem
http://www.colorzilla.com/gradient-editor/

Podziękowania dla strony http://www.sanjaykhemlani.com z której to pochodzi ten tutorial.

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dodaj komentarz