Cara Membuat Tabel di Blogger dengan Google Documents

Di blog ini telah dibahas cara membuat tabel sederhana di Blogger. Namun, cara tersebut masih menggunakan kode HTML. Pada kesempatan kali ini kita akan membahas tentang cara membuat tabel dengan memanfaatkan Google Documents. Dengan cara ini akan terasa lebih mudah dalam membuat tabel karena kita mengerjakannya di spreadsheet seperti kita membuat tabel di Microsoft Excel. Tabel ini online sehingga kita dapat menyisipkannya di blog atau website.

Selain itu, tabel ini juga memiliki beberapa kelebihan diantaranya kita tidak perlu memahami kode HTML untuk membuat tabel. Tampilan tabel ini seperti spreadsheet Microsoft Excel. Lebar tabel tidak dibatasi oleh lebar halaman blog. Data yang ada di dalam tabel tidak dapat di-copy-paste. Pengeditan dapat dilakukan langsung di Google Documents.

Berikut ini langkah-langkah membuat tabel dengan menggunakan Google Documents.

1. Kunjungi halaman Google Documents di http://docs.google.com dan masuk dengan Google Akun Anda.

2. Klik tombol Buat baru dan selanjutnya klik Spreadsheet.

3. Kemudian Anda akan dibawa ke tab baru, yaitu di halaman spreadsheet yang mirip dengan Microsoft Excel.

4. Silakan membuat tabel di halaman tersebut, bila sudah selesai klik tombol Save Now di pojok kanan atas.

 

5. Berikan nama spreadsheet tersebut kemudian klik tombol OK.

6. Klik tombol segitiga hitam Share di pojok kanan atas dan klik Publish as a web page.

7. Pada "Sheets to publish", pilih sheet yang ingin ditampilkan misalnya Sheet1. Beri tanda centang pada Automatically republish when changes are made. Selanjutnya klik tombol Start publishing.

8. Di bagian "Get a link to the published data" pilih HTML to embed in a page dan pilih sheet yang ingin ditampilkan, misalkan sheet1. Kemudian tentukan pula range baris dan kolom yang ingin ditampilkan, contoh A1:C4. Selanjutnya copy kode HTML yang muncul kemudian klik tombol Close.

9. Pergi ke halaman Blogger.

10. Paste-kan kode HTML tersebut di bagian Edit HTML entri Anda.

11. Setelah diterbitkan, hasilnya akan tampak seperti di bawah ini.

Read More

Cara Membuat Tabel Sederhana di Blogger

Dalam membuat suatu artikel di blog terkadang dibutuhkan sebuah tabel. Tabel tersebut dapat membuat tulisan menjadi rapi sehingga enak untuk dibaca. Di dalam blog ini ada beberapa artikel yang di dalamnya terdapat tabel seperti Cara Memasang User Online Status, Stasiun Radio FM di Jakarta dan Sekitarnya, dan Spesifikasi Ponsel SAMSUNG E1390.

Untuk membuat tabel sederhana, paling tidak dibutuhkan kode HTML seperti di bawah ini.

<table border="1" style="width: 400px;"><tbody>

<tr><td style="text-align: center;">ELEMEN SEL 1</td><td style="text-align: center;">ELEMEN SEL 2</td></tr>

<tr><td style="text-align: center;">ELEMEN SEL 3</td><td style="text-align: center;">ELEMEN SEL 4</td></tr>

</tbody></table>

Border menunjukkan ketebalan garis tepi tabel. Semakin besar angka atau nilainya maka semakin tebal garis tepi tabelnya. Bila nilainya diganti dengan nol (0px) maka garis tabelnya menjadi tidak terlihat.

Text-align: center; menunjukkan perataan sebuah teks berada di tengah-tengah. Kalau ingin teksnya menjadi rata kanan maka kata center diganti dengan right. Left untuk rata kiri dan justify untuk rata kiri-kanan.

Width menunjukkan lebar dari suatu tabel tersebut. Angka 400px dapat diganti sesuai keperluan. kalau mau menyamakan dengan lebar halaman posting, tinggal diganti saja angka 400px menjadi 100%.

<tr> ... </tr> menunjukkan baris sebuah tabel. Sedangkan <td> ... </td> menunjukkan sel sebuah tabel. Bentuk kode HTML di atas adalah tabel yang mempunyai 2 kolom dan 2 baris. ELEMEN SEL dapat diisi dengan teks, link, atau gambar. Bila ingin menambah jumlah baris atau kolom, tinggal ditambahkan saja kode HTML untuk membentuk baris dan kolom.

Bila kode HTML tabel di atas diletakkan pada menu Edit HTML, maka hasilnya akan terlihat seperti di bawah ini.

ELEMEN SEL 1	ELEMEN SEL 2
ELEMEN SEL 3	ELEMEN SEL 4

Read More

Belajar Membuat Tabel di Blogger Menggunakan HTML

Pada kesempatan beberapa waktu sebelumnya saya pernah membahas bagaimana cara membuat tabel di Blogger dengan menggunakan kode HTML dalam posting yang berjudul Cara Membuat Tabel Sederhana di Blogger. Untuk kali ini saya akan kembali mengulas cara membuat tabel di Blogger lebih dalam lagi.

Dalam membuat sebuah tabel, kita memerlukan tag-tag HTML seperti di bawah ini:

• Tag <table>
• Tag <tbody>
• Tag <tr>
• Tag <th>
• Tag <td>

Tag <table> mempunyai fungsi untuk mendefinisikan sebuah tabel. Tag <tbody> menunjukkan isi dari tabel tersebut . Tag <tr> berfungsi untuk mendefinisikan baris tabel. Tag <th> untuk mendefiniskan judul tiap kolom atau baris tabel. Tag <td> untuk mendefinisikan isi setiap kolom.

Tag-tag ini tidak dapat berdiri sendiri dan harus dirangkaikan sedemikian rupa agar dapat membentuk sebuah tabel. Tag-tag ini tentu saja kita letakkan di posisi Edit HTML saat kita membuat posting di Blogger. Contoh:

<table border="1"><tbody>
<tr><th>Kolom 1</th><th>Kolom 2</th><th>Kolom 3</th></tr>
<tr><td>Baris 1 Kolom 1</td><td>Baris 1 Kolom 2</td><td>Baris 1 Kolom 3</td></tr>
<tr><td>Baris 2 Kolom 1</td><td>Baris 2 Kolom 2</td><td>Baris 2 Kolom 3</td></tr>
</tbody></table>

Bila kode HTML tersebut di atas sudah diterbitkan, maka hasilnya akan tampak seperti di bawah ini.

Kolom 1	Kolom 2	Kolom 3
Baris 1 Kolom 1	Baris 1 Kolom 2	Baris 1 Kolom 3
Baris 2 Kolom 1	Baris 2 Kolom 2	Baris 2 Kolom 3

Tag <table> memiliki atribut sebagai berikut:

Atribut	Keterangan
align	Menentukan posisi horizontal tabel.
background	Menentukan gambar latar belakang tabel.
bgcolor	Menentukan warna latar belakang tabel.
border	Menentukan ketebalan bingkai tabel.
bordercolor	Menentukan warna bingkai tabel.
bordercolor-light	Menentukan warna depan bingkai tabel.
bordercolor-dark	Menentukan warna "bayangan" bingkai tabel.
cellspacing	Menentukan jarak spasi antarsel
cellpadding	Menentukan jarak isi sel dengan bingkai.
height	Menentukan tinggi tabel.
width	Menentukan lebar tabel.
valign	Menentukan posisi vertikal teks dalam sel.

Sedangkan beberapa atribut untuk tag <td> adalah sebagai berikut:

Atribut	Keterangan
background	Menentukan gambar latar belakang sel.
bgcolor	Menentukan warna latar belakang sel.
bordercolor-light	Menentukan warna depan bingkai sel.
bordercolor-dark	Menentukan warna "bayangan" bingkai sel.
colspan	Menentukan jumlah kolom yang digabung.
height	Menentukan tinggi sel.
nowrap	Menentukan teks agar tetap satu baris.
rowspan	Menentukan jumlah baris yang digabung.
valign	Menentukan posisi vertikal teks dalam sel.
width	Menentukan lebar sel.

Untuk lebih memahami pengunaan atribut-atribut tersebut, silakan perhatikan contoh di bawah ini.

<table border="1"><tbody>
<tr><th></th><th>Judul Kolom 1</th><th>Judul Kolom 2</th><th>Judul Kolom 3</th></tr>
<tr><th>Judul Baris 1</th><td bgcolor="#FF007F" style="text-align: right;">MM
MM</td><td bgcolor="#FFFF00" style="text-align: center;">M</td><td bgcolor="#00FF00" style="text-align: right;">MMM</td></tr>
<tr valign="baseline"><th>Judul Baris 2</th><td>MMM
MMM</td><td>MMM</td><td>MMM
MMMMM
MMM</td></tr>
<tr><th>Judul Baris 3</th><td valign="bottom">MMMMM</td><td valign="top">MMM
MMMMM</td><td valign="middle">MMMMM</td></tr>
</tbody></table>

Jika contoh di atas telah diterbitkan, maka hasil akan tampak seperti di bawah ini.

	Judul Kolom 1	Judul Kolom 2	Judul Kolom 3
Judul Baris 1	MM MM	M	MMM
Judul Baris 2	MMM MMM	MMM	MMM MMMMM MMM
Judul Baris 3	MMMMM	MMM MMMMM	MMMMM

Dalam membuat tabel, ada baiknya kita buat sketsa terlebih dahulu agar kita mudah mengonversinya ke dalam bentuk tag HTML, contohnya seperti di bawah ini.

Sketsa tabel.

Dengan adanya sketsa seperti gambar di atas, pembuatan tabel akan lebih menjadi mudah. Sketsa tersebut dibaca dari kiri ke kanan dan dari atas ke bawah. Kode HTML-nya adalah sebagai berikut:

<table border="1" style="width: 100%;"><tbody>
<tr><td colspan="2" style="text-align: center;">DUA KOLOM DIGABUNG</td><td rowspan="3" style="text-align: center;">TIGA
BARIS
DIGABUNG</td></tr>
<tr><td style="text-align: left;">KOLOM 1</td><td style="text-align: right;">KOLOM 2</td></tr>
<tr><td style="text-align: left;">KOLOM 1</td><td style="text-align: right;">KOLOM 2</td></tr>
<tr align="center"><td colspan="3">TIGA KOLOM DIGABUNG</td></tr>
</tbody></table>

Nah, setelah entri diterbitkan maka kode HTML di atas akan tampak menjadi seperti di bawah ini.

DUA KOLOM DIGABUNG		TIGA BARIS DIGABUNG
KOLOM 1	KOLOM 2
KOLOM 1	KOLOM 2
TIGA KOLOM DIGABUNG

Mengenai atribut-atribut lainnya Anda mencoba-cobanya sendiri. Sedangkan mengenai perataan teks dan yang berhubungan dengan pemformatan huruf lainnya dalam tabel, Anda dapat menggunakan kode HTML atau mengaturnya melalui shortcut "Aligment" serta shorcut lainnya yang telah disediakan Blogger.

Read More