Tujuan pelajaran: Keakraban dengan properti tabel dan prinsip tata letak tabel CSS

Mari kita lihat properti tabel CSS dasar

berbatasan

Sebuah properti dipertimbangkan dalam satu dan mencakup beberapa properti pada saat yang sama:

• GAYA BATAS
• LEBAR BATAS
• BATAS-WARNA

Ada juga aturan kolektif:

table.collapse (border-collapse: collapse;) table.separate (border-collapse: terpisah;)

Hasil:

lebar dan tinggi
(tinggi dan lebar meja)

Nilai:

Contoh:

perataan teks
(kesejajaran horizontal)

Nilai:

• tengah (terpusat)
• kiri (rata kiri)
• kanan (rata kanan)
• membenarkan (lebar)

vertikal-align
(penjajaran vertikal)

Nilai:

• dasar (baseline)
• sub (sebagai subindeks)
• super (sebagai superskrip)
• atas (atas)
• tengah (tengah)
• bawah (bawah)
• % (dari ketinggian spasi baris)

Contoh:

lapisan
(pelapis meja)

latar belakang-warna (latar belakang)
warna (warna teks)

Tata letak tabel CSS

Karena banyaknya properti tabel dan variasi dalam desainnya, tabel telah lama menjadi standar untuk tata letak halaman web. Jika Anda membuat batas tabel tidak terlihat, maka Anda dapat menggunakan sel individualnya sebagai blok halaman yang terpisah: header, menu, footer, dll.

Tapi ini tidak sepenuhnya benar, karena setiap tag memiliki tujuannya sendiri, dan tabel tidak seharusnya berfungsi untuk tata letak halaman. Namun, kurangnya alternatif mendorong para desainer untuk menggunakan metode tata letak jenis ini.

Sekarang ada cara lain - menggunakan lapisan, yang secara bertahap menggantikan tabel dalam pekerjaan seperti ini dengan halaman web. Namun, bahkan saat ini, beberapa desainer berhasil menggunakan tata letak tabel.

Tata letak spreadsheet dua kolom

Salah satu metode tata letak yang paling umum adalah dua kolom, mis. halaman dibagi menjadi dua bagian.

Biasanya sisi kiri adalah menu dan elemen tambahan, dan sisi kanan adalah yang utama untuk konten utama.

Dalam hal ini, lebar sisi kiri diatur ke nilai tertentu, mis. keras, dan sisi kanan mengambil sisa halaman.

Dalam hal ini, Anda perlu mengatur lebar total seluruh tabel (tag tabel) dalam persen melalui properti lebar (100%), dan untuk sel pertama (tag td) atur lebar (juga properti lebar) dalam piksel atau persen.

Contoh: atur bingkai utama halaman dalam dua kolom: yang pertama - dengan ukuran tetap, yang kedua - untuk sisa area browser. Jalankan tugas menggunakan gaya CSS ()

Pertunjukan:

</ kepala> <tubuh> <tabel id = "maket" cellpacing = "0"> <tr> <td id = "kiri"> 1</ td> <td id = "kanan"> 2</ td> </ tr> </ meja> ...

1

2

...

Hasil:

Sekarang mari kita coba untuk memisahkan dua kolom tabel secara visual satu sama lain.

Contoh: mengatur latar belakang sel yang berbeda (untuk memisahkan dua kolom satu sama lain) dan mengatur jarak antar kolom (pemisah)

Pertunjukan:
Mari tambahkan properti gaya baru:

/ * untuk sel kiri * / td # kiri (lebar: 200px; latar belakang: #ccc; batas: 1px hitam pekat; / * tandai batas untuk sementara * /) / * untuk sel kanan * / td # kanan (latar belakang: # fc3; perbatasan: 1px hitam pekat; / * untuk sementara menunjukkan batas * /) / * untuk pemisah * / #razdel (lebar: 10px; / * Spasi antar kolom * /)

Bersama:

</ kepala> <tubuh> <tabel id = "maket" cellpacing = "0"> <tr> <td id = "kiri"> 1</ td> <td id = "razdel"> <td id = "kanan"> 2</ td> </ tr> </ meja>

1

2

Sel baru telah ditambahkan untuk pemisah.
Hasil:

Anda juga dapat membuat pemisah antar kolom menjadi kurang menonjol. Untuk melakukan ini, kita akan menggunakan gaya perbatasan.

Contoh: buat pemisah antara kolom tabel menggunakan batas putus-putus dari sel yang berdekatan

Pertunjukan:
Mari tambahkan properti perbatasan baru untuk sel:

/ * untuk sel kiri * / td # kiri (lebar: 200px; latar belakang: #ccc; / * Warna latar belakang kolom kiri * / / * baru * / batas-kanan: 1px putus-putus # 000; / * Opsi batas putus-putus kanan * / )

Bersama:

</ kepala> <tubuh> <tabel id = "maket" cellpacing = "0"> <tr> <td id = "kiri"> 1</ td> <td id = "kanan"> 2</ td> </ tr> </ meja>

1

2

Hasil:

Tata letak spreadsheet tiga kolom

Ada konsep tata letak tetap atau "cair".

CSS tata letak tetap

• Menggunakan tata letak tetap lebar seluruh tabel diatur dalam piksel, lalu, terlepas dari resolusi monitor dan jendela browser, tabel akan selalu memiliki lebar yang sama.
• Pada kasus ini lebar kolom yang tersisa juga harus diperbaiki.
• Dimungkinkan untuk tidak menentukan lebar satu sel, maka itu akan dihitung secara otomatis berdasarkan dimensi sel yang tersisa dan seluruh tabel.

Contoh: buat template halaman dengan tiga kolom. Gunakan tata letak tabel tetap:

• kolom kiri - 150 piksel;
• kolom tengah - 400 piksel;

Pertunjukan:

</ kepala> <tubuh> <tabel id = "maket" cellpacing = "0"> <tr> <td id = "kiri"> 1</ td> <td id = "pusat"> 2</ td> <td id = "kanan"> 3</ td> </ tr> </ meja>

1

2

3

Hasil:

Mockup karet

• Lebar Meja saat menggunakan desain "karet" atur dalam% dari lebar jendela browser... Itu. ketika jendela browser berubah, ukuran tabel juga berubah.
• Lebar semua sel bisa dipasang dalam persen.
• Pilihan kedua adalah ketika lebar beberapa sel didirikan dalam persen, A beberapa dalam piksel.

Penting: Jumlah lebar semua kolom harus 100%, terlepas dari lebar tabel.

Contoh:

• kolom kiri - 20%;
• kolom tengah - 40%;
• kolom kanan - 40%;

Atur latar belakang untuk kolom dan pisahkan kolom secara visual dengan batas.

Pertunjukan:

</ kepala> <tubuh> <tabel id = "maket" cellpacing = "0"> <tr> <td id = "kiri"> 1</ td> <td id = "pusat"> 2</ td> <td id = "kanan"> 3</ td> </ tr> </ meja>

1

2

3

Hasil:

Pertimbangkan opsi kedua, ketika lebar kolom tengah dipilih secara otomatis oleh browser; contohnya adalah gambar :

Contoh: buat template halaman dengan tiga kolom. Gunakan tata letak tabel yang cair:

• kolom kiri - 150 piksel;
• kolom tengah - 40%;
• kolom kanan - 200 piksel;

Atur latar belakang untuk kolom dan pisahkan kolom secara visual dengan batas.

Pertunjukan:

</ kepala> <tubuh> <tabel id = "maket" cellpacing = "0"> <tr> <td id = "kiri"> 1</ td> <td id = "pusat"> 2</ td> <td id = "kanan"> 3</ td> </ tr> </ meja>

1

2

3

Hasil:
Hasilnya akan kurang lebih sama, hanya "peregangan" yang akan terjadi karena kolom tengah.

Menggunakan tabel bersarang dalam tata letak yang lancar

Jika lebar dua kolom diatur dalam persentase dan yang ketiga dalam piksel, Anda tidak akan bisa bertahan dengan satu tabel. Jadi, jika lebar seluruh tabel adalah 100 persen, kolom pertama adalah 200 piksel, dan kolom yang tersisa adalah 20 persen, maka perhitungan sederhana menunjukkan bahwa ukuran kolom pertama adalah 60 persen. Dalam hal ini, browser tidak akan menerima nilai yang ditentukan dalam piksel, dan ukurannya akan diatur dalam persen.

• Tabel asli dibuat dengan dua sel. Lebar tabel diatur sebagai persentase.
• Untuk sel kiri(kolom pertama) lebar diatur dalam piksel.
• Lebar sel kanan(dasar untuk pembicara lain) tidak ditentukan... Tabel kedua disisipkan di dalam sel ini, juga terdiri dari dua sel.
• Lebar sel tabel bersarang ditetapkan sebagai persentase..
• Lebar meja bagian dalam harus diatur ke 100 persen sehingga tabel ini mengambil semua ruang kosong di tabel luar.
• Lebar kolom tengah dan kanan relatif terhadap lebar sel, bukan terhadap tabel luar secara keseluruhan.

Contoh: buat template halaman dengan tiga kolom. Gunakan tata letak yang lancar dengan tabel bersarang:

• kolom kiri - 150 piksel;
• kolom tengah - 60%;
• kolom kanan - 40%;

Mengatur latar belakang untuk kolom.

Pertunjukan:

1 2 3 Atribut tag cellpadding dan cellpacing diperlukan di sini, sehingga tidak ada "celah" di antara tabel. Hasil: Menentukan jarak antara batas sel dalam tabel. Atribut border-spacing tidak berfungsi saat tabel memiliki border-collapse yang disetel untuk diciutkan. Sintaksis spasi batas: nilai [nilai] Argumen Satu nilai menetapkan jarak vertikal dan horizontal antara batas sel. Jika ada dua argumen, maka yang pertama mendefinisikan jarak horizontal, dan yang kedua mendefinisikan jarak vertikal. 1 2 3 4 Hasil dari contoh ini ditunjukkan pada Gambar. 1. Beras. 1. Menerapkan parameter border-spacing Catatan Jika tag parameter cellspacing ditambahkan, kemudian ketika menggunakan atribut gaya border-spacing tidak diperhitungkan dan nilai cellspacing diabaikan. Pengecualian untuk aturan ini adalah Internet Explorer, yang sama sekali tidak memahami properti border-spacing. Tabel border-collapse mengatur cara menampilkan batas di sekitar sel tabel. Parameter ini berperan ketika perbatasan diatur untuk sel, maka garis ketebalan ganda akan diperoleh di persimpangan sel. Menambahkan nilai keruntuhan memaksa browser untuk mengurai tempat-tempat seperti itu di tabel dan menghapus garis ganda di dalamnya. table-layout mendefinisikan bagaimana browser harus menghitung tinggi dan lebar sel tabel berdasarkan kontennya. border-spacing mengatur jarak antara batas sel dalam tabel. Atribut border-spacing tidak berfungsi saat tabel memiliki border-collapse yang disetel untuk diciutkan. CSS memungkinkan Anda untuk mengatur tidak hanya gaya batas tabel, tetapi juga gaya batas sel individual. Karena setiap sel memiliki batasnya sendiri, batas antara sel yang berdekatan menjadi dua kali lipat. Tetapi dimungkinkan untuk menggabungkan batas sel tetangga menjadi satu. Ada properti border-collapse untuk ini. Ini mengambil nilai-nilai: border-collapse: terpisah - setiap sel memiliki batasnya sendiri (default) border-collapse: runtuh - perbatasan umum border-collapse: mewarisi - nilai diambil dari elemen induk Misalnya, mari buat tabel dan atur bingkai untuk sel semua tabel yang akan ada di halaman. Pertama, jangan mengubah apa pun untuk melihat bagaimana tabel akan terlihat: Gaya: 1 2 3 4 5 6