Membuat tabel responsive dengan css dan html | Web responsive sudah menjadi salah satu kebutuhan mendasar sebuah website saat ini, alasannya karena pengguna perangkat mobile semakin banyak, bahkan sudah sampai mengalahkan pengguna desktop.
tabel responsive
Namun berbagai masalah muncul ketika membuat website responsive, ada bagian-bagian yang sulit untuk dibuat menjadi responsive. misalnya saja tabel. Tidak sama dengan div atau element lain, tabel yang berisi banyak kolom dan baris cukup sulit untuk menyesuaikan ukuran layar yang lebih kecil
Nah, untuk mengatasi masalah tersebut, Jurnalweb mencoba membuatkan sebuah tutorial sederhana yang bisa Anda gunakan untuk membuat tabel responsive dengan CSS, tidak perlu bantuan javascript sama sekali.
Cara membuat tabel responsive dengan CSS dan HTML
Kode HTML
Langkah pertama coba Anda buat dahulu struktur tabelnya seperti dibawah ini
<table>
<caption>Data Pelanggan</caption>
<thead>
<tr>
<th scope="col">Nama</th>
<th scope="col">Alamat</th>
<th scope="col">Email</th>
<th scope="col">Nomor Telepon</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row" data-label="Nama">David Beckham</td>
<td data-label="Alamat">Manchester, Inggris</td>
<td data-label="Email">davidbeckham@example.com</td>
<td data-label="Nomor Telepon">021-01010xxx</td>
</tr>
<tr>
<td scope="row" data-label="Nama">Mike Tyson</td>
<td data-label="Alamat">California, Amerika Serikat</td>
<td data-label="Email">miketyson@example.com</td>
<td data-label="Nomor Telepon">021-9198199189291929</td>
</tr>
<tr>
<td scope="row" data-label="Nama">Justin Bieber</td>
<td data-label="Alamat">New York, Amerika Serikat</td>
<td data-label="Email">justinbierber@example.com</td>
<td data-label="Nomor Telepon">021-2929292929101019</td>
</tr>
<tr>
<td scope="row" data-label="Nama">Selena Gomez</td>
<td data-label="Alamat">Texas, Amerika Serikat</td>
<td data-label="Email">selena.gomez@example.com</td>
<td data-label="Nomor Telepon">021-819199191991919</td>
</tr>
</tbody>
</table>
CSS
Selanjutnya buat menjadi responsive agar bisa terlihat bagus jika dibuka diperangkat mobile.
Tambahkan CSS seperti berikut ini untuk mempercantik tampilannya serta membuatnya menjadi responsive.
body {
font-family: "Times New Roman", serif;
line-height: 1.25;
padding: 40px 20px;
}
.header{
text-align: center;
border-bottom: 1px solid #ddd;
}
table {
border: 1px solid green;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
}
table caption {
font-size: 1.5em;
margin: .25em 0 .75em;
}
table tr {
background: yellow;
border: 1px solid green;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
background: green;
color: white;
}
table td img {
text-align: center;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
display: none;
}
table tr {
border-bottom: 3px solid green;
display: block;
margin-bottom: .725em;
}
table td {
border-bottom: 1px solid green;
display: block;
font-size: .8em;
text-align: right;
}
table td:before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
Logika dari script diatas adalah ketika ukuran layar lebih kecil dari 600px maka baris kepala kolom (tag thead) akan disembunyikan, lalu sebagai penggantinya kolom tabel (tag td) tersebut akan dibuat menjadi satu kolom saja, dan ditampilkan isi data dari atribut “data-table” yang ada di script HTML sebagai label dari setiap [tag td].
– Baca juga: Resizer, Tool Buatan Google Untuk Menguji Web Responsive
Jika Anda tertarik ingin mencoba dan melihat script lengkapnya, silahkan klik link dibawah ini.
DEMO | DOWNLOAD CODE
Semoga ini dapat membantu Anda memahami CSS dan HTML lebih dalam lagi serta membantu pekerjaan Anda.
Punya solusi lain untuk membuat tabel responsive? Share saja di kolom komentar ya.
http://www.jurnalweb.com/membuat-tabel-responsive-dengan-css-dan-html/
Cara Membuat Tabel Responsive di Blog
Cara Membuat Tabel Super Responsive di Blog - trikpos, Cara Membuat Tabel Keterangan Responsive di Blog, Membuat Responsive Table Dengan CSS dan HTML
Tutorial Go Blog
Cara Buat Tabel Responsive - Bagaimana cara membuat tabel responsive di blog..?? Umumnya, trik seperti ini digunakan oleh para blogger yang suka atau gemar membagikan informasi Tutorial yang masih berkaitan dengan menu daftar, dokumen dan juga jenis-jenis tabel lainnya. Untuk membuat sebuah tabel di blog sangat mudah, anda cuma diharuskan memainkan kode HTML tag </table> dan <tr><td>. Kode-kode tersebut bisa dirangkai menjadi sebuah tabel.
Banyak sekali para blogger yang membagikan informasi tutorial cara pembuatan tabel di blog, namun tak ada penambahan kode CSS-nya. Sehingga seringkali tabel tersebut tak mempunyai kemampuan Responsive apabila blog/website di akses via smartphone, jadinya ya berantakan. Tapi, jika ditambahkan dengan kode CSS tabel akan menyesuaikan diri dengan ukuran layar. Baca juga : Cara Gampil Membuat Widget Popular Post Warna-Warni di Blogspot
Cara membuat tabel responsive itu sanga mudah dan bisa dilakukan dengan singkat. Dan bahkan kode-kode tersebut bisa seenaknya anda melakukan eksperimen tabel yang bagus dan terbaik buatan anda sendiri (Hand made).
Baiklah, sebelum menuju praktek pembuatan tabel responsive, anda copy paste dahulu kode CSS dibawah ini dan simpan sebentar di word atau notepad.
/* CSS Post Table by trikpos.com */
.post-body table td, .post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #c82d2d;padding:10px;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #eee;}
.post-body th{font-weight:700;}
.post-body table caption{border:none;font-style:italic;}
.post-body table{}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #eee;}
.post-body td:hover{background:#fafafa;}
.post-body th{background:#f53b3b;color:#fff;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
img {max-width:100%;height:auto;border:none;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.widget ul {padding:0;}
Jika sudah copy kode tersebut, sekarang langsung kita sama-sama praktekan cara pembuatan tabel responsive di blog bareng Tutorial Go Blog.
Keterangan :
- Buka browser, masuk ke alamat blogger.com
- Masukkan email (username) dan kata sandi (password).
Tahap pertama
- Kode yang di atas tersebut atau kode yang sudah anda copy, anda letakkan di element Edit HTML, dan biasanya diletakkan di atas kode ]]></b:skin> ini.
1. Buka dashboard dan masuk ke element menu "Template".
Cara Membuat Tabel Super Responsive di Blog - trikpos, Cara Membuat Tabel Keterangan Responsive di Blog, Membuat Responsive Table Dengan CSS dan HTML
Gambar 1
2. Kemudian anda tekan atau klik element "Edit HTML" tersebut. Contoh ada digambar bawah ini.
Cara Membuat Tabel Super Responsive di Blog - trikpos, Cara Membuat Tabel Keterangan Responsive di Blog, Membuat Responsive Table Dengan CSS dan HTML
Gambar 2
3. Tekan sembarang, lalu anda cari kode ]]></b:skin> tersebut, jika merasa kesulitan anda bisa menggunakan cara tekan CTRL+F. Contoh seperti gambar dibawah ini. Jika sudah ketemu kode tersebut, baru anda letakkan kode yang sebelumnya anda copy.
Cara Membuat Tabel Super Responsive di Blog - trikpos, Cara Membuat Tabel Keterangan Responsive di Blog, Membuat Responsive Table Dengan CSS dan HTML
Gambar 3
Nah, sekarang anda tinggal ke tahap yang selanjutnya dengan cara memasang kode tabel seperti dibawah ini. Copy kode dibawah ini.
<table width="400" border="1">
<tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr>
<tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr>
<tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr>
</table>
Seperti biasa keterangan masih sama seperti yang diatas tersebut.
Tahap Kedua
- Untuk kode yang kedua anda copy tersebut adalah kode pembuatan atau pemasangan tabel didalam postingan maupun artikel. Caranya sebagai berikut:
1. Anda langsung tekan menu "Entri Baru" dan gunakan metode HTML, jangan gunakan metode Compose untuk meletakkan kode tabel, nanti tidak akan muncul.
Cara Membuat Tabel Super Responsive di Blog - trikpos, Cara Membuat Tabel Keterangan Responsive di Blog, Membuat Responsive Table Dengan CSS dan HTML
Gambar 1
2. Jika sudah meletakkan kode, anda tekan menu "Compose" dan setelah itu anda tekan menu "Simpan". Kemudian, anda review dengan cara tekan tombol "Pratinjau".
Cara Membuat Tabel Super Responsive di Blog - trikpos, Cara Membuat Tabel Keterangan Responsive di Blog, Membuat Responsive Table Dengan CSS dan HTML
Gambar 2
3. Lihat hasil pembuatan tabel responsive yang sudah anda lakukan sejak tadi.
Cara Membuat Tabel Super Responsive di Blog - trikpos, Cara Membuat Tabel Keterangan Responsive di Blog, Membuat Responsive Table Dengan CSS dan HTML
Hasil Gambar
Sangat bagus bukan..!! Tentunya anda bangga bisa membuat tabel sendiri di blog, apalagi tabel yang anda buat juga responsive. Semakin percaya diri saja untuk mengembangkan blog sendiri. Dan jika ingin membuat unik tabel buatan sendiri, anda bisa baca artikel Cara Membuat Tabel di Blog tersebut.
Terima kasih, telah sudi membaca pelajaran Cara Buat Tabel Responsive tersebut. Semoga anda senang, semoga anda betah dan semoga anda membagikan terus informasi-informasi dari situs ini kepada teman-teman seprofesi anda. Sekali lagi, terima kasih banyak...
http://tutorialgo-blog.blogspot.co.id/2016/03/cara-membuat-tabel-responsive-di-blog.html
taruh di atas </style>
/* CSS Post Table */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #5a97ff;padding:10px;text-align:left;vertical-align:top;background:#4588f3 !important;color:#fff}
Advertisement
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}
kode pada waktu bikin postingan
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Detail:</th> <th>RevenueHits</th> </tr>
<tr> <td>Website URL</td> <td>url here</td> </tr>
<tr> <td>Tipe jaringan</td> <td>CPM, CPC, CPA</td> </tr>
<tr> <td>Tipe iklan</td> <td>Banner, Rich media, pop up/under, text</td> </tr>
<tr> <td>Metode pembayaran</td> <td>Paypal, Wire Transfer, Payoneer</td> </tr>
<tr> <td>Minimal Payout</td> <td>Paypal $20, Wire transfer $500, Payoneer $20</td> </tr>
<tr> <td>Fill rate</td> <td>100%</td> </tr>
<tr> <td>Frekuensi pembayaran</td> <td>NET 30</td> </tr>
<tr> <td>Rate eCPM tertinggi</td> <td>US, Europe traffic</td> </tr>
<tr> <td>Penerimaan traffic</td> <td>Seluruh negara</td> </tr>
<tr> <td>Ad Mobile</td> <td>Yes</td> </tr>
<tr> <td>Ad custom format</td> <td>Yes</td> </tr>
<tr> <td>Affiliasi</td> <td>Yes</td> </tr>
<tr> <td>Bebas virus dan malware</td> <td>Yes</td> </tr>
<tr> <td>Dukungan web Indonesia</td> <td>Yes</td> </tr>
<tr> <td>Kolaborasi dengan Adsense</td> <td>Hight risk</td> </tr>
</tbody> </table>
http://www.bungfrangki.com/2015/10/cara-membuat-tabel-keterangan-di-blog.html
Membuat Tabel Responsive dengan CSS
Posted Aug 24th 2014, 22:30
0 1
Salam jagocoding.. udah lama nggak share nih.. Kali ini saya mau share salah satu trik CSS yg akan cukup bermanfaat untuk kita yg berhadapan dengan CSS responsive. Kalau dulu saya pernah bahas CSS Responsive secara umum (Membuat Responsive Layout dengan Media Query), sekarang kita akan belajar Responsive yang diterapkan pada tabel. Cuss aja yukk.. :D
Sebelum kita masuk ke Table Responsive, kita buat dulu desain tabel seperti biasanya yuk..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><a href="#">Responsive</a> <a href="#">Table</a></title>
</head>
<style>
</style>
<body>
<h1 align="center">Membuat Tabel <a href="#">Responsive</a></h1>
<<a href="#">table</a> cellspacing="0" align="center">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Telp</th>
<th>Email</th>
</tr>
<tr>
<td data-content="No">1</td>
<td data-content="Nama">Christian Rosandhy</td>
<td data-content="Alamat">Jl Raya Kenangan no 6</td>
<td data-content="Telp">089666444222</td>
<td data-content="Email">tianrosandhy@gmail.com</td>
</tr>
<tr>
<td data-content="No">2</td>
<td data-content="Nama">Putra Darmawan</td>
<td data-content="Alamat">Jl Kita Bersama no 23</td>
<td data-content="Telp">08152648599</td>
<td data-content="Email">putradar@yahoo.com</td>
</tr>
<tr>
<td data-content="No">3</td>
<td data-content="Nama">Michelle Vernesta</td>
<td data-content="Alamat">Jl Kenangan no 12</td>
<td data-content="Telp">0361745262</td>
<td data-content="Email">michver@facebook.com</td>
</tr>
<tr>
<td data-content="No">4</td>
<td data-content="Nama">Ricky Renata Kusuma</td>
<td data-content="Alamat">Jl Diponegoro no 222</td>
<td data-content="Telp">0831199462727</td>
<td data-content="Email">rickoes@gmail.com</td>
</tr>
<tr>
<td data-content="No">5</td>
<td data-content="Nama">Vincensia Ernestine</td>
<td data-content="Alamat">Jl Raya Sesetan no 23</td>
<td data-content="Telp">083517122837</td>
<td data-content="Email">vincent_ern@yahoo.com</td>
</tr>
</<a href="#">table</a>>
</body>
</html>
Desain tabelnya terlihat biasa saja ya.. Tapi ada 2 hal yang perlu diperhatikan disini :
Pertama, disarankan table tersebut diberikan atribut cellspacing dengan nilai 0 (defaultnya 1). Karena pendapat saya pribadi sih, tabel itu bakalan lebih cantik kalau nggak ada jarak antar selnya. Pun kita ingin kasi jarak, sebaiknya dibuat dengan CSS saja.. :D
Kedua, atribut data-content di TD itu apaan? Itu adalah atribut buatan saya sendiri (bukan atribut biasa bawaan HTML) yang nantinya akan sangat berguna dalam pembuatan Table Responsive sebagai pengganti Table Header (TH). nama atributnya bisa kita ganti sesuai keinginan kita sendiri (data-gue, nama-field, kolom, ....), tapi usahakan gunakan nama atribut yang belum didefinisikan.
Masuk ke CSSnya pun sampai disini yg biasa aja dulu.. Bisa kita buat seenak jidat kita untuk tampilan tabel defaultnya. :D
1
2
3
4
5
6
7
8
9
10
11
12
13
body{font-family:'Candara','Calibri',sans-serif;} /*daripada liat font times new roman~ :3 */
<a href="#">table</a>{box-shadow:0px 0px 5px #aaa;} /*sedikit bayangan yang soft*/
<a href="#">table</a> th{
padding:10px;
font-weight:bold;
background:#33B4E4;
color:#fff;
text-transform:uppercase;
}
<a href="#">table</a> td{
padding:10px 5px;
}
Sampai disini, tampilannya kira-kira seperti ini :
Responsive Table 1
Yahh,, layoutnya simpel but not bad lah ya.. Gimana ya kalau window browsernya kita kecilin?
Responsive Table 2
DEMMMMM.. Ternyata di device dengan lebar layar yang kecil, tabel kita tadi itu kegedean, dan harus discroll kesamping. Cukup merepotkan ya? Percuma layout dasar kita udah responsive kalau tabelnya nggak responsive kan? -_-
Nah, di langkah selanjutnya inilah kita akan membuat tabel responsive. Sekarang kita bermain-main di CSS saja ya.. :D
Seperti yang sudah kita lihat sendiri, tabel secara default akan dibuat menyamping. dan ini hal yang cukup menyulitkan untuk device dengan lebar yang terbatas. Artinya tabel untuk device dengan lebar yang terbatas tidak boleh menyamping seperti defaultnya, melainkan harus turun ke bawah.
Sampai disini kita ketemu sedikit masalah, yaitu di Table Header (tag TH). Gimana caranya supaya tag TH bisa menurun ke bawah, dan terus mengulang isinya sampai data terakhir? Ternyata jawabannya cukup mengecewakan, NGGAK BISA.. :'(
Karena keterbatasan inilah, kita perlu membuat sebuah atribut tambahan di setiap TD yang bernama data-content dengan value yang sama seperti urutan di tag TH. Nantinya, nilai atribut data-content inilah yang akan tampil sebagai pengganti TH, karena TH tidak mungkin ditampilkan pada tabel yang menurun ke bawah. Langkah CSSnya seperti ini :
1. Seperti biasa, buat dulu CSS Media Query dengan batasan lebar device yang kita inginkan sesuai kebutuhan kita. Misalkan, kita merasa tabel tersebut tampilannya sudah jelek kalau lebar devicenya dibawah 700px. jadi saya buat 2 CSS media query seperti ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@media (min-width:700px){
/*UNTUK DEVICE YANG LEBARNYA LEBIH DARI 700PX */
/*karena tabel kita yang tadi itu untuk device layar lebar, maka taruh saja semuanya disini...*/
<a href="#">table</a> th{
padding:10px;
font-weight:bold;
background:#33B4E4;
color:#fff;
text-transform:uppercase;
}
<a href="#">table</a> td{
padding:10px 5px;
}
}
@media (max-width:700px){
/*UNTUK DEVICE YANG LEBARNYA KURANG DARI 700PX*/
}
Nah, CSS table yang kita buat pertama tadi, langsung saja kita letakkan semua di CSS Media bagian pertama untuk device dengan lebar minimum 700px. Setelah itu, kita masuk ke CSS Media bagian kedua untuk mengatur tampilan di device dengan lebar yg dibawah 700px.
2. Atur nilai tag TABLE, TBODY, TR, TH, dan TD dengan display:block. Karena secara default tabel memiliki display:table, maka kita ubah semuanya menjadi block supaya tabelnya nanti bisa turun kebawah, dan lebar tabelnya otomatis 100%.
1
2
3
4
5
6
7
8
@media (max-width:700px){
<a href="#">table</a>,tbody,tr,td{
display:block;
position:relative;
}
}
3. Supaya antar data nanti ada jaraknya, kita berikan border-bottom berwarna putih pada TR. (Optional)
1
2
3
4
5
6
7
@media (max-width:700px){
<a href="#">table</a>,tbody,tr,td{
display:block;
position:relative;
}
tr{border-bottom:3px solid #fff;} /*optional. nggak ada juga ga apa2*/
}
4. Karena TH tidak akan ditampilkan, kita hilangkan saja sekalian dengan nilai DISPLAY:NONE.
1
2
3
4
5
6
7
8
@media (max-width:700px){
<a href="#">table</a>,tbody,tr,td{
display:block;
position:relative;
}
tr{border-bottom:3px solid #fff;}
th{display:none;}
}
5. Selanjutnya, kita memanggil nama kolom yang sudah kita ketikkan di atribut data-content pada masing-masing TD tadi. Dengan bantuan pseudo-element ::before pada tag TD yang bersangkutan itu sendiri tentunya.
Cara memanggilnya seperti ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@media (max-width:700px){
<a href="#">table</a>,tbody,tr,td{
display:block;
position:relative;
}
tr{border-bottom:3px solid #fff;}
th{display:none;}
td:before{
display:block;
content:attr(data-content); /*mengisi data dengan value yang ada di atribut tersebut*/
position:absolute;
text-indent:0px;
width:80px; /*disesuaikan dengan kebutuhan*/
/*desainnya bisa disamakan seperti tag TH*/
background:#33b4e4;
color:#fff;
text-transform:uppercase;
font-weight:bold;
height:100%;
line-height:40px;
padding:0px 10px;
}
}
6. Dan terakhir, berikan nilai text-indent pada TD dengan nilai yang sedikit lebih besar dari lebar td:before tadi. Kenapa? Karena layer td::before tadi itu displaynya absolute, sehingga tulisan di tag TD itu akan ketutupan sama td::before yang kita buat tadi kalau nggak dikasi text-indent.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@media (max-width:700px){
<a href="#">table</a>,tbody,tr,td{
display:block;
position:relative;
}
tr{border-bottom:3px solid #fff;}
th{display:none;}
td:before{
display:block;
content:attr(data-content);
width:80px;
background:#33b4e4;
color:#fff;
text-transform:uppercase;
font-weight:bold;
height:100%;
line-height:40px;
position:absolute;
text-indent:0px;
padding:0px 10px;
}
td{
text-indent:120px; /*disesuaikan dengan kebutuhan*/
line-height:40px; /*line-height disamakan dengan td:before, supaya tampilan teksnya rata*/
background:#f7f7f7;
}
}
Dari sekian langkah panjang tadi, jadilah tampilan seperti ini pada layar dengan lebar dibawah 700px :
Responsive Table 3
Nah, sekian tutorial tabel responsive dari saya.. Mohon maaf kalau ternyata masih susah dipahami, karena itu saya menerima semua kritik saran dan pertanyaannya. Untuk demo dan download source code langsungnya tinggal klik tombol dibawah ini saja. Terima kasih untuk perhatiannya..
http://jagocoding.com/tutorial/681/Membuat_Tabel_Responsive_dengan_CSS
Cara Membuat Tabel Responsive HTML Untuk Blogspot [Blogger]
02.43 / Unknown / Blog Cantik,
Mas Gugu -- Jika anda membuat tabel pada Microsoft Word atau Microsoft Exel lalu anda letakkan tabel tersebut pada website/ blog, maka hasilnya akan tidak bagus ketika pembaca membuka website/ blog anda melalui mobile/ smartphone. (Baca postingan sebelumnya: Cara atur Jarak Komentar) Susunan tabel tidak terlihat rapi seperti yang anda lihat jika menggunakan PC/ Komputer. Oleh karena itu, tabel responsive menjadi solusi untuk permasalahan tersebut. Untuk cara membuat tabel responsive yang valid HTML untuk website/ Blogspot [Blogger], silahkan ikuti langkah-langkah berikut ini:
Langkah 1: Kunjungi Website Penyedia Tabel
Silahkan anda kunjungi alamat ini http://www.tablesgenerator.com/html_tables, maka akan muncul seperti gambar di atas. Kemudian silahkan anda pilih File => New Table. Silahkan masukkan jumlah kolom dan jumlah baris untuk membuat tabel. Anda bisa mengganti theme sesuai dengan selera masing-masing.
Langkah 2: Dapatkan Kode Tabel
Setelah semua data yang anda masukkan pada tabel selesai, silahkan anda pilih "Generate" kemudian Copy semua kode yang berada di bawah. Catatan: telitilah saat melakukan copy kode HTML tersebut, karena jika tidak benar maka tidak akan muncul tabel yang di buat tadi.
Langkah 3: Login ke Blogger
Login ke Blogger, kemudian buat postingan atau edit postingan anda sebelumnya. Pada postingan kemudian pilih HTML. pastekan kode tersebut lalu pilih "Simpan". Kemudian lihat hasil yang telah anda pasang tadi.
Langkah 4: Contoh Tabel
PERBEDAAN GALAXY S7 GALAXY S6
RAM 4 GB 3 GB
CPU Octa-core Quad-core 1.5 GHz Cortex-A53
Android V6.0 (Marshmallow) V5.0.2 (Lollipop
Chipset Qualcomm MSM8996 Exynos 7420
Untuk membuat tabel seperti pada contoh di atas, silahkan anda ganti <style type='text/css'> dengan kode ini <style type='text/css' scoped>. Selain itu, tambahkan juga width:100% untuk membuat lebar tabel menjadi Full Responsive. LIHAT CONTOH DI BAWAH!!!
KODE ASLI SEBELUM DIMODIF
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-7v4i{background-color:#fffc9e;color:#000000;text-align:center}
.tg .tg-bsv2{background-color:#efefef}
.tg .tg-yzt1{background-color:#efefef;vertical-align:top}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
<tr>
<th class="tg-7v4i">PERBEDAAN</th>
<th class="tg-7v4i">GALAXY S7<br></th>
<th class="tg-7v4i">GALAXY S6<br></th>
</tr>
<tr>
<td class="tg-bsv2">RAM</td>
<td class="tg-031e">4 GB<br></td>
<td class="tg-031e">3 GB<br></td>
</tr>
<tr>
<td class="tg-yzt1">CPU</td>
<td class="tg-yw4l">Octa-core</td>
<td class="tg-yw4l">Quad-core 1.5 GHz Cortex-A53</td>
</tr>
<tr>
<td class="tg-bsv2">Android</td>
<td class="tg-031e">V6.0 (Marshmallow)</td>
<td class="tg-031e">V5.0.2 (Lollipop</td>
</tr>
<tr>
<td class="tg-yzt1">Chipset</td>
<td class="tg-yw4l">Qualcomm MSM8996</td>
<td class="tg-yw4l">Exynos 7420</td>
</tr>
</table>
KODE TABEL SETELAH DIMODIF JADI RESPONSIVE
<style type='text/css' scoped>
.tg {width:100%;border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-7v4i{background-color:#fffc9e;color:#000000;text-align:center}
.tg .tg-bsv2{background-color:#efefef}
.tg .tg-yzt1{background-color:#efefef;vertical-align:top}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
<tr>
<th class="tg-7v4i">PERBEDAAN</th>
<th class="tg-7v4i">GALAXY S7<br></th>
<th class="tg-7v4i">GALAXY S6<br></th>
</tr>
<tr>
<td class="tg-bsv2">RAM</td>
<td class="tg-031e">4 GB<br></td>
<td class="tg-031e">3 GB<br></td>
</tr>
<tr>
<td class="tg-yzt1">CPU</td>
<td class="tg-yw4l">Octa-core</td>
<td class="tg-yw4l">Quad-core 1.5 GHz Cortex-A53</td>
</tr>
<tr>
<td class="tg-bsv2">Android</td>
<td class="tg-031e">V6.0 (Marshmallow)</td>
<td class="tg-031e">V5.0.2 (Lollipop</td>
</tr>
<tr>
<td class="tg-yzt1">Chipset</td>
<td class="tg-yw4l">Qualcomm MSM8996</td>
<td class="tg-yw4l">Exynos 7420</td>
</tr>
</table>
Setelah selesai anda modif menjadi responsive, maka hasilnya akan seperti pada Langkah 4: Contoh Tabel. Sekarang anda bisa membuat berbagai tabel responsive sesuai dengan website/ blog yang anda kelola. Jika ada pertanyaan tentang Cara Membuat Tabel Responsive HTML Untuk Blogspot [Blogger], silahkan tanyakan melalui kotak komentar yang berada di bawah. Semoga bermanfaat. Terimakasih.
http://masgugu.blogspot.co.id/2015/12/cara-membuat-tabel-responsive-html.html
0 Response to "Cara Membuat Tabel Responsif Pada Postingan Blog"
Post a Comment