Tabel adalah jarak antar sel.

Jadi, kami telah mempelajari dengan Anda tindakan paling sederhana yang dapat dilakukan dengan batas tabel. Dan sekarang meja terlihat jauh lebih estetis. Namun, pengisian sel secara langsung bertumpu pada batas. Anda dapat dengan mudah memperbaikinya hanya dengan membuat indentasi sel di tabel HTML. Dan kemudian teks di dalam bingkai, di dalam sel, akan lebih mudah dibaca.

Untuk membuat indentasi dalam sel, gunakan atribut bantalan sel untuk tanda

... Namun, ada opsi lain yang lebih disukai: CSS.

Dalam hal ini, indentasi diatur menggunakan properti lapisan... Dengan bantuannya, tidak akan sulit untuk membuat indentasi jika perlu, yaitu, atas, kanan, bawah atau kiri, masing-masing menggunakan salah satu properti ini: padding-top, padding-kanan, padding-bottom dan padding-kiri.

Anda dapat mengatur berapa banyak piksel yang harus diindentasi. Berikut adalah contoh di mana margin bawah akan 20 piksel, dan sisanya akan menjadi 10 ... Seperti CSS-kode akan terlihat seperti ini:

Td (padding: 10px; padding-bottom: 20px;)

Dan kode gaya lengkap pada tahap ini:

Tabel (border: solid 1px blue; border-collapse: collapse;) td (border: solid 1px blue; padding: 10px; padding-bottom: 20px;)

Hasil di browser:

Lekukan antar sel

Biasanya, tugas yang terkait dengan pembuatan tabel dapat diselesaikan menggunakan tag, atribut, dan properti yang memungkinkan Anda membuat batas, indentasi dalam sel, dan juga mengatur latar belakang warna sel itu sendiri.

Indentasi dalam tabel tidak hanya di dalam sel. Mereka juga dapat hadir di antara sel-sel itu sendiri.

Ada dua cara untuk membuat indentasi antar sel:

menggunakan atribut jarak sel untuk tanda

menggunakan CSS-properti spasi-batas.

Harus ditekankan bahwa spasi-batas ditulis untuk tabel secara keseluruhan, sedangkan properti lapisan meresepkan langsung untuk sel.

Mari kita lihat sebuah contoh:

Tabel (border: solid 1px blue; border-collapse: terpisah; border-spacing: 5px;) td (border: solid 1px blue; padding: 10px; padding-bottom: 20px;)

Dan hasil yang dihasilkan:

Mari kita tetapkan segera bahwa Anda tidak boleh mencoba membuat indentasi seperti itu menggunakan perbatasan-runtuh: runtuh... Memang, saat menggunakan opsi ini, sel "menempel" satu sama lain.

Dan untuk memisahkannya satu sama lain, Anda harus menggunakan border-collapse: terpisah... Penting untuk dipahami bahwa nilai ini adalah default. Dan itu hanya digunakan untuk menunjukkan dengan jelas bagaimana masalah ini diselesaikan. Jika kita menghapus baris ini, maka hasil dalam bentuk sel yang terletak terpisah satu sama lain akan disimpan.

Spesifikasi CSS memberikan kemungkinan tak terbatas untuk desain tabel. Secara default, tabel dan sel tabel tidak memiliki batas dan latar belakang yang terlihat, dan sel di dalam tabel tidak berdekatan satu sama lain.

Lebar sel tabel ditentukan oleh lebar isinya, sehingga lebar kolom tabel bisa berbeda. Ketinggian semua sel dalam satu baris adalah sama dan ditentukan oleh ketinggian sel tertinggi.

Memformat tabel

1. Batas meja perbatasan

Tabel dan sel di dalamnya ditampilkan secara default di browser tanpa batas yang terlihat. Batas Tabel ditetapkan oleh properti perbatasan:

Tabel (border-collapse: collapse; / * hapus spasi kosong di antara sel * / batas: 1px abu-abu solid; / * atur batas luar 1px abu-abu untuk tabel * /)

Batas sel tajuk dari setiap kolom ditetapkan untuk elemen ke-:

Th (batas: 1px abu-abu pekat;)

Batas sel badan tabel diatur untuk elemen td:

Td (batas: 1px abu-abu pekat;)

Ketebalan batas sel yang berdekatan tidak digandakan, sehingga Anda dapat mengatur batas untuk seluruh tabel dengan cara berikut:

Th, td (batas: 1px abu-abu pekat;)

Batas luar tabel dapat dipilih dengan menambah lebarnya:

Tabel (batas: 3px abu-abu solid;)

Perbatasan dapat diatur sebagian:

/ * atur batas luar abu-abu 3px untuk tabel * / tabel (border-top: 3px solid grey;) / * atur batas abu-abu 1px untuk sel badan tabel * / td (border-bottom: 1px solid grey;)

Anda dapat membaca lebih lanjut tentang properti perbatasan.

2. Cara mengatur lebar dan tinggi meja

Bawaan lebar dan tinggi meja ditentukan oleh isi selnya. Jika lebarnya tidak ditentukan, maka itu akan sama dengan lebar baris (garis) terluas.

Tabel dan Lebar Kolom atur menggunakan properti lebar. Jika tabel (lebar: 100%;) ditentukan untuk sebuah tabel, maka lebar tabel akan sama dengan lebar blok wadah di mana ia berada.

Lebar tabel dan kolom biasanya ditentukan dalam px atau%, misalnya:

Tabel (lebar: 600px;) th (lebar: 20%;) td: anak pertama (lebar: 30%;)

Tinggi meja tidak diatur. Tinggi baris tabel dapat dimanipulasi dengan menambahkan padding atas dan bawah ke elemen

... Dalam praktiknya, ada kalanya Anda memerlukan pemformatan kolom khusus, yang dapat dilakukan dengan cara berikut:

menggunakan tag

Anda dapat mengatur latar belakang untuk sejumlah kolom;

menggunakan tabel td: anak pertama, tabel td: pemilih anak terakhir, Anda dapat menata kolom pertama atau terakhir dari tabel (kecuali untuk sel pertama dari header tabel);

menggunakan pemilih tabel td: nth-child (aturan pemilihan kolom), Anda dapat menata kolom apa pun dalam tabel.

Anda dapat membaca lebih lanjut tentang pemilih CSS.

5. Bagaimana cara menambahkan judul ke tabel

Anda dapat menambahkan judul ke tabel menggunakan tag

dan

... Tidak disarankan untuk memperbaiki ketinggian menggunakan properti ketinggian.

Th, td (padding: 10px 15px;)

3. Cara mengatur latar belakang tabel

Bawaan latar belakang meja dan selnya transparan. Jika halaman atau blok yang berisi tabel memiliki latar belakang, maka itu akan bersinar melalui tabel. Jika latar belakang diatur untuk tabel dan sel, maka hanya latar belakang sel yang akan terlihat di tempat di mana latar belakang tabel dan sel tumpang tindih. Latar belakang untuk tabel secara keseluruhan dan sel-selnya dapat berupa:
mengisi,
,
.

4. Kolom tabel

Model tabel CSS difokuskan terutama pada string (baris) yang dibentuk menggunakan tag

, dan menggunakan properti caption-side, dapat ditempatkan di depan atau di bawah tabel. Properti text-align digunakan untuk menyelaraskan teks judul secara horizontal. Diwarisi.

...

Tabel No. 1
Perusahaan	Q1	Q2	Q3	Q4

keterangan (caption-side: bottom; text-align: right; padding: 10px 0; font-size: 14px;)

Beras. 2. Contoh menampilkan header di bawah tabel

6. Cara menghilangkan celah antar bingkai sel

Secara default, batas sel tabel dipisahkan oleh spasi kecil. Jika Anda mengatur border-collapse: collapse untuk tabel, maka celah akan dihilangkan. Harta itu diwariskan.

Sintaksis

Tabel (border-collapse: collapse;)
Beras. 3. Contoh tabel dengan menggabungkan dan membagi batas sel

7. Cara menambah ruang antar batas sel

Menggunakan properti border-spacing, Anda dapat mengubah jarak antar batas sel. Properti ini berlaku untuk tabel secara keseluruhan. Diwarisi.

Sintaksis

Tabel (border-collapse: terpisah; border-spacing: 10px 20px;) tabel (border-collapse: terpisah; border-spacing: 10px;)
Beras. 4. Contoh tabel dengan celah yang meningkat di antara bingkai sel

8. Cara menyembunyikan sel tabel kosong

Properti sel kosong menyembunyikan atau menampilkan sel kosong. Hanya memengaruhi sel yang tidak berisi konten apa pun. Jika latar belakang ditentukan untuk sel, dan tabel (border-collapse: collapse;) ditentukan untuk tabel, maka sel tidak akan disembunyikan. Diwarisi.

Perusahaan	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tabel (border: 1px solid # 69c; border-collapse: terpisah; sel kosong: sembunyikan;) th, td (border: 2px solid # 69c;)

Beras. 5. Contoh menyembunyikan sel tabel kosong

9. Tata letak tata letak tabel menggunakan properti tata letak tabel

Tata letak tata letak tabel ditentukan oleh salah satu dari dua pendekatan: tata letak tetap atau tata letak otomatis. Tata letak dalam hal ini berarti bagaimana lebar tabel didistribusikan di antara lebar sel. Harta itu tidak diwariskan.

Sintaksis

Tabel (tabel-tata letak: tetap;)

10. Tata Letak Tabel Terbaik

1. Minimalisme horizontal

Tabel horizontal adalah tabel di mana teks dibaca secara horizontal. Setiap entitas adalah baris yang terpisah. Anda dapat menata tabel seperti ini dalam gaya minimalis dengan menempatkan batas dua piksel di bawah judul th.

Karyawan	Gaji	Bonus	Pengawas
Stephen C. Cox	$300	$50	Bob
Josephin tan	$150	-	Annie
Joyce ming	$200	$35	andy
James A. Pentel	$175	$25	Annie

tabel (font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; ukuran font: 14px; latar belakang: putih; max-width: 70%; lebar: 70%; border-collapse: collapse; teks -align: left;) th (font-weight: normal; color: # 039; border-bottom: 2px solid # 6678b1; padding: 10px 8px;) td (color: #669; padding: 9px 8px; transisi: .3s linear;) tr: hover td (warna: #6699ff;)

Dengan jumlah baris yang banyak, desain tabel ini membuatnya sulit untuk dibaca. Untuk mengatasi masalah ini, Anda dapat menambahkan batas satu piksel di bawah semua elemen td.

Td (border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transisi: .3s linear;) / * sisa kode seperti pada contoh di atas * /

Menambahkan a: efek hover ke elemen tr membuat tabel bergaya minimalis lebih mudah dibaca. Saat Anda mengarahkan mouse ke sel, sisa sel di baris yang sama disorot pada saat yang sama, yang menyederhanakan proses melacak informasi jika tabel memiliki beberapa kolom.

Th (berat font: normal; warna: # 039; padding: 10px 15px;) td (color: #669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: hover td (latar belakang: # e8edff ;)

2. Minimalisme vertikal

Meskipun tabel tersebut jarang digunakan, tabel berorientasi vertikal berguna untuk mengkategorikan atau membandingkan deskripsi objek yang diwakili oleh kolom. Anda dapat menatanya dalam gaya minimalis dengan menambahkan spasi yang memisahkan kolom.

Th (font-weight: normal; border-bottom: 2px solid # 6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px;) td (border- kanan: 30px solid #fff; border-left: 30px solid #fff; warna: #669; padding: 12px 2px;)

3. Gaya "Kotak"

Gaya yang paling dapat diandalkan untuk mendekorasi meja dari semua jenis adalah apa yang disebut gaya "kotak". Cukup memilih skema warna yang baik, dan kemudian mengatur warna latar belakang untuk semua sel. Ingatlah untuk menekankan perbedaan antara garis dengan menetapkan batas sebagai pemisah.

Th (ukuran font: 13px; berat font: normal; background: # b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; padding: 8px;) td (latar belakang : #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; padding: 8px;) tr: hover td (latar belakang: #ccddff;)

Bagian tersulit adalah menemukan skema warna yang akan menyatu secara harmonis dengan situs Anda. Jika situs tersebut sarat dengan grafis dan desain, maka akan cukup sulit bagi Anda untuk menggunakan gaya ini.

Tabel (font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; ukuran font: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (font-size: 13px; font-weight: normal; background: # e8edff; border-right: 1px solid # 9baff1; border- kiri: 1px solid #9baff1; warna: #039; padding: 8px;) td (background: #e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; warna: #669; padding: 8px ;)

4. Zebra horisontal

Meja zebra terlihat cukup menarik dan praktis. Warna latar belakang pelengkap dapat berfungsi sebagai isyarat visual bagi orang untuk membaca tabel.

Th (berat font: normal; warna: # 039; padding: 10px 15px;) td (color: #669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: nth-child (2n) ( latar belakang: # e8edff ;)

5. Gaya surat kabar

Untuk mencapai apa yang disebut efek koran, Anda dapat menerapkan batas ke elemen tabel dan bermain dengan sel di dalamnya. Gaya surat kabar yang ringan dan minimal mungkin terlihat seperti ini: mainkan dengan skema warna, tambahkan batas, padding, latar belakang yang berbeda, dan a: efek hover pada hovering di atas garis.

Tabel (border: 1px solid # 69c;) th (font-weight: normal; color: #039; border-bottom: 1px dashed # 69c; padding: 12px 17px;) td (color: #669; padding: 7px 17px; ) tr: hover td (latar belakang: #ccddff;)

Tabel (border: 1px solid #69c;) th (font-weight: normal; color: #039; padding: 10px;) td (color: #669; border-top: 1px dashed #fff; padding: 10px; background: #ccddff;) tr: hover td (latar belakang: #99bcff;)

Tabel (border: 1px solid #6cf;) th (font-weight: normal; font-size: 13px; color: #039; text-transform: uppercase; border-right: 1px solid #0865c2; border-top: 1px solid # 0865c2; border-left: 1px solid # 0865c2; border-bottom: 1px solid #fff; padding: 20px;) td (color: #669; border-right: 1px dashed # 6cf; padding: 10px 20px;)

6. Latar belakang meja

Jika Anda mencari cara cepat dan unik untuk menata meja Anda, pilih gambar atau foto menarik yang terkait dengan tema meja dan atur sebagai latar belakang meja.

Png ") 98% 86% no-repeat;) th (font-weight: normal; font-size: 14px; color: #339; padding: 10px 12px; background: white;) td (color: #669; border- atas: 1px putih solid; padding: 10px 12px; latar belakang: rgba (51, 51, 153, .2); transisi: .3s;) tr: hover td (latar belakang: rgba (51, 51, 153, .1); )

Halo semuanya! Jadi, sekarang Anda dapat membuat tabel dasar, yang terdiri dari baris dan kolom sebanyak yang Anda butuhkan. Tidak buruk, tidak buruk. Sekarang mari kita bicara tentang desain tabel ini.

Dalam pelajaran terakhir, tabel ditampilkan tanpa batas. Dan, Anda lihat, kelihatannya biasa-biasa saja, Anda bahkan tidak bisa menyebutnya sebagai pertanda. Untuk membuat batas tabel dalam HTML, tambahkan ke tag

atribut berbatasan dengan memberikan nilai selain nol.

Jadi mari kita buat batas untuk tabel. Misalnya, untuk yang sudah kita miliki:

Sel kiri atas	Sel kanan atas
Sel kiri bawah	Sel kanan bawah

Hasil di browser:

Cara menghapus batas tabel

Pada gilirannya, untuk menghapus batas tabel HTML, atau Anda juga dapat mengatakan untuk membuatnya tidak terlihat, Anda memerlukan atribut berbatasan tetapkan nilai 0 ... Setelah tindakan sederhana ini, bingkai akan dihapus.

Atribut memungkinkan Anda membuat tetapi tidak mengelola batas. Ini hanya memungkinkan Anda untuk mengubah ketebalannya.

Oleh karena itu, sekarang kita akan berbicara tentang CSS yang sifatnya memungkinkan dengan berbatasan buat batas yang berbeda, baik di dalam setiap sel dan di luar, di sekitar meja secara keseluruhan.

Mari kita lihat bagaimana menerapkan CSS untuk membuat batas luar dan dalam dari sebuah tabel.
Untuk melakukan ini, hapus atribut perbatasan dari tabel kita dan tambahkan gaya:

Contoh tabel

Sel kiri atas	Sel kanan atas
Sel kiri bawah	Sel kanan bawah

Hasil di browser:

Sekarang mari tambahkan batas untuk setiap sel juga. Untuk melakukan ini, cukup tambahkan gaya:

Hasil di browser:

Cara menghapus padding antar sel dalam tabel HTML

Setuju bahwa batas yang ditentukan dengan CSS tidak memiliki tampilan yang sama seperti yang Anda inginkan. Tidak diragukan lagi, dari sudut pandang estetika, ada pekerjaan yang harus dilakukan. Di halaman browser, Anda dapat melihat bahwa secara default ini menampilkan batas tabel dan sel secara terpisah. Sebuah contoh dengan jelas menunjukkan hal ini.

Namun, sangat mungkin untuk menghilangkan batas tersebut, yang disebut ganda, jika kita menggunakan properti CSS border-collapse. Dalam praktiknya, terlihat seperti ini:

Tabel (border: solid 1px blue; border-collapse: collapse;) ...

Akibatnya, jarak antara sel dihilangkan:

Nilai runtuh yang ditetapkan ke atribut perbatasan menghapus batas ganda. Seperti yang Anda lihat, hasilnya adalah runtuhnya batas sel yang berdekatan, serta batas sel dan batas luar tabel. Adapun yang terakhir, itu bisa dihapus sama sekali. Dan jika ada kebutuhan untuk menampilkannya, Anda perlu menambah lebarnya. Jadi, kami menyingkirkan pemisah di tabel. Dan dalam pelajaran berikutnya kita akan berbicara tentang bagaimana Anda dapat mengatur batas vertikal dan horizontal. Semoga sukses untuk semua!

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

, yang merupakan wadah dengan isi tabel. Konten tabel HTML dijelaskan baris demi baris, setiap baris dimulai dengan tag pembuka dan diakhiri dengan tag penutup .

Di dalam tag

sel tabel berada, diwakili oleh tag Anda hanya dapat menerapkan satu properti CSS, warna latar belakang, tetapi Anda tidak dapat secara langsung mengatur warna latar belakang pada hover (kelas semu: hover) pada elemen ini. Dalam contoh ini, kita akan melihat cara menyorot kolom tabel hanya menggunakan CSS.

Contoh penyorotan kolom dan baris tabel di hover

atau

... Ini adalah sel yang berisi semua konten tabel yang ditampilkan di halaman web.

Bingkai meja

Secara default, tabel HTML pada halaman web dirender tanpa batas; untuk menambahkan batas ke tabel, seperti semua elemen lainnya, properti batas CSS digunakan. Tetapi Anda harus memperhatikan fakta bahwa jika Anda menambahkan batas hanya ke elemen

, maka itu akan ditampilkan di seluruh tabel. Agar sel tabel juga memiliki batas, Anda perlu mengatur properti batas untuk elemen dan dan gaya mereka.

Contoh penyorotan kolom tabel

dan

Tabel, th, td (border: 1px hitam pekat;) Coba saja”

Sekarang tabel dan sel memiliki batas, sedangkan setiap sel dan tabel memiliki batasnya sendiri. Akibatnya, ruang kosong muncul di antara bingkai; properti border-spacing memungkinkan Anda untuk mengontrol ukuran ruang ini, yang ditetapkan untuk seluruh tabel. Dengan kata lain, Anda tidak dapat mengontrol celah antara sel yang berbeda satu per satu.

Bahkan jika kita menghilangkan celah antar sel menggunakan nilai 0 dari properti border-spacing, maka batas sel akan saling bersentuhan, berlipat ganda. Properti border-collapse digunakan untuk menggabungkan batas sel. Ini dapat mengambil dua nilai:

terpisah: adalah default. Sel-sel ditampilkan dalam jarak pendek satu sama lain, setiap sel memiliki batasnya sendiri.
runtuh: menghubungkan bingkai yang berdekatan menjadi satu, semua celah antar sel, serta antara sel dan bingkai tabel diabaikan.

Nama dokumen

Nama	Nama belakang
Homer	si simpson
Pinggiran	si simpson

Nama	Nama belakang
Homer	si simpson
Pinggiran	si simpson

Mencoba "

Ukuran meja

Setelah menambahkan bingkai ke sel tabel, terlihat bahwa isi sel terlalu dekat dengan tepi. Anda dapat menggunakan properti padding untuk menambahkan spasi putih di antara tepi sel dan isinya:

Th, td (padding: 7px;) Cobalah"

Ukuran meja tergantung pada isinya, tetapi situasi sering muncul ketika meja terlalu sempit dan perlu diregangkan. Lebar dan tinggi tabel dapat diubah menggunakan properti lebar dan tinggi, mengatur dimensi yang diinginkan baik ke tabel itu sendiri atau ke sel:

Tabel (lebar: 70%;) th (tinggi: 50px;) Cobalah "

Perataan teks

Secara default, teks di sel header tabel rata tengah, dan teks di sel normal rata kiri, menggunakan properti perataan teks Anda bisa mengontrol perataan horizontal teks.

Properti CSS perataan vertikal memungkinkan Anda untuk mengontrol perataan vertikal konten teks. Secara default, teks disejajarkan secara vertikal ke tengah sel. Perataan vertikal dapat diganti dengan salah satu nilai untuk properti perataan vertikal:

atas: teks disejajarkan dengan bagian atas sel
tengah: menyelaraskan teks ke tengah (default)
bawah: teks disejajarkan dengan bagian bawah sel

Nama dokumen

Nama	Nama belakang
Homer	si simpson
Pinggiran	si simpson

Mencoba "

Mengganti warna latar belakang baris tabel

Saat melihat tabel besar yang berisi banyak baris dengan banyak informasi, mungkin sulit untuk melacak data mana yang termasuk dalam baris tertentu. Untuk membantu pengguna menavigasi, Anda dapat menggunakan dua warna latar belakang yang berbeda secara bergantian. Untuk membuat efek yang dijelaskan, Anda dapat menggunakan pemilih kelas, menambahkannya ke setiap baris kedua tabel:

Nama dokumen

Nama	Nama belakang	Posisi
Homer	si simpson	ayah
Pinggiran	si simpson	ibu
Bart	si simpson	seorang anak
Lisa	si simpson	anak perempuan

Mencoba "

Menambahkan atribut kelas ke setiap baris kedua adalah tugas yang membosankan. Pseudo-class: nth-child telah ditambahkan ke CSS3 untuk menyelesaikan masalah ini dengan cara alternatif. Sekarang efek interleaving dapat dicapai secara eksklusif melalui CSS, tanpa harus mengubah markup HTML dokumen. Dengan pseudo-class: nth-child, Anda dapat memilih semua baris genap atau ganjil dalam sebuah tabel menggunakan salah satu kata kunci genap (genap) atau ganjil (ganjil):

Tr: anak ke-n (ganjil) (warna latar: # EAF2D3;) Cobalah"

Ubah latar belakang garis saat melayang

Cara lain untuk meningkatkan keterbacaan data tabular adalah dengan mengubah warna latar belakang baris saat Anda mengarahkan kursor ke atasnya. Ini akan membantu menyoroti konten tabel yang diinginkan dan meningkatkan persepsi visual data.

Menerapkan efek ini sangat sederhana, untuk ini Anda perlu menambahkan: hover pseudo-class ke pemilih baris tabel dan mengatur warna latar belakang yang diinginkan:

Tr: hover (background-color: #E0E0FF;) Cobalah"

Perataan tengah meja

Menyejajarkan tabel HTML ke tengah hanya dimungkinkan jika lebar tabel kurang dari lebar elemen induknya. Untuk menyelaraskan tabel di tengah, Anda perlu menggunakan properti margin, mengaturnya setidaknya dua nilai: nilai pertama akan bertanggung jawab untuk margin luar tabel di bagian atas dan bawah, dan yang kedua - untuk perataan tengah otomatis :

Tabel (margin: 10px otomatis;) Cobalah"

Jika Anda memerlukan margin yang berbeda di bagian atas dan bawah tabel, maka Anda dapat mengatur properti margin ke tiga nilai: yang pertama akan bertanggung jawab untuk margin atas, yang kedua untuk perataan horizontal, dan yang ketiga untuk margin bawah:

Tabel (margin: 10px otomatis 30px;)

Kami telah mempertimbangkan banyak metode elemen penataan pada halaman seperti informasi teks, tautan, gambar, header, tetapi semua ini belum cukup. Dalam artikel saya, saya sering menggunakan elemen HTML seperti tabel, karena dalam kebanyakan kasus mereka adalah membantu mengatur informasi penting dan membuatnya lebih mudah untuk disajikan.

Dalam artikel ini, saya akan memperkenalkan Anda pada seluk-beluk penataan tabel HTML, dan Anda akan mempelajari properti CSS baru yang dirancang untuk mencapai tujuan ini.

HTML bahasa markup hypertext telah memberi kami sejumlah besar peluang untuk mengikat gaya CSS ke sepuluh tag unik yang dirancang untuk bekerja dengan tabel, saya sarankan untuk mengulanginya sebelum mempelajari lebih lanjut:

("Footer" dari tabel) warna latar belakang - karang, untuk elemen ("Header" tabel) mengatur warna latar belakang perak.

Untuk item

yang ada di dalam elemen (isi tabel) mengatur perubahan warna latar belakang saat melayang (kelas semu: melayang) c putih per warna dril(seluruh baris disorot).

Hasil dari contoh kita:

Beras. 153 Contoh Penataan Baris dalam Tabel

Contoh berikut menunjukkan cara menerapkan pembulatan sudut ke sel tabel (properti).

Contoh pembulatan sudut sel

Menandai

Keterangan


Mendefinisikan isi tabel.

Menentukan nama tabel.
		Mendefinisikan sel header tabel.

Mendefinisikan baris dalam sebuah tabel.
		Mendefinisikan sel data tabel.

Digunakan untuk memuat judul grup dalam tabel (tabel heading).

Digunakan untuk memuat "tubuh" tabel.

Digunakan untuk memuat “footer” dari tabel (footer).

Mendefinisikan properti kolom yang ditentukan untuk setiap kolom dalam tag

Mendefinisikan sekelompok kolom dalam sebuah tabel.

Bekerja dengan indentasi tabel

Menggunakan padding dalam tabel

Indentasi tabel
1	2	3	4
2
3
4

Dalam contoh ini, kami:

Tempatkan meja di tengah, menggunakan teknik pemusatan horizontal dengan margin luar (margin: 0 otomatis).
Untuk nama tabel (tag

) kami mengatur padding bawah menjadi 19 piksel. Saya harap Anda tidak bingung dengan angka yang tidak rata :)

Hasil dari contoh kita:

Jarak antar sel

Setelah contoh di atas, Anda mungkin telah memperhatikan bahwa kami memiliki celah di antara semua sel dalam tabel. Mari kita lihat cara menghilangkan celah di antara sel tabel, atau menambahnya.

Untuk mengatur jarak antara batas sel tetangga, Anda harus menggunakan properti CSS - spasi batas.

Ubah jarak antar tabel

spasi batas: 30px 10px;
1	2	3
2
3

spasi-batas: 0;
1	2	3
2
3

spasi perbatasan: 0.2em;
1	2	3
2
3

Dalam contoh ini, kami:

mengambang: kiri). Jika Anda melewatkan topik elemen mengambang, maka Anda selalu dapat kembali ke tutorial ini - "".
Selain itu, kami mengatur padding tabel di sebelah kanan ke 30px dan mengatur perataan vertikal tabel (bagian atas elemen sejajar dengan bagian atas elemen tertinggi). Kami akan kembali ke properti ini secara rinci dalam artikel ini.

) - berani.

Untuk sel tabel (tajuk dan sel data), kami menetapkan batas padat 1 piksel dengan # F50 hex dan mengatur padding ke 19 piksel untuk semua sisi.

Untuk meja pertama dengan kelas .pertama kita atur jarak antar sel tabel (properti border-spacing) menjadi 30px 10px, untuk tabel kedua dengan kelas .kedua sama dengan nol, untuk tabel ketiga dengan kelas .ketiga sama dengan 0.2em.

Saya menarik perhatian Anda pada fakta bahwa jika hanya satu nilai panjang yang ditentukan dalam properti border-spacing, maka itu menunjukkan jarak, baik secara horizontal maupun vertikal, dan jika dua nilai panjang ditentukan, maka yang pertama menentukan jarak horizontal , dan vertikal kedua. Jarak antara batas sel yang berdekatan dapat ditentukan dalam satuan CSS (px, cm, em, dll.). Nilai negatif tidak diperbolehkan.

Hasil dari contoh kita:

Tampilkan batas di sekitar sel tabel

Anda dapat mengatakan: - jadi, kami menghapus jarak antar sel menggunakan properti border-spacing dengan nilai 0, tapi mengapa kita sekarang memiliki batas sel yang berpotongan?

Batas ganda terbentuk karena fakta bahwa batas bawah satu sel ditambahkan ke batas atas sel yang ada di bawahnya, situasi serupa terjadi di sisi sel dan ini logis dari sudut pandang tampilan tabel, tapi untungnya ada cara untuk memberitahu browser bahwa kita tidak ingin melihat perilaku nakal dari batas sel.

Untuk melakukan ini, Anda perlu menggunakan properti CSS border-collapse. Anehnya, menggunakan properti border-collapse dengan nilai collapse adalah cara terbaik untuk menghilangkan celah antar sel tanpa mendapatkan batas ganda di antara mereka.

Pertimbangkan perbandingan perilaku border saat menggunakan properti border-spacing dengan nilai 0 dan properti border-collapse dengan nilai collapse:

Contoh menampilkan batas di sekitar sel tabel

spasi-batas: 0;
1	2	3
2
3

border-collapse: runtuh;
1	2	3
2
3

Dalam contoh ini, kami:

Buat tabel kita mengapung dan rata kiri (float: left), atur padding kanannya ke 30px.
Tetapkan untuk nama tabel (tag

) - berani.

Untuk sel tabel (tajuk dan sel data), kami menetapkan batas padat 5px dengan # F50 hex dan menetapkan lebar tetap 50px dan tinggi 75px.

Untuk meja pertama dengan kelas .pertama kami mengatur jarak antar sel tabel menjadi nol (border-spacing: 0;), dan untuk tabel kedua dengan kelas .kedua atur properti border-collapse menjadi collapse, yang menggabungkan batas sel menjadi satu jika memungkinkan.

Hasil dari contoh kita:

Perilaku sel kosong

Menggunakan CSS, Anda dapat mengatur apakah akan menampilkan batas dan latar belakang untuk sel kosong dalam tabel atau tidak. Properti sel kosong bertanggung jawab atas perilaku ini, yang secara default, seperti yang mungkin Anda perhatikan dari contoh sebelumnya, menampilkan sel kosong.

Mari kita beralih ke sebuah contoh:

Contoh menampilkan sel tabel kosong

sel kosong: tampilkan;
1	2	3
2		☺
3	☺

sel kosong: sembunyikan;
1	2	3
2		☺
3	☺

Untuk memahami cara kerja properti sel kosong dari contoh ini sangat sederhana, jika disetel untuk disembunyikan, maka sel kosong dan latar belakang di dalamnya akan disembunyikan, jika disetel untuk ditampilkan (default), maka akan ditampilkan.

Lokasi tajuk tabel

Mari kita lihat properti sederhana lainnya untuk menata tabel - sisi keterangan, yang mengatur posisi keterangan tabel (di atas atau di bawah tabel). Secara default, properti sisi teks diatur ke atas, yang menempatkan teks di atas tabel. Untuk menempatkan judul di bawah tabel, Anda perlu menggunakan properti dengan nilai bawah.

Mari kita lihat contoh penggunaan properti ini:

Contoh penggunaan properti sisi teks

Judul di atas meja
Nama	Harga
Seekor ikan	350 rubel
Daging	250 rubel

Judul di bawah tabel
Nama	Harga
Seekor ikan	350 rubel
Daging	250 rubel

Dalam contoh ini, kami telah membuat dua kelas yang mengontrol posisi header tabel. Kelas satu ( .topKeterangan) menempatkan judul tabel di atasnya, kami menerapkannya ke tabel pertama, dan kelas kedua ( .keterangan bawah) menempatkan judul tabel di bawahnya, kami menerapkannya ke tabel kedua. Kelas .topKeterangan memiliki properti sisi teks default dan dibuat untuk tujuan demonstrasi.

Hasil dari contoh kita:

Perataan horizontal dan vertikal

Dalam kebanyakan kasus, saat bekerja dengan tabel, Anda perlu menyesuaikan perataan konten di dalam sel header dan data. Properti perataan teks digunakan untuk perataan horizontal yang serupa dengan informasi teks apa pun. Kami membahas penggunaan properti ini untuk teks sebelumnya di artikel "".

Untuk mengatur perataan konten dalam sel, Anda perlu menggunakan kata kunci khusus dengan properti perataan teks. Mari kita perhatikan penerapan kata kunci dari properti ini dalam contoh berikut.

Contoh perataan horizontal dalam sebuah tabel

Arti	Keterangan
kiri	Meratakan teks sel ke kiri. Ini adalah default (jika arah teks dari kiri ke kanan).
Baik	Meratakan teks sel ke kanan. Ini adalah default (jika arah teks dari kanan ke kiri).
Tengah	Meratakan teks sel ke tengah.
membenarkan	Peregangan garis sehingga setiap garis memiliki lebar yang sama (meregangkan teks sel agar sesuai dengan lebar).

Dalam contoh ini, kami telah membuat empat kelas, yang mengatur perataan horizontal yang berbeda dalam sel dan menerapkannya ke baris tabel. Nilai dalam sel cocok dengan nilai properti perataan teks

Hasil dari contoh kita:

Selain perataan horizontal, Anda juga bisa menentukan perataan vertikal di sel tabel menggunakan properti perataan vertikal.

Harap dicatat bahwa saat bekerja dengan sel tabel, hanya nilai * berikut dari properti ini yang digunakan:

* - Nilai sub, super, text-top, text-bottom, length, dan% yang diterapkan ke sel tabel akan berperilaku seolah-olah menggunakan nilai dasar.

Mari kita lihat contoh penggunaan:

Contoh perataan vertikal dalam sebuah tabel

Arti	Keterangan
garis dasar	Menyejajarkan garis dasar sel dengan garis dasar induknya. Ini adalah default.
atas	Menyejajarkan konten sel secara vertikal ke atas.
Tengah	Sejajarkan isi sel secara vertikal di tengah.
bawah	Meratakan isi sel secara vertikal ke bawah.

Dalam contoh ini, kami telah membuat empat kelas, yang mengatur perataan vertikal berbeda dalam sel dan menerapkannya ke baris tabel. Nilai dalam sel cocok dengan nilai properti perataan vertikal yang diterapkan ke baris tersebut.

Algoritma untuk menempatkan tata letak tabel oleh browser

CSS menggunakan algoritma tata letak tabel otomatis browser secara default. Pada kasus ini lebar kolom diatur oleh konten sel tanpa putus terluas... Algoritme ini bisa lambat dalam beberapa kasus, karena browser harus membaca semua konten dalam tabel sebelum menentukan tata letak akhirnya.

Untuk mengubah jenis tata letak tabel oleh browser dengan otomatis pada tetap, Anda harus menggunakan properti CSS tata letak tabel dengan nilai tetap.

Dalam hal ini, penempatan horizontal hanya bergantung pada dari lebar tabel dan lebar kolom, dan bukan dari isi sel. Browser mulai menampilkan tabel segera setelah baris pertama diterima. Akibatnya, algoritme tetap memungkinkan Anda membuat tata letak tabel seperti itu lebih cepat daripada menggunakan versi otomatis. Saat bekerja dengan tabel besar, Anda dapat menggunakan algoritme tetap untuk meningkatkan kinerja.

Mari kita lihat penerapan properti ini dengan contoh berikut:

Contoh penggunaan properti table-layout

tata letak tabel: otomatis;
Nama	2009	2010	2011	2012	2013	2014	2015	2016
Gandum	125	215	2540	33287	695878	1222222	125840000	125

tata letak tabel: tetap;
Nama	2009	2010	2011	2012	2013	2014	2015	2016
Gandum	125	215	2540	33287	695878	1222222	125840000	125

Dalam contoh ini, kami:

Menata baris dan kolom tabel

Kami telah menyentuh sebagian metode penataan baris dan kolom tabel dalam artikel "". Dalam artikel ini, kita melihat penggunaan kelas semu grup yang memungkinkan Anda untuk mengganti gaya baris dalam tabel menggunakan nilai bahkan (jujur) dan aneh (aneh), atau dengan dasar rumus matematika.

Mari kita tinjau kembali teknik sebelumnya dan jelajahi cara baru untuk menata baris dan kolom dalam tabel. Mari kita beralih ke contoh.

Contoh penggunaan pseudo-class: nth-child dengan tabel

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

Dalam contoh ini, kami:

Hasil dari contoh kita:

Mari beralih ke contoh berikutnya, di mana kita akan melihat opsi untuk menata baris tabel.

Contoh penataan baris dalam tabel

Melayani	Harga
Jumlah	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

Dalam contoh ini, kami:

Atur lebar tabel menjadi 100% dari lebar elemen induk, atur header dan sel data ke batas padat 1px.
Dipasang untuk item

1	2	3	4	5

Dalam contoh ini, kami:

Pusatkan tabel dengan bantalan, atur lebar dan tinggi sel header menjadi 50px, ditentukan transparan batas 5 piksel.
Ditemukan bahwa ketika melayang (kelas semu: melayang) di atas sel tajuk, itu mendapat latar belakang biru warna, jeruk warna teks, batas jeruk warna 5 piksel dan radius 100%.
perbatasan transparan diperlukan untuk memesan ruang untuk perbatasan, yang akan ditampilkan saat melayang, jika ini tidak dilakukan, tabel akan "melompat".

Hasil dari contoh kita:

Contoh berikut menyentuh penggunaan elemen HTML

Nomor aplikasi	Melayani	harga, gosok.	Total
1	Nyanyian	6 000	6 000
2	mencuci	2 000	2 000
3	Pembersihan	1 000	1 000
4	Terus-menerus	1 500	1 500
5	Membaca	3 000	3 000

Dalam contoh ini, kami:

Hasil dari contoh kita:

Nah, dan contoh terakhir, yang agak sulit dipahami dan membutuhkan pengetahuan lanjutan tentang CSS, karena menyentuh topik masa depan yang direncanakan untuk studi terperinci dalam kerangka kursus ini.

Pada contoh sebelumnya, kami menyadari bahwa elemen HTML

Nomor aplikasi	Melayani	harga, gosok.	Total
1	Nyanyian	6 000	6 000
2	mencuci	2 000	2 000
3	Pembersihan	1 000	1 000
4	Terus-menerus	1 500	1 500
5	Membaca	3 000	3 000

Dalam contoh ini, kami:

Kami mengatur tabel kami untuk menempati 100% dari elemen induk, sel tabel menempati 25% dari elemen induk dan memiliki batas solid hijau 1 piksel, header dan sel data setinggi 45px. Kami menghapus celah antara sel menggunakan properti border-collapse dengan nilai

Jadi, menggunakan :: setelah elemen semu, tambahkan konten setelah setiap elemen.

pada melayang. :: setelah elemen semu harus digunakan bersama dengan properti konten, berkat itu kami memasukkan elemen blok yang memiliki warna latar belakang hutan hijau dan memiliki posisi mutlak.

Pemosisian absolut di sini diperlukan untuk mengimbangi elemen relatif terhadap tepi yang ditentukan dari leluhurnya, sedangkan leluhur harus memiliki nilai posisi selain statis default, jika tidak, penghitungan akan relatif terhadap tepi yang ditentukan dari jendela browser, untuk alasan ini kami mengatur untuk meja posisi relatif(relatif).

Kami menetapkan untuk blok yang kami hasilkan properti atas, yang menunjukkan arah offset elemen yang diposisikan dari tepi atas, dan properti bawah, yang menunjukkan arah offset elemen yang diposisikan dari tepi bawah. Untuk kedua properti, nilai 0 ditentukan, sehingga blok akan sepenuhnya menempati elemen dari bawah dan atas tabel, lebar blok ini diatur ke 25%, nilai ini sesuai dengan nilai lebar sel diri.

Dan properti terakhir yang kami tetapkan untuk blok ini: indeks-z dengan nilai "-1" menentukan urutan elemen yang diposisikan dengan 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 Anda tidak memahami proses elemen pemosisian, maka jangan berkecil hati, ini adalah topik yang sulit untuk dipahami, yang juga tidak kami pertimbangkan, tetapi kami pasti akan mempertimbangkannya di artikel berikutnya dari artikel ini. tutorial "Memosisikan elemen dalam CSS".

Pertanyaan dan tugas tentang topik

Selesaikan Kegiatan Praktik sebelum melanjutkan ke topik berikutnya:

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 Anda tentang pekerjaan situs ke situs [email protected]