Warna baris tabel css. Catatan: offset negatif

Tampilan peramban:

Kode HTML:

Mengubah ukuran tabel halaman HTML

Lebar tabel ditentukan oleh atribut WIDTH. Nilai dapat ditentukan dalam satuan absolut (WIDTH=250) dan dalam satuan relatif (WIDTH="80%"). Misalnya, dengan menyetel lebar ke 600 piksel, Anda dapat yakin bahwa tabel tersebut akan muat di jendela browser pada resolusi monitor apa pun.

Hal yang sama dapat dilakukan dengan tinggi meja menggunakan atribut HEIGHT.

Saat mengatur lebar dan tinggi tabel ke nilai yang terlalu kecil, browser menentukan nilai minimum yang memungkinkan data ditampilkan secara normal.

Semua hal di atas berlaku untuk sel tabel. Dalam hal ini, sama sekali tidak perlu menentukan dimensi masing-masing sel. Saat Anda mengubah lebar sel, semua sel yang berdekatan dalam kolom akan ditampilkan berdasarkan nilai baru. Hal yang sama berlaku untuk tinggi sel.

Halo, para pembaca situs blog yang budiman. Saya memutuskan untuk menulis postingan singkat tentang topik penggunaan CSS untuk meningkatkan pengalaman pengunjung situs.

Entah dari mana terlintas pemikiran bahwa jika item tersebut ada di menu kanan blog saya menghidupkannya dengan warna latar belakang bergantian(buat warna berbeda untuk garis genap dan ganjil), ini dapat meningkatkan kegunaan. Di sini saya menaruh harapan saya pada kemudahan memahami sejumlah besar informasi ketika dibagi menjadi beberapa blok (seperti yang terjadi, misalnya, ketika menggunakan paragraf dalam sebuah teks).

Praktik ini sangat sering digunakan saat menata tabel, ketika mereka ingin meningkatkan visibilitas informasi yang ditampilkan di dalamnya. Sambil mencari solusinya, ternyata masalah ini bisa diatasi cukup hanya dengan menggunakan CSS saja.

Tidak perlu menandai elemen daftar genap dan ganjil dengan kelas (menu kanan berfungsi berdasarkan saya). Anda hanya perlu menambahkan beberapa baris kode menggunakan kelas semu anak ke-n dalam file CSS, siapa yang bertanggung jawab atas penataan gaya situs. Namun, nth-child memiliki banyak kegunaan lain, yang juga akan saya sebutkan di postingan.

Kemungkinan kelas semu anak ke-n dan penggunaannya di situs

Sebenarnya setelah mengumumkan anak ke-n kelas semu, saya sempat mengakhiri postingan tersebut, karena Anda sendiri bisa mencari banyak informasi di Google. Tapi ini bukan jalan kami, jadi kami akan melanjutkannya. Jadi, pertama-tama saya akan menjelaskan langkah-langkah saya untuk mengubah menu kanan menjadi menu “bergaris”. Itu cukup untuk mengetahuinya menggunakan alat pengembang yang ada di dalam browser (dipanggil dari menu konteks elemen yang diinginkan di halaman web dengan memilih item seperti "Lihat kode elemen") di mana dalam file gaya tampilan baris ini daftar sudah diatur.

Prinsip bekerja dengan alat pengembang mirip dengan apa yang saya jelaskan di artikel tentang . Klik kanan item mana pun di menu kiri blog saya dan lihat laporan yang dihasilkan di panel yang terbuka:

Di sebelah kiri Anda akan melihat kode HTML elemen ini (kami tertarik pada elemen dengan tag LI - baris daftar), dan di kolom kanan adalah aturan CSS yang digunakan browser untuk menatanya. Anda dapat segera mengetahui di mana letak file gaya dengan menggerakkan kursor mouse ke namanya.

Dalam kasus saya, ini akan menjadi file yang dapat dibuka dengan menghubungkan ke situs melalui FTP dan mengikuti jalur berikut (saya tidak akan merekomendasikan mengedit file template dari area admin WordPress, karena tidak ada cara untuk mengambil langkah mundur, sebisa mungkin, misalnya,).

/wp-content/themes

Faktanya, pada toolbar untuk pengembang di bidang gaya CSS, Anda bahkan akan menemukan baris di mana aturan yang diinginkan ditulis dalam file gaya. Dalam kasus saya itu adalah 281 baris. Oleh karena itu, setelah membuka style.css di Notepad (saya menetapkannya sebagai editor default untuk semua file yang muncul di mesin situs), saya segera pindah ke baris ini.

Dan tepat di bawahnya saya menambahkan beberapa aturan lagi dengan (aturan ini bertanggung jawab untuk mengubah warna latar belakang bilah menu kanan ketika kursor mouse berada tepat di atasnya - ini membuat menu lebih "hidup" atau semacamnya) dan dengan yang ke-n -kelas semu anak yang disebutkan di atas. Jika kita sudah membicarakan tentang hovver (lihat tautan di atas), maka kita akan membicarakan tentang nth-child sekarang. Jika Anda memperhatikan bahwa parameter 2n ditulis dalam tanda kurung untuk kelas semu ini.

Anak ke-n (2n)

Secara umum nilai anak ke-n kelas semu ini diberikan dengan menggunakan ekspresi: sebuah+b, di mana a dan b adalah bilangan bulat, dan n adalah penghitung yang mengambil nilai bilangan bulat dari 0 dan lebih banyak: 0,1,2,3... Dalam kasus kami, saat mengubah penghitung n, kami akan menerima angka 0 , 2, 4, 6, dst. Ini berarti bahwa properti yang ditentukan untuk kelas semu ini (dalam kasus kami, ini adalah aturan untuk menyetel latar belakang baris daftar menggunakan ) ada dalam daftar di #E4F2FA.

Heksadesimal ini adalah yang paling umum. Untuk mencari warna yang cocok, saya menggunakan program Contrast Analyzer 2.0 yang dijelaskan pada link yang tersedia. Ini memungkinkan Anda menangkap warna dari layar dan mencocokkan nadanya yang lebih terang, itulah yang saya lakukan.

Untuk latar belakang bilah menu, saat mengarahkan kursor mouse ke atasnya (pseudo-class hover), saya memilih warna yang lebih terang dari baris yang sama.

Contoh lain penggunaan anak ke-n

Jika Anda ingin mengubah latar belakang atau memengaruhi tampilan (misalnya, menambahkan padding, memperbesar font, atau melakukan hal lain yang lebih tidak senonoh), gunakan ekspresi. Anda dapat memeriksanya dengan mengganti n bilangan bulat yang dimulai dari nol, Anda hanya akan mendapatkan bilangan ganjil. Anda dapat menggunakan kedua opsi sekaligus (untuk baris genap dan ganjil pada daftar, tabel, atau apa pun).

Lagi beberapa contoh penggunaan anak ke-n untuk menyorot berbagai baris daftar, tabel, dan elemen serupa:

1. Untuk meniru elemen ganjil, Anda dapat menggunakan anak ke-n (ganjil) alih-alih ekspresi yang ditunjukkan di atas, dan anak ke-n (genap) untuk elemen genap.
2. Bagaimana jika Anda hanya ingin mengubah baris keempat? kemudian tambahkan ke aturan CSS kelas semu anak ke-n (4) yang dipisahkan oleh titik dua.
3. Apakah Anda ingin mengubah tampilan garis mulai dari yang kesembilan? Tidak masalah - anak ke-n (n+9).
4. Sebaliknya, jika Anda ingin memilih sembilan elemen pertama saja, gunakan konstruksi anak ke-n (-n+9).
5. Jika Anda ingin memilih elemen dari kesembilan hingga kedelapan belas, tambahkan senyawa pseudo-class:nth-child (n+9):nth-child (-n+18). Logika murni.
6. Apakah Anda ingin melakukan hal yang sama seperti pada paragraf sebelumnya, tetapi hanya menyorot baris genap dalam rentang ini? Tidak masalah - :n-anak (n+9):n-anak (-n+18):n-anak (genap).

Nah, di situlah tempatnya. Hal itu ternyata bisa sangat berguna. Bagaimanapun, itu berguna bagi saya.

Semoga beruntung untukmu! Sampai jumpa lagi di halaman situs blog

Anda mungkin tertarik

Pemilih kelas semu dan elemen semu dalam CSS (hover, first-child, first-line, dan lainnya), hubungan antara tag kode Html
Tampilan (blok, tidak ada, sebaris) dalam CSS - mengatur jenis tampilan elemen Html pada halaman web
Properti CSS dekorasi teks, perataan vertikal, perataan teks, indentasi teks untuk mendekorasi teks dalam Html
Gaya daftar (jenis, gambar, posisi) - Aturan Css untuk menyesuaikan tampilan daftar dalam kode Html
Cara menemukan dan menghapus garis gaya yang tidak digunakan (pemilih tambahan) di file CSS situs Anda
Posisi (absolut, relatif dan tetap) - cara memposisikan elemen Html di CSS (aturan kiri, kanan, atas dan bawah) Gaya berbeda untuk tautan internal dan eksternal melalui CSS
Prioritas dalam Css dan peningkatannya karena Penting, kombinasi dan pengelompokan penyeleksi, gaya pengguna dan penulis
Aturan Font (Berat, Keluarga, Ukuran, Gaya) dan Tinggi Garis untuk menata font di CSS
Float dan clear di CSS - alat tata letak blok
Untuk apa CSS, bagaimana menghubungkan cascading style sheet ke dokumen Html dan sintaks dasar bahasa ini
Pemilih tag, kelas, Id dan universal, serta pemilih atribut dalam CSS modern

- 4,7 dari 5 berdasarkan 6 suara

Saat membuat halaman web, seringkali perlu untuk merepresentasikan beberapa konten halaman dalam bentuk tabel.

Terkadang tabel digunakan untuk membuat struktur halaman. Pendekatan ini tidak sepenuhnya benar, karena tabel pada awalnya tidak dimaksudkan untuk memposisikan elemen halaman.

Untuk tujuan ini, yang terbaik adalah menggunakan alat CSS. Namun dalam beberapa kasus, tabel sangat diperlukan dan nyaman untuk menyajikan informasi.

Tag bertanggung jawab untuk membuat tabel dalam HTML

Ada atribut lain yang dirancang untuk menyelaraskan isi sel:

valign – ini menyelaraskan isi sel secara vertikal.

Memiliki arti sebagai berikut:

valign="top" – menyelaraskan konten sel ke tepi atas;

valign="bottom" – menyelaraskan konten sel ke tepi bawah;

valign="middle" – perataan di tengah sel;

valign="baseline" – menyelaraskan isi sel di sepanjang garis dasar.

Mari tambahkan atribut ini ke masing-masing dari 4 sel kita.

Tabel kami akan terlihat seperti ini:

Hal terakhir yang perlu kita bahas dalam tutorial ini adalah menggabungkan sel tabel. Untuk menggabungkan beberapa sel dalam satu baris, terdapat atribut colspan="" di mana jumlah sel yang perlu digabungkan ditunjukkan dalam tanda kutip.

Dari penulis: CSS memiliki penyeleksi untuk menemukan elemen berdasarkan posisinya di pohon dokumen. Mereka disebut kelas semu indeks karena mereka melihat posisi elemen, bukan tipe, atribut, atau ID-nya. Totalnya ada lima.

:anak pertama dan :anak terakhir

Seperti yang bisa Anda tebak dari namanya, kelas semu :first-child dan :last-child memilih anak pertama dan terakhir dalam sebuah node (elemen). Seperti kelas semu lainnya, :first-child dan :last-child memiliki efek samping minimal saat menggunakan penyeleksi sederhana.

Perhatikan HTML dan CSS di bawah ini:

Daftar buah-buahan

• Apel
• Pisang
• Bluberi
• Jeruk
• Stroberi

Tangkapan layar di bawah menunjukkan hasilnya.

Header h2 dan li pertama berwarna merah muda karena:first-child tidak terikat pada elemen tertentu. Tag h2 adalah anak pertama dari tag body, dan li adalah anak pertama dari elemen ul. Tetapi mengapa elemen li yang tersisa berwarna hijau? Karena:last-child juga tidak terikat pada elemen tertentu, dan ul merupakan elemen anak terakhir dalam tag body. Faktanya, dalam gaya di atas kami menulis *:anak pertama dan *:anak terakhir.

Menambahkan pemilih sederhana ke :first-child dan :last-child membuatnya lebih spesifik. Mari batasi pilihan kita hanya pada item daftar. Ganti :anak pertama dengan li:anak pertama dan :anak terakhir dengan li:anak terakhir. Tangkapan layar di bawah menunjukkan hasilnya.

:nth-child() dan :nth-last-child()

Bukan ide yang buruk untuk dapat memilih elemen anak pertama dan terakhir dalam sebuah dokumen. Bagaimana jika Anda perlu memilih elemen genap atau ganjil? Mungkin kita perlu memilih elemen keenam di pohon, atau menerapkan gaya ke setiap elemen turunan ketiga. Pseudo-classes:nth-child() dan:nth-last-child() akan membantu kita di sini.

Seperti :not, :nth-child() dan :nth-last-child() juga merupakan kelas semu yang fungsional. Mereka mengambil satu argumen, yang harusnya:

kata kunci ganjil;

kata kunci genap;

nilai integer tipe 2 atau 8;

argumen dalam bentuk An+B, dengan A adalah langkahnya, B adalah offsetnya, dan n adalah variabel bilangan bulat positif.

Argumen terakhir sedikit lebih rumit dibandingkan argumen lainnya. Kita akan melihatnya nanti.

Apa perbedaan antara :nth-child() dan :nth-last-child()? Titik awalnya berbeda: :nth-child() menghitung maju, dan :nth-last-child() menghitung mundur. Indeks CSS menggunakan bilangan asli dan dimulai dari 1, bukan 0.

Dengan menggunakan pseudo-classes:nth-child() dan:nth-last-child() akan lebih mudah untuk membuat pola bergantian. Tabel bergaris adalah kasus penggunaan yang sempurna. CSS di bawah ini memberikan latar belakang abu-abu kebiruan pada baris genap pada tabel, hasilnya dapat dilihat pada tangkapan layar di bawah ini:

tr:anak ke-n(genap) ( latar belakang: rgba(96, 125, 139, 0.1); )

Jika Anda beralih dari:anak ke-n ke:anak terakhir ke-n, bilah akan terbalik karena penghitungan dimulai dari bawah. Lihat tangkapan layar di bawah.

Apakah Anda menginginkan sesuatu yang lebih kompleks, dengan argumen yang lebih kompleks? Mari kita buat dokumen dengan 20 elemen seperti yang ditunjukkan di bawah ini.

Menggunakan :nth-child() dan :nth-last-child() Anda dapat memilih satu elemen tertentu. Anda dapat memilih semua elemen turunan setelah posisi tertentu, atau Anda dapat memilih elemen dengan kelipatan offset. Mari kita ubah latar belakang elemen keenam:

Item:anak ke-n(6) ( latar belakang: #e91e63; )

Sekali lagi, A adalah langkah. Ini adalah faktor untuk n yang dimulai dari 1. Artinya, jika A = 3, maka 3n akan memilih elemen ketiga, keenam, dan kesembilan, dan seterusnya. Inilah yang dapat dilihat pada gambar di bawah.

Di sini segalanya menjadi sedikit lebih menarik. Menggunakan :nth-child() dan :nth-last-child() Anda dapat memilih semua elemen setelah titik tertentu. Mari kita pilih semua elemen kecuali tujuh elemen pertama:

Item:anak ke-n(n+8) ( latar belakang: #e91e63; )

Tidak ada langkah yang ditentukan di sini. Hasilnya, n+8 memilih semua elemen dari n, dimulai dari elemen kedelapan. Lihat tangkapan layar di bawah.

Catatan: offset negatif

Nilai dan rentang negatif juga valid. Entri seperti:nth-child(-n+8) membalikkan seleksi dan memilih delapan elemen pertama.

Dengan menggunakan offset dan langkah, Anda dapat memilih setiap elemen ketiga, dimulai dengan elemen kelima:

Item:anak ke-n(3n+5) ( latar belakang: #e91e63; )

Hasil.

hanya anak

Kelas semu anak tunggal memilih sebuah elemen hanya jika elemen tersebut merupakan satu-satunya elemen anak. Di bawah ini adalah dua daftar poin. Yang pertama memiliki satu elemen, yang kedua memiliki tiga:

• apel

• Oranye
• pisang
• Frambos

Pemilih li:only-child(color: #9c27b0;) akan memilih

:kosong

Anda dapat menggunakan kelas semu :empty untuk memilih elemen yang tidak memiliki turunan. Kelas semu: kosong berbicara sendiri (kosong dari bahasa Inggris “kosong”). Untuk disertakan dalam pilihan:empty, elemen harus benar-benar kosong, tidak boleh ada spasi. Artinya, ia masuk ke dalam sampel, tetapi ternyata tidak.

Terkadang editor WYSIWYG memasukkan tag p kosong ke dalam konten Anda. Anda dapat menggunakan :empty dan :not untuk mencegah gaya diterapkan ke elemen ini. Misalnya p:tidak(:kosong).

Memilih elemen dari tipe tertentu berdasarkan indeksnya

Kelas semu yang dijelaskan di bagian sebelumnya memilih elemen jika mereka menempati posisi tertentu di pohon dokumen. Misalnya, p:nth-last-child(2) akan memilih semua tag p sebelum tag terakhir di dalam blok induk.

Di bagian ini, kita akan berbicara tentang kelas semu indeks yang diketik. Kelas semu ini juga memilih elemen berdasarkan nilai indeks, tetapi pemilihannya terbatas pada tipe tertentu. Misalnya, Anda perlu memilih tag p kelima atau bahkan tag h2.

Ada lima kelas semu seperti itu, yang namanya sangat berlawanan dengan kelas semu yang tidak diketik:

tipe terakhir ke-n()

Ada garis tipis antara mereka dan kelas semu indeks anak. Entri p:nth-child(5) hanya menemukan tag kelima p, sedangkan entri p:nth-of-type(5) menemukan semua tag p dan memilih tag kelima.

Mari buat dokumen lain. Ini juga memiliki 20 elemen, hanya beberapa yang merupakan tag p dan lainnya adalah div. tag p dengan sudut membulat, lihat gambar di bawah.

Spesifikasi CSS memberikan kemungkinan tak terbatas untuk mendesain tabel. Secara default, tabel dan sel tabel tidak memiliki batas atau latar belakang yang terlihat, dan sel dalam tabel tidak berdekatan satu sama lain.

Lebar sel tabel ditentukan oleh lebar isinya, sehingga lebar kolom tabel bisa berbeda-beda. Tinggi semua sel dalam satu baris adalah sama dan ditentukan oleh tinggi sel tertinggi.

Memformat tabel

1. Batas tabel

Secara default, tabel dan sel di dalamnya ditampilkan di browser tanpa batas yang terlihat. Batas Tabel ditentukan oleh properti perbatasan:

Tabel ( border-collapse: collaps; /*menghapus spasi kosong antar sel*/ border: 1px abu-abu solid; /*mengatur batas luar tabel menjadi warna abu-abu dengan ketebalan 1px*/ )

Batas sel header setiap kolom ditentukan untuk elemen ke-th:

Th (batas: 1px abu-abu solid;)

Batas Sel badan tabel ditentukan untuk elemen td:

Td (batas: 1px abu-abu solid;)

Ketebalan batas sel yang berdekatan tidak menjadi dua kali lipat, sehingga Anda dapat mengatur batas untuk seluruh tabel dengan cara berikut:

Th, td (batas: 1px abu-abu solid;)

Anda dapat menyorot batas luar tabel dengan menambah lebarnya:

Tabel (batas: 3px abu-abu solid;)

Batasan dapat ditetapkan sebagian:

/* mengatur batas luar abu-abu dengan ketebalan 3px untuk tabel */ tabel (batas atas: 3px abu-abu solid; ) /* menetapkan batas abu-abu dengan ketebalan 1px untuk sel badan tabel */ td (batas bawah: 1px solid abu-abu;)

Anda dapat membaca lebih lanjut tentang properti perbatasan.

2. Cara mengatur lebar dan tinggi meja

Bawaan lebar dan tinggi meja ditentukan oleh isi selnya. Jika lebarnya tidak ditentukan, maka akan sama dengan lebar baris (baris) terlebar.

Lebar tabel dan kolom diatur menggunakan properti lebar. Jika tabel (lebar: 100%;) ditentukan untuk sebuah tabel, maka lebar tabel akan sama dengan lebar blok penampung di mana tabel tersebut berada.

Lebar tabel dan kolom biasanya ditentukan dalam px atau %, misalnya:

Tabel (lebar: 600px;) th (lebar: 20%;) td:anak pertama (lebar: 30%;)

Tinggi meja tidak ditentukan. Tinggi baris tabel dapat dimanipulasi dengan menambahkan padding atas dan bawah ke elemen