Tata Letak Tableless Membuka Batas Desain Baru
Ada banyak alasan untuk tidak menggunakan tabel untuk tata letak . Salah satu alasan paling sering orang memberi untuk terus menggunakannya adalah karena sulit untuk melakukan tata letak dengan CSS. Meskipun CSS scripting memang memerlukan kurva belajar, ketika Anda memahami bagaimana melakukan tata letak CSS, Anda mungkin terkejut melihat betapa mudahnya dapat. Dan setelah Anda belajar, Anda akan membahas alasan paling umum kedua yang diberikan orang-orang untuk tidak menggunakan CSS— "Lebih cepat menulis tabel." Lebih cepat karena Anda tahu tabel, tetapi setelah Anda belajar CSS, Anda mungkin sama cepatnya dengan itu.
Dukungan Browser Pemosisian CSS
Posisi CSS didukung dengan baik di semua browser modern . Kecuali Anda membangun situs untuk Netscape 4 atau Internet Explorer 4, pembaca Anda tidak akan kesulitan melihat halaman Web yang diposisikan CSS.
Memikirkan Kembali Bagaimana Anda Membangun Halaman
Ketika Anda membangun situs menggunakan tabel, Anda harus berpikir dalam format tabel . Dengan kata lain, Anda berpikir dalam hal sel, baris, dan kolom. Halaman web Anda akan mencerminkan pendekatan ini. Ketika Anda pindah ke desain pemosisian CSS, Anda akan mulai memikirkan halaman Anda dalam hal konten, karena konten dapat ditempatkan di mana saja yang Anda inginkan dalam tata letak — bahkan berlapis di atas konten lain.
Situs web yang berbeda memiliki struktur yang berbeda. Untuk membangun halaman yang efektif, evaluasi struktur halaman yang diberikan sebelum Anda menetapkan konten untuk itu. Contoh halaman mungkin mencakup lima bagian berbeda:
- Header . Rumah untuk iklan banner, nama situs, tautan navigasi, judul artikel dan serta beberapa hal lainnya.
- Kolom kanan . Ini adalah sisi kanan halaman dengan kotak pencarian, iklan, kotak video, dan area belanja.
- Konten . Teks artikel, posting blog atau keranjang belanja — daging-dan-kentang halaman.
- Iklan inline . Iklan-iklan itu sebaris dalam isi.
- Footer . Navigasi bawah, informasi penulis, informasi hak cipta, iklan spanduk rendah, dan tautan terkait.
Daripada menempatkan kelima elemen tersebut dalam tabel, gunakan elemen pembagian HTML5 untuk menentukan bagian konten yang berbeda, lalu gunakan pemosisian CSS untuk menempatkan elemen konten di halaman.
Mengidentifikasi Bagian Konten Anda
Setelah Anda mendefinisikan area konten yang berbeda dari situs Anda, Anda perlu menuliskannya ke dalam HTML Anda. Meskipun Anda dapat, pada umumnya, menempatkan bagian Anda dalam urutan apa pun, ada baiknya untuk menempatkan bagian terpenting dari halaman Anda terlebih dahulu. Pendekatan ini juga akan membantu optimisasi mesin pencari.
Untuk menunjukkan posisi, bayangkan halaman dengan tiga kolom tetapi tidak ada header atau footer. Anda dapat menggunakan pemosisian untuk membuat jenis tata letak apa pun yang Anda suka.
Untuk tata letak tiga kolom, tentukan tiga bagian: kolom kiri, kolom kanan, dan konten.
Bagian ini akan dipakai menggunakan elemen ARTIKEL untuk konten dan dua elemen SECTION untuk dua kolom. Semuanya juga akan memiliki atribut yang mengidentifikasinya. Ketika Anda menggunakan atribut id, Anda harus menganggap nama unik untuk setiap id.
Memposisikan Konten
Menggunakan CSS, tentukan posisi untuk elemen ID Anda. Simpan informasi posisi Anda dalam gaya panggilan seperti ini:
#content {
}
Konten dalam elemen-elemen ini akan mengambil ruang sebanyak mungkin, yaitu 100 persen dari lebar lokasi saat ini atau halaman. Untuk mempengaruhi lokasi bagian tanpa memaksanya ke lebar tetap, ganti padding atau properti margin.
Untuk tata letak ini, tetapkan dua kolom ke lebar tetap dan kemudian tetapkan posisinya menjadi mutlak, sehingga tidak akan terpengaruh oleh tempat mereka ditemukan di HTML.
# kiri-kolom {
posisi: absolut;
kiri: 0;
lebar: 150px;
margin-left: 10px;
margin atas: 20px;
warna: # 000000;
padding: 3px;
}
# kolom kanan {
posisi: absolut;
kiri: 80%;
atas: 20px;
width: 140px;
padding-kiri: 10px;
z-indeks: 3;
warna: # 000000;
padding: 3px;
}
Kemudian untuk area konten, atur margin di sisi kanan dan kiri sehingga konten tidak akan tumpang tindih dengan dua kolom luar.
#content {
atas: 0px;
margin: 0px 25% 0 165px;
padding: 3px;
warna: # 000000;
}
Menentukan halaman Anda menggunakan CSS dan bukan pada tabel HTML membutuhkan keterampilan teknis yang lebih sedikit, tetapi hasil dari desain yang lebih fleksibel dan responsif dan lebih mudah dalam membuat penyesuaian struktural ke halaman Anda nanti.