Sel tabel css. Perbatasan dan bingkai. Ubah latar belakang baris saat mengarahkan kursor

Ini menjadi populer, desainer web terutama menggunakan metode tata letak tabel dan mendapatkan hasil yang sangat bagus.

Tag yang digunakan untuk membuat tabel dalam html

meja- tag wajib yang membuka dan menutup tabel
keterangan- tag opsional yang menunjukkan judul tabel
th- tag opsional, tag pembuka dan penutup berisi nama kolom. Biasanya tampak berani
tr- tag wajib yang membuka dan menutup saluran
td- tag wajib yang menunjukkan pembukaan dan penutupan sel berturut-turut

Contoh kode untuk tabel sederhana

tabel HTML

Nama tabel
Stobet 1	Stobet 2
Teks di sel pertama	Teks di sel kedua

Browser akan ditampilkan

Tujuan tabel dalam html

Pelajaran di atas meja sangat penting! Berkat tabel, Anda tidak hanya dapat mengatur teks, tetapi juga gambar, tautan, dan banyak lagi. Di tabel Anda dapat menentukan latar belakang(atau warnanya), lekukan, lebar, berbatasan Dan parameter lainnya yang akan memberikan penampilan cantik. Tabel - Langkah pertama Anda menuju pemahaman desain web! Sebelumnya, banyak situs yang seluruhnya ditata dalam bentuk tabel, yaitu segala sesuatu yang dilihat pengguna (menu samping, menu teratas, konten) - adalah konten sel dari tabel besar.
Oleh karena itu, mari kita beralih langsung ke atribut yang membuat meja menjadi indah...

Properti dan parameter tabel html: lekukan, lebar, warna latar belakang, batas (bingkai)

kamu label tabel memiliki atribut berikut:

lebar- lebar meja. bisa dalam piksel atau % lebar layar.
bgcolor- warna latar belakang sel tabel
latar belakang- mengisi latar belakang tabel dengan pola
berbatasan- bingkai dan batas di tabel. Ketebalan ditunjukkan dalam piksel
bantalan sel- padding dalam piksel antara konten sel dan batas internalnya
Seperti sebelumnya, kita menulis nilai atribut dalam tanda kutip.

Mari kita lihat penggunaan atribut ini menggunakan sebuah contoh. Untuk melakukan ini, mari buat tabel (tetapi sudah tanpa caption dan tag th yang sangat jarang digunakan) dan atur parameter ke atribut berbatasan, lebar (lebar tabel, baris atau sel) Dan bgcolor (warna sel)

tabel HTML

Hasilnya, tabel berikut akan ditampilkan di browser:

bingkai- atribut yang menunjukkan bingkai di sekeliling meja. Ada nilai-nilai berikut:

Batal - tanpa bingkai,
di atas - hanya bingkai atas,
di bawah - bingkai bawah saja,
hsides - hanya bingkai atas dan bawah,
vsides - hanya bingkai kiri dan kanan,
lhs - bingkai kiri saja,
rhs - bingkai kanan saja,
kotak - keempat bagian bingkai.

aturan- atribut yang menunjukkan batas-batas dalam tabel, antar sel. Ada nilai-nilai berikut:

Tidak ada - tidak ada batas antar sel,
grup - batas hanya antara grup baris dan grup kolom (akan dibahas nanti),
baris - batas antar baris saja,
cols - batas hanya antar kolom,
semua - menampilkan semua batas.

Mari kita lihat contoh kodenya

tabel HTML

Stobet 1	Stobet 2

Hasil

Sekarang mari kita coba membuatnya meja yang indah. Untuk melakukan ini, mari mulai menggunakan penyelarasan tabel. Untuk melakukan ini, ada parameter yang sudah dikenal berikut ini:

meluruskan- penyelarasan tabel. Bisa diletakkan di kiri (left), di kanan (right), di tengah (center)
jarak sel- jarak antar sel tabel. Ditentukan dalam piksel (default 0 piksel)
bantalan sel- padding dalam piksel antara konten sel dan batas internalnya (default 0 piksel)
Mari kita lihat sebuah contoh

tabel HTML

Stobet 1	Stobet 2
Teks di sel pertama kolom pertama	Teks di sel kedua kolom kedua

Browser akan menampilkan tabel tengah yang terlihat seperti ini:

tr baris dan sel td dalam tabel HTML

Izinkan saya mengingatkan Anda lagi bahwa tabel dibentuk baris demi baris (tr). Baris (tr) sudah berisi sel (td). Jika Anda menentukan parameter untuk string (tr), parameter tersebut akan valid semua sel(td) di baris ini, jika untuk sel tertentu, maka hanya untuk sel tersebut. Dalam contoh di atas, saya menentukan warna untuk baris; parameter ini didistribusikan ke semua sel.

Untuk tag tr dan td ada yang berikut ini

meluruskan- perataan teks di dalam sel. Tepi kiri (kiri), tepi kanan (kanan), tengah (tengah)
valign- perataan vertikal teks di dalam sel. Atas (atas), bawah (bawah), tengah (tengah)
bgcolor- mengatur warna garis
lebar- lebar kolom (semua sel di bawahnya akan terisi parameter ini) ditentukan dalam piksel atau persentase, dengan 100% adalah lebar keseluruhan tabel
tinggi- tinggi sel (semua sel di baris akan menerima parameter ini)

Mari kita lihat kode di mana isi sel (td) disejajarkan di sepanjang tepi yang berbeda: yang pertama ke kiri, yang kedua ke kanan:

tabel HTML

Stobet 1	Stobet 2
Teks di sel pertama kolom pertama	Teks di sel kedua kolom kedua
Stobet 1	Stobet 2

Hasil

Dengan menggunakan tabel Anda dapat membuat halaman yang sangat bagus. Jangan lupa bahwa Anda tidak hanya dapat menyisipkan teks ke dalam sel, tetapi juga gambar, tautan, dll.!)

Terima kasih atas perhatian Anda! Saya harap materinya bermanfaat!

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 bisa 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 ( batas-runtuh: runtuh; /*menghapus spasi kosong antar sel*/ batas: 1px abu-abu solid; /*diatur untuk tabel perbatasan luar warna abu-abu tebal 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

. Dalam praktiknya, ada kalanya hal ini diperlukan pemformatan khusus kolom, yang dapat dilakukan dengan cara berikut:

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

, 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 menjadi 1-2 piksel, itulah sebabnya piksel tunggal tersebar luas. gambar transparan. 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

Menggunakan sel kosong

Stobet 1

Stobet 2

Teks di sel pertama kolom pertama

Teks di sel kedua kolom kedua

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 difokuskan terutama pada baris (rows) yang dibentuk 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.

...

Tabel No.1
Perusahaan	Q1	Q2	Q3	Q4

keterangan (sisi keterangan: bawah; perataan teks: kanan; padding: 10px 0; ukuran font: 14px; )

Beras. 2. Contoh menampilkan header di bawah tabel

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 disembunyikan atau ditampilkan 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.

Perusahaan	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

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

Beras. 5. Contoh menyembunyikan sel tabel kosong

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.

Karyawan	Gaji	Bonusnya	Pengawas
Stephen C.Cox	$300	$50	Bob
Josephine Tan	$150	-	Annie
Joyce Ming	$200	$35	andi
James A.Pentel	$175	$25	Annie

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

Jika jumlah barisnya banyak, desain tabel ini membuat baris tersebut 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; )

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

Tabel

Judul 1	Judul 2
sel 3	sel 4

DI DALAM dalam contoh ini kita dapatkan 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. Properti gaya padding dapat digunakan dengan menambahkannya ke pemilih TD, seperti yang ditunjukkan pada Contoh 2.4.

Contoh 2.4. Bidang dalam tabel

Tabel

Judul 1	Judul 2
sel 3	sel 4

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.

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. Penspasian sel berbasis gaya digunakan sebagai pengganti penspasian sel. properti perbatasan-spacing , 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).

Contoh 2.5. Jarak antar batas sel

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

Mengganti spasi sel

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

Tabel

Judul 1	Judul 2
sel 3	sel 4

Contoh ini menggunakan pembatas hitam ganda di sekeliling tabel itu sendiri dan pembatas padat 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

Tabel

Judul 1	Judul 2
sel 3	sel 4

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

Tabel

Judul 1	sel 1	sel 2
Judul 2	sel 3	sel 4

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

Tabel

Judul 1	Judul 2
sel 1	sel 2

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.

Browser lama tidak menampilkan warna latar belakang sel tampilan kosong

Leonardo	5	8
Raphael		11
Michelangelo	24
Donatello		13

Tampilan tabel di peramban 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

Dan pada artikel kali ini saya akan membahas tentang desainnya menggunakan CSS. Untuk memformat tabel gaya berjenjang gunakan properti yang tercantum di bawah ini.

lebar dan tinggi

Atur lebar dan tinggi meja masing-masing. Tanpa properti ini, parameter ditentukan secara otomatis dan bergantung pada isi wadah

. Nilai ditetapkan dalam satuan apa pun panjang CSS, tetapi piksel sering digunakan ( piksel) dan bunga ( % ). Yang terakhir menetapkan lebar relatif terhadap elemen induk, sedangkan yang pertama menetapkan nilai absolut.

Tabel (lebar: 450px; tinggi: 80%;)

sisi keterangan

Menentukan di mana header tabel yang dijelaskan oleh tag akan ditempatkan

. Properti dapat diatur ke:

atas- letakkan di atas meja.
dasar- letakkan di bawah meja.

Eksklusif untuk peramban Firefox nilai yang tersedia kiri(menuju ke kiri) dan Kanan(di sebelah kanan tabel), tetapi browser lain tidak memahaminya.

Tabel (sisi keterangan: atas;)

keruntuhan perbatasan

Membantu menghindari situasi di mana batas sel terbentuk bingkai ganda. Gambar di bawah menunjukkan kasus seperti itu.

Ini adalah bagaimana bingkai sel ditampilkan secara default. Aturan keruntuhan perbatasan: terpisah; memberikan efek yang sama. Untuk mengatasi masalah tersebut, Anda perlu mendeklarasikannya keruntuhan perbatasan: keruntuhan;(hasilnya ditunjukkan pada gambar di bawah).

jarak batas

Mendefinisikan jarak antara batas sel. Aturan ditetapkan untuk seluruh tabel sekaligus. Jika ada satu nilai, maka akan mengatur jarak baik secara horizontal maupun vertikal. Jika ada dua nilai, maka yang pertama akan mengatur jarak horizontal, yang kedua - vertikal. Properti tidak sesuai dengan aturan tabel (runtuhnya batas: runtuh;).

Tabel ( border: 4px double #FCA360; border-collapse: terpisah; border-spacing: 10px 20px; ) td ( padding: 3px; border: 1px solid #FCA360; )

Memberi tabel tampilan berikut:

sel kosong

Menentukan apakah latar belakang dan batas sel ditampilkan jika kosong. Properti dapat memiliki salah satu dari dua nilai:

menunjukkan- tampilkan batas dan latar belakang (default).
bersembunyi- sembunyikan mereka. Jika semua sel dalam suatu baris kosong, maka seluruh baris akan disembunyikan. Jika tabelnya diberi aturan keruntuhan perbatasan: keruntuhan;, maka properti tersebut diabaikan.

tata letak tabel

Memberi tahu browser cara menentukan lebar sel tabel berdasarkan isinya.

mobil. Lebarnya ditentukan secara otomatis. Dalam hal ini, lebar semua kolom dijumlahkan, atau nilai properti diambil lebar, jika ditentukan untuk tabel. Browser pertama-tama memuat tabel, lalu menguraikannya untuk menentukan lebarnya, dan baru kemudian menampilkannya.
tetap. Lebar tetap, yang ditentukan oleh baris pertama.

Contoh desain meja

Jangan lupa bahwa Anda dapat menetapkan aturan universal lainnya pada tabel, misalnya, seperti yang kita lakukan dengan tinggi badan ( tinggi) dan lebar ( lebar).

Dengan mengingat hal ini, mari buat tabel sederhana, beri komentar sebagian pada kode.

keruntuhan perbatasan

Contoh tabel
Harga	2014	2015	2016
Roti	16	18	21
Gula	35	44	50
Garam	8	8,50	9

Di browser, tabelnya akan terlihat seperti di bawah ini.

lebar: 50%;

Atur lebar tabel menjadi setengah lebar tabel induk. 50% diambil dari lebar wadah karena dia tidak mempunyai orang tua lain. Artinya, tabel tersebut akan menempati tepat setengah dari jendela browser.

sisi keterangan: bawah;

Kami menempatkan judul di bagian bawah, di bawah tabel.

batas: 4px padat #006400;

Kami mengatur meja bingkai berwarna tebal 4 piksel.

keruntuhan perbatasan: keruntuhan;

Gabungkan batas sel.

tata letak tabel: diperbaiki;

Kami mengonfigurasi cara browser menentukan lebar tabel.

ukuran font: 13px;

Atur ukuran font sel header.

berat font: tebal;

Buat teks di dalamnya menjadi tebal.

latar belakang: #ADFF2F;

Mengatur warna latar belakang sel.

perbatasan-atas: 4px padat #006400; batas bawah: 3px solid #FF8C00;

Menyesuaikan bingkai atas dan bawah.

warna: #039;

Tentukan warna teks.

bantalan: 8 piksel;

Atur jarak dari isi sel ke batasnya menjadi delapan piksel.

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

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

Di dalam tag

sel tabel yang diwakili oleh tag berada

atau

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

Bingkai meja

Secara default, tabel HTML pada halaman web ditampilkan tanpa batas; untuk menambahkan batas pada tabel, serta semua elemen lainnya, gunakan properti CSS perbatasan. Namun perlu diperhatikan fakta bahwa jika Anda menambahkan bingkai hanya ke elemen

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

Dan

Tabel, th, td ( batas: 1px hitam pekat; ) Coba »

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

Bahkan jika Anda menghapus spasi antar sel menggunakan properti penspasian batas dengan nilai 0, batas sel akan saling bersentuhan, sehingga ukurannya menjadi dua kali lipat. Untuk menggabungkan batas sel, gunakan properti border-collapse. Ini dapat memiliki dua arti:

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

Judul dokumen

Nama	Nama belakang
Homer	Simpson
Pinggiran	Simpson

Nama	Nama belakang
Homer	Simpson
Pinggiran	Simpson

Mencoba "

Ukuran meja

Setelah menambahkan batas ke sel tabel, saya perhatikan bahwa isi sel terlalu dekat dengan tepinya. Untuk menambahkan spasi antara tepi sel dan isinya, Anda dapat menggunakan properti padding:

Th, td ( padding: 7px; ) Coba »

Ukuran sebuah meja bergantung pada isinya, namun situasi sering muncul ketika meja terlalu sempit dan perlu diregangkan. Lebar dan tinggi tabel dapat diubah menggunakan properti lebar dan tinggi dengan menentukan ukuran yang diperlukan atau tabel atau sel itu sendiri:

Tabel (lebar: 70%; ) th (tinggi: 50px; ) Coba »

Perataan teks

Secara default, teks dalam sel header tabel rata tengah, sedangkan teks dalam sel biasa rata kiri; menggunakan properti perataan teks, Anda dapat mengontrol perataan horizontal teks.

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

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

Judul dokumen

Nama	Nama belakang
Homer	Simpson
Pinggiran	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 dimilikinya garis tertentu. Untuk membantu pengguna menemukan jalan mereka, Anda dapat menggunakan dua warna latar belakang berbeda secara bergantian. Untuk membuat efek yang dijelaskan, Anda bisa menggunakan pemilih kelas, menambahkannya ke setiap baris kedua tabel:

Judul dokumen

Nama	Nama belakang	Posisi
Homer	Simpson	ayah
Pinggiran	Simpson	ibu
Bart	Simpson	putra
Lisa	Simpson	anak perempuan

Mencoba "

Menambahkan atribut kelas ke setiap baris kedua adalah tugas yang cukup membosankan. Pseudo-class:nth-child telah ditambahkan ke CSS3 untuk memberikan solusi alternatif terhadap masalah ini. Sekarang efek pergantian hanya dapat dicapai menggunakan CSS tanpa mengubah markup HTML dokumen. Dengan menggunakan pseudo-class:nth-child, Anda dapat memilih semua baris tabel genap atau ganjil menggunakan salah satu dari kata kunci: genap (genap) atau ganjil (ganjil):

Tr:n-anak(ganjil) ( warna latar: #EAF2D3; ) Coba »

Ubah latar belakang baris saat mengarahkan kursor

Cara lain untuk meningkatkan keterbacaan data tabular adalah dengan melakukan perubahan warna latar belakang baris ketika Anda mengarahkan kursor mouse ke atasnya. Ini akan membantu menyorot konten tabel yang diinginkan dan meningkatkan persepsi visual data.

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

Tr:hover (warna latar: #E0E0FF; ) Coba »

Menyelaraskan meja ke tengah

Penyelarasan HTML Memusatkan tabel hanya dapat dilakukan jika lebar tabel lebih kecil dari lebar elemen induknya. Untuk menyelaraskan tabel ke tengah, Anda perlu menggunakan properti margin, memberikan setidaknya dua nilai: nilai pertama akan bertanggung jawab atas margin luar tabel di bagian atas dan bawah, dan nilai kedua - untuk perataan otomatis di tengah:

Tabel ( margin: 10px otomatis; ) Coba »

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

Tabel ( margin: 10px otomatis 30px; )

Sergei Savenkov

semacam ulasan "pendek"... seolah-olah mereka sedang terburu-buru di suatu tempat

OTOMATIS

Tujuan tabel dalam html

Properti dan parameter tabel html: lekukan, lebar, warna latar belakang, batas (bingkai)

tr baris dan sel td dalam tabel HTML

Memformat tabel

1. Batas tabel

2. Cara mengatur lebar dan tinggi meja

3. Cara mengatur latar belakang tabel

4. Kolom tabel

5. Bagaimana cara menambahkan judul tabel

6. Cara menghilangkan spasi antar frame sel

7. Cara menambah jarak antar bingkai sel

8. Cara menyembunyikan sel tabel yang kosong

9. Tata letak tabel menggunakan properti table-layout

10. Tata Letak Tabel Terbaik

1. Minimalisme horizontal

2. Minimalis vertikal

3. Gaya kotak

4. Zebra mendatar

5. Gaya surat kabar

6. Latar belakang tabel

Warna latar belakang sel

Beras. 2.4. Mengubah warna latar belakang

diabaikan.

Perbatasan dan bingkai

Menggunakan atribut spasi sel

Menggunakan properti perbatasan

Menyelaraskan isi sel

Sel kosong

lebar dan tinggi

sisi keterangan

keruntuhan perbatasan

jarak batas

sel kosong

tata letak tabel

Contoh desain meja

Bingkai meja

Ukuran meja

Perataan teks

Mengganti warna latar belakang baris tabel

Ubah latar belakang baris saat mengarahkan kursor

Menyelaraskan meja ke tengah