.

Nevienam maketētājam nav noslēpums, ka galdi ir ļauni. Tos ir grūti pielāgot un pielāgot. Ja vietnes darbvirsmas versijā joprojām ir diezgan viegli izveidot tabulu, tad, kad sākas adaptīvais izkārtojums, viss iet uz elli.

Faktiski viena no efektīvajām iespējām ir tabulai izveidot horizontālu ritināšanu. To nav grūti izdarīt, taču šodienas ieraksts nav par to. Tomēr es jums to parādīšu.

Pirmā adaptācijas metode

<div class = "table-wrap" > <tabula > <thead > <tr > <th > apkalpošana</th> <th > Apraksts</th> <th > Cena</th> <th > Atlaide</th> </tr> </thead> <tbody> <tr > <td > Mobilais izkārtojums</td> <td > Izkārtojums tālruņiem</td> <td >$3000</td> <td > 50%</td> </tr> <tr > <td > Nokļūstot CMS WordPress</td> <td ></td> <td >$3000</td> <td > 30%</td> </tr> </tbody> </tabula> </div>

Veidosim stilu visu (galvenokārt mums ir nepieciešams veidot stilu galda aptinums).

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 ; ) )

Tabulas aplaušana ( teksta līdzinājums: centrā; displejs: iekļauts bloks; fona krāsa: #fff; polsterējums: 2rem 2rem; krāsa: #000; ) @multivides ekrāns un (maksimālais platums: 600 pikseļi) ( .table-wrap ( overflow-y: ritiniet; ) )

Tā rezultātā, platumā LĪDZ 600 pikseļiem, tabula tiks ritināta, bet vietne ne. Ērti, bet šodien es gribētu parunāt par ko citu.
Es atradu citu interesantu pieeju tabulas atsaucībai. To veido datu atribūtu un pseidoklases izmantošana. Tagad es jums visu parādīšu.

Otrā adaptācijas metode

Vispirms mainīsim marķējumu:

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

apkalpošana Apraksts Cena Atlaide Mobilais izkārtojums Izkārtojums tālruņiem $3000 50% Nokļūstot CMS WordPress Vietnes izveide ar admin. panelis $3000 30%

Katrai kolonnai ir piešķirts atribūts datu etiķete, kas mums noderēs nākotnē.

Iestatiet pamata stilus:

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

pamatteksts (teksta līdzinājums: centrā; polsterējums: 10%; fontu saime: sans-serif; fona attēls: url ("bg.jpg") ; fona izmērs: vāks; augstums: 100vh; krāsa: #fff ; ) .table-wrap ( teksta līdzinājums : centrā ; displejs : inline-block ; fona krāsa : #fff ; polsterējums : 2rem 2rem; krāsa : # 000 ; ) tabula ( apmale : 1px solid #ccc ; platums : 100% ; piemale : 0 ; polsterējums : 0 ; apmales sakļauts : sakļaut ; atstarpes apmalē : 0 ; ) table tr ( apmale : 1px solid #ddd ; padding : 5px ; ) table th , tabula td ( polsterējums : 10 pikseļi ; teksta līdzinājums : centrs ; apmale pa labi : 1px ciets #ddd ; ) tabula ( krāsa : #fff ; fona krāsa : #444 ; teksta pārveidošana : lielie burti ; fonta izmērs : 14 pikseļi ; atstarpes starp burtiem : 1px ; )

pamatteksts (teksta līdzinājums: centrā; polsterējums augšpusē: 10%; fontu saime: sans-serif; fona attēls: url("bg.jpg"); fona izmērs: vāks; augstums: 100vh; krāsa: #fff ; ) .table-wrap ( text-align: center; displejs: inline-block; fona krāsa: #fff; polsterējums: 2rem 2rem; krāsa: #000; ) tabula ( apmale: 1px solid #ccc; platums: 100% ; mala: 0; polsterējums: 0; apmales sakļauts: sakļaut; atstarpes apmalē: 0; ) tabula tr ( apmale: 1px ciets #ddd; polsterējums: 5 pikseļi; ) tabula th, tabula td ( polsterējums: 10 pikseļi; teksta līdzināšana : centrs; apmale pa labi: 1 px ciets #ddd; ) tabula th ( krāsa: #fff; fona krāsa: #444; teksta pārveidošana: lielie burti; fonta lielums: 14 pikseļi; atstarpes starp burtiem: 1 pikseļi; )

Tas izskatās kā parasta tabula, protams, pārvietojot vietni par 320–420 pikseļiem, mēs redzēsim visas vietnes horizontālu ritināšanu. Nevis būtība.

Kā to salabot? pievienot stilus:

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 ekrāns un (maksimālais platums: 600 pikseļi) ( tabula ( apmale : 0 ; ) tabulas virsraksts ( displejs : nav ; ) table tr ( piemale-apakšā : 10 pikseļi ; displejs : bloks ; apmale-apakša : 2 pikseļi ciets #ddd ; ) table td (displejs : bloks ; teksta līdzinājums : pa labi ; fonta izmērs : 13 pikseļi ; apmale-apakšā: 1px dotted #ccc ; mala-labā: 1px vienkrāsains caurspīdīgs ; ) tabula td:last-child ( border-bottom : 0 ; ) tabula td:before ( saturs : attr(data-) etiķete) ; peldēšana : pa kreisi ; teksta pārveidošana : lielie burti ; fonta svars : treknraksts ; ) )

@multivides ekrāns un (maksimālais platums: 600 pikseļi) ( tabula (apmale: 0; ) tabulas virsraksts (displejs: nav; ) tabula tr (piemale-apakšā: 10 pikseļi; displejs: bloks; apmale-apakšā: 2 pikseļi ciets #ddd; ) tabula td ( displejs: bloks; teksta līdzinājums: pa labi; fonta lielums: 13 pikseļi; apmale-apakšā: 1px punktēts #ccc; mala-labais: 1px ciets caurspīdīgs; ) tabula td:last-child ( apmale-apakšā: 0; ) tabula td:before ( saturs: attr(data-label); peldēšana: pa kreisi; teksta pārveidošana: lielie burti; fonta svars: treknraksts; ) )

Šeit mēs izveidojām tabulas rindas blokveida, noņēmām kolonnu nosaukumus un līdzinājām pašu kolonnu tekstu pa labi. Savukārt, izmantojot pseidoklasi : iepriekš mēs pievienojam savus datuma atribūtus kreisajā malā. Tas izrādās šādi:

Šeit ir vēl viena pildspalva:

Kā redzat, tabulas rindas mēs pārvērtām nelielā blokā, kurā ir visa informācija. Es domāju, ka šī galda pielāgošanas iespēja ir piemērota maziem galdiem. Izbaudiet to, draugi!

Ja tabulas varētu labi pielāgoties dažādām ekrāna izšķirtspējām, cilvēce joprojām veidotu tabulu izkārtojumus līdz šai dienai. Es joprojām atradu šo laiku un zinu, par ko runāju.

Taču mēs dzīvojam citos laikos, tabulu izkārtojums ir nogrimis aizmirstībā, taču joprojām saglabājas nepieciešamība vietnēs izmantot klasiskās tabulas. Tāpēc mēs nenoliegsim tabulu esamību, bet drīzāk uzzināsim par vienkāršāko metodi, kā padarīt tabulu atsaucīgu.

Atsaucīga tabulas demonstrācija .

HTML marķējums

Mēs izveidojām vienkāršu HTML galds, ja vien tas ietilpst ekrānā, viss ir kārtībā. Samazinot ekrāna platumu, tabula tiks nogriezta un mēs neredzēsim tās datus, vai arī tā kļūs ļoti maza un mēs atkal neko neredzēsim.

Jūs droši vien pamanījāt, ka es ievietoju tabulu tagā div un acīmredzot kāda iemesla dēļ. Pati birka div nedod neko, kamēr mēs tam nepiešķiram stilus.

CSS stili

Iestatot tikai vienu īpašumu, tabula pielāgojas, automātiski parādīsies horizontāla ritjosla, kad saturs atrodas taga iekšpusē div vairs neietilps pašreizējā ekrāna platumā gar asi X.

Div(
overflow-x: auto;
)

Veidosim pārējos tabulas tagus:

Tabula (
border-collapse: sabrukums; /* Rādīt tikai atsevišķas rindiņas */
apmales atstarpe: 0; /* Attālums starp šūnām */
platums: 100%;
apmale: 1px ciets #afb42b;
krāsa: #212121;
}

Th, td (
teksta līdzināšana: pa kreisi;
polsterējums: 8px;
}

Tagu stils tr(rinda) ir pelnījis atsevišķu komentāru. Jau ir kļuvis par normu, ka tabulas rindām ir svītrains izskats (zebra). Šim nolūkam tiek izmantota pseidoklase :n-tais bērns ar nozīmi iekavās pat. Nozīme pat, piešķir rekvizītus visiem pāra elementiem, mūsu gadījumā tā ir fona krāsa. Tādējādi galds būs svītrains.

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

Ja HTML tabulā ir pārāk daudz datu, tā kļūst plašāka par lapā pieejamo vietu un sāk pārpildīt. Lai labotu situāciju, tabulai varat pievienot horizontālo ritināšanu. Piemērs:

1	2	3	4	5	6	7	8	9	10
Tabulas_dati_1	Tabula_dati_2	Tabulas_dati_3	Tabula_dati_4	Tabula_dati_5	Tabula_dati_6	Tabula_dati_7	Tabula_dati_8	Tabula_dati_9	Tabula_dati_10

HTML/XHTML. Kods:

<tabula>

<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>Tabulas_dati_1</td>

<td>Tabulas_dati_2</td>

<td>Tabulas_dati_3</td>

<td>Tabulas_dati_4</td>

<td>Tabulas_dati_5</td>

<td>Tabulas_dati_6</td>

<td>Tabulas_dati_7</td>

<td>Tabulas_dati_8</td>

<td>Tabulas_dati_9</td>

<td>Tabulas_dati_10</td>

</tr>

</ tabula>

tabula(displejs: bloķēts; pārpilde-x: automātisks;)

/* Papildu CSS, lai sniegtu piemēra izskatu: */

tabula(robežas sabrukums: sabrukums;)

tabula td,th(polsterējums: 10 pikseļi; apmale: 1 px # 000 cieta;)

Piezīme: CSS īpašums displejs: bloks liek tabulai aizņemt tikai tik daudz platuma, cik tai nepieciešams, lai saturētu datus bez vizuāliem kropļojumiem. Ne vairāk, neizstiepjot visā lapas pieejamās vietas platumā. Pat ja ir pievienots CSS kods platums: 100%. Piemērs:

1	2	3
Tabulas_dati_1	Tabula_dati_2	Tabulas_dati_3

Aliosque subditos un tēma

Ir daudz tiešsaistes pakalpojumu, lai izveidotu sitemap.xml. Tomēr varat to izdarīt pats savā datorā, izmantojot lynx pārlūkprogrammu un vairākas Linux komandrindas utilītas. Tālāk ir sniegts bash skripta "sitemap.sh" piemērs, kas tos izmanto. Bash skripts, kas izveido failu 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/\ \.//g" | kārtot | 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/ vietnes karte/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 "...Gatavs" Kad bash skripta fails ir gatavs: "chmod +x sitemap.sh", lai padarītu to izpildāmu. Lejupielādējiet sitemap.sh arhīvā sitemap.sh.tar.gz (Pēc arhīva lejupielādes un izpakošanas aizstājiet http://www.compmiscellanea failā .com/ ar vēlamais vietnes domēna nosaukums ar "www" un aizstāt http://compmiscellanea.com/ ar vēlamo vietnes domēna nosaukumu bez "www". Faila pēdējā rindiņā "static" vietā ievietojiet rindiņu, kas saitēm ir jābūt ietvertām, lai tās būtu izņemtas no saraksta. Pēc tam "chmod +x sitemap.sh". Pēc tam palaidiet sitemap.sh). Komentāri Lejupielādējiet sitemap2.sh ar rindiņām pa rindiņām komentāriem vietnē sitemap2.sh. tar.gz arhīvs. Pirms bash skripta palaišanas ir jāizveido trīs mapes. Tā kā lynx pārlūkprogramma dažos gadījumos var palaist garām dažas saites, ja vietnes domēna nosaukums ir norādīts ar "www" vai bez tā, bash skripts lynx palaiž divas reizes, vietnes apstrāde pēc domēna nosaukuma ar “www” un vietnes apstrāde, izmantojot domēna nosaukumu bez “www”. Iegūtie divi faili tiek ievietoti divās dažādās mapēs, šeit tie ir "/home/me/sitemap/www/" un "/home/me/sitemap/www2/". Un izveidotajam sitemap.xml ir paredzēts direktorijs "/home/me/sitemap/sitemap/". 1. Ceļš uz bash #!/bin/bash 2. Dodieties uz mapi - lynx pārlūks tur ievietos failus, kas saņemti, apstrādājot vietni pēc domēna nosaukuma ar "www" cd /home/me/sitemap/www/ 3.

CSS nav rekvizīta "float: bottom", taču efektu var panākt vairākos citos veidos. Piemērs: 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. 1. saite 2. saite 3. saite. HTML / XHTML. Kods:

CSS. Kods: .box1 (pozīcija: relatīvā; augšā: 0px; pa kreisi: 0px; peldēšana: pa kreisi; augstums: auto; platums: 100%;) .content1 (pozīcija: relatīvā; augšā: 0px; pa kreisi: 0px; peldēšana: pa kreisi; augstums: automātisks; platums: 100%;) .left1 (pozīcija: relatīvā; augšā: 0 pikseļi; pa kreisi: 0 pikseļi; peldēšana: pa kreisi; augstums: automātiski; platums: 64%;) .menu1 (pozīcija: relatīvā; augšā: 0 pikseļi; pa kreisi: 0 pikseļi; peldošs: pa kreisi; augstums: automātisks; platums: 36%;) .bottom1 (pozīcija: absolūtā; apakšā: 0 pikseļi; pa labi: 0 pikseļi;) /* Papildu CSS, lai piemēram piešķirtu izskatu */ . box1 (krāsa: #ddd; teksta līdzināšana: centrā;).content1 (fons: #bbb;).left1 (min-height: 100px; polsterējums: 2%; teksta līdzinājums: attaisnot; fons: #006; -moz - box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;).menu1 (polsterējums: 2%; peldēšana: pa labi ; fons: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;) . menu1 p (pozīcija: relatīvā; augšā: 0 pikseļi; pa kreisi: 0 pikseļi; peldēt: pa kreisi; augstums: auto; platums: 100%; polsterējums: 0px; piemale: 0px;).menu1 a (krāsa: #ddd; teksta noformējums: nav;).menu1 a:hover (teksta noformējums: pasvītrot;).apakšā1 (polsterējums: 2%; krāsa: #eee; fons: # 600;) Viss tīmekļa lapas saturs ir ietverts box1 konteinerā. Tā iekšpusē ir divi div konteineri: 1. saturs1 ar faktisko saturu kreisajā pusē un izvēlni labajā pusē. 2. apakšā1 pēc satura1.

Ja kādreiz esat mēģinājis izveidot vietni, kas pielāgota mobilajām ierīcēm, vai pārveidot darbvirsmas vietni par adaptīvu, tad droši vien zināt, ka viena no lielākajām problēmām ar šādu izkārtojumu ir pareiza tabulu attēlošana. Parasti tabulas slikti pielāgojas maziem ekrāniem, un tādēļ, ja jūsu vietne nevar iztikt bez tām, jums ir jāatrod veids, kā tās lietotājam ērti parādīt.

Vietņu veidotāji ir izdomājuši vairāk nekā vienu veidu, kā to izdarīt. Izmantojot CSS un JavaScript, jūs varat sakārtot šūnas mazos ekrānos vienā kolonnā, varat paslēpt kolonnas ar ne pārāk svarīgiem datiem un pat pārvērst tabulu sektoru diagrammā. Visas šīs metodes ir aprakstītas vairāk nekā vienu reizi gan angļu, gan krievu valodā, un jūs varat viegli izlasīt par tām internetā. Savā rakstā es vēlētos runāt par to, kā no šiem risinājumiem izvēlēties to, kas jums nepieciešams un īpaši jūsu vietnei.

Pirms izvēlēties pareizo metodi, jums jāuzdod sev daži jautājumi par tabulas saturu.

Vai cilvēki salīdzinās datus kolonnās vai rindās?

1. piemērs: cilvēki nesalīdzinās datus.

Vispirms apskatīsim tabulas piemēru, kurā lietotājiem nav jāsalīdzina dati. Šādas tabulas piemērs ir filmu saraksts. Šajā tabulā filmas ir sakārtotas pēc reitinga.

Šos datus tabulas veidā ir ērti skatīt uz liela ekrāna, taču maz ticams, ka kādam ir vitāli svarīgi salīdzināt vienu režisoru ar citu. Tāpēc šīs tabulas kolonnas uz maziem ekrāniem var droši pārveidot par vienu.

Tieši to darīja JQuery Mobile vietnes veidotāji.

2. piemērs. Cilvēki salīdzinās rindu vai kolonnu datus

Ja jūsu tabulā ir, piemēram, identisku datu saraksts par dažādiem uzņēmumiem, tad ir skaidrs, ka lietotājs tos salīdzinās, lai izvēlētos sev labāko variantu. Šādas tabulas piemēru varam redzēt attēlā.

Rīsi. 3. Tabula ar salīdzināmajiem datiem

Šajā gadījumā mums ir nepieciešams risinājums, kas ļauj lietotājam salīdzināt sērijas. Viena no piedāvātajām opcijām ir, ja mazos ekrānos tabula tiek pagriezta tā, ka dati tiek pārkārtoti no horizontāla stāvokļa uz vertikālu. Tādējādi augšējā rinda - tabulas virsraksti - tagad ir kļuvusi par vistālāk kreiso kolonnu, un lietotājs var ritināt kolonnas ar datiem, ja nepieciešams, horizontāli.

Rīsi. 4. Tabula ar datiem mobilā tālruņa ekrānā

Vēl viena iespēja ir ļaut lietotājam izvēlēties, kuras kolonnas rādīt un kuras nē. Tas ir īstenots. Šauros ekrānos kolonnas ar ne pārāk svarīgiem datiem tiek paslēptas, bet, ja kāds vēlas tos redzēt, var šīs kolonnas ieslēgt.

Rīsi. 5. Tabula ar datiem vietnes pilnajā versijā

Rīsi. 6 un 7. Tā pati tabula mobilajā versijā. Paliek tikai vissvarīgākās kolonnas, bet, ja nepieciešams, varat iekļaut visas pārējās.

Kāda informācija ir svarīga?

Ja jūs nolemjat slēpt kādu informāciju mazos ekrānos, tad dabiski rodas jautājums: kāda informācija ir svarīga? Šādā situācijā var būt noderīgi uzdot sev šādus jautājumus:

• Kāda informācija cilvēkiem ir visvairāk nepieciešama?
• Kuras kolonnas ir vissvarīgākās, lai izprastu tabulā sniegto informāciju?
• Kādi skaļruņi cilvēkiem, visticamāk, ir nepieciešami?

Vai lietotāji varēs atšķirt vienu tabulas daļu no citas?

Kad lietotājs skenē tabulu rindu pēc rindas, meklējot informāciju, kā viņš var ātri atšķirt vienu rindu no citas? Tas ir īpaši svarīgi, ja tīmekļa lietojumprogrammu saskarnē tiek izmantotas tabulas.

Pilnajā vietnes versijā mēs varam ievietot tabulā visu, ko vēlamies. Bet mobilajai versijai ir jāatstāj visnepieciešamākā informācija un jāpārliecinās, ka lietotājs nesajauks vienus datus ar citiem.

Vai visam ir jābūt uzreiz uz ekrāna, vai pēc vajadzības var pievienot papildu elementus?

Visgrūtāk ir izveidot adaptīvas tabulas, kad vietnes izstrādātājs mēģina ievietot visu, kas redzams lielajā ekrānā, mazā. Sarežģītākajos gadījumos tas rada lielas problēmas ar tabulas displeju.

Daudzi cilvēki pieļauj kļūdu, domājot, ka adaptīvs dizains nozīmē visu lapā parādīto neatkarīgi no ekrāna izmēra. Faktiski šaurā ekrānā labāk ir ievietot tikai vissvarīgākās lietas, bet pārējās pievienojiet, palielinot.

Interesanti, ka visbiežāk, uzsākot dizainu ar pilnekrāna versiju un ieraugot milzīgu tabulu ar lielu saturu, mums ir grūti pieņemt, ka šaurā ekrānā tas pazaudēs daļu no šī satura. Taču, rīkojoties pēc principa “mobilais vispirms”, šādas problēmas nerodas.

Tātad, kāda nozīme ir atsaucīga dizaina tabulām?

• Vai lietotāji sapratīs tabulas nozīmi pat tad, ja mainīsies tās izskats?
• Vai viņi kaut kā varēs iegūt visu informāciju, kas ir tabulā?
• Vai esat pārliecināts, ka visi URL ir pieejami neatkarīgi no ierīces?

Ja uz visiem trim jautājumiem varat atbildēt “jā”, tad ar tabulām jūsu vietnē nav problēmu.

Jūsu saturs jums pateiks, kā vislabāk rīkoties ar tabulām.

Ir daudz dažādu veidu, kā sakārtot galdus atsaucīgā dizainā. Laika gaitā to būs vēl vairāk. Bet kā izvēlēties pareizo metodi? Atbilde var būt tikai viena.

Jūsu saturs jums pateiks, kā vislabāk rīkoties ar tabulām. Tavs uzdevums ir to pareizi analizēt.