Kako narediti tabelo v html odzivno. Zasuk telefona je zadnja možnost
V Aspro: Next, od različice 1.1.7 naprej, lahko prilagodite tabele za mobilno različico. Potrebno je spremeniti izvorno kodo strani - dodati razred, ki je odgovoren za prilagodljivost tabel.
Preprosta tabela v mobilni različici presega stran.
Če želite narediti tabelo odzivno, pojdite na stran za urejanje, kjer je bila tabela dodana. Nato pojdite v način urejanja izvorne kode.
Pred začetno oznako
Shranite spremembe.
Zdaj se tabela pomika in ne presega okvira.
Pri vodoravnem drsenju tabela ne preseže okvirja, pri drsenju v desno pa se v mobilni različici odpre stranski meni. Da zagotovite, da meni ne moti dela s tabelo, morate spremeniti kodo strani.
Oznaki morate dodati razred "swipeignore".
Shranite spremembe.
Zdaj, ko se pomikate po tabeli v desno, se stranski meni ne odpre, kar je motilo delo s tabelo.
Stranski meni lahko skrijete, ko se pomikate desno in na drugih straneh. Oznaki morate dodati razred "swipeignore".
Nobenemu oblikovalcu postavitev ni skrivnost, da so mize zlo. Težko jih je prilagoditi in prilagoditi. Če je na namizni različici spletnega mesta še vedno precej enostavno ustvariti tabelo, potem ko se začne prilagodljiva postavitev, gre vse k hudiču.
Pravzaprav je ena od učinkovitih možnosti ustvariti vodoravni drsnik za tabelo. To ni težko narediti, vendar današnja objava ne govori o tem. Vendar vam ga bom pokazal.
Prva metoda prilagajanja
| <div class = "table-wrap" > <miza > <thead > <tr > <th > Storitev</th> <th > Opis</th> <th > Cena</th> <th > Popust</th> </tr> </glava> <tbody > <tr > <td > Mobilna postavitev</td> <td > Postavitev za telefone</td> <td >$3000</td> <td > 50%</td> </tr> <tr > <td > Pristanek na CMS WordPress</td> <td ></td> <td >$3000</td> <td > 30%</td> </tr> </tbody> </tabela> </div> |
| Storitev | Opis | Cena | Popust |
|---|---|---|---|
| Mobilna postavitev | Postavitev za telefone | $3000 | 50% |
| Pristanek na CMS WordPress | Izdelava spletne strani z adminom. panel | $3000 | 30% |
Oblikujmo celotno stvar (predvsem moramo stilizirati namizna obloga).
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .table-wrap (text-align: center; display: inline-block; background-barva: #fff; padding: 2rem 2rem; color: #000;) .table-wrap (overflow-y: scroll;)) |
Prelom tabele ( poravnava besedila: sredina; prikaz: blok v vrstici; barva ozadja: #fff; oblazinjenje: 2rem 2rem; barva: #000; ) @medijski zaslon in (največja širina: 600 slikovnih pik) ( .table-wrap (overflow-y: pomik; ))
Posledično se bo pri širini DO 600 slikovnih pik tabela premikala, spletno mesto pa ne. Priročno, a danes bi rad govoril o nečem drugem.
Našel sem še en zanimiv pristop k odzivnosti mize. Sestoji iz uporabe podatkovnih atributov in psevdorazredov. Zdaj ti bom pokazal vse.
Druga metoda prilagajanja
Najprej spremenimo oznako:
| 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 |
|
| Storitev | Opis | Cena | Popust |
|---|---|---|---|
| Mobilna postavitev | Postavitev za telefone | $3000 | 50% |
| Pristanek na CMS WordPress | Izdelava spletne strani z adminom. panel | $3000 | 30% |
Vsakemu stolpcu je dodeljen atribut podatkovna oznaka, ki nam bodo koristile v prihodnje.
Nastavite osnovne sloge:
| 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 | body (text-align: center; padding-top: 10%; font-family: sans-serif; ozadje-image: url ("bg.jpg"); ozadje-size: naslovnica; višina: 100vh; barva: #fff ; ) .table-wrap ( text-align : center ; display : inline-block; ozadje-barva : #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 : sredina; obroba-desno: 1px polna #ddd;) tabela th (barva: #fff; barva ozadja: #444; transformacija besedila: velike črke; velikost pisave: 14px; razmik med črkami: 1px;) |
telo ( poravnava besedila: sredina; oblazinjenje zgoraj: 10 %; družina pisav: sans-serif; slika ozadja: url("bg.jpg"); velikost ozadja: naslovnica; višina: 100vh; barva: #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: kolaps; border-spacing: 0; ) table tr ( border: 1px solid #ddd; padding: 5px; ) table th, table td (padding: 10px; text-align : sredina; obroba-desno: 1px polna #ddd; ) tabela th ( barva: #fff; barva ozadja: #444; transformacija besedila: velike črke; velikost pisave: 14px; razmik med črkami: 1px; )
Videti je kot običajna tabela, seveda, s premikanjem mesta za 320-420 slikovnih pik, bomo videli vodoravno drsenje celotnega mesta. Ni bistvo.
Kako to popraviti? dodaj sloge:
| 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 | @medijski zaslon in (največja širina: 600 slikovnih pik) ( 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 ; velikost-pisave: 13px; border-bottom: 1px pikčasto #ccc; border-right: 1px polno prosojno;) tabela td:last-child ( border-bottom: 0;) tabela td:before ( content: attr(data- label); float: levo; text-transform: velika črka; font-weight: krepko; )) |
@medijski zaslon in (max-width: 600px) ( table ( border: 0; ) table thead ( display: none; ) table tr ( margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; ) tabela td (prikaz: blok; poravnava besedila: desno; velikost pisave: 13px; obroba-spodnja: 1px pikčasto #ccc; obroba-desno: 1px trdno prosojna; ) tabela td:zadnji-podrejeni ( obroba-spodnja: 0; ) tabela td:before ( content: attr(data-label); float: left; text-transform: uppercase; font-weight: krepko; ) )
Tukaj smo naredili vrstice tabele podobne blokom, odstranili imena stolpcev in poravnali besedilo samih stolpcev na desno. V zameno, z uporabo psevdo-razreda :prej svoje atribute datuma dodamo na levi rob. Izkazalo se je takole: 
Tukaj je še eno pero:
Kot lahko vidite, smo vrstice tabele spremenili v majhen blok, ki vsebuje vse informacije. Mislim, da je ta možnost prilagajanja mize primerna za majhne mize. Uživajte, prijatelji!
Če bi se mize lahko dobro prilagajale različnim ločljivostim zaslona, bi človeštvo še danes izdelovalo postavitve miz. Še vedno sem našel ta čas in vem, o čem govorim.
Vendar živimo v drugačnem času, postavitev tabel je potonila v pozabo, a potreba po uporabi klasičnih tabel na spletnih straneh še vedno ostaja. Zato ne bomo zanikali obstoja tabel, temveč bomo spoznali najpreprostejšo metodo, kako narediti tabelo odzivno.
Predstavitev odzivne mize .
HTML oznaka
| Ime | Priimek | Točke | Točke | Točke | Točke | Točke | Točke | Točke | Točke | Točke | Točke |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Julija | Smirnova | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| Evelyn | Yakovleva | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Andrej | Petrov | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Ustvarili smo preprosto HTML tabela, dokler se prilega ekranu, je vse OK. Ko se širina zaslona zmanjša, bo tabela odrezana in ne bomo videli njenih podatkov ali pa bo postala zelo majhna in spet ne bomo videli ničesar.
Verjetno ste opazili, da sem tabelo postavil znotraj oznake div in očitno z razlogom. Sama oznaka div ne daje ničesar, dokler mu ne dodelimo stilov.
slogi CSS
Če nastavite samo eno lastnost, miza se prilagaja, se vodoravni drsni trak samodejno prikaže, ko je vsebina znotraj oznake div ne bo več ustrezal trenutni širini zaslona vzdolž osi X.
Div(
overflow-x: samodejno;
)
Oblikujmo preostale oznake tabele:
Tabela (
border-collapse: kolaps; /* Pokaži samo posamezne vrstice */
razmik med robovi: 0; /* Razdalja med celicami */
širina: 100 %;
obroba: 1px polna #afb42b;
barva: #212121;
}
č, td (
poravnava besedila: levo;
oblazinjenje: 8px;
}
Oblikovanje oznak tr(vrstica) si zasluži ločen komentar. Postalo je že pravilo, da imajo mizne vrstice črtast videz (zebra). Za to se uporablja psevdorazred :n-ti otrok s pomenom v oklepaju celo. Pomen celo, dodeli lastnosti vsem sodim elementom, v našem primeru je to barva ozadja. Tako bo miza črtasta.
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].
Če tabela HTML vsebuje preveč podatkov, postane širša od razpoložljivega prostora na strani in se začne prelivati. Če želite popraviti situacijo, lahko v tabelo dodate vodoravno drsenje. primer:
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
|---|---|---|---|---|---|---|---|---|---|
| Tabela_podatki_1 | Tabela_podatki_2 | Tabela_podatki_3 | Tabela_podatki_4 | Tabela_podatki_5 | Tabela_podatki_6 | Tabela_podatki_7 | Tabela_podatki_8 | Tabela_podatki_9 | Tabela_podatki_10 |
HTML/XHTML. Koda:
<tabela>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
</tr>
<tr>
<td>Podatki_tabel_1</td>
<td>Podatki_tabel_2</td>
<td>Podatki_tabel_3</td>
<td>Podatki_tabel_4</td>
<td>Podatki_tabel_5</td>
<td>Podatki_tabel_6</td>
<td>Podatki_tabel_7</td>
<td>Tabela_podatki_8</td>
<td>Tabela_podatki_9</td>
<td>Podatki_tabel_10</td>
</tr>
</ tabela>
tabela(zaslon: blok; overflow-x: samodejno;)
/* Dodatni CSS, samo da dam primer nekaj videza: */
tabela(border-collapse: kolaps;)
tabela td,th(oblazinjenje: 10px; obroba: 1px #000 polno;)
Opomba: lastnost CSS prikaz: blok omogoča, da tabela zavzame le toliko širine, kot je potrebna za vsebovanje podatkov brez vidnega popačenja. Nič več, brez raztezanja po celotni širini razpoložljivega prostora na strani. Tudi če je dodana koda CSS širina: 100%. primer:
| 1 | 2 | 3 |
|---|---|---|
| Tabela_podatki_1 | Tabela_podatki_2 | Tabela_podatki_3 |
Aliosque subditos et theme
Obstaja veliko spletnih storitev za ustvarjanje sitemap.xml. Vendar pa lahko to storite sami v svojem računalniku z uporabo brskalnika lynx in več pripomočkov ukazne vrstice Linux. Sledi primer skripta bash, imenovanega "sitemap.sh", ki jih uporablja. Skript Bash, ki ustvari datoteko 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 cat /home/me/sitemap/www/traverse.dat | sed -e "s/\
V CSS ni lastnosti "float: bottom", vendar je učinek mogoče doseči na več drugih načinov. Primer: 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 exercitation 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Povezava 1 Povezava 2 Povezava 3 Lebdeči spodnji HTML / XHTML. Koda:
Če ste že kdaj poskušali ustvariti spletno stran, prilagojeno mobilnim napravam, ali spremeniti namizno stran v odzivno, potem verjetno veste, da je ena največjih težav pri takšni postavitvi pravilen prikaz tabel. Običajno se tabele ne prilagajajo dobro majhnim zaslonom in zato, če vaše spletno mesto ne more brez njih, potem morate najti način, da jih prikažete uporabniku priročno.
Ustvarjalci spletnih strani so se domislili več kot enega načina za to. S pomočjo CSS in JavaScripta lahko celice na malih zaslonih uredite v en stolpec, skrijete lahko stolpce z manj pomembnimi podatki in celo spremenite tabelo v tortni grafikon. Vse te metode so bile večkrat opisane v angleščini in ruščini in o njih lahko preprosto preberete na internetu. V svojem članku bi rad govoril o tem, kako med temi rešitvami izbrati tisto, ki jo potrebujete in posebej za vaše spletno mesto.
Preden izberete pravo metodo, si morate zastaviti nekaj vprašanj glede vsebine v tabeli.
Ali bodo ljudje primerjali podatke v stolpcih ali vrsticah?
Primer 1: Ljudje ne bodo primerjali podatkov.
Najprej si oglejmo primer tabele, kjer uporabnikom ni treba primerjati podatkov. Primer takšne tabele je seznam filmov. V tej tabeli so filmi razvrščeni po ocenah.
Te podatke je priročno videti v obliki tabele na velikem zaslonu, vendar je malo verjetno, da je komu ključno primerjati enega režiserja z drugim. Zato lahko stolpce te tabele na malih zaslonih varno spremenimo v enega.
Prav to so storili ustvarjalci spletnega mesta JQuery Mobile.
Primer 2: Ljudje bodo primerjali podatke vrstice ali stolpca
Če imate v tabeli na primer seznam enakih podatkov za različna podjetja, potem je očitno, da jih bo uporabnik primerjal, da bi izbral najboljšo možnost zase. Primer takšne mize vidimo na sliki.
riž. 3. Tabela s podatki za primerjavo
V tem primeru potrebujemo rešitev, ki uporabniku omogoča primerjavo serij. Ena od predstavljenih možnosti je, da se na malih zaslonih tabela obrne tako, da se podatki prerazporedijo iz vodoravnega v navpični položaj. Tako je zgornja vrstica - naslovi tabele - zdaj postala skrajni levi stolpec in uporabnik se lahko po stolpcih s podatki po potrebi pomika vodoravno.
riž. 4. Tabela s podatki na zaslonu mobilnega telefona
Druga možnost je, da uporabniku omogočite izbiro, katere stolpce naj prikaže in katere ne. To je bilo izvedeno. Na ozkih zaslonih so stolpci z ne zelo pomembnimi podatki skriti, če pa jih kdo želi videti, lahko te stolpce vklopi.
riž. 5. Tabela s podatki v polni različici spletnega mesta
riž. 6 in 7. Ista tabela v mobilni različici. Ostanejo samo najpomembnejši stolpci, po potrebi pa lahko vključite vse ostale.
Katere informacije so pomembne?
Če se odločite za skrivanje nekaterih informacij na malih zaslonih, se seveda pojavi vprašanje, katere informacije so pomembne? V takšni situaciji je morda koristno, da si zastavite naslednja vprašanja:
- Katere informacije ljudje najbolj potrebujejo?
- Kateri stolpci so najpomembnejši za razumevanje informacij, ki jih ponuja tabela?
- Katere zvočnike ljudje najverjetneje potrebujejo?
Bodo uporabniki lahko ločili en del tabele od drugega?
Ko uporabnik pregleduje tabelo, vrstico za vrstico in išče informacije, kako lahko hitro loči eno vrstico od druge? To je še posebej pomembno, ko se tabele uporabljajo v vmesniku spletnih aplikacij.
V polni različici spletnega mesta lahko v tabelo vnesemo karkoli želimo. Toda za mobilno različico je treba pustiti najbolj potrebne podatke in se prepričati, da uporabnik ne bo zamenjal enega podatka z drugim.
Ali mora biti na zaslonu vse naenkrat ali se lahko po potrebi dodajajo dodatni elementi?
Najtežje je ustvariti odzivne tabele, ko razvijalec spletnega mesta poskuša vse, kar je na velikem zaslonu, namestiti na majhnega. V najbolj zapletenih primerih to povzroča velike težave pri prikazu tabele.
Mnogi se zmotijo, ko mislijo, da odziven dizajn pomeni prikaz vsega na strani, ne glede na velikost zaslona. Pravzaprav je bolje, da na ozek zaslon spravite le najpomembnejše, ostalo pa dodajate, ko ga povečate.
Zanimivo je, da se največkrat, ko začnemo načrtovati s celozaslonsko različico in vidimo ogromno tabelo z veliko vsebine, težko sprijaznimo, da bo na ozkem zaslonu izgubila nekaj te vsebine. Ko pa delujemo po načelu »mobile first«, do takšnih težav ne pride.
Torej, kaj je pomembno, ko gre za tabele v odzivnem dizajnu?
- Ali bodo uporabniki razumeli pomen tabele, tudi če se njen videz spremeni?
- Bodo lahko nekako dobili vse podatke, ki so v tabeli?
- Ali ste prepričani, da so vsi URL-ji dostopni ne glede na napravo?
Če lahko na vsa tri vprašanja odgovorite z "da", potem s tabelami na vašem spletnem mestu ni težav.
Vaša vsebina vam bo povedala, kaj najbolje narediti s svojimi tabelami.
Obstaja veliko različnih načinov za ureditev miz v odzivnem dizajnu. Sčasoma jih bo še več. Toda kako izbrati pravo metodo? Odgovor je lahko samo en.
Vaša vsebina vam bo povedala, kaj najbolje narediti s svojimi tabelami. Vaša naloga je, da ga pravilno analizirate.
Svet brezplačnih programov in koristnih nasvetov
2024 whatsappss.ru