.

Pre žiadneho dizajnéra rozloženia nie je tajomstvom, že stoly sú zlé. Je ťažké ich prispôsobiť a prispôsobiť. Ak je vo verzii stránky pre stolné počítače stále pomerne jednoduché vytvoriť tabuľku, potom, keď sa začne adaptívne rozloženie, všetko ide do čerta.

V skutočnosti je jednou z efektívnych možností vytvorenie vodorovného rolovania tabuľky. Nie je to ťažké, ale o tom nie je dnešný príspevok. Ja vám to však ukážem.

Prvá adaptačná metóda

<div class = "table-wrap" > <tabuľka > <hlava > <tr > <th > servis</th> <th > Popis</th> <th > cena</th> <th > Zľava</th> </tr> </thead> <tbody > <tr > <td > Mobilné rozloženie</td> <td > Rozloženie pre telefóny</td> <td >$3000</td> <td > 50%</td> </tr> <tr > <td > Pristátie na CMS WordPress</td> <td ></td> <td >$3000</td> <td > 30%</td> </tr> </tbody> </tabuľka> </div>

Poďme si to celé nastylovať (hlavne treba nastylovať table-wrap).

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

.table-wrap ( text-align : center ; display : inline-block; background-color : #fff ; padding : 2rem 2rem; color : #000 ; ) .table-wrap ( overflow-y: scroll ; ) )

Table-wrap ( text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; ) @media screen and (max-width: 600px) ( .table-wrap (overflow-y: scroll; ) )

Výsledkom je, že pri šírke AŽ 600 pixelov sa tabuľka bude posúvať, ale stránka nie. Pohodlné, ale dnes by som chcel hovoriť o niečom inom.
Našiel som ďalší zaujímavý prístup k odozve tabuľky. Pozostáva z používania dátových atribútov a pseudotried. Teraz vám všetko ukážem.

Druhá adaptačná metóda

Najprv zmeňme označenie:

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

servis Popis cena Zľava Mobilné rozloženie Rozloženie pre telefóny $3000 50% Pristátie na CMS WordPress Vytvorenie webu s adminom. panel $3000 30%

Každému stĺpcu je priradený atribút údajový štítok, ktoré sa nám v budúcnosti budú hodiť.

Nastavte základné štýly:

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

telo ( text-align : center ; padding-top : 10 % ; font-family : sans-serif ; background-image : url ("bg.jpg" ) ; background-size: cover; height : 100vh; color : #fff ; ) .table-wrap ( text-align : center ; display : inline-block; background-color : #fff ; padding : 2rem 2rem; color : #000 ; ) table ( border : 1px solid #ccc ; width : 100 % ; margin : 0 ; padding : 0 ; border-collapse : zbalenie ; border-spacing : 0 ; ) table tr ( border : 1px solid #ddd ; padding : 5px ; ) table th, table td ( padding : 10px ; text-align : center ; border-right : 1px solid #ddd ; ) table th (color : #fff ; background-color : #444 ; text-transform : largecase ; font-size : 14px ; letter-spacing : 1px ; )

telo ( text-align: center; padding-top: 10%; font-family: sans-serif; background-image: url("bg.jpg"); background-size: cover; height: 100vh; color: #fff ; ) .table-wrap ( text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; ) table ( border: 1px solid #ccc; width: 100% ; margin:0; padding:0; border-collapse: Collapse; border-spacing: 0; ) table tr ( border: 1px solid #ddd; padding: 5px; ) table th, table td ( padding: 10px; text-align : stred; pravý okraj: 1 pixel plný #ddd; ) tabuľka th ( farba: #fff; farba pozadia: #444; transformácia textu: veľké písmená; veľkosť písma: 14 pixelov; medzera medzi písmenami: 1 pixel; )

Vyzerá to ako bežná tabuľka, prirodzene, posunutím stránky o 320-420 pixelov uvidíme horizontálne rolovanie celej stránky. Nie pointa.

Ako to opraviť? pridať štýly:

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 obrazovka a (maximálna šírka: 600 pixelov) ( table ( border : 0 ; ) table thead ( display : none ; ) table tr ( margin-bottom : 10px ; display : block ; border-bottom : 2px solid #ddd ; ) table td ( display : block ; text-align : right ; font-size : 13px ; border-bottom : 1px bodkovaný #ccc ; border-right : 1px solid transparent ; ) table td:last-child ( border-bottom : 0 ; ) table td:before ( content : attr(data- štítok) ; float : vľavo ; transformácia textu : veľké písmená ; hrúbka písma : tučné; ) )

@media screen and (max-width: 600px) ( table ( border: 0; ) table thead ( display: none; ) table tr ( margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; ) tabuľka td ( display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; border-right: 1px solid transparent; ) table td:last-child ( border-bottom: 0; ) tabuľka td:before ( content: attr(data-label); float: left; text-transform: largecase; font-weight: bold; ) )

Tu sme spravili riadky tabuľky do blokov, odstránili názvy stĺpcov a zarovnali text samotných stĺpcov doprava. Na druhej strane pomocou pseudotriedy :predtým pripájame naše atribúty dátumu na ľavý okraj. Dopadá to takto:

Tu je ďalšie pero:

Ako vidíte, riadky tabuľky sme zmenili na malý blok, ktorý obsahuje všetky informácie. Myslím si, že táto možnosť prispôsobenia stola je vhodná pre malé stoly. Užite si to, priatelia!

Ak by sa tabuľky mohli dobre prispôsobiť rôznym rozlíšeniam obrazovky, ľudstvo by dodnes vyrábalo rozloženia tabuliek. Stále som si ten čas našiel a viem o čom hovorím.

Žijeme však v inej dobe, tabuľkový layout upadol do zabudnutia, no nutnosť používať klasické tabuľky na weboch stále zostáva. Preto nebudeme popierať existenciu tabuliek, ale skôr sa dozvieme o najjednoduchšej metóde, ako urobiť tabuľku tak, aby reagovala.

Ukážka responzívnej tabuľky .

HTML značky

Vytvorili sme jednoduchý HTML stôl, pokiaľ sa zmestí na obrazovku, je všetko OK. Pri zmenšení šírky obrazovky sa tabuľka odreže a neuvidíme jej údaje, prípadne sa veľmi zmenší a opäť nič neuvidíme.

Pravdepodobne ste si všimli, že som umiestnil stôl do štítku div a zjavne z nejakého dôvodu. Samotná značka div nedáva nič, kým mu nepriradíme štýly.

CSS štýly

Nastavením iba jednej vlastnosti stôl sa prispôsobí, keď je obsah vo vnútri značky, automaticky sa zobrazí vodorovný posúvač div sa už nezmestí do aktuálnej šírky obrazovky pozdĺž osi X.

Div (
pretečenie-x: auto;
)

Upravme štýl zvyšných značiek tabuľky:

Tabuľka (
border-collapse: kolaps; /* Zobraziť iba jednotlivé riadky */
ohraničenie: 0; /* Vzdialenosť medzi bunkami */
šírka: 100 %;
border: 1px solid #afb42b;
farba: #212121;
}

Th, td (
zarovnanie textu: doľava;
výplň: 8px;
}

Štýl značky tr(riadok) si zaslúži samostatný komentár. Už sa stalo štandardom, že riadky tabuľky majú pruhovaný vzhľad (zebra). Používa sa na to pseudotrieda :n-té dieťa s významom v zátvorkách dokonca. Význam dokonca, priraďuje vlastnosti všetkým párnym prvkom, v našom prípade je to farba pozadia. Stôl tak bude pruhovaný.

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

Ak tabuľka HTML obsahuje príliš veľa údajov, bude širšia ako dostupný priestor na stránke a začne pretekať. Ak chcete situáciu napraviť, môžete do tabuľky pridať horizontálne posúvanie. Príklad:

1	2	3	4	5	6	7	8	9	10
Tabuľkové_údaje_1	Tabuľkové_údaje_2	Tabuľkové_údaje_3	Tabuľkové_údaje_4	Tabuľkové_údaje_5	Tabuľkové_údaje_6	Tabuľkové_údaje_7	Tabuľkové_údaje_8	Tabuľkové_údaje_9	Tabuľkové_údaje_10

HTML/XHTML. kód:

<tabuľky>

<tr>

<th>1</tis>

<th>2</tis>

<th>3</tis>

<th>4</tis>

<th>5</tis>

<th>6</tis>

<th>7</tis>

<th>8</tis>

<th>9</tis>

<th>10</tis>

</tr>

<tr>

<td>Tabuľkové_údaje_1</td>

<td>Tabuľkové_údaje_2</td>

<td>Tabuľkové_údaje_3</td>

<td>Tabuľkové_údaje_4</td>

<td>Tabuľkové_údaje_5</td>

<td>Tabuľkové_údaje_6</td>

<td>Tabuľkové_údaje_7</td>

<td>Tabuľkové_údaje_8</td>

<td>Tabuľkové_údaje_9</td>

<td>Tabuľkové_údaje_10</td>

</tr>

</ tabuľky>

tabuľky(zobrazenie: blok; pretečenie-x: auto;)

/* Dodatočné CSS, len aby sme mali príklad: */

tabuľky(border-collapse: kolaps;)

tabuľka td,th(výplň: 10px; orámovanie: 1px #000 plné;)

Poznámka: vlastnosť CSS displej: blok robí to tak, že tabuľka zaberá len toľko šírky, koľko potrebuje na uloženie údajov bez vizuálneho skreslenia. Nič viac, bez roztiahnutia cez celú šírku dostupného priestoru na stránke. Aj keď sa pridá kód CSS šírka: 100%. Príklad:

1	2	3
Tabuľkové_údaje_1	Tabuľkové_údaje_2	Tabuľkové_údaje_3

Aliosque subditos a téma

Existuje mnoho online služieb na vytváranie sitemap.xml. Môžete to však urobiť sami na svojom počítači pomocou prehliadača lynx a niekoľkých nástrojov príkazového riadka systému Linux. Nasleduje príklad bash skriptu s názvom „sitemap.sh“, ktorý ich používa. Bash skript, ktorý vytvára súbor sitemap.xml: #!/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 mačka /home/me/sitemap/www/traverse.dat | sed -e "s/\ \.//g" | zoradiť | uniq > /home/me/sitemap/sitemap/sitemap.xml sed -i "s/\&/\&\;/g" /home/me/sitemap/sitemap/sitemap. 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 "...Hotovo" Po dokončení súboru bash skriptu: "chmod +x sitemap.sh", aby bol spustiteľný. Stiahnite si sitemap.sh v archíve sitemap.sh.tar.gz (Po stiahnutí a rozbalení archívu nahraďte http://www.compmiscellanea v súbore .com/ požadovaný názov domény lokality s „www“ a nahraďte http://compmiscellanea.com/ požadovaným názvom domény lokality bez „www“. Namiesto „statický“ vložte do posledného riadku súboru riadok, ktorý odkazy by mali obsahovať, aby boli odstránené zo zoznamu. Potom "chmod +x sitemap.sh". Potom spustite sitemap.sh.) Komentáre Stiahnite si sitemap2.sh s komentármi po riadkoch v sitemap2.sh. archív tar.gz. Pred spustením skriptu bash musíte vytvoriť tri priečinky. Keďže prehliadaču lynx v niektorých prípadoch môžu chýbať niektoré odkazy, ak je názov domény lokality zadaný s alebo bez „www“, skript bash spustí lynx dvakrát, spracovanie stránky podľa názvu domény s „www“ a spracovanie stránky pomocou názvu domény bez „www“. Výsledné dva súbory sú umiestnené v dvoch rôznych priečinkoch, tu sú to "/home/me/sitemap/www/" a "/home/me/sitemap/www2/". A pre vytvorený sitemap.xml je určený adresár "/home/me/sitemap/sitemap/". 1. Cesta k bash #!/bin/bash 2. Prejdite do priečinka - prehliadač lynx tam umiestni súbory prijaté pri spracovaní stránky podľa názvu domény s "www" cd /home/me/sitemap/www/ 3.

V CSS neexistuje vlastnosť „float: bottom“, ale efekt možno dosiahnuť niekoľkými inými spôsobmi. Príklad: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud cvičenie ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Okrem sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link 1 Link 2 Link 3 Float bottom HTML / XHTML. kód:

CSS. Kód: .box1 (pozícia: relatívna; hore: 0px; vľavo: 0px; plávajúca: vľavo; výška: auto; šírka: 100%;) .content1 (pozícia: relatívna; hore: 0px; vľavo: 0px; plávajúca: vľavo; výška: auto; šírka: 100 %;) .left1 (pozícia: relatívna; hore: 0px; vľavo: 0px; plávajúca: vľavo; výška: auto; šírka: 64 %;) .menu1 (pozícia: relatívna; hore: 0px; left: 0px; float: left; height: auto; width: 36%;) .bottom1 (pozícia: absolútna; spodná: 0px; pravá: 0px;) /* Dodatočné CSS, len aby sme dali príkladu nejaký vzhľad */ . box1 (color: #ddd; text-align: center;).content1 (background: #bbb;).left1 (min-height: 100px; padding: 2%; text-align: justify; background: #006; -moz - box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;).menu1 (výplň: 2%; float: right ; background: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;) . menu1 p (pozícia: relatívna; hore: 0px; vľavo: 0px; plávajúca: doľava; výška: auto; šírka: 100 %; výplň: 0px; margin: 0px;).menu1 a (farba: #ddd; text-decoration: none;).menu1 a:hover (text-decoration: underline;).bottom1 (výplň: 2%; farba: #eee; pozadie: # 600 ;) Všetok obsah webovej stránky je obsiahnutý v kontajneri box1. Vnútri sú dva kontajnery div: 1. content1 so skutočným obsahom vľavo a menu vpravo. 2. spodok1 po obsahu1.

Ak ste už niekedy skúšali vytvoriť stránku prispôsobenú pre mobilné zariadenia, alebo previesť desktopovú stránku na responzívnu, tak asi viete, že jedným z najväčších problémov takéhoto rozloženia je správne zobrazenie tabuliek. Tabuľky sa zvyčajne neprispôsobujú malým obrazovkám, a preto, ak sa bez nich vaša stránka nezaobíde, musíte nájsť spôsob, ako ich používateľovi pohodlne zobraziť.

Tvorcovia webových stránok prišli s viac ako jedným spôsobom, ako to urobiť. Pomocou CSS a JavaScriptu môžete usporiadať bunky na malých obrazovkách do jedného stĺpca, skryť stĺpce s nie príliš dôležitými údajmi a dokonca zmeniť tabuľku na koláčový graf. Všetky tieto metódy boli popísané viac ako raz v angličtine aj ruštine a môžete si o nich ľahko prečítať na internete. V mojom článku by som chcel hovoriť o tom, ako si z týchto riešení vybrať to, ktoré potrebujete a konkrétne pre vašu stránku.

Pred výberom správnej metódy si musíte položiť niekoľko otázok týkajúcich sa obsahu tabuľky.

Budú ľudia porovnávať údaje v stĺpcoch alebo riadkoch?

Príklad 1: Ľudia nebudú porovnávať údaje.

Najprv sa pozrime na príklad tabuľky, kde používatelia nemusia porovnávať údaje. Príkladom takejto tabuľky je zoznam filmov. V tejto tabuľke sú filmy zoradené podľa hodnotenia.

Je vhodné zobraziť tieto údaje vo forme tabuľky na veľkej obrazovke, ale je nepravdepodobné, že by bolo pre niekoho životne dôležité porovnávať jedného režiséra s druhým. Preto môžu byť stĺpce tejto tabuľky na malých obrazovkách bezpečne premenené na jeden.

Presne to urobili tvorcovia stránky JQuery Mobile.

Príklad 2: Ľudia budú porovnávať údaje v riadkoch alebo stĺpcoch

Ak máte vo svojej tabuľke napríklad zoznam identických údajov pre rôzne spoločnosti, potom je zrejmé, že ich používateľ bude porovnávať, aby si pre seba vybral tú najlepšiu možnosť. Príklad takejto tabuľky môžeme vidieť na obrázku.

Ryža. 3. Tabuľka s údajmi na porovnanie

V tomto prípade potrebujeme riešenie, ktoré umožní užívateľovi porovnávať série. Jednou z prezentovaných možností je, že na malých obrazovkách sa tabuľka preklopí tak, že sa údaje preusporiadajú z horizontálnej polohy na vertikálnu. Horný riadok – nadpisy tabuliek – sa teda stal stĺpcom úplne vľavo a používateľ môže v prípade potreby posúvať stĺpce s údajmi vodorovne.

Ryža. 4. Tabuľka s údajmi na obrazovke mobilného telefónu

Ďalšou možnosťou je umožniť používateľovi vybrať si, ktoré stĺpce sa zobrazia a ktoré nie. Toto bolo implementované. Na úzkych obrazovkách sú stĺpce s nie príliš dôležitými údajmi skryté, no ak ich niekto chce vidieť, môže si tieto stĺpce zapnúť.

Ryža. 5. Tabuľka s údajmi v plnej verzii stránky

Ryža. 6 a 7. Rovnaká tabuľka v mobilnej verzii. Zostanú len najdôležitejšie stĺpce, ale v prípade potreby môžete zahrnúť všetky ostatné.

Aké informácie sú dôležité?

Ak sa rozhodnete skryť niektoré informácie na malých obrazovkách, potom prirodzene vyvstáva otázka: aké informácie sú dôležité? V takejto situácii môže byť užitočné položiť si nasledujúce otázky:

• Aké informácie ľudia najviac potrebujú?
• Ktoré stĺpce sú najdôležitejšie na pochopenie informácií, ktoré tabuľka poskytuje?
• Aké reproduktory budú ľudia s najväčšou pravdepodobnosťou potrebovať?

Budú používatelia schopní rozlíšiť jednu časť tabuľky od druhej?

Keď používateľ skenuje tabuľku riadok po riadku a hľadá informácie, ako môže rýchlo rozlíšiť jeden riadok od druhého? Toto je obzvlášť dôležité, keď sa tabuľky používajú v rozhraní webových aplikácií.

V plnej verzii stránky si do tabuľky môžeme dať čokoľvek, čo chceme. Pre mobilnú verziu je však potrebné ponechať najnutnejšie informácie a mať istotu, že si používateľ nepomýli jeden údaj s druhým.

Musí byť na obrazovke všetko naraz, alebo sa dajú podľa potreby pridávať ďalšie prvky?

Najťažšia vec na vytvorenie responzívnych tabuliek je zvyčajne vtedy, keď sa vývojár stránky snaží umiestniť všetko, čo je na veľkej obrazovke, na malú. V najzložitejších prípadoch to spôsobuje veľké problémy so zobrazením tabuľky.

Mnoho ľudí robí chybu, keď si myslia, že responzívny dizajn znamená zobraziť všetko na stránke bez ohľadu na veľkosť obrazovky. V skutočnosti je lepšie umiestniť na úzku obrazovku len to najdôležitejšie a zvyšok pridávať pri zväčšovaní.

Zaujímavé je, že najčastejšie, keď začíname dizajn s celoobrazovkovou verziou a vidíme obrovský stôl s množstvom obsahu, je pre nás ťažké akceptovať, že na úzkej obrazovke príde o časť tohto obsahu. Ale keď konáme na princípe „mobile first“, takéto problémy nevznikajú.

Na čom teda záleží pri stoloch v responzívnom dizajne?

• Pochopia používatelia význam tabuľky, aj keď sa jej vzhľad zmení?
• Podarí sa im nejako získať všetky informácie, ktoré sú v tabuľke?
• Ste si istý, že všetky adresy URL sú dostupné bez ohľadu na zariadenie?

Ak viete odpovedať „áno“ na všetky tri otázky, potom s tabuľkami na vašej stránke nie sú žiadne problémy.

Váš obsah vám povie, čo robiť so svojimi stolmi najlepšie.

Existuje mnoho rôznych spôsobov, ako usporiadať stoly v responzívnom dizajne. Postupom času ich bude ešte viac. Ako si však vybrať správnu metódu? Odpoveď môže byť len jedna.

Váš obsah vám povie, čo robiť so svojimi stolmi najlepšie. Vašou úlohou je správne to analyzovať.