Cara membuat tabel cantik di blog atau website

Cara membuat tabel cantik di blog atau website

Tabel dengan header

Ketika kita akan menulis sebuah artikel pada blog atau website, terkadang dalam penulisannya kita memerlukan sebuah tabel untuk lebih mudah menampilkan isi dan maksud dari tujuan penulisan artikel di blog atau website kita, nah sobat blogger sekalian kali ini saya akan menjelaskan bagaimana sih cara membuat tabel itu, jika kita ingin membuat tabel di komputer, biasanya hanya dengan menggunakan fasilitas yang ada pada Microsoft Office dan tinggal kita buat jumlah kolom dan barisnya. Tetapi untuk membuat tabel diblog  kita harus menggunakan kode html, adapun langkah membuat tabelnya saya sajikan dibawah berikut:

<table border="1"><tbody> <tr><th>Table Header 1</th><th>Table Header 2</th><th>Table Header 3</th><th>Table Header 4</th></tr> <tr><td>Division 1.1</td><td>Division 1.2</td><td>Division 1.3</td><td>Division 1.4</td></tr> <tr><td>Division 2.1</td><td>Division 2.2</td><td>Division 2.3</td><td>Division 2.4</td></tr> <tr><td>Division 3.1</td><td>Division 3.2</td><td>Division 3.3</td><td>Division 3.4</td></tr> </tbody></table>

Keterangan:
  1. <tbody> merupakan perintah untuk membuat kerangka tabel
  2. <tr> merupakan perintah untuk membuat baris
  3. <td> merupakan perintah untuk membuat kolom
  4. <th> merupakan perintah untuk menandai header 
  5. <table border="1"> merupakan perintah mengatur ketebalan garis pembatas, silahkan diatur sesuai selerah masing-masing.

Sebagai contoh dari kode diatas maka akan menjadi seperti ini:.

Table Header 1Table Header 2Table Header 3Table Header 4
Division 1.1Division 1.2Division 1.3Division 1.4
Division 2.1Division 2.2Division 2.3Division 2.4
Division 3.1Division 3.2Division 3.3Division 3.4

<table border="1"> <tr> <td style="background-color: orange;">Situs racun</td> <td style="background-color: lime;">BB monah</td> </tr> </table>

Maka hasilnya akan menjadi seperti ini:

Situs racun BB monah

Selamat mencoba Membuat Tabel pada blog


Previous Post
First

post written by:

0 Comments: