Tabel tidak diragukan lagi merupakan objek terpenting dalam produksi halaman web, karena biasanya halaman web mengandalkan tabel untuk tata letak dan pengorganisasian berbagai elemen. Ini secara langsung menentukan apakah halaman web itu indah dan apakah organisasi kontennya jelas. Namun banyak teman-teman yang sering mengabaikan pembelajaran tabel dan fokus pada lapisan lain, gambar, efek khusus, dll. Faktanya, penggunaan tabel yang wajar dapat dengan mudah mempercantik halaman Anda. Kita juga sering mendengar teman-teman mengeluh bahwa halaman yang dibuat oleh tabel itu monoton ., kasar, kurang variasi, dan saya sering mendengar orang bertanya bagaimana cara membuat border tabel 1 pixel. Faktanya, di Dreamweaver kami dapat menyempurnakan tabel Anda dengan sangat mudah, sehingga membuat halaman web Anda lebih indah dan halus. Kami akan memperkenalkan cara menyempurnakan tabel Anda di Dreamweaver dalam tiga aspek berikut.
1. Gunakan panel properti.
Gambar 1 Pertama kita perlu memahami parameter pada dua panel properti tabel: CellPad dan CellSpace. Seperti yang ditunjukkan pada Gambar 1, CellPad mengacu pada jarak antara dua sel dalam tabel, dan CellSpace mengacu pada jarak antara setiap sel dan konten di tengahnya. Dengan mengubah kedua parameter ini dan mencocokkan warna latar belakang, Anda dapat dengan mudah membuat batas tabel 1 piksel.
1. Gunakan panel Objek untuk menyisipkan tabel dan menentukan lebar, tinggi, baris dan kolom tabel. Perhatikan bahwa CellPad, CellSpace, dan Border default tabel yang disisipkan di Dreamweaver semuanya 0 saat ini. Seperti yang ditunjukkan pada Gambar 2;
Gambar 2
2. Tentukan Batas tabel di panel properti sebagai 0, CellPad sebagai 5 (ini akan menjaga 5 piksel antara konten dalam sel dan tepi sel sebagai 1 (ini akan menjaga 5 piksel di antara sel ) jarak 1 elemen). Seperti yang ditunjukkan pada Gambar 3;
Gambar 3
3. Atur warna latar belakang tabel ke #999999, seperti yang ditunjukkan pada Gambar 4;
4. Atur warna latar belakang sel ke #FFFFFF, seperti yang ditunjukkan pada Gambar 5;
Gambar 5
5. Pratinjau efeknya di browser. Kita dapat melihat bahwa tabel memiliki batas piksel, seperti yang ditunjukkan pada Gambar 6;
Gambar 62
: Menggunakan tabel nesting.
Masih prinsip utama di atas, kita dapat mencapai lebih banyak efek dengan menggunakan tabel bersarang.
1. Pertama, kita menggambar tabel dan mengatur nilai dan warna CellPad dan CellSpace tabel ini dengan mengacu pada contoh sebelumnya. Efek spesifiknya ditunjukkan pada Gambar 7;
Gambar 7 2. Selanjutnya gambar tabel satu baris dan satu kolom lainnya, atur CellPad=2, CellSpace=1. Parameter spesifiknya seperti yang ditunjukkan pada Gambar 8;
Gambar 8
3. Pindahkan tabel yang dibuat pada langkah pertama ke tabel pada langkah kedua. Tabel tersebut sekarang terlihat seperti Gambar 9;
Pada Gambar 9, kita melihat bahwa tabel ini memiliki bingkai luar dua garis dan bingkai dalam satu garis.
4. Ubah tabel pada langkah kedua menjadi satu baris dan dua kolom, dan tempatkan tabel pada langkah pertama di setiap sel. Tabel terakhir akan terlihat seperti Gambar 10;
Definisikan ulang
Gambar 10
, tentukan gaya .tdstyle secara terpisah, parameter spesifiknya seperti yang ditunjukkan pada Gambar 13;
Perhatikan di sini bahwa kita mendefinisikan lebar batas atas dan bawah menjadi 1 piksel, dan lebar batas kiri dan kanan menjadi 0.
4. Tabel efek akhir ditunjukkan pada Gambar 14;
(Gambar 15)
Saat ini, tabel menyajikan efek tiga dimensi.
6. Tabel di atas terasa kurang sempurna. Tidak ada pembatas di bagian kanan dan bawah seluruh tabel. Kita dapat mendefinisikan style.table1 lainnya, menentukan keempat sisi gaya ini menjadi 1 piksel, dan melampirkannya
