CARA MEMBUAT TABEL DI BLOG

membuat tabel di blog
Tutorial Blogger ini (Blogspot tutorial) menjelaskan bagaimana memasukkan tabel ke dalam posting Blogger.Anda akan belajar cara membuat tabel di Blogger mulai dari Tebel sederhana untuk Tebel yang lebih kompleks dengan warna yang beragam.

Kita akan mulai dengan Tebel dasar dan secara bertahap menambahkan styling CSS ke Tebel untuk meningkatkan tampilan dan fungsionalitas sampai kami telah membangun tabel digambarkan langsung di bawah.Tidak ada pengetahuan tentang CSS dan HTML diasumsikan sehingga tutorial Blogger ini cocok untuk pemula blogging mutlak.

Sebuah Blogger Table Caption
Tabel header	Tabel header	Tabel header
Tabel Sel	Tabel Sel	Tabel Sel
Tabel Sel	Tabel Sel	Tabel Sel
Tabel Sel	Tabel Sel	Tabel Sel
Tabel Sel	Tabel Sel	Tabel Sel

Tabel adalah cara yang berguna untuk menampilkan informasi informasi khususnya ditabulasikan. Tabel baik setiap kali Anda ingin menyelaraskan informasi sehingga mudah dibaca dan dimengerti. Anda dapat menambahkan teks, hyperlink dan gambar bahkan ke meja yang membuat mereka sangat berguna untuk menyajikan informasi.

Tidak ada cara mudah untuk menambahkan tabel di Blogger belum.Bahkan jika Anda menggunakan editor baru Anda akan mencatat bahwa ada tombol Tebel disediakan. Untungnya cukup mudah untuk menggunakan sedikit styling CSS untuk merapikan meja dan memasukkan secara manual ke dalam posting Blogger.

Bagaimana Tambahkan Tabel ke Blogger Posts

Pertama, Anda akan belajar bagaimana menambahkan tabel sederhana untuk Blogger. Kita akan mulai dengan sebuah meja dengan 3 kolom dan 4 baris termasuk baris header. Kemudian saya akan menunjukkan langkah demi langkah cara menambahkan fitur yang berbeda ke meja termasuk cara menambahkan baris tambahan, warna latar belakang header, perbatasan, keterangan, mengubah ukuran meja, pusat menyelaraskan meja dan banyak lagi.

Tabel header	Tabel header	Tabel header
Tabel Sel	Tabel Sel	Tabel Sel
Tabel Sel	Tabel Sel	Tabel Sel
Tabel Sel	Tabel Sel	Tabel Sel

Pertama buka longin ke halaman blog dan buka blogger anda
Masuk ke menu tata letak dan tambah edit HTML pada Editor Blogger Anda
Salin kode berikut ke dalam posting Blogger Anda yang akan menghasilkan tabel dasar seperti yang ditunjukkan di atas: untuk kata-katanya anda bisa merubah sesuai dengan kebutuhan.

<Table border = "2" bordercolor = "# 0033FF" style = "background-color: # 99FFFF" width = "100%" cellpadding = "3" cellspacing = "3">
<Tr>
<Th> Tabel header </ th>
<Th> Tabel header </ th>
<Th> Tabel header </ th>
</ Tr>
<Tr>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
<Tr>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
<Tr ">
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
</ Table>
Lakukan perubahan ke Tebel sesuai template Blogger Anda sendiri jika perlu dengan mengubah berikut:
<Table border = "2" bordercolor = "# 0033FF" style = "background-color: # 99FFFF" width = "100%" cellpadding = "3" cellspacing = "3">
- Lebar perbatasan (biru)
- Warna border (hitam)
- Warna latar belakang (red)
- Lebar tabel (orange) Bisa berupa persentase atau lebar yang sebenarnya misalnya 500px
Sekarang kita akan memperbaiki masalah yang menjengkelkan di Blogger yang membuat terlalu banyak ruang putih di atas Tebel. Kami melakukan ini dengan menambahkan styling berikut dilambangkan dengan warna merah tepat di atas tag meja dan menambahkan tag </ div> pada akhir kode tabel

<Style type = "text / css"> br nobrtable. {Display: none} </ style>
<Div class = "nobrtable">
<Table border = "2" bordercolor = "# 0033FF" style = "background-color: # 99FFFF" width = "100%" cellpadding = "3" cellspacing = "3">
<Tr>
<Th> Tabel header </ th>
<Th> Tabel header </ th>
<Th> Tabel header </ th>
</ Tr>
<Tr>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
<Tr>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
<Tr ">
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
</ Table> </ div>
Mari kita tambahkan beberapa styling lebih lanjut untuk header tabel untuk meningkatkan tampilan tabel yang dilambangkan dengan warna merah. Mengubah warna latar belakang dan atribut warna yang sesuai dengan skema warna yang Anda inginkan.

Tabel header Tabel header Tabel header

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

<Style type = "text / css"> br nobrtable. {Display: none} </ style>
<Div class = "nobrtable">
<Table border = "2" bordercolor = "# 0033FF" style = "background-color: # 99FFFF" width = "100%" cellpadding = "3" cellspacing = "3">
<Tr style = "background-color: # 0033FF; color: #ffffff; padding-top: 5px; padding-bottom: 4px;">
<Th> Tabel header </ th>
<Th> Tabel header </ th>
<Th> Tabel header </ th>
</ Tr>
<Tr>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
<Tr>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
<Tr>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
</ Table>
Sekarang mari kita menambahkan baris lain ke Tebel untuk Blogger, sebagai contoh warna merah tadi telah dirubah, seperti inilah contohnya.

Tabel header Tabel header Tabel header

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

<Style type = "text / css"> br nobrtable. {Display: none} </ style>
<Div class = "nobrtable">
<Table border = "2" bordercolor = "# 0033FF" style = "background-color: # 99FFFF" width = "100%" cellpadding = "3" cellspacing = "3">
<Tr style = "background-color: # 0033FF; color: #ffffff; padding-top: 5px; padding-bottom: 4px;">
<Th> Tabel header </ th>
<Th> Tabel header </ th>
<Th> Tabel header </ th>
</ Tr>
<Tr>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
<Tr>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
<Tr>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
</ Table>
Dalam langkah ini kita akan memusatkan isi tabel Blogger. Hal ini dapat dilakukan dengan beberapa cara, tapi kita akan mengambil jalan pintas di sini dengan menetapkan gaya untuk setiap baris tabel

Tabel header Tabel header Tabel header

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

<Style type = "text / css"> br nobrtable {display: none} tr. {Text-align: center;} </ style>
<Div class = "nobrtable">
<Table border = "2" bordercolor = "# 0033FF" style = "background-color: # 99FFFF" width = "100%" cellpadding = "3" cellspacing = "3">
<Tr style = "background-color: # 0033FF; color: #ffffff; padding-top: 5px; padding-bottom: 4px;">
Sekarang kita akan meramaikan tabel Blogger dengan menambahkan bolak berwarna baris dengan berbeda untuk meningkatkan readibility dan penampilan.

Tabel header Tabel header Tabel header

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

<Style type = "text / css"> br nobrtable {display: none} tr {text-align: center;}. Tr.alt td {background-color: #eeeecc; warna: hitam;} </ style>
<Div class = "nobrtable">
<Table border = "2" bordercolor = "# 0033FF" style = "background-color: # 99FFFF" width = "100%" cellpadding = "3" cellspacing = "3">
<Tr style = "background-color: # 0033FF; color: #ffffff; padding-top: 5px; padding-bottom: 4px;">
<Th> Tabel header </ th>
<Th> Tabel header </ th>
<Th> Tabel header </ th>
</ Tr>
<Tr class = "alt">
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
<Tr>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
<Tr class = "alt">
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
</ Table>
Hal ini juga mudah untuk menambahkan keterangan ke Tebel Blogger Anda. Untuk keterangan di atas Tebel hanya menambahkan baris keterangan seperti yang ditampilkan dalam warna merah. Untuk keterangan di bawah tabel tambahkan baris keterangan merah dan gaya seperti HTML di bawah

Sebuah Blogger Table Caption

Tabel header Tabel header Tabel header

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

<Style type = "text / css"> br nobrtable {display: none} tr {text-align: center;}. Tr.alt td {background-color: #eeeecc; warna: hitam;} tr {text-align: center;} caption {caption-side: bottom;} </ style>
<Div class = "nobrtable">
<Table border = "2" bordercolor = "# 0033FF" style = "background-color: # 99FFFF" width = "100%" cellpadding = "3" cellspacing = "3">
<Caption> A Blogger Table Caption </ caption>
<Tr style = "background-color: # 0033FF; color: #ffffff; padding-top: 5px; padding-bottom: 4px;">
<Th> Tabel header </ th>
<Th> Tabel header </ th>
<Th> Tabel header </ th>
</ Tr>
<Tr class = "alt">
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
<Tr>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
<Tr class = "alt">
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
</ Table>
Satu sifat penting lainnya yang perlu ditangani dalam tabel Blogger baru untuk meningkatkan tampilan. Kita bisa mengurangi perbatasan ganda ke dalam satu. Cara termudah untuk melakukannya adalah dengan mengubah cellspacing ke nol sebagai dilambangkan dengan warna merah. Atau sebaliknya kita dapat menerapkan properti perbatasan ke Tebel seperti yang ditunjukkan dengan warna biru.

Sebuah Blogger Table Caption

Tabel header Tabel header Tabel header

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

Tabel Sel Tabel Sel Tabel Sel

<Style type = "text / css"> br nobrtable {display: none} tr {text-align: center;}. Tr.alt td {background-color: #eeeecc; warna: hitam;} tr {text-align: center;} caption {caption-side: bottom;} </ style>
<Div class = "nobrtable">
<Table border = "2" bordercolor = "# 0033FF" style = "background-color: # 99FFFF; border-collapse: collapse;"width = "100%" cellpadding = "10" cellspacing = "0">
<Caption> A Blogger Table Caption </ caption>
<Tr style = "background-color: # 0033FF; color: #ffffff; padding-top: 5px; padding-bottom: 4px;">
<Th> Tabel header </ th>
<Th> Tabel header </ th>
<Th> Tabel header </ th>
</ Tr>
<Tr class = "alt">
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
<Tr>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
<Tr class = "alt">
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
<Td> Tabel Sel </ td>
</ Tr>
</ Table>
Simpan perubahan Anda ke Tebel Blogger dengan menyimpan dan penerbitan posting Anda

Dalam tutorial Blogger ini (Blogspot tutorial) saya telah menunjukkan bagaimana membangun sebuah tabel yang kompleks di HTML dan CSS untuk memasukkan ke dalam posting Blogger. Sekian dan Terima Kasih

CARA MEMBUAT TABEL DI BLOG

1 komentar:

Sering Di Baca

Kategori