.

Tabloların kötü olduğu herhangi bir tasarım tasarımcısı için sır değildir. Uyarlanması ve özelleştirilmesi zordur. Sitenin masaüstü sürümünde bir tablo oluşturmak hala oldukça kolaysa, uyarlanabilir düzen başladığında her şey cehenneme gider.

Aslında etkili seçeneklerden biri tablo için yatay kaydırma oluşturmaktır. Bunu yapmak zor değil, ancak bugünkü yazının konusu bu değil. Ancak bunu sizin için göstereceğim.

İlk adaptasyon yöntemi

<div sınıfı = "tablo sarma" > <tablo > <kafa > <tr > <> Hizmet</th> <> Tanım</th> <> Fiyat</th> <>İndirim</th> </tr> </thead> <vücut > <tr > <td > Mobil düzen</td> <td > Telefonlar için düzen</td> <td >$3000</td> <td > 50%</td> </tr> <tr > <td > CMS WordPress'e Giriş</td> <td ></td> <td >$3000</td> <td > 30%</td> </tr> </tbody> </tablo> </div>

Her şeye stil verelim (esas olarak stillendirmemiz gerekiyor) masa örtüsü).

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

.table-wrap ( text-align : center ; display : inline-block; arka plan rengi : #fff ; padding : 2rem 2rem; color : #000 ; ) .table-wrap ( overflow-y: kaydırma ; ))

Tablo sarma ( text-align: center; display: satır içi blok; arka plan rengi: #fff; padding: 2rem 2rem; color: #000; ) @media ekranı ve (max-width: 600px) ( .table-wrap ( taşma-y: kaydırma; ))

Sonuç olarak, 600 piksele kadar genişlikte tablo kaydırılır ancak site kaydırılmaz. Uygun ama bugün başka bir şeyden bahsetmek istiyorum.
Tablo duyarlılığına başka ilginç bir yaklaşım buldum. Veri niteliklerinin ve sözde sınıfların kullanılmasından oluşur. Şimdi sana her şeyi göstereceğim.

İkinci adaptasyon yöntemi

İlk önce işaretlemeyi değiştirelim:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

Hizmet Tanım Fiyat İndirim Mobil düzen Telefonlar için düzen $3000 50% CMS WordPress'e Giriş Yönetici ile web sitesi oluşturma. panel $3000 30%

Her sütuna bir özellik atadık veri etiketi gelecekte işimize yarayacak.

Temel stilleri ayarlayın:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

gövde ( text-align : center ; padding-top : %10 ; font-family : sans-serif ; arka plan resmi : url ("bg.jpg") ; arka plan boyutu: kapak; yükseklik : 100vh; renk : #fff ; ) .table-wrap ( text-align : center ; display : inline-block; arka plan rengi : #fff ; padding : 2rem 2rem; color : #000 ; ) table ( border : 1px katı #ccc ; genişlik : %100 ; kenar boşluğu : 0 ; doldurma : 0 ; kenarlık daraltma : daraltma ; kenarlık aralığı : 0 ; ) tablo tr ( kenarlık : 1px katı #ddd ; doldurma : 5px ; ) tablo th, tablo td ( dolgulama : 10px ; text-align : merkez ; kenarlık sağ : 1 piksel katı #ddd ; ) tablo ( renk : #fff ; arka plan rengi : #444 ; text-transform : büyük harf ; yazı tipi boyutu : 14 piksel ; harf aralığı : 1 piksel ; )

gövde ( text-align: center; padding-top: %10; font-family: sans-serif; arka plan resmi: url("bg.jpg"); arka plan boyutu: kapak; yükseklik: 100vh; renk: #fff ; ) .table-wrap ( text-align: center; display: inline-block; arka plan rengi: #fff; dolgu: 2rem 2rem; color: #000; ) table ( border: 1px katı #ccc; genişlik: %100 ; kenar boşluğu:0; dolgu:0; kenarlık daraltma: daraltma; kenarlık aralığı: 0; ) tablo tr ( kenarlık: 1px katı #ddd; dolgu: 5px; ) tablo th, tablo td ( dolgu: 10px; text-align : orta; kenarlık-sağ: 1 piksel katı #ddd; ) tablo ( renk: #fff; arka plan rengi: #444; metin dönüşümü: büyük harf; yazı tipi boyutu: 14 piksel; harf aralığı: 1 piksel; )

Normal bir tabloya benziyor, doğal olarak siteyi 320-420 piksel hareket ettirdiğimizde tüm sitenin yatay olarak kaydırıldığını göreceğiz. Konu bu değil.

Nasıl düzeltilir? stiller ekle:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

@media ekranı ve (maks. genişlik: 600 piksel) ( table ( border : 0 ; ) table thead ( display : none ; ) table tr ( border-bottom : 10px ; display : blok ; border-bottom : 2px katı #ddd ; ) table td ( display : blok ; text-align : right ; font-size : 13px ; border-bottom : 1px noktalı #ccc ; border-right : 1px düz şeffaf ; ) table td:last-child ( border-bottom : 0 ; ) table td:before ( content : attr(data-) label) ; float : left ; text-transform : büyük harf ; font-weight : kalın ; ))

@media screen ve (max-width: 600px) ( table ( border: 0; ) table thead ( display: none; ) table tr ( border-bottom: 10px; display: blok; border-bottom: 2px katı #ddd; ) tablo td ( ekran: blok; metin hizalama: sağ; yazı tipi boyutu: 13 piksel; kenarlık alt: 1 piksel noktalı #ccc; sağ kenarlık: 1 piksel düz şeffaf; ) tablo td: son çocuk ( kenarlık alt: 0; ) tablo td:before ( content: attr(data-label); float: left; text-transform: büyük harf; font-weight: kalın; ))

Burada tablo satırlarını blok benzeri hale getirdik, sütun adlarını kaldırdık ve sütunların metinlerini sağa hizaladık. Buna karşılık, sözde sınıfı kullanarak :önce tarih niteliklerimizi sol kenar boşluğuna ekleriz. Şöyle çıkıyor:

İşte başka bir kalem:

Gördüğünüz gibi tablo satırlarını tüm bilgileri içeren küçük bir bloğa dönüştürdük. Bu masa uyarlama seçeneğinin küçük masalar için uygun olduğunu düşünüyorum. Tadını çıkarın arkadaşlar!

Eğer masalar farklı ekran çözünürlüklerine iyi uyum sağlayabilseydi, insanlık bugüne kadar hala masa düzenleri yapıyor olurdu. Hala o zamanı buldum ve neden bahsettiğimi biliyorum.

Ancak farklı bir zamanda yaşıyoruz, masa düzeni unutulmaya yüz tuttu, ancak web sitelerinde klasik tablo kullanma ihtiyacı hala devam ediyor. Bu nedenle tabloların varlığını inkar etmeyeceğiz, bunun yerine en basit yöntemi öğreneceğiz, bir tablo nasıl duyarlı hale getirilir.

Duyarlı tablo demosu .

HTML işaretlemesi

Basit bir şey yarattık HTML masa, ekrana sığdığı sürece her şey yolundadır. Ekran genişliği azaldığında tablo kesilecek ve verilerini göremeyeceğiz veya çok küçülecek ve yine hiçbir şey göremeyeceğiz.

Muhtemelen masayı etiketin içine yerleştirdiğimi fark etmişsinizdir. div ve belli ki bir nedeni var. Etiketin kendisi div biz ona stiller atayana kadar hiçbir şey vermez.

CSS stilleri

Yalnızca bir özelliği ayarlayarak, masa uyum sağlar, içerik bir etiketin içindeyken otomatik olarak yatay bir kaydırma çubuğu görünecektir div artık eksen boyunca mevcut ekran genişliğine sığmayacak X.

Div (
taşma-x: otomatik;
)

Tablo etiketlerinin geri kalanına stil verelim:

Masa (
sınır çöküşü: çöküş; /* Yalnızca tek satırları göster */
kenar aralığı: 0; /* Hücreler arası mesafe */
genişlik: %100;
kenarlık: 1 piksel katı #afb42b;
renk: #212121;
}

Th, td (
metin hizalama: sol;
dolgu: 8 piksel;
}

Etiket stili TR(satır) ayrı bir yorumu hak ediyor. Masa sıralarının çizgili bir görünüme (zebra) sahip olması zaten norm haline geldi. Bunun için sözde sınıf kullanılır :n'inci çocuk parantez içindeki anlamı ile eşit. Anlam eşit, tüm çift elemanlara özellikler atar, bizim durumumuzda bu arka plan rengidir. Böylece masa çizgili olacaktır.

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].

Bir HTML tablosu çok fazla veri içeriyorsa sayfadaki kullanılabilir alandan daha geniş hale gelir ve taşmaya başlar. Durumu düzeltmek için tabloya yatay kaydırma ekleyebilirsiniz. Örnek:

1	2	3	4	5	6	7	8	9	10
Tablo_verileri_1	Tablo_verileri_2	Tablo_verileri_3	Tablo_verileri_4	Tablo_data_5	Tablo_data_6	Tablo_data_7	Tablo_data_8	Tablo_data_9	Tablo_data_10

HTML/XHTML. Kod:

<masa>

<TR>

<bu>1</th>

<bu>2</th>

<bu>3</th>

<bu>4</th>

<bu>5</th>

<bu>6</th>

<bu>7</th>

<bu>8</th>

<bu>9</th>

<bu>10</th>

</tr>

<TR>

<td>Tablo_verileri_1</td>

<td>Tablo_verileri_2</td>

<td>Tablo_verileri_3</td>

<td>Tablo_verileri_4</td>

<td>Tablo_verileri_5</td>

<td>Tablo_verileri_6</td>

<td>Tablo_verileri_7</td>

<td>Tablo_verileri_8</td>

<td>Tablo_verileri_9</td>

<td>Tablo_verileri_10</td>

</tr>

</ masa>

masa(ekran: blok; taşma-x: otomatik;)

/* Örneğe biraz görünüm kazandırmak için ek CSS: */

masa(sınır çöküşü: çöküş;)

masa td,th(dolgu: 10 piksel; kenarlık: 1 piksel #000 düz;)

Not: CSS özelliği Ekran bloğu tablonun yalnızca verileri görsel bozulma olmadan içermesi için ihtiyaç duyduğu kadar genişlik kaplamasını sağlar. Artık sayfadaki mevcut alanın tüm genişliği boyunca uzanmadan. CSS kodu eklense bile genişlik: %100. Örnek:

1	2	3
Tablo_verileri_1	Tablo_verileri_2	Tablo_verileri_3

Farklı alt bölümler ve tema

Sitemap.xml oluşturmak için birçok çevrimiçi hizmet vardır. Ancak bunu lynx tarayıcısını ve çeşitli Linux komut satırı yardımcı programlarını kullanarak bilgisayarınızda kendiniz yapabilirsiniz. Aşağıda bunları kullanan "sitemap.sh" adlı bir bash betiği örneği verilmiştir. Sitemap.xml dosyasını oluşturan Bash betiği: #!/bin/bash cd /home/me/sitemap/www/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > / dev /null cd /home/me/sitemap/www2/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null cat /home/me/sitemap/www2/traverse.dat > > /home/me/sitemap/www/traverse.dat kedi /home/me/sitemap/www/traverse.dat | sed -e "s/\ \.//g" | sort | uniq > /home/me/sitemap/sitemap/sitemap.xml sed -i "s/\&/\&\;/g" /home/me/sitemap/sitemap/sitemap.xml xml sed -i "s/"/\&apos\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/\"\;/g" /home/me/sitemap/ sitemap/sitemap.xml sed -i "s/>/\>\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s//" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "s/$/<\/loc><\/url>/" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "1 i\r\r \r\r\r\r" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "$ a \\r" /home/me/sitemap/sitemap/sitemap.xml sed -i "/static/d" /home/me/sitemap/sitemap/sitemap.xml echo "...Bitti" Bash komut dosyası hazır olduktan sonra: "chmod Çalıştırılabilir hale getirmek için +x sitemap.sh". Sitemap.sh.tar.gz arşivindeki sitemap.sh'yi indirin (Arşiv indirilip paketi açıldıktan sonra, .com/ dosyasındaki http://www.compmiscellanea'yı şu adresle değiştirin: sitenin istediğiniz alan adını "www" ile doldurun ve http://compmiscellanea.com/ yerine sitenin "www" içermeyen istediğiniz alan adını yazın. Dosyanın son satırında "statik" yerine, listeden kaldırılmaları için bağlantıların içermesi gerekir. Ardından "chmod +x sitemap.sh". Ardından sitemap.sh'yi çalıştırın. Yorumlar Sitemap2.sh'yi, sitemap2.sh'deki satır satır yorumlarla birlikte indirin. tar.gz arşivi.Bash betiğini çalıştırmadan önce üç klasör oluşturmanız gerekir.Sitenin alan adı "www" ile veya "www" olmadan belirtilirse lynx tarayıcısı bazı durumlarda bazı bağlantıları kaçırabileceğinden, bash betiği lynx'i iki kez çalıştırır, sitenin "www" olan alan adı ile işlenmesi ve sitenin "www" olmayan bir alan adı kullanılarak işlenmesi. Ortaya çıkan iki dosya iki farklı klasöre yerleştirilir, burada bunlar "/home/me/sitemap/www/" ve "/home/me/sitemap/www2/". Ve "/home/me/sitemap/sitemap/" dizini, oluşturulan sitemap.xml için tasarlanmıştır. 1. Bash #!/bin/bash yolu 2. Klasöre gidin - lynx tarayıcısı, siteyi "www" cd /home/me/sitemap/www/ ile alan adına göre işlerken alınan dosyaları oraya yerleştirecektir.

CSS'de "float: Bottom" özelliği yoktur, ancak efekt başka yollarla da elde edilebilir. Örnek: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Enim ve minimum düzeyde, çok fazla çaba gerektiren bir egzersiz, her şeyden önce mümkün olan en iyi egzersizdir. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. İstisnai olarak, bazı durumlarda aşırıya kaçmamak, iş id est emekten vazgeçmek için resmi olarak kusurlu olmak. Bağlantı 1 Bağlantı 2 Bağlantı 3 Altta kayan HTML / XHTML. Kod:

CSS. Kod: .box1 (konum: göreceli; üst: 0 piksel; sol: 0 piksel; kayan nokta: sol; yükseklik: otomatik; genişlik: %100;) .content1 (konum: göreceli; üst: 0 piksel; sol: 0 piksel; kayan nokta: sol; yükseklik: otomatik; genişlik: %100;) .left1 (konum: göreceli; üst: 0 piksel; sol: 0 piksel; kayan nokta: sol; yükseklik: otomatik; genişlik: %64;) .menu1 (konum: göreceli; üst: 0 piksel; left: 0px; float: left; height: auto; width: 36%;) .bottom1 (pozisyon: mutlak; alt: 0px; right: 0px;) /* Ek CSS, sadece örneğe biraz görünüm kazandırmak için */ . box1 (renk: #ddd; metin hizalama: orta;). içerik1 (arka plan: #bbb;).left1 (minimum yükseklik: 100 piksel; dolgu: %2; metin hizalama: yasla; arka plan: #006; -moz - box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;).menu1 (dolgu: %2; kayan nokta: sağ ; arka plan: #060; -moz-box-sizing: kenarlık kutusu; -webkit-box-sizing: kenarlık kutusu; -ms-box-sizing: kenarlık kutusu; kutu-boyutlandırma: kenarlık kutusu;) . p (konum: göreceli; üst: 0 piksel; sol: 0 piksel; kayan nokta: sol; yükseklik: otomatik; genişlik: %100; dolgu: 0px; kenar boşluğu: 0px;).menu1 a (renk: #ddd; metin dekorasyonu: yok;).menu1 a:hover (metin dekorasyonu: altı çizili;).bottom1 (dolgu: %2; renk: #eee; arka plan: # 600 ;) Web sayfasının tüm içeriği box1 kapsayıcısında bulunur. İçinde iki div kabı vardır: 1. içerik1, solda gerçek içerik ve sağda bir menü. 2. içerik1'den sonra alt1.

Mobil cihazlara uyarlanmış bir site oluşturmayı veya bir masaüstü siteyi duyarlı bir siteye dönüştürmeyi denediyseniz, muhtemelen bu tür düzendeki en büyük sorunlardan birinin tabloların doğru görüntülenmesi olduğunu biliyorsunuzdur. Tipik olarak tablolar küçük ekranlara pek iyi uyum sağlamaz ve bu nedenle siteniz onlarsız yapamıyorsa, bunları kullanıcı için uygun bir şekilde görüntülemenin bir yolunu bulmanız gerekir.

Web sitesi yaratıcıları bunu yapmanın birden fazla yolunu bulmuşlardır. CSS ve JavaScript kullanarak küçük ekranlardaki hücreleri tek bir sütunda düzenleyebilir, çok önemli olmayan verileri içeren sütunları gizleyebilir, hatta bir tabloyu pasta grafiğine dönüştürebilirsiniz. Tüm bu yöntemler hem İngilizce hem de Rusça birden fazla kez anlatılmıştır ve bunları internette kolayca okuyabilirsiniz. Yazımda bu çözümlerden sitenize özel ve ihtiyacınız olanı nasıl seçebileceğinizden bahsetmek istiyorum.

Doğru yöntemi seçmeden önce tablonun içeriğine ilişkin kendinize birkaç soru sormanız gerekir.

İnsanlar sütunlardaki veya satırlardaki verileri karşılaştıracak mı?

Örnek 1: İnsanlar verileri karşılaştırmayacaktır.

Öncelikle kullanıcıların verileri karşılaştırmak zorunda olmadığı örnek bir tabloya bakalım. Böyle bir tabloya örnek olarak film listesi verilebilir. Bu tabloda filmler reytinge göre sıralanmıştır.

Bu verileri geniş ekranda tablo halinde görüntülemek uygundur, ancak bir yönetmeni diğeriyle karşılaştırmanın hayati önem taşıması pek olası değildir. Dolayısıyla küçük ekranlardaki bu tablonun sütunları güvenli bir şekilde tek bir tabloya dönüştürülebilir.

JQuery Mobile sitesinin yaratıcılarının yaptığı da tam olarak budur.

Örnek 2: İnsanlar satır veya sütun verilerini karşılaştıracak

Örneğin, tablonuzda farklı şirketler için aynı verilerin bir listesi varsa, kullanıcının kendisi için en iyi seçeneği seçmek için bunları karşılaştıracağı açıktır. Resimde böyle bir tablonun örneğini görebiliriz.

Pirinç. 3. Karşılaştırılacak verileri içeren tablo

Bu durumda kullanıcının serileri karşılaştırmasını sağlayacak bir çözüme ihtiyacımız var. Sunulan seçeneklerden biri, küçük ekranlarda tablonun, veriler yatay konumdan dikey konuma yeniden düzenlenecek şekilde çevrilmesidir. Böylece, en üst satır (tablo başlıkları) artık en soldaki sütun haline geldi ve kullanıcı, gerekirse veri içeren sütunları yatay olarak kaydırabilir.

Pirinç. 4. Cep telefonu ekranındaki verileri içeren tablo

Başka bir seçenek de kullanıcının hangi sütunların görüntüleneceğini ve hangilerinin gösterilmeyeceğini seçmesine izin vermektir. Bu uygulanmıştır. Dar ekranlarda çok önemli olmayan verilerin bulunduğu sütunlar gizlenir ancak biri bunları görmek isterse bu sütunları açabilir.

Pirinç. 5. Sitenin tam sürümündeki verileri içeren tablo

Pirinç. 6 ve 7. Mobil versiyonda aynı tablo. Yalnızca en önemli sütunlar kalır, ancak gerekirse diğerlerinin tümünü dahil edebilirsiniz.

Hangi bilgiler önemlidir?

Bazı bilgileri küçük ekranlarda gizlemeye karar verirseniz, o zaman şu soru doğal olarak ortaya çıkar: Hangi bilgiler önemlidir? Böyle bir durumda kendinize şu soruları sormanız yararlı olabilir:

• İnsanların en çok hangi bilgiye ihtiyacı var?
• Tablonun sağladığı bilgilerin anlaşılması açısından en önemli sütunlar hangileridir?
• İnsanların en çok hangi hoparlörlere ihtiyacı var?

Kullanıcılar tablonun bir bölümünü diğerinden ayırt edebilecek mi?

Bir kullanıcı bir tabloyu satır satır tarayarak bilgi aradığında, bir satırı diğerinden nasıl hızlı bir şekilde ayırt edebilir? Bu, özellikle web uygulamalarının arayüzünde tablolar kullanıldığında önemlidir.

Sitenin tam sürümünde istediğimiz her şeyi tabloya koyabiliyoruz. Ancak mobil sürüm için en gerekli bilgileri bırakmak ve kullanıcının bir veriyi diğeriyle karıştırmayacağından emin olmak gerekir.

Her şeyin aynı anda ekranda olması mı gerekiyor yoksa gerektiğinde ek öğeler eklenebilir mi?

Duyarlı tablolar oluşturmanın en zor kısmı genellikle site geliştiricisinin büyük ekrandaki her şeyi küçük ekrana sığdırmaya çalışmasıdır. En karmaşık durumlarda bu, tablo gösteriminde büyük sorunlara neden olur.

Pek çok kişi, duyarlı tasarımın ekran boyutundan bağımsız olarak sayfadaki her şeyin gösterilmesi anlamına geldiğini düşünme hatasına düşer. Aslında, yalnızca en önemli şeyleri dar bir ekrana koymak ve geri kalanını büyüttükçe eklemek daha iyidir.

İlginç bir şekilde, çoğu zaman bir tasarıma tam ekran sürümle başladığımızda ve çok fazla içeriğe sahip büyük bir tablo gördüğümüzde, dar bir ekranda bu içeriğin bir kısmının kaybolacağını kabul etmemiz zordur. Ama “önce mobil” ilkesiyle hareket ettiğimizde bu tür sorunlar çıkmıyor.

Peki duyarlı tasarımdaki tablolar söz konusu olduğunda ne önemi var?

• Görünümü değişse bile kullanıcılar tablonun anlamını anlayacak mı?
• Bir şekilde tablodaki tüm bilgileri alabilecekler mi?
• Cihazdan bağımsız olarak tüm URL'lerin erişilebilir olduğundan emin misiniz?

Her üç soruya da “evet” yanıtı verebiliyorsanız sitenizde tablolarda sorun yok demektir.

İçeriğiniz size tablolarınızda en iyi ne yapmanız gerektiğini söyleyecektir.

Tabloları duyarlı bir tasarımda düzenlemenin birçok farklı yolu vardır. Zamanla bunların sayısı daha da artacak. Peki doğru yöntem nasıl seçilir? Sadece tek bir cevap olabilir.

İçeriğiniz size tablolarınızda en iyi ne yapmanız gerektiğini söyleyecektir. Göreviniz onu doğru analiz etmektir.