Sekarang mari kita lihat cara menggunakan tata bahasa CSS untuk mempercantik tabel. Catatan: Kecuali ditentukan lain, sel -sel, sel -selpadding, dan nilai -nilai perbatasan tabel yang dimasukkan dalam contoh yang disebutkan dalam artikel ini adalah 0. Contoh 1: 1px Tabel
Banyak orang tertarik untuk membuat formulir 1px, sehingga mereka menemukan berbagai metode, yang bisa jauh lebih fleksibel saat digunakan dengan CSS. Jika Anda ingin membuat tabel 1x1 1px, cukup tentukan nilai perbatasan. Kami pertama -tama memasukkan meja 1x1 dengan Dreamweaver dengan lebar 50, dan kemudian menentukan batas: 1 teh padat di meja atau TD. Efek tabel yang dibuat adalah sebagai berikut:
Namun, sedikit lebih merepotkan untuk membuat tabel non-1x1 (seperti 2x2), karena jika Anda secara langsung mendefinisikan batas gaya TD: 1 teh padat, efek tampilan adalah sebagai berikut:
Anda akan menemukan bahwa kotak luar tabel adalah 1px, sedangkan bagian dalam menjadi 2px, yang disebabkan oleh superposisi. Untuk menyelesaikan masalah ini kita bisa melakukan ini:
Pertama-tama tentukan gaya untuk TD: Border:#CC0000 Solid; Border-Width: 0 1 1 0 , jadi tabel dinyatakan sebagai
Kemudian tentukan gaya untuk tabel :: Border:#cc0000 solid; perbatasan-lebar: 1 0 0 1 , sehingga Anda dapat membuatnya menjadi tabel 1px lengkap.
Contoh 2: 1px Tabel dengan perbatasan tebal
Garis kisi -kisi dalam tabel ini adalah 1px dan batas luar adalah 3px. Tidak sulit untuk melakukannya dengan dasar Contoh 1. Cukup modifikasi nilai lebar perbatasan.
Kode untuk gaya yang digunakan oleh tabel adalah: Border: Blue Solid; Border-Width: 3 2 2 3 , dan kode untuk gaya yang digunakan oleh TD adalah: Border: Blue Solid; Border-Width: 0 1 1 0 Contoh 3: Tabel kotak putus-putus
Praktek ini mirip dengan Contoh 1, dan gaya perbatasan diubah dari solid menjadi putus-putus. Kode untuk gaya yang digunakan dalam tabel adalah: Border: Black putus -putus; Perbatasan-lebar: 1 0 0 1 , dan kode untuk gaya yang digunakan dalam TD adalah: Border: Black putus-putus; Perbatasan-lebar: 0 1 1 0 Contoh 4: Tabel batas dan garis batas garis
Perhatikan bahwa piksel minimum bertitik adalah 2. Kode untuk gaya yang digunakan dalam tabel adalah: Border: Green putus-putus; lebar perbatasan: 2 0 0 2. Kode untuk gaya yang digunakan dalam TD adalah: Border: Green Bertubal; Batas-lebar: 0 2 2 0 Contoh 5: Tabel perbatasan garis ganda 5
Perhatikan bahwa piksel minimum garis ganda adalah 3. Kode untuk gaya yang digunakan dalam tabel adalah: Border: Teal 4 Dou . Kode untuk gaya yang digunakan dalam TD adalah: Border: Teal 1 Contoh Solid 6: Mulai Tabel Bingkai Luar
Kode untuk gaya yang digunakan oleh tabel adalah: Border: 3 Eartset , dan kode untuk gaya yang digunakan oleh TD adalah: Border: 1 Contoh Solid 7: Tabel Garis Besar Inset
Kode untuk gaya yang digunakan oleh tabel adalah: Border: 3 Inset , dan kode untuk gaya yang digunakan oleh TD adalah: Border: 1 Solid Contoh 8: Ridge Outer Frame Tabel
Kode untuk gaya yang digunakan oleh tabel adalah: Border:#ee0000 3 Ridge Kode untuk gaya yang digunakan oleh TD adalah: Border: 1 Solid
Sebelumnya Halaman 1 2 3 Halaman Berikutnya Baca teks lengkapnya