Cara Membuat Table di Blog

Pernah buat Table di Microsoft Word kan? dan ingin membuatnya di blog maka kita harus mengetahui Elemen HTML nya
Terdapat 3 elemen utama dalam pembuatan elemen table HTML, diantaranya adalah
<table>
Element ini digunakan untuk menggabungkan anatar <tr> dan <td> sehingga menghasilkan sebuah tabel matriks.
<tr>
Element ini digunakan untuk membuat sebuah baris di dalam tabel. Untuk peletakan script-nya, element <tr> berada didalam element <table>.

<td>
Element ini digunakan untuk membuat sebuah colom di dalam tabel. Untuk peletakan script-nya, element <td> berada didalam element <tr>.

Sehingga element <td> dan <tr> berada di dalam element <table> maka dihasilkanlah sebuah tabel yang terdiri dari baris dan kolom.

Perlu diketahui bahwa tabel itu terdiri dari baris dan kolom, maka untuk membuat sebuah tabel di perlukan penggabungan antara baris dan kolom sehingga menghasilkan sebuah tabel matriks.
1. Membuat baris/row
Sebuah tabel terdiri dari kumpulan beberapa baris atau rows. Baris atau row merupakan elemen tabel yang tersusun kebawah. Lihat contoh baris berikut,

Data atau Isi

Penerapannya di dalam HTML akan seperti ini.

<table width="100%" border="0.5" bgcolor="#000000"> <tbody> <tr> <td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Data atau Isi</span></td> </tr> </tbody> </table>

2. Membuat kolom/colom
Dikatakan tabel sudah pasti memiliki kolom. Kolom merupakan elemen tabel yang tersusun ke samping. Untuk lebih jelasnya lihat contoh berikut,

Data atau Isi

Data atau Isi

Data atau Isi

Data atau Isi

Penerapannya di dalam HTML akan seperti ini.

<table width="100%" border="0.5" bgcolor="#000000"> <tbody> <tr> <td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Data atau Isi</span></td> <td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Data atau Isi</span></td> <td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Data atau Isi</span></td> <td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Data atau Isi</span></td> </tr> </tbody> </table>

3. Penggabungan antara baris dan kolom
Untuk menghasilkan sebuah tabel yang terdiri dari beberapa kolom dan baris maka script yang telah saya jelaskan diatas digabung menjadi satu, hasilnya akan seperti ini.

No	Nama	Tempat & Tanggal Lahir	Alamat
1	Hendro Rudiansyah	Pematangsiantar, 31 Juli 1990	Yogyakarta, Sleman
2	Ferdy Pebrianto	Medan, 07 February 1989	Yogyakarta, Sleman
3	M. Nurul Qadri	Pematangsiantar, 22 Agustus 1990	Jakarta Selatan
4	Angger Dwi Elriyanta	Bantul, 20 Juni 1989	Sewon Bantul

Penerapannya di dalam HTML akan seperti ini.

<table width="100%" border="1" bgcolor="#000000"> <tbody> <tr> <td style="text-align: center;" align="center" valign="top" bgcolor="#A5FF8A" width="auto"><span style="color: #000000;">No</span></td> <td style="text-align: center;" align="center" valign="top" bgcolor="#A5FF8A" width="auto"><span style="color: #000000;">Nama</span></td> <td style="text-align: center;" align="center" valign="top" bgcolor="#A5FF8A" width="auto"><span style="color: #000000;">Tempat & Tanggal Lahir</span></td> <td style="text-align: center;" align="center" valign="top" bgcolor="#A5FF8A" width="auto"><span style="color: #000000;">Alamat</span></td> </tr> <tr> <td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto">1</td> <td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Hendro Rudiansyah</td> <td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Pematangsiantar, 31 Juli 1990</td> <td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Yogyakarta, Sleman</td> </tr> <tr> <td style="text-align: center;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">2</td> <td style="text-align: left;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">Ferdy Pebrianto</td> <td style="text-align: left;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">Medan, 07 February 1989</td> <td style="text-align: left;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">Yogyakarta, Sleman</td> </tr> <tr> <td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto">3</td> <td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">M. Nurul Qadri</td> <td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Pematangsiantar, 22 Agustus 1990</td> <td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Jakarta Selatan</td> </tr> <tr> <td style="text-align: center;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">4</td> <td style="text-align: left;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">Angger Dwi Elriyanta</td> <td style="text-align: left;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">Bantul, 20 Juni 1989</td> <td style="text-align: left;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">Sewon Bantul</td> </tr> </tbody> </table>

untuk code color anda bisa rubah warna teksnya
untuk bgcolor anda bisa rubah warna background teksnya



Untuk lainnya anda bisa kreasikan Sendiri mau gimana ya terserah anda.