Category: HTML

Cara Simple Background Baris Tabel Berselang-seling dengan CSS


Boleh dibilang saya termasuk orang yang “kudet” pada perkembangan web design & programming saat ini, terlebih pada beberapa framework dan CMS. Hal itu dikarenakan waktu sudah banyak terkonsentrasikan pada jurusan kuliah saya. Namun karena permintaan teman untuk membuat project web akhirnya saya bergelut lagi dengan yang namanya coding html, css, jQuery, php, MySQL. Dan sepertinya Bahasa pemrograman diatas sudah mendarah daging. Bagaimana tidak, setiap kali menulis beberapa baris kode rasanya memiliki keasyikan tersendiri dan bisa betah berjam-jam didepan laptop sampai solusi pemecahan masalah yang sedang dicari bisa terselesaikan.

Sedikit curhat saja ūüėÄ

Background baris berselang-seling pada tabel tidak hanya untuk memperindah saja, namun agar mudah dalam membaca tabel. Terutama ketika sedang secara urut mengecek nilai data pada tabel. Dan secara cepat dapat mencari data yang dimaksud dalam tabel dengan memperkirakan letak baris ganjil atau genap.

Untuk cara membuat background baris tabel berseling sebenarnya simple, hanya dengan menambahkan beberapa baris kode css dengan selector :nth-child(n). Selector :nth child(n) baru benar-benar saya pahami setelah hasil intip-mengintip source kode WordPress lewat fitur inspect element pada browser dan saya coba-coba, biasalah trial and error. Namun di W3Schools juga sebenarnya penjelasannya sudah sangat lengkap, hehe. Karena dulu (sudah lama sekali) cara jadul saya menggunakan nilai dari suatu variable pada Looping di script php untuk mengidentifikasi suatu data baris pada urutan ganjil atau genap dan kemudian kita sisipkan style inline css disitu, mungkin anda juga pernah memakainya.

Misal tabel yang akan dibuat seperti ini:Baris script php punya saya seperti ini, baris pertama mulai dari 0 karena diawal $i=0

Script diatas akan mencetak tag html dengan disisipi inline style css background. Kelemahan script ini akan menulis banyak script inline style apabila kita memiliki banyak baris data.

Adapun cara dengan css selector :nth-child(n) adalah sebagai berikut, baris pertama dimulai dari 1:

Cara Pertama

:nth-child(n) merupakan selector untuk memilih element anak, pada kasus ini kita pakai table yang didalamnya terdapat element memiliki anak. Nilai n bias berupa keyword, angka, maupun formula. Untuk keyword odd berfungsi untuk memilih element anak pada urutan ganjil (dimulai dai 1), sedangkan even memilih element anak pada urutan genap. Apabila diisi dengan angka maka akan memilih element anak yang terletak pada urutan ke-angka yang kita masukkan. Untuk formula kita bisa menggunakan variable n.

Sepemahaman saya n ini bisa kita analogikan dengan suku index ke-n namun secara default dimulai dari 0 (mohon koreksinya). Misalkan 2n akan memilih element anak pada urutan ke-0 (2*(0)=0) / baris 0 tidak ada, ke-2 (2*(1)=2); ke-4 (2*(2)=4) dst kelipatan 2. Bisa kita custom misal kelipatan 3, selector akan bekerja mulai dari urutan ke-3 berlanjut ke 6 9 12 dst. Namun apabila ingin memilih baris ganjil saja, kita bisa menggunakan formula 2n+1 => 2(0)+1=1; 2(1)+1=3; 2(2)+1=5; dst.

Cara Kedua

Semoga bermanfaat ūüėÄ

Advertisements

Simple Read more


Berikut ini saya tampilkan hasil belajar javascript dan HTML untuk membuat read more, semuanya sudah dijelaskan dalam script, jadi yang mau download ya silahkan ini read[more] nya, jangan lupa buka menggunakan notepad lalu di save as menjadi extensi .html (karena wordpress hanya memperbolehkan jenis file upload berupa file jpg, jpeg, png, gif, pdf, doc, ppt, odt, pptx, docx, pps, ppsx, xls, xlsx, key.) dan kalo yang mau mengikuti ya sumonggo simak script di bawah ini ūüôā¬† Continue reading “Simple Read more”