Style Css Table

Posted by : Stiker Jalingkut

Helo sobat seperti biasa kami mau berbagi dan cara mengatur
agar tampilan postingan kita kelihatan rapih dan mudah di baca
dan ini kayaknya pas buat blog atau Wbsite yang punya postingan
tenteng berita Elekronik dan seputar harga apapun.

Ternyata Style Css Table bukan hanya untuk mempercanti Template tapi bisa
juga buat mempercantik Wajah heheh.

Nah buat sobat yang mau pasang silakan ambil Style Css Table di bawah

Style Css Table By Selladrt

Nama Barang	Keterangan Kuwalitas Barang	Harga
Nama Barang	Keterangan Kuwalitas Barang Yang Mau Di Jual atau Mau Di Download	Apa Sajah	Harga 1	Linik Download
Nama Barang	Keterangan Kuwalitas Barang Yang Mau Di Jual atau Mau Di Downloadt	Apa Sajah	Harga 2	Linik Download
Nama Barang	Keterangan Kuwalitas Barang Yang Mau Di Jual atau Mau Di Download	Apa Sajah	Harga 3	Linik Download
Nama Barang	Keterangan Kuwalitas Barang Yang Mau Di Jual atau Mau Di Download	Apa Sajah	Harga 4	Linik Download
Nama Barang	Keterangan Kuwalitas Barang Yang Mau Di Jual atau Mau Di Download	Apa Sajah	Harga 5	Linik Download

Nama Barang

Keterangan Kuwalitas Barang

Harga

Nama Barang

Keterangan Kuwalitas Barang Yang Mau Di Jual atau Mau Di Download

Apa Sajah

Harga 1

Linik Download

Nama Barang

Keterangan Kuwalitas Barang Yang Mau Di Jual atau Mau Di Downloadt

Apa Sajah

Harga 2

Linik Download

Nama Barang

Keterangan Kuwalitas Barang Yang Mau Di Jual atau Mau Di Download

Apa Sajah

Harga 3

Linik Download

Nama Barang

Keterangan Kuwalitas Barang Yang Mau Di Jual atau Mau Di Download

Apa Sajah

Harga 4

Linik Download

Nama Barang

Keterangan Kuwalitas Barang Yang Mau Di Jual atau Mau Di Download

Apa Sajah

Harga 5

Linik Download

Itulah sekilas Demo buat sobat yang mau pasang Trik Style Css Table silakan Code Di Bawah

table.display th{ background:-moz-linear-gradient(top,  #000099, #000000); }
table.display td{ background:-moz-linear-gradient(top,  #660000, #666600,#660000); }

table.selladrt-table{
  box-shadow: 0 1px 10px #0000CC;
}

@media (max-width: 30em){
    table.selladrt-table{
      box-shadow: none;  
    }
    table.selladrt-table thead{
      display: none; 
    }
  table.display th,
  table.display td{
    padding: .5em;
  }
    
  table.selladrt-table td:nth-child(1):before{
    content: 'Harga';
  }
  table.selladrt-table td:nth-child(2):before{
    content: 'Keterangan Kualitas Barang';
  }
  table.selladrt-table td:nth-child(1),
  table.selladrt-table td:nth-child(2){
    padding-left: 25%;
  }
  table.selladrt-table td:nth-child(1):before,
  table.selladrt-table td:nth-child(2):before{
    position: absolute;
    left: .5em;
    font-weight: bold;
  }
  
    table.selladrt-table tr,
    table.selladrt-table td{
        display: block;
    }
    table.selladrt-table tr{
        position: relative;
        margin-bottom: 1em;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    }
    table.selladrt-table td{
        border-top: none;
    }
    table.responsive-table td.organisationnumber{
        background: #D5E0CC;
        border-top: 1px solid #B3BFAA;
    }
    table.selladrt-table td.actions{
        position: absolute;
        top: 2;
        right: 2;
        border: none;
        background: #000099;
    }
}</style>

<br />
<div class="page">
<h1>
Style Css Table By Selladrt</h1>
<table class="layout display selladrt-table">
    <thead>
<tr>
            <th>Nama Barang</th>
            <th colspan="2">Keterangan Kuwalitas Barang</th>
<th colspan="2">Harga</th>

</tr>
</thead>
    <tbody>
<tr>
            <td class="organisationnumber">Nama Barang</td>
            <td class="organisationname">Keterangan Kuwalitas Barang Yang Mau Di Jual atau Mau Di Download</td>
            <td class="actions">Apa Sajah</td><td>Harga 1 </td>
                <td class="actions"><a href="http://linik download sobat/" title="Linik Download">Linik Download</a>
            </td>
        </tr>
<tr>
            <td class="organisationnumber">Nama Barang</td>
            <td class="organisationname">Keterangan Kuwalitas Barang Yang Mau Di Jual atau Mau Di Downloadt</td>
            <td class="actions">Apa Sajah</td><td>Harga 2</td>
                <td class="actions"><a href="http://linik download sobat/" title="Linik Download">Linik Download</a>
            </td>
        </tr>
<tr>
            <td class="organisationnumber">Nama Barang</td>
            <td class="organisationname">Keterangan Kuwalitas Barang Yang Mau Di Jual atau Mau Di Download</td>
            <td class="actions">Apa Sajah</td><td>Harga 3</td>
                <td class="actions"><a href="http://linik download sobat/" title="Linik Download">Linik Download</a>
            </td>
        </tr>
<tr>
            <td class="organisationnumber">Nama Barang</td>
            <td class="organisationname">Keterangan Kuwalitas Barang Yang Mau Di Jual atau Mau Di Download</td>
            <td class="actions">Apa Sajah</td><td>Harga 4</td>
                <td class="actions"><a href="http://linik download sobat/" title="Linik Download">Linik Download</a>
            </td>
        </tr>
<tr>
            <td class="organisationnumber">Nama Barang</td>
            <td class="organisationname">Keterangan Kuwalitas Barang Yang Mau Di Jual atau Mau Di Download
            </td>
            <td class="actions">Apa Sajah</td><td>Harga 5</td>
                <td class="actions"><a href="http://linik download sobat/" title="Linik Download">Linik Download</a>
            </td>
        </tr>
</tbody>
</table>
</div>

Catatan Warna bisa di ganti sesuka sobat semuah buat code Warna Silakan Di Sini

Sekian dulu dari kami dan Postingan kali ini Style Css Table semoga berguna buat sobat yang membutuhkanya

{ 32 comentários... read them below or Comment }

Bocah Yatim13 April 2013 pukul 00.19
Oke langsung minta ya ane bawa kerumah
BalasHapus
Balasan
kk ps13 April 2013 pukul 02.13
Mas saya minta tolong bikinin css yang seperti ini:http://filehippo.com/download_ccleaner/
tapi pengen 3 kolom lebar dan warna nya minta yang cocok sama template saya.makasih mas.tar saya kasih kopi!
BalasHapus
Balasan
zigzoor13 April 2013 pukul 04.46
wah mantap kang,saya ijin nyimpan ya,siapa tahu kdepan di pakai untuk data-data di blog.makasih deh kang.
BalasHapus
Balasan
vlog media news13 April 2013 pukul 05.37
Wah Dengan sentuhan css table jadi lebih keren ya genk
BalasHapus
Balasan
Anonim13 April 2013 pukul 05.46
aduh ane masih gak mahir dengan css nih bang , terlalu sulitt bangeett :3 , folloow sukses bang
BalasHapus
Balasan
Sigli Cyber13 April 2013 pukul 06.43
boleh nyimpan nih...

tau2 perlu nantinya
BalasHapus
Balasan
Anonim13 April 2013 pukul 07.33
FULL CSS tutorial yah mas .. :D Ajarin dong ....
BalasHapus
Balasan
Unknown13 April 2013 pukul 07.39
Kopi kothok bos,, jos gandos
BalasHapus
Balasan
Kang Muroi13 April 2013 pukul 07.59
warna-warni, jadi rame yah
BalasHapus
Balasan
kk ps13 April 2013 pukul 10.19
klo banyak minum kopi bisa jago edi2 template y bos
BalasHapus
Balasan
Staff Administrator13 April 2013 pukul 10.58
Masih mumet...nih mas liat tampilan baru..buat ngedit kode html blogger yg baru...minum kopi pait..kali ye...biar melek :)
BalasHapus
Balasan
Staff Administrator13 April 2013 pukul 10.58
Masih mumet...nih mas liat tampilan baru..buat ngedit kode html blogger yg baru...minum kopi pait..kali ye...biar melek :)
BalasHapus
Balasan
supriyanto13 April 2013 pukul 17.31
makasih ya
BalasHapus
Balasan
Unknown13 April 2013 pukul 20.10
wah kira2 untuk tabel download bisa gak ya kang ?
BalasHapus
Balasan
Anonim13 April 2013 pukul 20.41
wuih, keren uy..
coba ah..

blogwalking
http://aan-shared.blogspot.com/2013/04/download-kakaotalk-terbaru-for-all.html
BalasHapus
Balasan
Anisayu Nastutik13 April 2013 pukul 22.15
ko cantik to bikin aku tambah pengen tap ga bisa
buatnya

mantab
BalasHapus
Balasan
Djangkaru Bumi15 April 2013 pukul 08.11
Membuat tabel itu memang ribet dan perlu ketelitian. kadang pusing dibuatnya ..hehehehee
BalasHapus
Balasan
Admin19 April 2013 pukul 06.42
wow bisa kya jualan nih,,wkww
BalasHapus
Balasan
Unknown10 Januari 2014 pukul 03.12
sangat suka sekali
BalasHapus
Balasan

Tambahkan komentar

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email "Atu FACEBOOK Selladrt"
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Bebas menyebarluaskan artikel tanpa persetujuan dari saya.
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "

TUTORIAL™

--✽-✽--WELCOME TO --✽-✽--

Style Css Table

Style Css Table By Selladrt

{ 32 comentários... read them below or Comment }

Gabung Yuk

Labels

Mengenai Saya

Pengunjung

Labels

Pengikut