RSS

Membuat Tabel di WordPress Menggunakan Tag HTML

21 Jul

HalošŸ™‚

Postingan kali ini adalah tentang membuat tabel di WordPress menggunakan tag tag HTML.

Berikut adalah hasil jadinya :

INI ADALAH CONTOH TABEL SEDERHANA


Item

Keterangan

Ukuran Tabel 75% dari luas postingan ini
Letak Tabel Di tengah
Ukuran Border 3 pixel dengan warna orange

Harap dimaklumi kalau terlihat berantakan. Hal ini sengaja saya lakukan supaya bisa terlihat dengan jelas perbedaan tiap tiap tag yang digunakan yang nantinya akan saya jelaskan.

Berikut adalah code dari tabel di atas

taBLE

Penjelasan :

<div align="center">

Membuat tabel menjadi di tengah. Ini berlaku bukan hanya untuk tabel tetapi pada semua hal seperti paragraph, gambar dsb.

<table style="width: 75%; border:3px dotted orange;">

Membuat tabel dengan ukuran tabel 75% dari ukuran layar/postingan ini dan dengan ukuran garis border 3 pixel. Secara default ukuran tabel adalah 100% atau pas memenuhi layar yang ada. border:dotted menentukan jenis border tabel. Ada 4 jenis border yang bisa dipilih yaitu :

  1. solid
  2. double
  3. dashed
  4. dotted

Jadi silakan ganti dotted dengan salah satu dari pilihan lain yang ada dan lihat sendiri bedanya

orange adalah warna border. Untuk menggantinya bisa menggunakan code HEX ataupun menggunakan nama warna secara langsung yang bisa dilihat di sini

<tbody>
<tr>
<td colspan="2">
<p style="text-align: center;"><b>INI ADALAH CONTOH TABEL SEDERHANA</b></p>

tbody adalah tag yang digunakan untuk menampung tag tag html tabel, ditaruh setelah tag table.

tr adalah tag untuk baris pada tabel

td adalah tag untuk cell pada tabel

Jadi untuk membuat tag tabel yang benar urutannya adalah : TAG_TABEL TAG_BARIS TAG CELL

Sehingga menjadi seperti ini : <table> </tbody> <tr> <td> TULISAN DI DALAM CELL </td> </tr> </tbody> </table>

Jadi kalau ingin mengatur format teks maka harus setelah tag <td> sesuai dengan contoh di atas dimana p style adalah tag yang mengatur format paragraf dan <b> adalah tag untuk membuat tulisan menjadi tebal.

<td style="background-color: #1e93dd;">Ā  <--- code baris ke 12
<tr style="background-color: #1e93dd;"> Ā  <--- code baris ke 24

Perhatikan 2 baris di atas. Perbedaan keduanya hanyalah menggunakan td dan tr namun bisa terlihat bahwa yang menggunakan td hanya 1 cell saja yang berwarna sementara dengan menggunakan tr 1 baris semua berwarna. Hal ini karena seperti dijelaskan di atas td adalah tag untuk cell sementara tr adalah tag untuk baris.

<td style="border: 8px solid #FF0000;">Ukuran Tabel</td>
<td style="border: 2px solid #B0C4DE;">75% dari luas postingan ini</td>

Seperti yang sudah dijelaskan di atas tentang membuat border tabel, ini adalah cara untuk membuat border pada cell. Ya, border pada tiap tiap cell harus dibuat sendiri sendiri. Seperti terlihat pada hasil, tulisan Ukuran Tabel memiliki border 8pixel dengan warna merah dan sebelahnya 2pixel dengan warna abu abu.

 <td style="font-size: 200%;">Letak Tabel</td>

font-size adalah tag yang sepertinya namanya, untuk menentukan ukuran huruf

 

Terima kasih sudah mampir dan membaca blog saya ini. Tolong dishare kalau postingan ini dirasa berguna ^_^

 
Tinggalkan komentar

Ditulis oleh pada Juli 21, 2015 in Blog

 

Tag: , ,

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: