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

Lebar sel tabel ditentukan oleh lebar isinya, sehingga lebar kolom tabel dapat berbeda-beda. Tinggi semua sel dalam satu baris adalah sama dan ditentukan oleh tinggi sel tertinggi.

Memformat tabel

1. Batas tabel

Secara default, tabel dan sel di dalamnya ditampilkan di browser tanpa batas yang terlihat. Batas Tabel ditentukan oleh properti perbatasan:

Tabel ( border-collapse: collaps; /*menghapus spasi kosong antar sel*/ border: 1px abu-abu solid; /*mengatur batas luar tabel menjadi warna abu-abu dengan ketebalan 1px*/ )

Batas sel header setiap kolom ditentukan untuk elemen ke-th:

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

Batas Sel badan tabel ditentukan untuk elemen td:

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

Ketebalan batas sel yang berdekatan tidak menjadi dua kali lipat, sehingga Anda dapat mengatur batas untuk seluruh tabel dengan cara berikut:

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

Anda dapat menyorot batas luar tabel dengan menambah lebarnya:

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

Batasan dapat ditetapkan sebagian:

/* menetapkan batas abu-abu luar sebesar 3 piksel untuk tabel */ tabel (batas atas: 3 piksel abu-abu solid; ) /* menetapkan batas abu-abu tebal sebesar 1 piksel untuk sel badan tabel */ td (batas bawah: 1 piksel abu-abu solid;)

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 akan sama dengan lebar baris (baris) terlebar.

Lebar tabel dan kolom diatur menggunakan properti lebar. Jika tabel (lebar: 100%;) ditentukan untuk sebuah tabel, maka lebar tabel akan sama dengan lebar blok penampung di mana tabel tersebut 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 ditentukan. Tinggi baris tabel dapat dimanipulasi dengan menambahkan padding atas dan bawah ke elemen Dan . Memperbaiki ketinggian menggunakan properti height tidak disarankan.

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

3. Cara mengatur latar belakang tabel

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

4. Kolom tabel

Model tabel CSS fokus terutama pada garis (rows) yang dibentuk menggunakan tag

menggunakan tag

Anda dapat mengatur latar belakang untuk sejumlah kolom berapa pun;

menggunakan tabel pemilih td:first-child , tabel td:last-child Anda dapat mengatur gaya untuk kolom pertama atau terakhir tabel (kecuali sel pertama dari header tabel);

Dengan menggunakan pemilih tabel td:nth-child (aturan pemilihan kolom), Anda dapat mengatur gaya untuk kolom tabel mana pun.

Anda dapat membaca lebih lanjut tentang pemilih CSS.

5. Bagaimana cara menambahkan judul tabel

Anda dapat menambahkan judul ke tabel menggunakan tag , dan menggunakan properti caption-side, properti ini dapat ditempatkan di depan atau di bawah tabel. Untuk perataan horizontal Teks judul menggunakan properti perataan teks. Diwarisi.

6. Cara menghilangkan spasi antar frame sel

Secara default, bingkai sel tabel dipisahkan oleh spasi kecil. Jika Anda menyetel border-collapse: collaps untuk tabel, celah tersebut akan dihilangkan. Properti itu diwariskan.

Sintaksis

Tabel (runtuhnya batas: runtuh;)
Beras. 3. Contoh tabel dengan penggabungan dan pemisahan bingkai sel

7. Cara menambah jarak antar bingkai sel

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

Sintaksis

Tabel (runtuhnya batas: terpisah; spasi batas: 10px 20px;) tabel (runtuhnya batas: terpisah; spasi batas: 10px;) Beras. 4. Contoh tabel dengan spasi antar frame sel yang diperbesar

8. Cara menyembunyikan sel tabel yang kosong

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

9. Tata letak tabel menggunakan properti table-layout

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

Sintaksis

Tabel (tata letak tabel: tetap;)

10. Tata Letak Tabel Terbaik

1. Minimalisme horizontal

Tabel horizontal adalah tabel yang teksnya dibaca secara horizontal. Setiap entitas adalah baris terpisah. Anda dapat mengatur tabel serupa gaya minimalis dengan menempatkan batas dua piksel di bawah header ke-th.

Pada dalam jumlah besar baris, desain tabel ini membuatnya sulit 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; )/*kode selebihnya seperti pada contoh di atas*/

Menambahkan efek :hover pada elemen tr akan membuat tabel yang didesain dengan gaya minimalis lebih mudah dibaca. Saat Anda mengarahkan mouse ke sel, sel yang tersisa di baris yang sama akan disorot secara bersamaan, sehingga memudahkan pelacakan informasi jika tabel memiliki beberapa kolom.

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

2. Minimalis vertikal

Meskipun tabel seperti ini jarang digunakan, tabel yang berorientasi vertikal berguna untuk mengkategorikan atau membandingkan deskripsi objek yang diwakili oleh kolom. Anda bisa mendesainnya dengan gaya minimalis dengan menambahkan ruang untuk memisahkan kolom.

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

3. Gaya kotak

Gaya yang paling dapat diandalkan untuk mendesain semua jenis tabel adalah apa yang disebut gaya “kotak”. Cukup memilih yang bagus skema warna, lalu atur warna latar belakang untuk semua sel. Jangan lupa untuk mempertegas perbedaan antar garis dengan menetapkan batas sebagai pemisah.

Th ( ukuran font: 13px; font-weight: normal; latar belakang: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; warna: #039; padding: 8px; ) td ( latar belakang : #e8edff; batas-bawah: 1px padat #fff; batas-atas: 1px padat transparan;

Hal tersulit adalah menemukan skema warna yang selaras dengan situs web Anda. Jika situs tersebut memiliki banyak 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: 14 piksel; lebar maksimal: 70%; lebar: 70%; perataan teks: tengah; keruntuhan batas: runtuh ; batas atas: 7px padat #9baff1; batas bawah: 7px padat #9baff1; ukuran font: 13px; berat font: normal; latar belakang: #e8edff; padat #9baff1; warna: #039; bantalan: 8 piksel; ) td ( latar belakang: #e8edff; batas kanan: 1 piksel padat #aabcfe; batas kiri: 1 piksel padat #aabcfe; warna: #669; bantalan: 8 piksel ; )

4. Zebra mendatar

Meja zebra terlihat cukup menarik dan nyaman. Warna tambahan Latar belakang dapat berfungsi sebagai isyarat visual bagi orang-orang saat membaca tabel.

Th ( font-weight: normal; color: #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 pada elemen tabel dan bermain-main dengan sel di dalamnya. Gaya koran yang ringan dan minimalis mungkin terlihat seperti ini: bermain-main dengan skema warna, menambahkan batas, padding, latar belakang yang berbeda, dan effect:hover ketika melayang 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 (batas: 1px solid #69c;) th ( font-weight: normal; warna: #039; padding: 10px; ) td ( warna: #669; border-top: 1px putus-putus #fff; padding: 10px; latar belakang: #ccddff; ) tr:hover td (latar belakang: #99bcff;)

Tabel (batas: 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; batas-kiri: 1px padat #0865c2; batas-bawah: 1px padat #fff;

6. Latar belakang tabel

Jika Anda mencari yang cepat dan cara yang unik desain meja, pilihlah gambar atau foto menarik yang berkaitan dengan tema meja dan jadikan sebagai latar belakang meja.

Jpg") tanpa pengulangan; posisi latar belakang: 100% 55px; ) th ( berat font: normal; warna: #339; padding: 10px 12px; ) td ( latar belakang: url("https://site/images/ kembali..png"); latar belakang: transparan; )

Vlad Merzhevich

Saat melakukan tata letak menggunakan tabel, Anda perlu mengetahui beberapa fitur yang melekat pada tabel. Hal ini diperlukan untuk memahami cara membuat tata letak dalam kasus tertentu, membuat kode yang efektif, dan menghindari kesalahan langsung dalam pekerjaan. Tata letak tabel diyakini lebih sederhana dibandingkan metode lain, misalnya menggunakan lapisan. Namun, tabel juga penuh dengan banyak trik yang, dengan satu atau lain cara, memengaruhi tampilan halaman.

Lebar meja

Lebar tabel, kecuali ditentukan secara eksplisit, diatur secara otomatis oleh browser berdasarkan konten sel. Ketika tabel digunakan untuk membuat grid referensi pada halaman, pendekatan ini tidak diinginkan karena bergantung pada data variabel. Oleh karena itu, lebar tabel selalu ditunjukkan - sebagai persentase jika tata letak "dapat disesuaikan" digunakan, atau dalam piksel untuk tata letak dengan lebar tetap.

Lebar sel

Lebar sel ditentukan oleh atribut lebar dari tag , dan nilai ini harus disetel jika lebar sel harus ditentukan.

Mari kita ambil contoh kasus ketika ukuran sel perlu ditentukan. Misalkan kita perlu membuat dua kolom pada halaman web, salah satunya harus berukuran 200 piksel, dan kolom kedua harus menempati ruang yang tersisa. Kami membuat tabel dengan dua sel dan mengatur parameter width="200" untuk sel kiri (contoh 1). Tidak perlu mengatur satuan pengukuran; browser sendiri memahami bahwa jika suatu angka ditentukan, maka piksel akan digunakan.

Contoh 1. Lebar sel

Sejak di dalam contoh ini lebar tabel ditentukan 100%, tabel akan menempati seluruh lebar bebas jendela browser. Dalam hal ini, kolom kiri mengambil 200 piksel, dan kolom kanan mengambil sisa ruang kosong.

Lebar sel terkadang dapat berubah, meskipun sebenarnya ditentukan secara ketat.

Hal ini terjadi, misalnya, jika gambar telah ditambahkan ke sel, yang ukurannya melebihi lebar sel. Untuk menampung gambar, sel akan dipaksa untuk mengembang. Konten teks sel yang berisi kata yang sangat panjang juga dapat memengaruhi ukuran sel.

• Untuk menghindari situasi ini, beberapa cara digunakan.
• Gambar yang lebih besar dari lebar sel tidak ditambahkan ke sel dengan lebar tetap. Caranya tentu saja terdengar sepele, namun dengan mengetahui fitur-fitur sel, Anda dapat terhindar dari masalah tampilannya. Untuk tanda

  gunakan properti gaya tata letak tabel dengan nilai tetap.

  ...

  Menggunakan properti ini memungkinkan Anda memotong gambar jika tidak seluruhnya masuk ke dalam sel (contoh 2).

  Contoh 2. Properti tata letak tabel Hasil dari contoh ini ditunjukkan pada Gambar. 1. Peramban modern (Firefox 3+,

  

  Penjelajah Internet 8+, Chrome dan Safari) menampilkan tabel sedikit berbeda (Gbr. 2).

  • Beras. 2. Tampilkan gambar di peramban Safari
    Gunakan properti gaya overflow dengan nilai gulir. Properti ini menambahkan bilah gulir ke konten, namun karena berlaku untuk elemen blok, properti ini tidak dapat digunakan pada tag

  .

  ...

  Oleh karena itu, Anda harus memberi tag di dalam sel

  

  dan atur properti gaya untuknya (contoh 3). Hal ini, tentu saja, tidak sepenuhnya benar dan nyaman, namun dapat memberikan hasil yang diinginkan.

  Contoh 3: Scroll bar dalam sel

  Hasil dari contoh ini ditunjukkan pada Gambar. 3. Isi sel Browser menampilkan sel yang tidak berisi apa pun secara berbeda. “Tidak ada” dalam hal ini berarti tidak ada gambar atau teks yang ditambahkan ke dalam sel, dan spasi tidak diperhitungkan. Secara alami, tampilan sel hanya berbeda jika ada batas di sekelilingnya. Saat menggunakan batas tak terlihat, tampilan sel, terlepas dari apakah ada sesuatu di dalamnya atau tidak, tetap sama. Browser lama tidak menampilkan warna latar belakang sel tampilan kosong

  Untungnya, era gambar piksel tunggal dan segala macam pengatur jarak berdasarkan gambar tersebut telah berlalu.

  Browser bekerja cukup baik dengan tabel bahkan tanpa kehadiran konten sel.

  Menggabungkan sel

  Misalkan kita ingin menggunakan gabungan beberapa sel dalam sebuah tabel, seperti yang ditunjukkan di bawah ini. Selain itu, tinggi sel oranye dan abu-abu diatur secara kaku dan sama dengan 30 piksel.	sel 1
  sel 2
  sel 3

  sel 4

  Untuk lebih jelasnya, kode tabel ini ditunjukkan pada contoh 4.

  Contoh 4: Tabel dengan sel yang digabungkan	sel 1
  sel 2
  sel 3

  sel 4

  Meskipun tinggi sel oranye tampak tetap, namun dapat berubah sewaktu-waktu bergantung pada jumlah informasi di sel lain. Masalah serupa juga terjadi di beberapa browser.

  Ketika kompleksitas tabel meningkat dengan bertambahnya jumlah sel dan gabungannya, kemungkinan kesalahan saat menampilkan dokumen meningkat. Oleh karena itu, penggabungan sel secara vertikal jarang digunakan dan dalam kasus di mana tinggi sel tidak berdampak signifikan pada tata letak halaman. Untuk tetap mendapatkan hasil yang diinginkan

  , satu tabel dibagi menjadi beberapa tabel kecil atau sebuah tabel disarangkan di dalam sel tabel lain. Tabel bersarang telah tersebar luas justru karena memberikan hasil yang stabil dan seragam.

  Kecepatan memuat tabel Sampai tabel terisi penuh, isinya tidak akan ditampilkan. Faktanya adalah browser, sebelum menampilkan isi tabel, harus melakukan perhitungan

  dimensi yang diperlukan sel, lebar dan tingginya. Dan untuk ini Anda perlu mengetahui apa yang ada di dalam sel-sel ini. Oleh karena itu, browser menunggu hingga semua yang ada di sel dimuat, dan baru kemudian menampilkan tabel. Berdasarkan fakta ini, tabel tidak digunakan untuk menyimpan

  banyak informasi

  (dari 100 kB). Dan untuk mempercepat pemuatan tata letak tabel, dibagi menjadi tabel-tabel terpisah atau digunakan properti tata letak tabel, yang penggunaannya memungkinkan Anda untuk sedikit meningkatkan kecepatan menampilkan isi tabel.

  Halo semuanya! Nah, sekarang Anda sudah tahu cara membuat tabel dasar yang terdiri dari baris dan kolom sebanyak yang diperlukan. Tidak buruk, tidak buruk. Sekarang mari kita bicara tentang desain tabel ini. Pada pelajaran sebelumnya, tabel ditampilkan tanpa batas. Dan, Anda tahu, kelihatannya biasa-biasa saja, Anda bahkan tidak bisa menyebutnya sebagai sebuah tanda. Untuk membuat batas tabel dalam HTML, Anda harus menambahkan tag atribut

  Jadi mari kita membuat batas untuk tabelnya. Misalnya untuk yang sudah kita punya:

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

  Hasil di browser:
  

  Cara menghilangkan batas tabel

  Pada gilirannya, untuk menghilangkan batasan tabel HTML, atau Anda juga dapat mengatakan, membuatnya tidak terlihat, Anda memerlukan atribut Pada pelajaran sebelumnya, tabel ditampilkan tanpa batas. Dan, Anda tahu, kelihatannya biasa-biasa saja, Anda bahkan tidak bisa menyebutnya sebagai sebuah tanda. Untuk membuat batas tabel dalam HTML, Anda harus menambahkan tag menetapkan nilai 0 . Setelah langkah sederhana ini, bingkai akan dihapus.

  Atribut ini memungkinkan Anda membuat, namun tidak mengelola, batasan. Ini hanya memungkinkan Anda mengubah ketebalannya.

  Oleh karena itu, sekarang kita akan membicarakannya CSS, yang propertinya memungkinkan penggunaan Pada pelajaran sebelumnya, tabel ditampilkan tanpa batas. Dan, Anda tahu, kelihatannya biasa-biasa saja, Anda bahkan tidak bisa menyebutnya sebagai sebuah tanda. Untuk membuat batas tabel dalam HTML, Anda harus menambahkan tag buat batas yang berbeda, baik di dalam setiap sel maupun di luar, di sekeliling tabel secara keseluruhan.

  Mari kita lihat cara menggunakan CSS untuk membuat eksternal dan batas dalam tabel.
  Untuk melakukan ini, hapus atribut border dari tabel kami dan tambahkan gaya:

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

  Hasil di browser:
  

  Sekarang mari tambahkan batas ke 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 menggunakan CSS, belum seperti itu penampilan, seperti yang kita inginkan. Tidak diragukan lagi, dari sudut pandang estetika, ada sesuatu yang perlu diperbaiki. Pada halaman browser Anda dapat melihat bahwa secara default menampilkan batas tabel dan sel secara terpisah. Contoh tersebut dengan jelas menunjukkan hal ini.

  Namun, sangat mungkin untuk menghilangkan batas seperti itu, yang disebut batas ganda, jika Anda menggunakan CSS properti perbatasan-runtuh. Dalam praktiknya, tampilannya seperti ini:

  Tabel ( batas: solid 1px biru; batas-runtuh: runtuh; ) ...

  Akibatnya, jarak antar sel dihilangkan:
  

  Nilai ciutkan yang ditetapkan ke atribut perbatasan memungkinkan Anda menghapus batas ganda. Seperti yang Anda lihat, hasilnya adalah “runtuhnya” batas sel yang terletak di dekatnya, serta bingkai sel dan bingkai luar tabel. Sedangkan untuk yang terakhir, mungkin akan dihapus seluruhnya. Dan jika ada kebutuhan untuk menampilkannya, Anda perlu menambah lebarnya. Dengan cara ini kita menghilangkan pemisah di tabel. Dan pada pelajaran selanjutnya kita akan membahas tentang bagaimana Anda dapat menetapkan batas vertikal dan horizontal. Semoga beruntung semuanya!

  Tabelnya sendiri terlihat agak buruk, dan browser menampilkan beberapa karakteristik tabel, khususnya bingkai, dengan caranya sendiri. Pada saat yang sama, kekurangan ini dapat dengan mudah diperbaiki dengan menggunakan kekuatan gaya. Pada saat yang sama, alat untuk mendesain tabel diperluas secara signifikan, yang memungkinkan Anda berhasil memasukkan tabel ke dalam desain situs dan menyajikan data tabel dengan lebih jelas.

  Warna latar belakang sel

  Warna latar belakang semua sel tabel secara bersamaan diatur melalui properti latar belakang, yang diterapkan ke pemilih TABLE. Dalam hal ini, Anda harus mengingat aturan penggunaan gaya, khususnya pewarisan properti elemen. Meskipun properti latar belakang tidak diwariskan, nilai latar belakang default untuk sel adalah transparan, yaitu. transparansi, sehingga efek pengisian latar belakang juga diperoleh untuk sel. Jika, bersamaan dengan TABLE, Anda mengatur warna pemilih TD ​​atau TH, maka warna ini akan ditetapkan sebagai latar belakang sel (contoh 2.3).

  Contoh 2.3. Warna latar belakang

  Judul 1	Judul 2
  sel 2	sel 3

  Dalam contoh ini kita mendapatkan biru latar belakang sel (tag ) dan merah pada judul (tag ). Hal ini karena gaya untuk pemilih TH tidak ditentukan, sehingga latar belakang induknya, dalam hal ini pemilih TABLE, "ditampilkan".

  Dan warna untuk pemilih TD ​​ditentukan secara eksplisit, sehingga sel “diisi” dengan warna biru.

  Hasil dari contoh ini ditunjukkan pada Gambar. 2.4.

  Beras. 2.4. Mengubah warna latar belakang

  Margin di dalam sel

  Margin adalah jarak antara tepi isi sel dan batasnya. Biasanya atribut cellpadding dari sebuah tag digunakan untuk tujuan ini. . Ini mendefinisikan nilai margin dalam piksel di semua sisi sel. Diperbolehkan menggunakan gaya properti bantalan

  dengan menambahkannya ke pemilih TD, seperti yang ditunjukkan pada Contoh 2.4.

  Contoh 2.4. Bidang dalam tabel

  Judul 1	Judul 2
  sel 2	sel 3

  XHTML 1.0 CSS 2.1 YAITU Cr Op Sa Fx

  

  Dalam contoh ini, dengan mengelompokkan penyeleksi, kolom ditetapkan secara bersamaan untuk penyeleksi TD dan TH. Hasil dari contoh ditunjukkan pada Gambar. 2.5.

  Beras. 2.5. Bidang dalam sel

  Jika properti gaya padding diterapkan ke sel tabel, maka efek atribut cellpadding dari tag

  diabaikan.

  Jarak antar sel

  Untuk mengubah jarak antar sel, gunakan atribut spasi sel pada tag

  . Efek dari atribut ini terlihat jelas saat Anda menggunakan batas di sekitar sel atau saat mengisi sel dengan warna yang menonjol dari latar belakang halaman. Properti gaya border-spacing bertindak sebagai pengganti spasi sel; properti ini mengatur jarak antar batas sel. Satu nilai menetapkan jarak vertikal dan horizontal antar batas sel. Jika properti ini memiliki dua nilai, maka nilai pertama menentukan jarak horizontal (yaitu ke kiri dan kanan sel), dan nilai kedua menentukan jarak vertikal (atas dan bawah).

  Properti border-spacing hanya berlaku jika pemilih TABLE tidak mengatur properti border-collapse untuk diciutkan (Contoh 2.5).

  XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

  Leonardo	5	8
  Raphael	4	11
  Michelangelo	24	9
  Donatello	2	13

  Hasil dari contoh ini ditunjukkan pada Gambar. 2.6.

  

  Beras. 2.6. Tampilan tabel saat menggunakan spasi batas

  Peramban Internet Explorer versi 7 dan yang lebih baru tidak mendukung properti border-spacing, jadi di browser ini nilai Cellspacing default (biasanya 2px) akan digunakan untuk tabel.

  Saat menambahkan properti border-collapse dengan nilai runtuh ke pemilih TABLE, atribut spasi sel diabaikan dan nilai spasi perbatasan disetel ulang ke nol.

  Perbatasan dan bingkai

  Secara default, tabel awalnya tidak memiliki batas, dan penambahannya terjadi menggunakan atribut perbatasan dari tag

  . Browser menampilkan batas tersebut secara berbeda, jadi lebih baik tidak menentukan atribut ini sama sekali, dan menyerahkan gambar batas pada gaya. Mari kita lihat dua metode yang berhubungan langsung dengan gaya.

  Menggunakan atribut spasi sel

  Diketahui atribut Cellspacing dari tag tersebut

  mengatur jarak antar sel tabel. Jika Anda menggunakan warna latar belakang yang berbeda untuk tabel dan sel, maka akan muncul kisi-kisi garis di antara sel, yang warnanya cocok dengan warna tabel, dan ketebalannya sama dengan nilai atribut spasi sel dalam piksel. Contoh 2.3 di atas menunjukkan efek ini, jadi saya tidak akan mengulanginya.

  Perhatikan bahwa ini tidak sepenuhnya cara yang nyaman menciptakan batas-batas karena mempunyai ruang lingkup yang terbatas. Dengan cara ini Anda hanya bisa mendapatkan kotak satu warna, dan bukan kotak vertikal atau garis horizontal di tempat yang tepat.

  Menggunakan properti perbatasan

  Properti gaya perbatasan secara bersamaan mengatur warna, gaya, dan ketebalan batas di sekitar elemen. Saat Anda perlu membuat garis terpisah sisi yang berbeda, lebih baik menggunakan turunannya - border-left , border-right , border-top dan border-bottom , properti ini masing-masing menentukan batas di kiri, kanan, atas dan bawah.

  Dengan menerapkan properti perbatasan ke pemilih TABLE, kita menambahkan batas di sekeliling tabel secara keseluruhan, dan ke pemilih TD ​​atau TH kita menambahkan batas di sekitar sel (Contoh 2.6).

  Contoh 2.6. Menambahkan Bingkai Ganda

  Contoh 2.4. Bidang dalam tabel

  Judul 1	Judul 2
  sel 2	sel 3

  Contoh ini menggunakan bingkai ganda hitam di sekeliling meja itu sendiri dan bingkai kokoh putih sekitar setiap sel. Hasil dari contoh ditunjukkan pada Gambar. 2.7.

  

  Beras. 2.7. Perbatasan di sekitar tabel dan sel

  Harap dicatat bahwa garis ganda terbentuk di tempat sel-sel bergabung. Mereka diperoleh kembali karena aksi atribut spasi sel dari tag

  . Meskipun atribut ini tidak muncul di mana pun dalam kode contoh, browser menggunakannya secara default. Jika Anda mengatur , maka kita tidak mendapatkan garis ganda, tetapi garis tunggal, tetapi dengan ketebalan ganda. Untuk mengubah fitur ini, gunakan properti gaya border-collapse dengan nilai collaps , yang ditambahkan ke pemilih TABLE (contoh 2.7).

  Contoh 2.7. Membuat Bingkai Tunggal

  Contoh 2.4. Bidang dalam tabel

  Judul 1	Judul 2
  sel 2	sel 3

  Dalam contoh ini, ia menciptakan garis padat hijau di antara sel dan hitam di sekitar meja. Semua batas dalam tabel memiliki ketebalan yang sama. Hasil dari contoh ditunjukkan pada Gambar. 2.8.

  

  Beras. 2.8. Perbatasan di sekeliling meja

  Menyelaraskan isi sel

  Secara default, teks dalam sel tabel rata kiri. Pengecualian terhadap aturan ini adalah tag , ini mendefinisikan header yang berada di tengah. Untuk mengubah metode perataan, gunakan properti gaya perataan teks (contoh 2.8).

  Contoh 2.8. Sejajarkan konten sel secara horizontal

  Contoh 2.4. Bidang dalam tabel

  Judul 1	Contoh 4: Tabel dengan sel yang digabungkan	sel 1
  Judul 2	sel 2	sel 3

  Dalam contoh ini, isi dari tag rata ke kiri, dan isi tag - di tengah. Hasil contohnya ditunjukkan di bawah ini (Gambar 2.9).

  

  Beras. 2.9. Menyelaraskan teks dalam sel

  Perataan vertikal dalam sel selalu berada di tengah kecuali dinyatakan lain. Hal ini tidak selalu nyaman, terutama untuk tabel yang tinggi isi selnya bervariasi. Dalam hal ini, perataan diatur ke tepi atas sel menggunakan properti perataan vertikal, seperti yang ditunjukkan pada Contoh 2.9.

  Contoh 2.9. Sejajarkan konten sel secara vertikal

  Contoh 2.4. Bidang dalam tabel

  Judul 1	Judul 2
  Contoh 4: Tabel dengan sel yang digabungkan	sel 1

  Contoh ini mengatur tinggi header seperti 40 piksel dan teks sejajar dengan tepi bawah. Hasil dari contoh ditunjukkan pada Gambar. 2.10.

  

  Beras. 2.10. Menyelaraskan teks dalam sel

  Sel kosong

  Browser menampilkan sel yang tidak berisi apa pun secara berbeda. “Tidak ada” dalam hal ini berarti tidak ada gambar atau teks yang ditambahkan ke dalam sel, dan spasi tidak diperhitungkan. Secara alami, tampilan sel hanya berbeda jika ada batas di sekelilingnya. Saat menggunakan batas tak terlihat, tampilan sel, terlepas dari apakah ada sesuatu di dalamnya atau tidak, tetap sama.

  Hasil dari contoh ini ditunjukkan pada Gambar. 3. , jadi ketika perlu meninggalkan sel tanpa konten tetapi menampilkan warna latar belakang, spasi yang tidak dipisahkan () ditambahkan di dalam sel. Ruang tidak selalu cocok, terutama ketika Anda perlu mengatur tinggi sel ke 1-2 piksel, itulah sebabnya grafik transparan satu piksel banyak digunakan. Memang, gambar seperti itu dapat diubah skalanya sesuai kebijaksanaan Anda, tetapi gambar tersebut tidak ditampilkan di halaman web dengan cara apa pun.

  Untungnya, era gambar piksel tunggal dan segala macam pengatur jarak berdasarkan gambar tersebut telah berlalu. Browser bekerja cukup baik dengan tabel bahkan tanpa kehadiran konten sel.

  Untuk mengontrol tampilan sel kosong, gunakan properti sel kosong; saat disetel untuk disembunyikan, batas dan latar belakang tidak ditampilkan di sel kosong. Jika semua sel dalam satu baris kosong, maka seluruh baris akan disembunyikan. Sel dianggap kosong dalam kasus berikut:

  • tidak ada simbol sama sekali;
  • sel hanya berisi baris baru, tab, atau spasi;
  • visibilitas diatur ke tersembunyi.

  Tambahan ruang yang tidak dapat dipecahkan dianggap sebagai konten yang terlihat, yaitu sel tidak lagi kosong (contoh 2.10).

  Contoh 2.10. Sel kosong

  Contoh 2.4. Bidang dalam tabel

  Leonardo	5	8
  Raphael		11
  Michelangelo	24
  Donatello		13

  Tampilan tabel di browser Safari ditunjukkan pada Gambar. 2.11a. Tabel yang sama di browser IE7 ditunjukkan pada Gambar. 2.11b.

  

  A. Di browser Safari, Firefox, Opera, IE8, IE9

  

  B. Di peramban IE7

  Beras. 2.11. Tampilan tabel dengan sel kosong

  CSS memungkinkan Anda untuk mengatur tidak hanya gaya batas tabel, tetapi juga gaya batas sel individual. Karena setiap sel mempunyai batasnya masing-masing, maka batas antar sel yang berdekatan menjadi dua kali lipat. Tetapi dimungkinkan untuk menggabungkan batas-batas sel yang berdekatan menjadi satu. Ada properti keruntuhan perbatasan untuk ini. Dibutuhkan nilai:

  border-collapse: terpisah - setiap sel memiliki batasnya sendiri (default)

  keruntuhan perbatasan: keruntuhan - perbatasan bersama

  border-collapse: mewarisi - nilai diambil dari elemen induk

  Misalnya, mari kita membuat tabel dan mengatur bingkai untuk sel semua tabel yang ada di halaman tersebut. Jangan ubah apa pun terlebih dahulu untuk melihat tampilan tabelnya:

  Gaya:

  1 2 3 4 5 6

  ');"; ) var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) ( td_theme_css.after(splitted_css); ) ) )); ) ))();