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

  • 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.
  • 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.
  • 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.
  • 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.
  • Kriteria Desain web atau blog yang baik
    Sebuah website dapat dinilai memiliki desain yang baik apabila memenuhi kriteria penilaian tertentu yang mungkin saja berbeda tergantung dari sudut pandang penilai. Meskipun demikian, secara umum terdapat lima kriteria desain website/blog yang baik yang bisa digunakan sebagai acuan bagi Anda untuk membuat desain website/blog Anda sendiri atau hanya sekedar memperbaiki desain website/blog yang sedang Anda gunakan.

Kiriman terbaru