Bab ini membahas secara detail tentang prinsip-prinsip penggunaan tabel dalam markup HTML. Ini adalah organisasi teks dalam tabel, dan kisi koordinat tabel, dan grafik yang diatur dalam tabel.
Fasilitas deskripsi tabel HTML
Dengan perkembangan WWW, menjadi jelas bahwa sarana yang disematkan di NTML tidak cukup untuk tampilan berbagai jenis dokumen berkualitas tinggi. Kerugian dari НТМL adalah kurangnya fasilitas tampilan meja dalam komposisinya. Untuk tujuan ini, teks yang telah diformat sebelumnya (tag
), di mana tabel diuraikan dengan simbol ASCII. Tetapi bentuk penyajian tabel ini tidak berkualitas tinggi dan tidak sesuai dengan gaya dokumen secara umum. Dengan pengenalan tabel ke dalam HTML, Webmaster tidak hanya memiliki alat untuk menempatkan teks dan angka, tetapi alat desain yang kuat untuk menempatkan grafik dan teks di tempat yang tepat di layar.Membuat tabel dalam HTML
Tag digunakan untuk mendeskripsikan tabel<ТАВLЕ>... Menandai<ТАВLЕ>seperti banyak lainnya, ini secara otomatis menerjemahkan baris sebelum dan sesudah tabel.
Buat baris tabel - tag<ТR>
Menandai<ТR> (Baris Tabel, baris tabel) membuat baris tabel. Semua teks, tag dan atribut lain yang perlu ditempatkan pada satu baris harus ditempatkan di antara tag lt; TR\u003e.
Mendefinisikan Sel Tabel - Tag<ТD>
Sel dengan data biasanya ditempatkan di dalam baris tabel. Setiap sel yang berisi teks atau gambar harus diapit oleh tag<ТD>... Jumlah tag<ТD> per baris menentukan jumlah sel
Meja
Jika sebuah tabel memiliki dua tag TR, maka ia memiliki dua baris. Jika ada tiga tag TD dalam satu baris, lalu di dalamnya tiga kolom. Header Kolom Tabel - Tag<ТН>
Header untuk kolom dan baris tabel diatur menggunakan tag header<ТН> (Table Neader, judul tabel). Tag ini seperti<ТD>... Perbedaannya adalah teks di antara tag<ТН>, secara otomatis ditulis tebal dan terletak di tengah sel secara default. Anda dapat membatalkan pemusatan dan meratakan teks ke kiri atau kanan. Jika Anda menggunakan<ТD> dengan tag<В> dan atribut<АLIGN=center>, teks juga akan terlihat seperti judul. Namun, perlu diingat bahwa tidak semua browser mendukung teks tebal dalam tabel, jadi sebaiknya atur header tabel menggunakan<ТН>.
| Judulnya berada di tengah secara default | Header dapat menggabungkan kolom | |
|---|---|---|
| Header dapat ditempatkan sebelum kolom | Teks atau data | Teks atau data |
| Header dapat menggabungkan baris | Teks atau data | Teks atau data |
| Teks atau data | Teks atau data | |
| Teks atau data | Teks atau data | |
Menggunakan header tabel - tag<САРТIОN>
Menandai
| Teks atau data | Teks atau data | Teks atau data | Teks atau data |
| Teks atau data | Teks atau data | Teks atau data |
Atribut NOWRAP
Biasanya, teks apa pun yang tidak pas dalam satu baris dalam sel tabel pindah ke baris berikutnya. Namun, saat menggunakan atribut NOWRAP dengan tag<ТН> atau<ТD> panjang sel meluas sehingga teks tertutup pas dalam satu baris.
Atribut COLSPAN
Tag<ТD> dan<ТН> dimodifikasi menggunakan atribut COLSPAN (Rentang Kolom). Jika Anda ingin membuat sel lebih lebar dari atas atau bawah, Anda dapat menggunakan atribut COLSPAN untuk merentangkannya di atas sejumlah sel biasa.
| Jika Anda ingin membuat sel lebih lebar dari atas atau bawah, | anda dapat menggunakan atribut COLSPAN \u003d 2, |
| untuk meregangkannya ke sejumlah sel biasa. | |
ROWSPAN
Atribut ROWSPAN digunakan dalam tag<ТD> dan<ТН>, mirip dengan atribut COLSPAN \u003d, kecuali bahwa ini menentukan jumlah baris untuk merentang sel. Jika Anda menentukan angka yang lebih besar dari satu di atribut ROWSPAN \u003d s, maka jumlah baris yang sesuai harus berada di bawah sel yang diregangkan. Itu tidak dapat ditempatkan di bagian bawah meja.
Atribut WIDTH
Atribut WIDTH digunakan dalam dua cara. Anda bisa memasukkannya ke dalam tag<ТАВLЕ>untuk memberikan lebar seluruh tabel, atau dapat digunakan dalam tag<ТD> atau<ТН>untuk mengatur lebar sel atau sekelompok sel. Lebar dapat ditentukan dalam piksel atau persentase. Misalnya, jika Anda menyetel di tag<ТАВLЕ> WIDTH \u003d 250, Anda mendapatkan tabel dengan lebar 250 piksel terlepas dari ukuran halaman di monitor Anda. Saat menyetel WIDTH \u003d 50% di tag<ТАВLЕ> tabel akan menempati setengah lebar halaman untuk ukuran gambar apa pun di layar. Jadi, saat menentukan lebar tabel sebagai persentase, perlu diingat bahwa jika pengguna memiliki area pandang yang sempit, laman Anda mungkin terlihat sedikit aneh. Jika Anda menggunakan piksel dan tabel lebih lebar dari viewport, scroll bar muncul di bagian bawah untuk bergerak ke kiri dan kanan pada halaman. Bergantung pada tugas yang ada, kedua metode pengaturan lebar tabel mungkin berguna.
| Teks atau data - lebar 100% |
| Teks atau data - lebar 50% |
| Teks atau data - lebar 200 piksel |
| Teks atau data - lebar 100 piksel |
Menerapkan sel kosong
Jika sel tidak berisi data, itu tidak akan memiliki batas. Jika Anda ingin sel memiliki batas tetapi tidak ada konten, Anda perlu memasukkan sesuatu di dalamnya yang tidak akan terlihat saat dilihat. Anda dapat menggunakan baris kosong<ВR>... Anda bahkan dapat menentukan kolom kosong dengan menentukan lebarnya dalam piksel atau unit relatif dan tidak memasukkan data apa pun ke dalam sel yang dihasilkan. Alat ini dapat berguna saat menempatkan teks dan grafik pada halaman.
Atribut CELLPADDING
Atribut ini mendefinisikan lebar ruang putih antara konten sel dan batasnya, yaitu mengatur margin di dalam sel.
| Teks atau data | Teks atau data | Teks atau data |
| Teks atau data | Teks atau data | Teks atau data |
| Teks atau data | Teks atau data | Teks atau data |
| Teks atau data | Teks atau data | Teks atau data |
Atribut ALIGN dan VALIGN
Tag<ТR>, <ТD> dan<ТН> dapat dimodifikasi menggunakan atribut ALIGN dan VALIGN. Atribut ALIGN menentukan perataan horizontal teks dan grafik, yaitu, ke kiri atau kanan, atau ke tengah. Penjajaran horizontal dapat ditentukan dengan beberapa cara:
ALIGN \u003d bleedleft menekan isi sel ke tepi kiri.
ALIGN \u003d kiri Menyelaraskan konten sel ke kiri, dengan mempertimbangkan indentasi yang ditentukan oleh atribut CELLPADDING.
ALIGN \u003d tengah memusatkan isi sel.
ALIGN \u003d benar konten sel rata kanan dengan padding yang ditentukan oleh atribut CELLPADDING.
| Teks atau data | Teks atau data | Teks atau data |
| Teks atau data | Teks atau data | Teks atau data |
| Teks atau data | Teks atau data | Teks atau data |
| Teks atau data | Teks atau data | Teks atau data |
| Teks atau data | Teks atau data | Teks atau data |
Atribut VALIGN meratakan teks dan grafik secara vertikal di dalam sel. Penjajaran vertikal dapat ditentukan dengan beberapa cara:
VALIGN \u003d atas meratakan konten sel ke batas atasnya.
VALIGN \u003d tengah memusatkan isi sel secara vertikal.
VALIGN \u003d bawah meratakan konten sel ke batas bawahnya.
| Atribut VALIGN meratakan teks dan grafik secara vertikal di dalam sel. | puncak, | tengah, | bawah. |
| VALIGN \u003d atas Meratakan isi sel ke batas atasnya. | puncak, | puncak, | puncak. |
| VALIGN \u003d tengah Menengahkan isi sel secara vertikal. | tengah, | tengah, | tengah. |
| VALIGN \u003d bottom Sejajarkan isi sel dengan batas bawahnya. | bawah, | bawah, | bawah. |
Atribut BORDER
Di tag<ТАВLЕ> sering kali menentukan tampilan bingkai, yaitu garis yang mengelilingi sel tabel dan tabel itu sendiri. Jika Anda tidak menentukan batas, Anda akan mendapatkan tabel tanpa garis, tetapi akan ada ruang untuk mereka. Hasil yang sama dapat dicapai dengan pengaturan<ТАВLЕ ВОRDER=0>... Terkadang Anda ingin membuat bingkai lebih tebal agar lebih menonjol. Anda dapat mengatur batas yang sangat tebal untuk menarik perhatian ke gambar atau teks. Saat membuat tabel bertingkat, Anda harus membuat batas dengan ketebalan berbeda untuk tabel yang berbeda, sehingga lebih mudah untuk membedakannya.
Atribut CELLSPACING
Atribut CELLSPACING menentukan lebar spasi antar sel dalam piksel. Jika atribut ini tidak ditentukan, defaultnya adalah dua piksel. Atribut CELLSPACING \u003d memungkinkan Anda menempatkan teks dan grafik di mana pun Anda inginkan. Jika Anda ingin mengosongkan spasi, Anda dapat memasukkan spasi di dalam sel.
| Teks atau data | Teks atau data | Teks atau data |
| Teks atau data | Teks atau data | Teks atau data |
| Teks atau data | Teks atau data | Teks atau data |
| Teks atau data | Teks atau data | Teks atau data |
| Teks atau data | Teks atau data | Teks atau data |
| Teks atau data | Teks atau data |
Atribut BGCOLOR
Atribut ini memungkinkan Anda untuk mengatur warna latar belakang. Bergantung pada tag mana (TABLE, TR, TD) yang diterapkan dengannya, warna latar belakang dapat diatur untuk seluruh tabel, untuk satu baris, atau untuk satu sel. Nilai atribut ini adalah kode RGB atau nama warna standar.
| Teks atau data | Teks atau data | Teks atau data |
| Teks atau data | Teks atau data | Teks atau data |
Atribut LATAR BELAKANG
Atribut ini menyetel gambar latar belakang untuk tabel. Berlaku untuk tag TABLE dan TD. Nilainya adalah URL dari file gambar latar belakang. Penggunaan atribut ini dibahas di bawah.
Menggunakan tabel dalam desain halaman
Hal yang baik tentang tabel adalah Anda dapat membuat batasnya tidak terlihat jika Anda mau. Ini memungkinkan penggunaan tag<ТАВLЕ> tempatkan teks dan gambar dengan indah pada halaman. Sedangkan tag<ТАВLЕ> tetap menjadi satu-satunya alat pemformatan yang kuat dalam HTML. Para desainer halaman web sekarang memiliki kebebasan yang hampir sama untuk menggunakan "ruang putih" sebagai pembuat halaman tercetak. Tabel adalah cara terbaik untuk menjauh dari penempatan hierarki teks di halaman Web.
Jika browser mendukung tabel, biasanya browser menampilkan efek paling menarik yang diperoleh dengan benar.
Universitas Pedagogi Negeri UralSelamat datang!
|
Membuat tabel warna-warni
Beberapa browser memungkinkan menampilkan warna. Ada beberapa cara untuk mewarnai tabel, sebagian besar bergantung pada browser yang digunakan.
Batas berwarna di Netscape Navigator. Anda tidak hanya dapat mengelilingi tabel dengan bingkai yang bagus, tetapi Anda juga dapat mengatur warna yang berbeda dari teks dan warna latar belakang. Buat GIF abu-abu sederhana (atau GIF apa pun yang Anda inginkan sebagai latar belakang) dan tentukan di tag<ВODY> sebagai latar belakang halaman. Kemudian atur warna latar belakang halaman. Hasilnya, tag Anda<ВОDY> akan terlihat seperti ini:
Anda telah membuat latar belakang ganda - GIF dan warna tertentu. Hasilnya, warna latar belakang akan terlihat di semua batas tabel dan garis horizontal (<НR>). Terlepas dari apakah GIF latar Anda berwarna abu-abu atau tidak, garis berwarna dan batas tabel akan terlihat mencolok. Jika GIF latar belakang tidak terlalu rumit, waktu buka halaman hanya akan bertambah sedikit.
CSS memungkinkan Anda menyetel tidak hanya gaya batas tabel, tetapi juga gaya batas sel individual. Karena setiap sel memiliki batasnya sendiri, batas antara sel yang berdekatan menjadi dua kali lipat. Tetapi dimungkinkan untuk menggabungkan perbatasan sel tetangga menjadi satu. Ada properti penciutan batas untuk ini. Itu mengambil nilai-nilai:
border-collapse: pisahkan - setiap sel memiliki batasnya sendiri (default)
border-collapse: collapse - perbatasan umum
border-collapse: inherit - nilai diambil dari elemen induk
Misalnya, mari membuat tabel dan menetapkan bingkai untuk sel dari semua tabel yang akan ada di halaman. Pertama, jangan ubah apa pun untuk melihat bagaimana tabel akan terlihat:
Gaya:
1 |
Hasil di browser: Sekarang mari tambahkan batas untuk setiap sel. Untuk melakukan ini, cukup tambahkan gaya:
Hasil di browser: Bagaimana menghapus padding antar sel di tabel HTMLSetuju 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. Pada 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 border seperti itu, yang disebut double, jika kita menggunakan properti CSS border-collapse. Dalam praktiknya, ini terlihat seperti ini: Tabel (batas: solid 1px biru; border-collapse: collapse;) ... Akibatnya, jarak antar sel dihapus: Nilai penciutan yang ditetapkan ke atribut perbatasan menghapus batas ganda. Seperti yang Anda lihat, hasilnya adalah menciutkan batas sel yang berdekatan, serta batas sel dan batas luar tabel. Adapun yang terakhir, itu bisa dihilangkan sama sekali. Dan jika ada kebutuhan untuk menampilkannya, Anda perlu menambah lebarnya. Jadi, kami menyingkirkan pemisah di tabel. Pada pelajaran berikutnya, kita akan berbicara tentang bagaimana Anda dapat mengatur batas vertikal dan horizontal. Semoga beruntung untuk semuanya! 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 tabel1. Batas batas tabelTabel dan sel di dalamnya ditampilkan di browser tanpa batas yang terlihat secara default. Batas tabel diatur oleh properti perbatasan: Tabel (border-collapse: collapse; / * hapus spasi kosong di antara sel * / batas: 1px abu-abu pekat; / * setel batas luar abu-abu 1px untuk tabel * /) Batas sel tajuk setiap kolom ditetapkan untuk elemen ke: Th (batas: 1 piksel abu-abu pekat;) Batas sel badan tabel ditetapkan untuk elemen td: Td (batas: 1 piksel abu-abu pekat;) Lebar batas sel yang berdekatan tidak digandakan, jadi Anda bisa menyetel batas untuk seluruh tabel dengan cara berikut: Th, td (batas: 1px abu-abu solid;) Batas luar tabel dapat dipilih dengan menambah lebar: Tabel (batas: 3px abu-abu solid;) Batas dapat disetel sebagian: / * setel batas luar abu-abu 3px untuk tabel * / tabel (batas atas: 3px abu-abu solid;) / * setel batas abu-abu 1px untuk sel badan tabel * / td (batas bawah: 1px abu-abu solid;) Anda dapat membaca lebih lanjut tentang properti perbatasan. 2. Bagaimana mengatur lebar dan tinggi mejaDefault lebar dan tinggi tabel ditentukan oleh isi selnya. Jika tidak ada lebar yang ditentukan, maka lebar akan sama dengan lebar baris terlebar (baris). Tabel dan Lebar Kolom atur menggunakan properti lebar. Jika tabel (lebar: 100%;) ditentukan untuk sebuah tabel, maka lebar tabel akan sama dengan lebar blok penampung tempatnya berada. Lebar tabel dan kolom biasanya ditentukan dalam px atau%, contoh: Tabel (lebar: 600px;) th (lebar: 20%;) td: anak pertama (lebar: 30%;) Tinggi meja tidak diatur. Ketinggian baris tabel dapat dimanipulasi dengan menambahkan padding atas dan bawah ke elemen | dan | ... Memperbaiki ketinggian menggunakan properti ketinggian tidak disarankan. Th, td (padding: 10px 15px;) 3. Bagaimana mengatur latar belakang mejaDefault latar belakang tabel dan selnya transparan. Jika halaman atau blok yang berisi tabel memiliki latar belakang, maka itu akan bersinar melalui tabel. Jika latar belakang disetel 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 selnya dapat berupa: 4. Kolom tabelModel tabel CSS difokuskan terutama pada string (baris) yang dibentuk menggunakan tag | |||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Perusahaan | P1 | Q2 | P3 | P4 |
|---|
Angka: 2. Contoh menampilkan header di bawah tabel 6. Bagaimana menghapus celah antara bingkai sel
Secara default, batas sel tabel dipisahkan oleh spasi kecil. Jika kita menyetel border-collapse: collapse untuk tabel, maka celah tersebut akan dihapus. Properti ini diwarisi.
Sintaksis
Tabel (border-collapse: collapse;) 
Angka: 3. Contoh tabel dengan batas sel penggabungan dan pemisahan
7. Bagaimana cara menambah jarak antar batas sel
Menggunakan properti penspasian batas, Anda bisa mengubah jarak antar batas sel. Properti ini berlaku untuk tabel secara keseluruhan. Diwarisi.
Sintaksis
Tabel (border-collapse: terpisah; border-spacing: 10px 20px;) table (border-collapse: terpisah; border-spacing: 10px;) 
Angka: 4. Contoh tabel dengan peningkatan celah antara bingkai sel
8. Cara menyembunyikan sel tabel kosong
Properti sel kosong menyembunyikan atau memperlihatkan sel kosong. Hanya mempengaruhi sel yang tidak mengandung konten apa pun. Jika latar belakang ditentukan untuk sel, dan tabel (border-collapse: collapse;) ditentukan untuk tabel, maka sel tidak akan disembunyikan. Diwarisi.
| Perusahaan | P1 | Q2 | P3 |
|---|---|---|---|
| Microsoft | 20.3 | 30.5 | |
| 50.2 | 40.63 | 45.23 |
Angka: 5. Contoh menyembunyikan sel tabel kosong 9. Layout tata letak tabel menggunakan properti table-layout
Tata letak tata letak tabel ditentukan dengan 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. Properti tidak diwariskan.
Sintaksis
Tabel (tata letak tabel: tetap;)
10. Tata Letak Tabel Terbaik
1. Minimalisme horizontal
Tabel horizontal adalah tabel tempat teks dibaca secara horizontal. Setiap entitas adalah baris terpisah. Anda dapat mengatur gaya tabel seperti ini dalam gaya minimalis dengan menempatkan batas dua piksel di bawah judul. 
| 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 |
Dengan jumlah baris yang banyak, desain tabel ini membuat sulit untuk dibaca. Untuk mengatasi masalah ini, Anda dapat menambahkan satu batas 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: efek hover ke elemen tr membuat tabel yang bergaya minimalis lebih mudah dibaca. Saat Anda mengarahkan mouse ke atas sel, sel lainnya di baris yang sama disorot pada saat yang sama, yang menyederhanakan proses melacak informasi jika tabel memiliki banyak kolom. 
Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: hover td (background: # e8edff ;)
2. Minimalis vertikal
Meskipun tabel semacam itu 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; color: # 669; padding: 12px 2px;)
3. Gaya "kotak"
Gaya yang paling dapat diandalkan untuk mendekorasi meja dari semua jenis adalah 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 mengatur batas sebagai pemisah. 
Th (font-size: 13px; font-weight: normal; background: # b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: # 039; padding: 8px;) td (background : # e8edff; border-bottom: 1px solid #fff; color: # 669; border-top: 1px solid transparent; padding: 8px;) tr: hover td (background: #ccddff;)
Hal yang paling sulit adalah menemukan skema warna yang akan berbaur secara harmonis dengan situs Anda. Jika situs sarat dengan grafik dan desain, maka akan cukup sulit bagi Anda untuk menggunakan gaya ini. 
Tabel (jenis font: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 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; color: # 039; padding: 8px;) td (background: # e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: # 669; padding: 8px ;)
4. Zebra horizontal
Tabel zebra terlihat cukup menarik dan praktis. Warna latar belakang pelengkap dapat menjadi petunjuk visual bagi orang-orang untuk 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 koran
Untuk mencapai apa yang disebut efek koran, Anda dapat menerapkan batas ke elemen tabel dan bermain dengan sel di dalamnya. Gaya koran yang ringan dan minimal mungkin terlihat seperti ini: bermain-main dengan skema warna, tambahkan batas, padding, latar belakang berbeda, dan efek: hover saat 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 (background: #ccddff;)
Tabel (batas: 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 (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; 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 tabel
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% tanpa pengulangan;) th (font-weight: normal; font-size: 14px; color: # 339; padding: 10px 12px; background: white;) td (color: # 669; border- atas: 1px solid white; padding: 10px 12px; background: rgba (51, 51, 153, .2); transisi: .3s;) tr: hover td (background: rgba (51, 51, 153, .1); )
