Mengatur warna tabel dengan dreamweaver

Membuat tabel dengan dreamweaverSebelumnya saya sudah membahas tentang bagaimana membuat tabel dengan dreamweaver, berikut ini lanjutanya tentang bagaimana mengatur warna tabel dengan dreamweaver. Saya akan bahas tentang cara memberi warna pada tabel utama, mengganti warna baris atau kolom, mengganti posisi serta pengaturan lainnya yang berhubungan dengan tabel menggunakan fasilitas yang sudah disediakan.

Jika anda belum membaca tutorial tentang membuat tabel dengan dreamweaver, silahkan diintip dulu. Hasil terakhir pada bahasan tersebut adalah sebuah tabel seperti berikut :

tabel dengan dreamweaver

Dilihat dari tabel diatas, masih polos tidak mengggunakan warna sedikitpun.

Mengganti warna tabel utama

Tahap awal pada bahasan ini kita akan memberi warna tabel secara keseluruhan. Silahkan anda klik garis tabelnya sehingga muncul indikasi bahwa tabel sudah dipilih (lihat lingkaran merah)

tabel dengan dreamweaver

 Kemudian lihat pada bagian properti bar (dibawah) seperti gambar berikut :

tabel dengan dreamweaver

Pada gambar diatas/properti bar (kotak merah) terlihat beberapa pengaturan yang berhubungan dengan tabel yang kita pilih, yaitu :

  1. Tabel ID : merupakan identitas unik dari sebuah tabel, ini sering digunakan sebagai ID pengenal jika kita menggunakan javascript atau css. (boleh tidak diisi)
  2. Rows : merupakan jumlah baris pada tabel yang dipilih
  3. Cols : merupakan jumlah kolom pada tabel yang dipilih
  4. W : atau width merupakan lebar tabel yang dipilih dan disampingnya merupakan pilihan satuan ukuran lebar.
  5. CellPad dan CellSpace : sudah saya bahas pada tulisan sebelumnya
  6. Align : pilihan untuk posisi tabel dalam layar, default berarti sesuai pengaturan dasar (kiri), left, right dan center
  7. Border : juga sudah saya bahas
  8. BGColor : ini pilihan untuk mengganti warna tabel
  9. BGImage : pilihan untuk menyisipkan background gambar pada tabel
  10. BrdColor : adalah pilihan warna garis untuk tabel

Sekarang kita tinggal klik ikon kotak yang ada disamping BGColor, kemudian pilih warna yang anda sukai. Maka tabel yang sudah anda pilih akan berubah warna sesuai pilihan, dan Isian BGColor akan ada nilainya. Lihat Gambar :

mengganti warna tabel dengan dreamweaver

Mengganti warna baris atau kolom

Berikutnya, untuk mengganti warna baris atau kolom pada tabel. Misal kita akan beri warna baris pertama (judul) dengan warna tertentu, langkahnya :

Pilih baris pertama dengan mengarahkan mouse anda ke paling kiri baris pertama hingga muncul sebuah panah warna hitam (seperti warna panah merah pada gambar berikut) kemudian anda klik sampai satu baris terpilih. Kemudian lihat pada properti bar dibawah, seperti gambar berikut :

mengganti warna baris tabel dengan dreamweaver

Jika anda lihat pada gambar, properti bar yang muncul pada saat diklik baris/kolom sedikit berbeda dengan properti yang muncul pada saat memilih tabel. Pada saat memilih baris/kolom yang muncul adalah :

  1. Format : ini pilihan untuk format tulisan yang ada pada baris yang kita pilih, bisa None (tanpa format), Paragraf, Heading dll. (Ini tidak perlu anda ganti)
  2. Font dan size : ini pilihan bentuk dan ukuran tulisan sesuai baris yang dipilih
  3. Style : ini pilihan format css (jika kita belum buat maka tidak ada)
  4. B (Bold), I (Italic), rata kiri, rata tengah, rata kanan, dan rata kiri kanan (justify) untuk mengatur posisi tulisan
  5. Tepat dibawah tombol css adalah pengaturan warna tulisan
  6. Dibawah pilihan posisi tulisan ada pilihan bentuk list simbol, angka, outdent dan indent untuk mengatur posisi baris awal.
  7. Tepat dibawah tulisan Row, digunakan untuk merge/menggabung kolom/baris, dan disampingnya untuk split (memisah kolom/baris yang sudah di merge)
  8. Horz dan ver, digunakan untuk mengatur posisi objek/tulisan yang ada dalam baris/kolom
  9. W (width) dan H (height) untuk mengatur lebar atau tinggi sebuah baris/kolom
  10. Header : digunakan untuk merubah baris/kolom menjadi format judul/kepala tabel
  11. Wrap : digunakan jika anda ingin isi kolom disambung (tidak pindah ke baris bawah)
  12. Bg : bg yang atas digunakan untuk menyisipkan gambar sebagai latar baris/kolom, dan bg yang bawah untuk mengganti warna baris atau kolom.

Sekarang, pilih bg yang bawah untuk mengganti warna baris tersebut. Pilih warna yang sesuai.

mengganti warna baris tabel dengan dreamweaver

Anda bisa lakukan langkah diatas pada semua baris atau kolom yang ada pada tabel, sehingga hasilnya sesuai dengan keperluan anda, seperti contoh tabel warna warni diatas.

Selamat mencoba, selamat berkreasi.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Mengedit gambar dengan Adobe Dreamweaver CS3
    Mengedit gambar dengan Adobe Dreamweaver CS3. Tahukah anda bahwa Adobe Dreamweaver selain digunakan untuk menyusun layout halaman web dan menuliskan kode program berbasis web, juga bisa digunakan untuk mengedit gambar yang disisipkan dalam halaman web tersebut. Simak caranya berikut.
  • Membuat menu dengan icon seperti akun google
    Membuat menu seperti akun google. Yang punya akun google pasti sudah kenal tampilan menu seperti disamping ini. Jika anda sudah masuk ke layanan akun google, dan masuk ke menu produk maka akan terlihat menu layanan yang anda gunakan dalam bentuk daftar nama layanan serta ikon gambar kecil disampingnya.
  • Mengatur format tulisan dalam dreamweaver
    Mungkin masih ada yang bingung cara pengoperasian serta fungsi property bar untuk tulisan yang ada pada dreamweaver. Pada tutorial berikut ini saya akan menjelaskan langkah-langkah untuk membuat tulisan serta cara mengaturnya dengan dreamweaver.
  • Template website gratis
    Template website gratis. Sekarang anda tidak perlu merepotkan diri untuk menyusun template website atau blog, karena sudah banyak template yang bisa anda dapat dengan gratis alias free. Kecuali anda memang ingin template web yang fresh, original, dan sesuai dengan web atau blog yang anda buat.
  • Membuat tabel dengan dreamweaver
    Dreamweaver menyediakan fasilitas yang sangat mudah dalam membantu para web desainer untuk menerapkan kreatifitasnya dalam hal desain visual halaman web termasuk penyusunan tabel dalam berbagai bentuk. Bagi anda yang baru mulai belajar dengan dreamweaver mungkin perlu baca tutorial berikut. Saya akan berbagi tentang bagaimana membuat tabel dengan dreamweaver.

Kiriman terbaru