Tablo nasıl uyarlanır. Hangi bilgiler önemlidir
Hacimsel verileri küçük bir ekranda görüntülemek her zaman bir bilmecedir. Bunu hangi yollarla çözebilirsiniz ve mobil cihazlarda uygun bir masa nasıl görünmelidir?
Tabloların yalnızca ekran sınırlarının ötesine geçtiğini belirtmekte fayda var. mobil cihazlar: Büyük bir monitöre, hatta birkaçına sığabilecek olandan daha fazla sütun veya çizgi içerirler. Ancak daha küçük ekran, daha olası kullanılabilirlik sorunları ortaya çıkar.
Bir tablo görünümündeki anahtar öğeler, içerik uyumu ve anlamlı özelliklerdir. Her ikisi de özellikle pivot tablolar için önemlidir. Öncelikle kullanışlı bir tablo oluşturmalısınız büyük monitörlerve ardından küçük ekranlar için sürümü. Bu ihtiyaç, elektronik tablonuzun içeriğini değiştirmek ve tüm kullanıcılar için daha uygun hale getirmek için harika bir neden olabilir.
Bir mobil ekranda görüntülenecek tablo sütunlarının sayısı genişliklerine bağlıdır ve içerikleri yakınlaştırmaya gerek kalmadan anlaşılabilir olmalıdır.
Karmaşık veya hacimli metinler için, örneğin karşılaştırma tablolarında, dar mobil ekran yalnızca 2 sütuna sığar. Tablo esas olarak sayılarla doldurulursa, sütunlar daha dar yapılabilir ve bu nedenle daha fazla sığabilir.
National Rugby League istatistikleri sayılardan oluşur, böylece 11 sütun yatay kaydırmaya gerek kalmadan mobil ekrana kolayca sığabilir. Lütfen bu sonucun yalnızca ilk sütunda rakip takımın logosu ve tecrübesiz bir kişi için anlaşılmaz olabilecek kısaltmalar kullanılarak elde edildiğini unutmayın. Ancak, oyuncularla ilgili bu kadar ayrıntılı istatistiklerle sadece rugby hayranları ilgileniyor.
Telefonu çevirmek son çare
Telefonu yatay olarak çevirirseniz ekrana daha fazla sütun sığacaktır. Bununla birlikte, aynı zamanda, hat sayısı azalır ve kullanıcılar, akıllı telefonu döndürme ihtiyacından rahatsız olabilir (özellikle bir döndürme kilidi varsa). Büyük tabla genişliğinin bu dezavantajları haklı gösterip göstermediğini dikkatlice düşünün.
Citi'nin web sitesinde kredi kartlarını karşılaştırmak için, kullanıcıların şu talimatları izlemesi gerekir: "Kredi kartlarını karşılaştırmaya devam etmek için telefonunuzu yana çevirin." Aynı zamanda, döndürdüğünüzde, büyük kredi kartı görüntüleri ekranın çoğunu kaplar ve kaydırma sırasında sabitlenir ve tablonun içeriği için çok az yer bırakır. Bu, birçok mobil sitenin yaptığı bir hatadır: resimler, masaüstünde bir sütun için iyi bir başlık olsa da, mobil cihazlarda gereklidir.
Birden fazla dikey ekrana yayılan herhangi bir tabloda, yapışkan sütun başlıkları kullanıcının bağlam dışında kalmasına yardımcı olur.
Soldaki Best.Buy ile karşılaştırma tablosunda, ne sütunlar ne de başlıkları sabittir ve verilerin okunması zordur. Sağ taraf, herhangi bir görünür açıklama olmaksızın bu tablonun kaydırırken nasıl göründüğünü gösterir.
Hem mobil hem de masaüstünde genellikle istenmeyen bir durum olsa da, mobil cihazlarda büyük masalar için nispeten kabul edilebilir bir durumdur. Veriler ekrana sığmadığında ziyaretçilerin bunları kullanması gerekebilir. Bununla birlikte, bu durumda gerekli: Bunun tüm mevcut veriler olmadığı aşikar olmalıdır. Kaydırıcılarda olduğu gibi, oklar ve kırpılmış öğeler bu bilgiyi en açık şekilde aktarır. Noktalar bazen kullanılır, ancak genellikle fark edilmesi ve anlaşılması daha zordur.
EBag'de, son ürün sütunu kesilerek kullanıcılar yatay kaydırmanın mevcut olduğunun farkına varmıştır.
Subaru'nun sitesi, kullanıcılara birkaç tane daha içerik ekranı olduğunu göstermek için tablonun üzerinde noktalar ve oklar kullanır. Noktalar biraz kafa karışıklığı yaratır çünkü bunlardan ikisi "mevcut konumu" (yani, şu anda görünür durumda olan iki sütun) göstermek için vurgulanmıştır. Ek olarak, okları masanın üstüne değil doğrudan içine yerleştirmek daha iyidir.
Kullanıcıların yatay kaydırmaya başvurması gerekiyorsa, genellikle satır başlıklarını içeren en soldaki sütun, kullanıcıların her zaman satır başlıklarını görebilmesi için düzeltilmelidir.
Fidelity sabit ek başlıkları ve sütun başlıkları. Sağdaki son sütun, kullanıcıların yatay kaydırmanın mevcut olduğunu bilmelerini sağlamak için kırpılmıştır.
Officeworks.com.au, kullanıcıların diğer tüm seçenekleri onunla karşılaştırabilmesi için ilk ürün sütununu düzeltti. İlk sütundaki ürün, karşılaştırma için bir referans noktası görevi görür ve kullanıcılar onu başka bir şeyle değiştirebilir. Tablonun sağına yerleştirilen oklar, verilerin sola ve sağa kaydırılabileceğini açıkça gösterir.
Veriler ekrana sığmazsa, kullanıcıların bunları tam olarak incelemek için muhtemelen zamanı veya eğilimi olmayacaktır. Öyleyse soru, onlara yalnızca ihtiyaç duydukları bilgileri nasıl sağlayacaklarıdır. Bu sorunun cevabı göreve ve veri türüne bağlıdır. Farklı durumlarda veri miktarını sınırlandırmak için iki strateji:
- Kullanıcı, ilgilendiği verileri görmeden önce seçer.
- Kullanıcı ilgilendiği verileri görüntülerken seçer.
İlk yaklaşım, kullanıcının verileri görmesi gerektiğinde işe yarar, ancak karşılaştırmaz ve veriler yüklenmeden önce yalnızca ihtiyacı olanı seçer. Örneğin, yalnızca belirli bir arabanın özellikleri, belirli bir yemeğin beslenme özellikleri veya belirli bir oyuncunun istatistikleriyle ilgilenebilir ve kullanıcı bunları diğer seçeneklerle karşılaştırmaz.
Jamba Juice'in besleyici özellikleri hakkındaki bilgileri görmek için, bir ziyaretçinin ilgilendiği bir içecek seçmesi ve bu içeceği görmesi gerekir. Küçük / Orta / Büyük radyo düğmesi, istenen seçeneği belirlemenize olanak tanır, ancak karşılaştırmaya izin vermez. Örneğin, küçük ve orta boy bir bardak arasındaki kalori sayısındaki farkı anlamak için, kullanıcının önce küçük bir bardak için kalori sayısını ezberlemesi, sonra ortama geçmesi, onun için kalori sayısını görmesi ve birini diğerinden çıkarması gerekir - çoğu insanın yapamayacağı kadar tembel olduğu çok fazla zihinsel çalışma. ...
İkinci strateji, verileri görüntülerken kullanıcıya genel bakış kontrolünü vermektir. Örneğin, bir kullanıcı iki seçenek arasındaki benzerlikleri veya farklılıkları görmek isterken, diğerinin malların belirli özelliklerini (örneğin bagajın kapasitesi veya güvenlik önlemleri) bilmesi gerekir, ancak iki arabanın gürültü seviyesindeki fark onun için ilginç değildir. Hangi satırların ve sütunların görüntüleneceğini seçme yeteneği, kullanıcıların kendileri için önemli olan özelliklere odaklanmasına olanak tanır.
Dell web sitesinde kullanıcılar, özellikler sayfanın üst kısmındaki menüde ürün. Sol: Varsayılan olarak, tüm istatistikler görüntülenir. Merkez: kullanıcı, istenenleri seçer. Sağ: yalnızca seçtiği görüntülenir.
Tablo, kategoriler halinde gruplandırılabilen veriler içeriyorsa, bunu yapın ve mobil kullanıcıların şunları yapmasına izin verin:
- tabloda bulunan veri türlerine genel bir bakış;
- ilgilendiğiniz bilgilere doğrudan erişim sağlayın.
Samsung.com'da karşılaştırma tabloları, tüm özellikleri veya yalnızca ürünler arasındaki benzerlikleri veya yalnızca kullanıcı tarafından seçilen farklılıkları veya kriterleri gösterebilir. Site, verileri benzer özniteliklerle gruplandırarak ilgilendiğiniz veri kümelerini seçmenize olanak tanır. Aynı zamanda, veri grupları, kullanıcılara hangi ürün bilgilerinin mevcut olduğunu söyleyerek sayfanın içeriğine genel bir bakış sağlar.
pencereler : Internet Explorer 10.0+, Firefox 1.5+, Google Chrome, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [1].
Linux : Firefox 1.5+, Google Chrome / Chromium, Opera 9.5+, SeaMonkey 1.0+ [2].
HTML tablosu çok fazla veri içeriyorsa, sayfadaki mevcut alandan daha geniş hale gelir ve bunun ötesine geçmeye başlar. Durumu düzeltmek için tabloya yatay kaydırma ekleyebilirsiniz. Misal:
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
|---|---|---|---|---|---|---|---|---|---|
| Table_data_1 | Table_data_2 | Table_data_3 | Tablo_verileri_4 | Tablo_verileri_5 | Tablo_verileri_6 | Tablo_verileri_7 | Tablo_verileri_8 | Tablo_verileri_9 | Tablo_verileri_10 |
HTML / XHTML. Kod:
<masa>
<tr>
<inci>1</ inci>
<inci>2</ inci>
<inci>3</ inci>
<inci>4</ inci>
<inci>5</ inci>
<inci>6</ inci>
<inci>7</ inci>
<inci>8</ inci>
<inci>9</ inci>
<inci>10</ inci>
</ tr>
<tr>
<td\u003e Table_data_1</ td>
<td\u003e Tablo_verileri_2</ td>
<td\u003e Table_data_3</ td>
<td\u003e Tablo_verileri_4</ td>
<td\u003e Tablo_verileri_5</ td>
<td\u003e Tablo_verileri_6</ td>
<td\u003e Table_data_7</ td>
<td\u003e Tablo_verileri_8</ td>
<td\u003e Tablo_verileri_9</ td>
<td\u003e Tablo_verileri_10</ td>
</ tr>
</ masa>
masa (görüntü: blok; taşma-x: otomatik;)
/ * Örneği güzel göstermek için ek CSS: * /
masa (border-collapse: collapse;)
tablo td, inci (dolgu: 10px; kenarlık: 1px # 000 katı;)
Not: CSS özelliği ekran bloğu tablonun yalnızca verileri görsel bozulma olmadan sığdırması gerektiği kadar genişlikte yer kaplamasını sağlar. Sayfadaki mevcut alanın tüm genişliğine yayılmadan artık yok. CSS kodu eklense bile genişlik:% 100... Misal:
| 1 | 2 | 3 |
|---|---|---|
| Table_data_1 | Table_data_2 | Table_data_3 |
Aliosque subditos et temaları
Çok var çevrimiçi hizmetler sitemap.xml oluşturmak için. Ancak, lynx tarayıcısını ve çeşitli yardımcı programları kullanarak bilgisayarınızda kendiniz yapabilirsiniz. komut satırı Linux. Aşağıda, "sitemap.sh" adı verilen bir bash komut dosyası örneği verilmiştir. Sitemap.xml dosyasını oluşturan Bash komut dosyası: #! / Bin / bash cd / home / me / sitemap / www / lynx -crawl -traversal -accept_all_cookies -connect_timeout \u003d 30 http://www.compmiscellanea.com/\u003e / dev / null cd / home / me / sitemap / www2 / lynx -crawl -traversal -accept_all_cookies -connect_timeout \u003d 30 http://compmiscellanea.com/\u003e / dev / null cat /home/me/sitemap/www2/traverse.dat \u003e\u003e /home/me/sitemap/www/traverse.dat cat /home/me/sitemap/www/traverse.dat |
CSS'de "float: bottom" özelliği yoktur, ancak bu etki birkaç başka yolla elde edilebilir. Örnek: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ad minim veniam, quis nostrud egzersiz ullamco emek, ex ea commodo sonuçlarının bir kısmını kullanın. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, culpa qui officia deserunt mollit anim id est laborum. Bağlantı 1 Bağlantı 2 Bağlantı 3 Altta kayan HTML / XHTML. Kod:
Tablolar farklı ekran çözünürlüklerine iyi uyum sağlayabilselerdi, o zaman insanlık yine de tablo düzeni yapıyor olurdu. Hala o zamanı buldum ve neden bahsettiğimi biliyorum.
Ancak farklı bir zamanda yaşıyoruz, masa düzeni unutulmaya yüz tutmuş durumda, ancak web sitelerinde klasik tablo kullanma ihtiyacı hala devam ediyor. Bu nedenle, tabloların varlığını inkar etmeyeceğiz, bunun yerine en basit yolu öğreneceğiz, nasıl duyarlı bir masa yapılır.
Duyarlı bir tablonun gösterimi .
HTML işaretlemesi
| İsim | Soyadı | Puanlar | Puanlar | Puanlar | Puanlar | Puanlar | Puanlar | Puanlar | Puanlar | Puanlar | Puanlar |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Yulia | Smirnova | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| Evelyn | Yakovleva | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Andrei | Petrov | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Basit bir yarattık HTML masa ekrana sığdığı sürece her şey yolunda. Ekran genişliği azaldığında masa kesilecek ve verilerini görmeyeceğiz ya da çok küçülecek ve bir daha hiçbir şey görmeyeceğiz.
Tabloyu etiketinin içine koyduğumu fark etmiş olabilirsiniz div ve belli ki bir nedenle. Etiketin kendisi div biz onu biçimlendirene kadar hiçbir şey yapmaz.
CSS stilleri
Yalnızca bir mülk belirledikten sonra, masa uyum sağlariçerik bir etiketin içindeyken otomatik olarak yatay bir kaydırma çubuğu görünecektir div eksen boyunca mevcut ekran genişliğine sığmayacaktır X.
Div (
overflow-x: otomatik;
)
Tablo etiketlerinin geri kalanının stilini belirleyelim:
Tablo (
border-collapse: collapse; / * Sadece tek satırları göster * /
sınır aralığı: 0; / * Hücreler arası mesafe * /
genişlik:% 100;
border: 1px katı # afb42b;
renk: # 212121;
}
Th, td (
metin hizalama: sol;
dolgu: 8px;
}
Bir etiketi şekillendirme tr (satır) ayrı bir yorumu hak ediyor. Tablo satırlarının çizgili bir görünüme sahip olması (zebra) zaten norm haline gelmiştir. Bunun için sözde sınıf kullanılır : nth-çocuk parantez içindeki değer ile hatta... Değer hatta, tüm çift öğelere özellikler atar, bizim durumumuzda bu arka plan rengidir. Böylece masa çizgili olacaktır.
Sitedeki tabloları kullanıyorsanız, mobil cihazlara da uyarlanması gerekir. İki uyarlama seçeneği kullanıyorum - sıkıştırma ve sözcük kaydırma + tek sütunda tabloları düzenleme.
İlk seçenek tüm çok sütunlu tablolar için uygundur, ikinci seçenek ise yüzdeki bazı sitelerde kullandığım. Menüleri tablo şeklinde göstermenin öyle bir zaafı var ama çözünürlük azaldığında o kadar sıkıştırılıyor ki kullanıcıyı rahatsız ediyor. Tek bir sütunda küçük çözünürlükte çeviri iyi bir çözümdür, ancak yine, bunu tüm tablolar için kullanmamalısınız.
Temel seçenek
Bu nedenle, sitedeki çoğu tablo için kodu css'de kullanıyorum:
@media ekranı ve (max-width: 1000px) (td (word-break: break-all;)
Bloğa sığmayan kelimelerin 1000 pikselden daha düşük çözünürlüklerde yeni bir satırda başlaması gerektiğini belirtir. Çözünürlük 1000 bir örnektir, çözünürlüğü daha düşük ayarlamak mantıklı olan biri için sitelerinize bakın.
CSS'de çift kodlama kullanarak bir tablonun iyi bir görünümünü elde edebilirsiniz. Paralel olarak kullanıyorum:
@media ekranı ve (maks. genişlik: 700 piksel) (img (maks. genişlik:% 96! önemli; yükseklik: otomatik! önemli;) iframe, metin alanı, giriş, düğme, gönderme, video, nesne, yerleştirme (maks. genişlik: % 99! Önemli;) table, span, div, ins (max-width: 100%! Önemli;)
700 pikselden daha düşük bir çözünürlükte, tablonun% 100 boyutta görüntülendiğini, yani sıkıştırıldığını, ancak tüm bloğu genişlikte kapladığını belirtir. ! Important özelliği, 700 pikselin altındaki tüm çözünürlükler için geçerli olacağını belirtir.
Bir sütun uyarlaması
Tabloyu düşük çözünürlükte tek sütunda görüntülenecek şekilde uyarlamak daha zordur. Tüm masalar için uygun değildir, ancak genellikle gereklidir. İlk olarak, tablo için orijinal sınıfı belirtin, örneğin,
