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 **

Artikel Lainnya

  • Apakah menggunakan css lebih baik dari sisi SEO?
    Anda pasti sudah sering mengunjungi situs-situs ternama yang anda temukan melalui bantuan mesin pencari seperti google atau bing. Situs tersebut masuk pada halaman pertama hasil pencarian. Tampilanya terkadang terlihat cukup sederhana, tidak banyak gambar dan tampilnya sangat cepat.
  • Cara mengganti jenis huruf di blog atau website dengan font unik dengan cufon font
    Dengan kemajuan teknologi web yang sangat pesat, sekarang jenis tulisan atau font untuk web atau blog sudah bisa diganti sesuai keinginan. Kalau sebelumnya jenis tulisan yang ada di blog atau web kita hanya sebatas font atau jenis tulisan standar yang ada diinternet saja, kini sudah bisa lebih variasi sesuai selera pemilik blog atau webnya.
  • Membuat form dengan dreamweaver
    Membuat form dengan dreamweaver. Anda yang sudah terbiasa membuat form dengan aplikasi bukan visual (murni mengetik html), sepertinya perlu mempertimbangkan kembali dari segi efektifitas waktu membuat koding form. Karena banyak sekali pilihan aplikasi yang sudah tersedia lengkap dengan fitur-fitur super praktis yang dapat membantu kita menyelesaikan pekerjaan dengan mudah dan cepat, salah satunya adalah dreamweaver.
  • Kombinasi warna dalam desain website
    Kombinasi warna pada desain website adalah salah satu komponen yang sangat penting. Seorang desainer yang sudah memiliki "jam terbang" cukup tinggi sangat mengetahui pentingnya kombinasi warna dan hati-hati dalam memilih warna. Akan tetapi, hal ini tentu sangat berbeda bagi mereka yang baru terjun dalam masalah desain. Warna apa yang cocok untuk website tertentu, bagaimana membuat kombinasi dari beberapa warna agar sesuai dengan tema yang dibuat, adalah sebagian dari banyak masalah warna.
  • 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.

Kiriman terbaru