CMS WordPress memungkinkan untuk menulis/post dengan mudah, baik dalam bentuk visual maupun text/html (layaknya notepad). Namun untuk meng-insert tabel, klien kami sendiri banyak yang mengalami kesulitan. Contoh pembuatan tabel biasanya untuk menampilkan price list agar terlihat rapi.
Berikut cara cepat membuat tabel price list:
1. Langkah pertama, buat table di Ms. Word seperti berikut:
2. Arahkan kursor mouse pada pojok kiri atas table (seperti logo dalam tanda panah), klik kanan dan Copy.
3. Kembali ke dalam CMS WordPress. Pastikan anda dalam tab Visual. Lalu klik kanan dan pilih Paste (atau CTRL + V).
4. Klik tab Text, maka akan muncul kode HTML table. tersebut.
5. Ganti kode baris paling atas yaitu <table width=”0″> menjadi <table class=”table-light” width=”840“>. Ini artinya kita akan menempatkan class yang dinamakan table-light pada css, width (lebar tabel bisa sesuai keinginan). Selanjutnya klik tombol Update.
6. Masuk ke style.css pada WordPress. dan tambahkan kode CSS sebagai berikut
table{border:1px solid #d4d4d4; width:auto;}
.table-light th{
background:#f8f8f8;
border-bottom: 1px dotted #ccc;
color:#666;
padding:5px;
text-align:left;
border-radius: 10px;
}
.table-light td{
border-bottom: 1px dotted #ccc;
padding:5px 5px;
}
.table-light tr:nth-child(even) td{
background-color:#FAFDFF;
font-size:13px;
}
.table-light tr:nth-child(odd) td{
background-color:#FFFFFF;
font-size:13px;
}
Jika anda sudah familiar dengan kode CSS, bisa juga membuat desain table yang anda inginkan. Misalkan warna background, garis dan lainnya.
Semoga artikel ini membantu anda.
