Tabel Pada Post Blog

Sekilas, penampilan table pada post blogger mungkin terlihat mudah dan sederhana. Namun pada kenyataannya tidak semudah yang dibayangkan.
Nah, kesempatan kali ini saya ingin nge-share gimana sih cara agar post berupa table bias termuat dan ditampilkan pada laman kita.
Berikut …

1   Pertama-tama buat table yang akan ditampilkan dengan Ms. Excel atau program sejenis.  
2    Blok dan copy sel-sel yang akan di tampilkan pada post. 
3   Paste-kan pada post blog. Anda akan mendapati bahwa border dari table tersebut tidak tampak padahal Anda sudah mengaturnya sedemikian rupa di Ms. Excel.
4.   Setelah Anda paste-kan table tersebut, klik HTML. Kita lihat disana  ada elemen-elemen dari sel yang Anda paste tadi.
  <tr height="22" style="height: 16.5pt;">
  <td class="xl71" height="22" style="height: 16.5pt;">NO</td>
  <td class="xl71" style="border-left: none;">NAMA</td>
  <td class="xl71" colspan="2" style="border-left: none;">TANDA TANGAN</td>
  </tr>


5.      Untuk mengatur agar border table nampak, tambahkan kode

<table border="1">
        Tepat diatas kode

<tr height="22" style="height: 16.5pt;">

        Sehingga menjadi,
<table border=”1”>

<tr height="22" style="height: 16.5pt;">

  <td class="xl71" height="22" style="height: 16.5pt;">NO</td>

  <td class="xl71" style="border-left: none;">NAMA</td>

  <td class="xl71" colspan="2" style="border-left: none;">TANDA TANGAN</td>

            </tr>


6.     Untuk mengatur posisi text dalam table, ketikkan saja align=”[posisi*]” [spasi] dalam baris kode html dari text yang ingin diatur posisinya.(* : center/left/right)
Contoh pada kolom NAMA :
<table border=”1”>

<tr height="22" style="height: 16.5pt;">

  <td class="xl71" height="22" style="height: 16.5pt;">NO</td>

  <td class="xl71" align=”center”style="border-left: none;">NAMA</td>

  <td class="xl71" colspan="2" style="border-left: none;">TANDA TANGAN</td>

            </tr


Hasilnya,
 BORDER=0




 BORDER=1


7.     Untuk mengatur panjang dan lebar sel menggunakan kode height (lebar) dan width(panjang). Metode penyisiipannya pun sama seperti kita kentisipkan kode untuk mengatur posisi.

          
           HEIGHT=”VALUE”
           WIDTH=”VALUE”


Contoh pada kolom NAMA :
           
<table border=”1”>
<tr height="22" style="height: 16.5pt;">
  <td class="xl71" height="22" style="height: 16.5pt;">NO</td>
  <td class="xl71" align=”center” width=”150” style="border-left: none;">NAMA</td>
  <td class="xl71" colspan="2" style="border-left: none;">TANDA TANGAN</td>
                                         </tr
            Hasilnya,
                                                                              WIDTH=50
                        
                           WIDTH=150


8.    Satu baris table dinyatakan dengan kode :

          <tr height="20" style="height: 15.0pt;">

          <td class="xl65" height="20" style="border-top: none; height: 15.0pt;">5</td>

          <td class="xl66" style="border-left: none; border-top: none;">Ira </td>

          <td class="xl67" style="border-left: none; border-top: none;">5</td>

          <td class="xl67" style="border-left: none; border-top: none;"></td>

          </tr>


Dimulai dengan <tr …….> dan diakhiri dengan </tr>

Pada dasarnya kode dari sebuah sel adalah <td ……….[PENGATURAN]……… >VALUE/PERNYATAAN</td>.

Kode <td class="xl67" style="border-left: none; border-top: none;"></td> merupakan sel kosong karena value/pernyataannya kosong.

Kode <td class="xl66" style="border-left: none; border-top: none;">Ira </td> merupakan sel yang berisi pernyataan berupa “Ira” karena value/pernyataan yang tersedia memang begitu adanya.

Tag <TR> merupakan pembentuk baris, dan tag <TD> merupakan pembentuk kolom.

Comments

Post a Comment

Popular posts from this blog

Merancang Basis Data

Image
Setelah memahami hierarki dan komponen basis data mari kita mencoba menganalisa rancangan struktur basis data dari aplikasi Sistem Informasi Nilai Raport.  Tabel-tabel yang diperlukan dalam membuat aplikasi raport sederhana diantaranya: Nama tabel Keterangan dan field Tabel siswa Menyimpan data siswa seperti: id_siswa, nis, nama, jenis_kelamin, tanggal_lahir, alamat, dan id_kelas Tabel kelas Menyimpan data kelas berupa id_kelas, nama_kelas, dan wali_kelas Tabel guru Menyimpan data guru: id_guru, nama_guru, nomor_hp Tabel mata pelajaran Menyimpan data mapel: id_mapel, nama_mapel, id_guru_pengampu Tabel nilai Menyimpan nilai siswa untuk setiap mapel. id_nilai, id_siswa, id_mapel, semester, tahun_ajaran, nilai_harian, nilai_UTS, nilai_UAS, nilai akhir Tabel user Untuk login dan mengatur otoritas pengguna. Berisi data: id_user, username, ...
Read more

Bahasa Basis Data

Image
Bahasa yang digunakan dalam operasi basis data disebut Structured Query Language atau biasa disebut SQL. Pernyataan atau statement SQL dapat dibagi ke dalam 3 bentuk yaitu: Data Definition Language (DDL) Data Manipulation Language (DML) Data Control Language(DCL) DDL yaitu struktur/skema basis data yang menggambarkan/mewakili desain basis data secara keseluruhan dispesifikasikan dengan bahasa khusus. Contoh perintah: CREATE, ALTER, DROP, RENAME DML adalah perintah-perintah yang digunakan untuk mengubah, memanipulasi, dan mengambil data pada basis data. Contoh perintah: SELECT, INSERT, UPDATE, DELETE DCL biasa digunakan untuk merubah hak akses, memberikan roles, dan isu lain yang berhubungan dengan keamanan database. Contoh perintah: GRANT, REVOKE Penulisan sebuah perintah atau pernyataan dalam basis data dikenal dengan istilah query. Berikut beberapa penulisan query pada bahasa SQL: Membuat database Struktur query      : CREATE DATABASE nama_db ; Contoh   ...
Read more

Tugas 1 - Praktikum CRUD

Image
Sesi kali ini Anda diharapkan mampu mengolah database dengan memasukkan baris-baris query dengan ketentuan berikut: nama tabel : tb_siswa field yang tersedia : id_, uid, pass, fullname, place, birth, gender, address data yang akan dimasukkan: Field Value id_ 6 uid 1801JW006 pass 123456 fullname Joko Widodo place Banyumas birth 1 Januari 2005 gender Male address Jln Kejawar Banyumas lihat lagi bagaimana penulisan query untuk menambahkan data! Silahkan kunjungi www.ahmadmukti.my.id/tkj untuk mengerjakan tugas ini Previous:  Bahasa Basis Data Next: Koneksi Basis Data
Read more