Padding di dalam sel tabel css

Data tabel- informasi yang dapat ditampilkan dalam tabel dan secara logis dibagi menjadi kolom dan baris. Tag HTML digunakan untuk menampilkan data tabular pada halaman web.

Di dalam tag

Dalam contoh ini, kami:

• Kami menetapkan bahwa tabel kami menempati 100% dari elemen induk, sel tabel menempati 25% dari elemen induk dan memiliki batas solid 1 piksel hijau, tinggi header dan sel data adalah 45px . Kami menghapus celah antar sel menggunakan properti border-collapse dengan nilai .
• Jadi, menggunakan elemen semu ::after kita menambahkan konten setelah setiap elemen pada melayang-layang. Pseudo-element ::after harus digunakan bersama dengan properti konten, berkat itu kami memasukkan elemen level blok yang memiliki warna latar belakang hutan hijau dan memiliki penentuan posisi mutlak.
• Pemosisian absolut di sini diperlukan untuk mengimbangi elemen relatif terhadap tepi yang ditentukan dari leluhurnya, sedangkan leluhur harus memiliki nilai posisi selain dari default - static , jika tidak, penghitungan akan relatif terhadap tepi yang ditentukan dari jendela browser, untuk ini alasan kami mengatur meja posisi relatif(relatif ).
• Kami mengatur properti atas untuk blok yang dihasilkan, yang menentukan arah offset elemen yang diposisikan dari tepi atas, dan properti bawah, yang menentukan arah offset elemen yang diposisikan dari tepi bawah. Kedua properti diatur ke 0 , sehingga blok akan sepenuhnya menempati elemen dari bawah dan atas tabel, lebar blok ini diatur ke 25%, nilai ini sesuai dengan nilai lebar sel itu sendiri.
• Dan properti terakhir yang kami tetapkan untuk blok ini: indeks-z dengan nilai "-1" menentukan urutan elemen yang diposisikan di sepanjang sumbu Z. Properti ini diperlukan agar teks berada di depan blok ini, dan bukan di belakangnya, jika Anda tidak menetapkan nilai kurang dari nol, maka blok akan menutup teks.

Hasil dari contoh kita:

Jika pada tahap studi ini proses pemosisian elemen tidak jelas bagi Anda, maka jangan berkecil hati, ini adalah topik yang sulit untuk dipahami, yang juga tidak kami pertimbangkan, tetapi kami pasti akan mempertimbangkannya di artikel berikutnya. buku teks " Elemen pemosisian dalam CSS".

Pertanyaan dan tugas tentang topik

Sebelum melanjutkan ke topik berikutnya, selesaikan tugas praktis:

Jika Anda mengalami kesulitan menyelesaikan latihan, Anda selalu dapat membuka contoh di jendela terpisah dan memeriksa halaman untuk melihat CSS apa yang digunakan.

2016-2020 Denis Bolshakov, Anda dapat mengirim komentar dan saran di situs ke [email protected]

Tabel itu sendiri terlihat agak "buruk", selain itu, browser menampilkan beberapa karakteristik tabel dengan caranya sendiri, khususnya, bingkai. Namun, kekurangan ini mudah diperbaiki menggunakan kekuatan gaya. Pada saat yang sama, alat untuk mendesain tabel sangat diperluas, yang memungkinkan Anda untuk berhasil memasukkan tabel ke dalam desain situs dan menyajikan data tabel dengan lebih jelas.

Warna latar belakang sel

Warna latar belakang semua sel tabel secara bersamaan diatur melalui properti latar belakang, yang diterapkan ke pemilih TABEL. Pada saat yang sama, Anda harus mengingat aturan untuk menggunakan gaya, khususnya, pewarisan properti elemen. Meskipun properti latar belakang tidak diwariskan, nilai latar belakang default untuk sel adalah transparent , mis. transparansi, sehingga efek mengisi latar belakang juga diperoleh untuk sel. Jika Anda menentukan warna untuk pemilih TD ​​atau TH bersamaan dengan TABLE, maka warna ini akan ditetapkan sebagai latar belakang sel (contoh 2.3).

Contoh 2.3. Warna latar belakang

Dalam contoh ini, kita mendapatkan warna latar belakang biru untuk sel (tag ) dan merah pada judul (tag ). Ini karena gaya untuk pemilih TH tidak ditentukan, jadi latar belakang induknya, dalam hal ini pemilih TABEL, "ditampilkan melalui". Dan warna untuk pemilih TD ​​ditentukan secara eksplisit, sehingga sel "diisi" dengan warna biru.

Hasil dari contoh ini ditunjukkan pada Gambar. 2.4.

Beras. 2.4. Mengubah warna latar belakang

Margin di dalam sel

Margin adalah jarak antara tepi isi sel dan batasnya. Biasanya, atribut cellpadding dari tag digunakan untuk tujuan ini.

Contoh 2.4. Bidang dalam tabel

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Dalam contoh ini, dengan mengelompokkan pemilih, bidang disetel secara bersamaan untuk pemilih TD ​​dan TH . Hasil dari contoh ditunjukkan pada Gambar. 2.5.

Beras. 2.5. Bidang dalam sel

Jika properti gaya padding diterapkan ke sel tabel, maka efek atribut cellpadding dari tag

Jarak antar sel

Untuk mengubah spasi antar sel, gunakan atribut cellpacing dari tag

Properti border-spacing hanya memiliki efek jika pemilih TABLE tidak memiliki border-collapse yang disetel untuk diciutkan (Contoh 2-5).

Contoh 2.5. Jarak antar batas sel

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Hasil dari contoh ini ditunjukkan pada Gambar. 2.6.

Beras. 2.6. Tampilan tabel saat menggunakan spasi batas

Internet Explorer hingga dan termasuk versi 7 tidak mendukung properti border-spacing, sehingga browser akan menggunakan nilai cellpacing default untuk tabel (biasanya 2px).

Saat Anda menambahkan properti penciutan batas dengan nilai penciutan ke pemilih TABEL, atribut penspasian sel diabaikan dan nilai penspasian batas disetel ke nol.

Perbatasan dan Bingkai

Secara default, tidak ada batas dalam tabel pada awalnya, dan ditambahkan menggunakan atribut batas dari tag

Menggunakan atribut penspasian sel

Diketahui bahwa atribut cellpacing dari tag

Perhatikan bahwa ini bukan cara yang sangat nyaman untuk membuat batas, karena memiliki cakupan yang terbatas. Dengan cara ini Anda hanya bisa mendapatkan kisi satu warna, dan bukan garis vertikal atau horizontal di tempat yang tepat.

Menerapkan properti perbatasan

Properti gaya batas secara bersamaan menetapkan warna batas, gayanya, dan lebar di sekitar elemen. Saat Anda ingin membuat garis terpisah di sisi yang berbeda, lebih baik menggunakan turunan - border-left , border-right , border-top dan border-bottom , properti ini masing-masing menentukan batas kiri, kanan, atas dan bawah.

Dengan menerapkan properti perbatasan ke pemilih TABEL, kami menambahkan perbatasan di sekitar tabel secara keseluruhan, dan ke pemilih TD ​​atau TH, kami menambahkan perbatasan di sekitar sel (Contoh 2-6).

Contoh 2.6. Menambahkan perbatasan ganda

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Contoh ini menggunakan batas ganda hitam di sekitar tabel itu sendiri dan batas putih solid di sekitar setiap sel. Hasil dari contoh ditunjukkan pada Gambar. 2.7.

Beras. 2.7. Perbatasan di sekitar meja dan sel

Perhatikan bahwa garis ganda terbentuk di mana sel-sel bergabung. Mereka diperoleh lagi karena aksi atribut spasi sel dari tag

Contoh 2.7. Membuat Bingkai Tunggal

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Contoh ini membuat garis hijau solid antara sel dan garis hitam di sekitar tabel. Semua batas dalam tabel memiliki ketebalan yang sama. Hasil dari contoh ditunjukkan pada Gambar. 2.8.

Beras. 2.8. Perbatasan di sekitar meja

Perataan isi sel

Secara default, teks dalam sel tabel rata kiri. Pengecualian untuk aturan ini adalah tag , ini mendefinisikan heading yang rata tengah. Untuk mengubah metode perataan, properti gaya perataan teks digunakan (contoh 2.8).

Contoh 2.8. Sejajarkan konten sel secara horizontal

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Dalam contoh ini, isi dari tag rata kiri, dan isi tag - di tengah. Hasil dari contoh ditunjukkan di bawah ini (Gambar 2.9).

Beras. 2.9. Menyejajarkan teks dalam sel

Perataan vertikal dalam sel selalu terpusat kecuali ditentukan lain. Ini tidak selalu nyaman, terutama untuk tabel yang tinggi isi selnya bervariasi. Dalam hal ini, perataan diatur ke tepi atas sel menggunakan properti perataan vertikal, seperti yang ditunjukkan pada Contoh 2-9.

Contoh 2.9. Sejajarkan konten sel secara vertikal

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Contoh ini mengatur tinggi header seperti 40 piksel dan perataan teks berada di bawah. Hasil dari contoh ditunjukkan pada Gambar. 2.10.

Beras. 2.10. Menyejajarkan teks dalam sel

sel kosong

Browser secara berbeda menampilkan sel yang tidak memiliki apa-apa di dalamnya. "Tidak ada" dalam hal ini berarti bahwa baik gambar maupun teks tidak ditambahkan di dalam sel, dan spasi tidak diperhitungkan. Secara alami, tampilan sel hanya berbeda jika batas diatur di sekitarnya. Saat menggunakan batas yang tidak terlihat, tampilan sel, apakah ada sesuatu di dalamnya atau tidak, adalah sama.

Peramban lama tidak menampilkan warna latar belakang sel tampilan kosong , jadi jika diperlukan untuk meninggalkan sel tanpa konten, tetapi menampilkan warna latar belakang, spasi tak terpisah () ditambahkan di dalam sel. Spasi tidak selalu tepat, terutama ketika Anda perlu mengatur tinggi sel ke 1-2 piksel, itulah sebabnya gambar transparan satu piksel menjadi tersebar luas. Memang, gambar seperti itu dapat diskalakan sesuai kebijaksanaan Anda, tetapi tidak ditampilkan di halaman web.

Untungnya, era gambar piksel tunggal dan semua jenis pengatur jarak berdasarkan itu telah berlalu. Peramban bekerja dengan benar dengan tabel tanpa kehadiran isi sel.

Untuk mengontrol tampilan sel kosong, properti sel kosong digunakan; saat disetel untuk disembunyikan, batas dan latar belakang dalam sel kosong tidak ditampilkan. Jika semua sel dalam satu baris kosong, maka seluruh baris disembunyikan. Sel dianggap kosong dalam kasus berikut:

• tidak ada simbol sama sekali;
• sel hanya berisi baris baru, karakter tab, atau spasi;
• nilai visibilitas disetel ke tersembunyi.

Menambahkan ruang tanpa putus diperlakukan sebagai konten yang terlihat, mis. sel tidak akan kosong lagi (contoh 2.10).

Contoh 2.10. sel kosong

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Tampilan tabel di browser Safari ditunjukkan pada gambar. 2.11a. Tabel yang sama di IE7 ditunjukkan pada Gambar. 2.11b.

sebuah. Di browser Safari, Firefox, Opera, IE8, IE9

b. Di browser IE7

Beras. 2.11. Tampilan tabel dengan sel kosong

Setiap tabel terdiri dari kolom dan baris.

Menandai membuat string, dan tag sel berturut-turut. Dengan demikian, berapa banyak sel yang dimasukkan dalam satu baris, akan ada begitu banyak kolom dalam tabel.

Menandai juga membuat sel. Bedanya dengan tag bahwa sel dibuat oleh tag adalah sel header: kontennya berada di tengah, dan jika berupa teks, browser menampilkannya dalam huruf tebal.

Konten sel yang dibuat oleh tag secara default terletak di bagian kirinya.

Menandai membuat header tabel, terletak di dalam tag

Judul tabel

sel pertama dari baris pertama	sel ke-2 dari baris ke-1
sel 1 baris ke-2	sel ke-2 dari baris ke-2

Penjajaran tabel. Perataan isi sel

Atribut align dari tag digunakan untuk menyelaraskan tabel.

Dengan atribut align Anda dapat menempatkan tabel di bagian kiri atau kanan (align= "left" dan align= "right" ) dari jendela browser ( elemen induk) atau dengan pusatnya (align= "center" ).

Perataan konten baris ( menandai

>

Seperti yang dapat Anda lihat dari contoh: dengan menentukan lebar salah satu sel kolom, dengan demikian Anda mengatur lebar seluruh kolom; dan dengan menentukan tinggi salah satu sel baris, Anda mengatur tinggi seluruh baris.

Tabel dan batas sel

Tabel dan setiap selnya memiliki batasnya sendiri, yang tidak terlihat secara default.

Atribut perbatasan dari tag

memungkinkan Anda untuk membuat batas terlihat dan mengatur ketebalannya. Ini akan menampilkan batas di sekitar tabel dan di sekitar setiap sel.

Ketebalan batas ( atau bingkai) ditentukan dalam piksel. Nilai dari atribut border adalah bilangan bulat positif. Jika atribut perbatasan ditentukan tanpa nilai, perbatasan akan setebal 1 piksel.

Ketebalan batas diatur hanya untuk tabel. Ketebalan batas di sekitar sel selalu 1 piksel ( atau hilang).

Secara default, batas ditampilkan dengan efek 3D dan berwarna hitam.

Atribut bordercolor mengatur warna border dan menghilangkan efek 3D. Atribut dapat digunakan untuk mengatur warna batas tabel ( menandai

), string ( menandai ) atau sel ( menandai

). Atribut bordercolor tidak didukung oleh semua browser dan oleh karena itu tidak disarankan. Untuk mengatur warna perbatasan, lebih baik menggunakan gaya ( itu sudah di css). Atribut perbatasan tidak ditentukan. Oleh karena itu, tidak ada batasan. Batas tabel setebal 3 piksel. Sel memiliki batas tebal 1 piksel! Tampilan batas sebagian Batas tabel dan bingkai di sekitar sel mungkin sebagian ditampilkan. atribut tag bingkai menentukan tempat menggambar batas tabel. Atribut aturan menentukan cara menampilkan batas sel. Bingkai "500px" = aturan "hsides"="cols" > Terpasang horisontal batas meja Dan perbatasan ditampilkan antar kolom Padding di dalam dan di luar sel Saat memformat tabel dalam HTML, untuk presentasi visual dari beberapa informasi dan persepsi yang nyaman, mungkin berguna untuk menggunakan indentasi di dalam dan di luar sel. Padding - dari batas sel ke kontennya, diatur oleh atribut cellpadding tag . Padding luar - jarak antara batas sel tetangga dan jarak dari batas sel ke batas tabel, ditentukan oleh atribut cellpacing dari tag . Nilai atribut adalah bilangan bulat positif yang menentukan jarak dalam piksel. Jarak dari konten sel ke perbatasan mereka adalah 10 piksel Jarak antar sel dan dari sel ke batas tabel adalah 25px Menggabungkan sel Saat mendesain dan memformat tabel dalam HTML, seringkali diperlukan untuk menggabungkan sel yang berdekatan. Dan jika kebutuhan seperti itu muncul, maka Anda harus menggunakan atribut colspan dan rowspan dari tag

. Atribut colspan menentukan jumlah sel yang akan digabungkan secara horizontal, dan atribut rowspan menetapkan jumlah sel yang akan digabungkan secara vertikal. Kedua atribut masuk akal jika tabel memiliki banyak baris. 1 2 3 4 1 2 3 4 Latar belakang meja. Latar belakang sel tabel Dalam HTML, dimungkinkan untuk mengatur latar belakang umum untuk seluruh tabel, serta latar belakang untuk satu sel yang dipilih. Atribut latar belakang dari tag menentukan gambar yang akan menjadi gambar latar belakang tabel. Nilai atribut menentukan alamat file dengan gambar - jalur absolut atau relatif ke file (). atribut tag bgcolor mengatur warna latar belakang tabel. Warna dapat diatur dengan dua cara () Dengan menggunakan atribut yang sama, Anda dapat mengatur gambar latar belakang dan warna latar belakang untuk sel tabel apa pun ( menandai , dan . Salah satunya dapat digunakan untuk mengubah beberapa properti dari satu atau lebih baris tabel: ini lagi-lagi merupakan penyelarasan isi sel dalam baris secara horizontal dan vertikal - masing-masing menggunakan atribut align dan valign; dan mengatur warna latar belakang sel menggunakan atribut bgcolor. Saat menggunakan tag ini, Anda harus menyadari beberapa nuansa yang hanya menentukan perbedaan di antara mereka. tag dan harus ditempatkan sebelum tag , tepat setelah tag tabel pembuka ). Pink tua adalah warna latar belakang tabel. Gambar latar belakang sel tunggal adalah langit! Ingat juga keberadaan atribut cols dari tag , yang memberi tahu browser jumlah kolom dalam tabel. Menggunakan atribut cols memungkinkan browser merender isi tabel lebih cepat. Pengeditan tabel Di bagian ini, kami akan mempertimbangkan tag yang digunakan saat mengedit beberapa elemen tabel sekaligus. Tag ini dapat dibagi menjadi dua kelompok. Grup pertama termasuk tag dan . Mereka hampir identik dan berfungsi untuk mengatur beberapa properti dan mengubah karakteristik satu atau lebih kolom tabel. Salah satu tag ini ditempatkan segera setelah tag . Sebut saja tag ini . Menggunakan atribut span dari tag tentukan jumlah kolom yang akan diterapkan atribut align , valign , atau width ( menyelaraskan isi sel kolom secara horizontal, vertikal atau mengatur lebar kolom). Jika atribut span dalam tag hilang, maka karakteristik satu - kolom pertama dari tabel akan diubah. Kedua kalinya Anda menggunakan tag properti ditetapkan sebagai berikut ( berikutnya - jika atribut span tidak ada) kolom tabel, dll. lebar "2" ="70px" > 1 2 3 4 5 1 2 3 4 5 Grup tag kedua juga mencakup tag yang hampir identik . Garis ditempatkan dalam tag disajikan di bagian atas tabel, dan baris terlampir dalam tag akan ditempatkan di bagian bawah tabel. Kedua tag hanya dapat diterapkan sekali dalam tabel yang sama. Menandai dapat digunakan beberapa kali dalam satu tag . "benar" bgcolor= "#00FF33" > 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 Rekomendasikan artikel lain Android Cara mendorong footer mengambang dengan benar ke bagian bawah halaman Masukkan spacer dan lawan Internet Explorer jendela Apa kepanjangan dari tag footer ini?