.

Det är ingen hemlighet för någon layoutdesigner att tabeller är onda. De är svåra att anpassa och anpassa. Om det fortfarande är ganska lätt att skapa en tabell på skrivbordsversionen av webbplatsen, går allt åt helvete när den adaptiva layouten börjar.

Egentligen är ett av de effektiva alternativen att skapa en horisontell rullning för tabellen. Det är inte svårt att göra, men det är inte vad dagens inlägg handlar om. Men jag ska visa det för dig.

Första anpassningsmetoden

<div class = "table-wrap" > <tabell > <thead > <tr > <e > Service</th> <e > Beskrivning</th> <e > Pris</th> <e > Rabatt</th> </tr> </thead> <kroppen > <tr > <td > Mobil layout</td> <td > Layout för telefoner</td> <td >$3000</td> <td > 50%</td> </tr> <tr > <td > Landar på CMS WordPress</td> <td ></td> <td >$3000</td> <td > 30%</td> </tr> </tbody> </tabell> </div>

Låt oss styla det hela (främst måste vi styla bord-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; ) )

Som ett resultat, vid en bredd på UPP TILL 600 pixlar, kommer tabellen att rulla, men webbplatsen gör det inte. Bekvämt, men idag skulle jag vilja prata om något annat.
Jag hittade en annan intressant metod för tabellrespons. Den består av att använda dataattribut och pseudoklasser. Nu ska jag visa dig allt.

Andra anpassningsmetoden

Låt oss först ändra markeringen:

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

Service Beskrivning Pris Rabatt Mobil layout Layout för telefoner $3000 50% Landar på CMS WordPress Skapa webbsida med admin. panel $3000 30%

Tilldelade ett attribut till varje kolumn data-etikett, vilket kommer att vara användbart för oss i framtiden.

Ställ in de grundläggande stilarna:

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 ; background-image : url ("bg.jpg" ) ; bakgrundsstorlek: cover; höjd : 100vh; färg : #fff ; ) .table-wrap ( text-align : center ; display : inline-block; background-color : #fff ; padding : 2rem 2rem; color : #000 ; ) table ( kantlinje : 1px fast #ccc ; bredd : 100% ; margin : 0 ; padding : 0 ; border-collapse : collapse ; border-spacing : 0 ; ) table tr ( kantlinje : 1px fast #ddd ; utfyllnad : 5px ; ) table th, table td ( utfyllnad : 10px ; text-align : center ; border-right : 1px solid #ddd ; ) table th ( färg : #fff ; bakgrundsfärg : #444 ; text-transform : versaler ; font-size : 14px ; bokstavsmellanrum : 1px ; )

body (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 ( kantlinje: 1px solid #ccc; bredd: 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-alignment : center; kant-höger: 1px fast #ddd; ) tabell th (färg: #fff; bakgrundsfärg: #444; textomvandling: versaler; teckensnittsstorlek: 14px; bokstavsmellanrum: 1px; )

Det ser ut som en vanlig tabell, naturligtvis, genom att flytta webbplatsen med 320-420 pixlar kommer vi att se en horisontell rullning av hela webbplatsen. Inte poängen.

Hur fixar man det? lägg till stilar:

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

@mediaskärm och (maxbredd: 600px) ( 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 prickad #ccc ; border-right : 1px solid transparent ; ) table td:last-child ( border-bottom : 0 ; ) table td:before ( innehåll : attr(data- etikett) ; flyta : vänster ; textomvandling : versaler ; teckensnittsvikt : fetstil ; ) )

@mediaskärm och (maxbredd: 600px) ( tabell ( kantlinje: 0; ) table thead ( display: ingen; ) 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 pricked #ccc; border-right: 1px solid transparent; ) table td:last-child ( border-bottom: 0; ) tabell td:före (innehåll: attr(dataetikett); flytande: vänster; textomvandling: versaler; font-weight: fetstil; ) )

Här gjorde vi tabellraderna blockliknande, tog bort kolumnnamnen och justerade själva kolumnernas text till höger. I sin tur med hjälp av pseudoklassen :innan vi lägger till våra datumattribut till vänstermarginalen. Det blir så här:

Här är en annan penna:

Som ni ser har vi gjort tabellraderna till ett litet block som innehåller all information. Jag tror att detta bordsanpassningsalternativ är lämpligt för små bord. Njut av det, vänner!

Om tabeller kunde anpassa sig väl till olika skärmupplösningar, skulle mänskligheten fortfarande göra bordslayouter än i dag. Jag hittade fortfarande den tiden och jag vet vad jag pratar om.

Vi lever dock i en annan tid, bordslayout har sjunkit i glömska, men behovet av att använda klassiska tabeller på webbplatser finns fortfarande kvar. Därför kommer vi inte att förneka existensen av tabeller, utan snarare lära oss om den enklaste metoden, hur man gör ett bord responsivt.

Responsiv bordsdemo .

HTML-uppmärkning

Vi skapade en enkel HTML bord, så länge det får plats på skärmen är allt OK. När skärmbredden minskar kommer tabellen att skäras av och vi kommer inte att se dess data, eller så blir den väldigt liten och vi kommer inte att se någonting igen.

Du har säkert märkt att jag placerade bordet inuti taggen div och uppenbarligen av en anledning. Själva taggen div ger ingenting förrän vi tilldelar stilar till den.

CSS-stilar

Genom att bara ställa in en egenskap, bordet anpassar sig, en horisontell rullningslist visas automatiskt när innehållet är inuti taggen div kommer inte längre att passa in i den aktuella skärmens bredd längs axeln X.

Div(
overflow-x: auto;
)

Låt oss utforma resten av tabelltaggarna:

Tabell (
border-collapse: kollapsa; /* Visa endast enstaka rader */
kantavstånd: 0; /* Avstånd mellan celler */
bredd: 100%;
kantlinje: 1px fast #afb42b;
färg: #212121;
}

Th, td (
text-align: vänster;
stoppning: 8px;
}

Tag styling tr(rad) förtjänar en separat kommentar. Det har redan blivit normen att bordsrader har ett randigt utseende (zebra). En pseudoklass används för detta :n:te barn med betydelse inom parentes även. Menande även, tilldelar egenskaper till alla jämna element, i vårt fall är detta bakgrundsfärgen. Således kommer bordet att vara randigt.

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

Om en HTML-tabell innehåller för mycket data blir den bredare än det tillgängliga utrymmet på sidan och börjar flöda över. För att åtgärda situationen kan du lägga till horisontell rullning i tabellen. Exempel:

1	2	3	4	5	6	7	8	9	10
Tabell_data_1	Tabell_data_2	Tabell_data_3	Tabelldata_4	Tabell_data_5	Tabell_data_6	Tabell_data_7	Tabell_data_8	Tabell_data_9	Tabelldata_10

HTML/XHTML. Koda:

<tabell>

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

<td>Tabell_data_2</td>

<td>Tabell_data_3</td>

<td>Tabell_data_4</td>

<td>Tabell_data_5</td>

<td>Tabell_data_6</td>

<td>Tabell_data_7</td>

<td>Tabell_data_8</td>

<td>Tabell_data_9</td>

<td>Tabell_data_10</td>

</tr>

</ tabell>

tabell(display: block; overflow-x: auto;)

/* Ytterligare CSS, bara för att ge exemplet ett utseende: */

tabell(gräns-kollaps: kollaps;)

bord td,th(stoppning: 10px; kant: 1px #000 solid;)

Notera: CSS-egenskap display: block gör att tabellen bara tar upp så mycket bredd som den behöver för att innehålla data utan visuell förvrängning. Inte mer, utan att sträcka sig över hela bredden av det tillgängliga utrymmet på sidan. Även om CSS-koden läggs till bredd: 100 %. Exempel:

1	2	3
Tabell_data_1	Tabell_data_2	Tabell_data_3

Aliosque subditos och tema

Det finns många onlinetjänster för att skapa sitemap.xml. Du kan dock göra det själv på din dator med lynx-webbläsaren och flera Linux-kommandoradsverktyg. Följande är ett exempel på ett bash-skript som heter "sitemap.sh" som använder dem. Bash-skript som skapar filen 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" | sort | 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 "...Done" Efter bash-skriptfilen klar: "chmod +x sitemap.sh" för att göra det körbart. Ladda ner sitemap.sh i arkivet sitemap.sh.tar.gz (När arkivet har laddats ner och packats upp, ersätt http://www.compmiscellanea i filen .com/ med önskat domännamn för sajten med "www" och ersätt http://compmiscellanea.com/ med önskat domännamn för sajten utan "www". Istället för "statisk" på den sista raden i filen, lägg raden som länkarna ska innehålla, så att de har tagits bort från listan. Sedan "chmod +x sitemap.sh". Kör sedan sitemap.sh). Kommentarer Ladda ner sitemap2.sh med rad-för-rad-kommentarer i sitemap2.sh. tar.gz arkiv. Innan du kör bash-skriptet måste du skapa tre mappar. Eftersom lynx-webbläsaren i vissa fall kan missa några länkar om webbplatsens domännamn anges med eller utan "www", kör bash-skriptet lynx två gånger, bearbetning av webbplatsen efter domännamn med "www" och bearbetning av webbplatsen med ett domännamn utan "www". De resulterande två filerna placeras i två olika mappar, här är de "/home/me/sitemap/www/" och "/home/me/sitemap/www2/". Och katalogen "/home/me/sitemap/sitemap/" är avsedd för den skapade sitemap.xml. 1. Sökväg till bash #!/bin/bash 2. Gå till mappen - lynx-webbläsaren kommer att placera filerna som tas emot vid bearbetning av webbplatsen efter domännamn med "www" cd /home/me/sitemap/www/ 3.

Det finns ingen "float: bottom"-egenskap i CSS, men effekten kan uppnås på flera andra sätt. Exempel: 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. Länk 1 Länk 2 Länk 3 Flytande botten HTML / XHTML. Koda:

CSS. Kod: .box1 (position: relativ; topp: 0px; vänster: 0px; float: vänster; höjd: auto; bredd: 100 %;) .content1 (position: relativ; topp: 0px; vänster: 0px; float: vänster; höjd: auto; bredd: 100%;) .left1 (position: relativ; topp: 0px; vänster: 0px; float: vänster; höjd: auto; bredd: 64%;) .menu1 (position: relativ; topp: 0px; vänster: 0px; float: vänster; höjd: auto; bredd: 36%;) .bottom1 (position: absolut; botten: 0px; höger: 0px;) /* Ytterligare CSS, bara för att ge exemplet lite utseende */ . box1 (färg: #ddd; text-align: center;).content1 (bakgrund: #bbb;).left1 (min-höjd: 100px; utfyllnad: 2%; text-align: justify; bakgrund: #006; -moz - box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;).menu1 (utfyllnad: 2%; flytande: höger ; bakgrund: #060; -moz-box-storlek: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;). menu1 p (position: relativ; topp: 0px; vänster: 0px; flyta: vänster; höjd: auto; bredd: 100%; stoppning: 0px; margin: 0px;).menu1 a (färg: #ddd; text-decoration: none;).menu1 a:hover (text-decoration: underline;).bottom1 (utfyllnad: 2%; färg: #eee; bakgrund: # 600;) Allt innehåll på webbsidan finns i box1-behållaren. Inuti den finns två div-behållare: 1. innehåll1 med det faktiska innehållet till vänster och en meny till höger. 2. botten1 efter innehåll1.

Om du någonsin har försökt skapa en webbplats anpassad för mobila enheter, eller konvertera en stationär webbplats till en responsiv, så vet du förmodligen att ett av de största problemen med en sådan layout är korrekt visning av tabeller. Tabeller anpassar sig vanligtvis inte bra till små skärmar, och därför, om din webbplats inte klarar sig utan dem, måste du hitta ett sätt att visa dem bekvämt för användaren.

Webbplatsskapare har kommit på mer än ett sätt att göra detta. Med CSS och JavaScript kan du ordna celler på små skärmar i en kolumn, du kan dölja kolumner med inte särskilt viktiga data och till och med förvandla en tabell till ett cirkeldiagram. Alla dessa metoder har beskrivits mer än en gång på både engelska och ryska, och du kan enkelt läsa om dem på Internet. I min artikel skulle jag vilja prata om hur man väljer bland dessa lösningar den som du behöver och specifikt för din webbplats.

Innan du väljer rätt metod måste du ställa dig några frågor angående innehållet i tabellen.

Kommer människor att jämföra data i kolumner eller rader?

Exempel 1: Människor jämför inte data.

Låt oss först titta på en exempeltabell där användare inte behöver jämföra data. Ett exempel på en sådan tabell är en lista över filmer. I denna tabell är filmerna ordnade efter betyg.

Det är bekvämt att se dessa data i tabellform på en stor skärm, men det är osannolikt att det är viktigt för någon att jämföra en regissör med en annan. Därför kan kolumnerna i denna tabell på små skärmar säkert omvandlas till en.

Detta är precis vad skaparna av JQuery Mobile-webbplatsen gjorde.

Exempel 2: Människor kommer att jämföra rad- eller kolumndata

Om du har i din tabell, till exempel, en lista med identiska data för olika företag, så är det uppenbart att användaren kommer att jämföra dem för att välja det bästa alternativet för sig själv. Vi kan se ett exempel på en sådan tabell på bilden.

Ris. 3. Tabell med data som ska jämföras

I det här fallet behöver vi en lösning som gör att användaren kan jämföra serier. Ett av alternativen som presenteras är när tabellen på små skärmar vänds på ett sådant sätt att data omarrangeras från en horisontell position till en vertikal. Därmed har den översta raden - tabellrubrikerna - nu blivit kolumnen längst till vänster, och användaren kan scrolla kolumnerna med data vid behov horisontellt.

Ris. 4. Tabell med data på mobiltelefonens skärm

Ett annat alternativ är att låta användaren välja vilka kolumner som ska visas och vilka inte. Detta har genomförts. På smala skärmar är kolumner med inte särskilt viktiga data dolda, men om någon vill se dem kan de slå på dessa kolumner.

Ris. 5. Tabell med data i den fullständiga versionen av webbplatsen

Ris. 6 och 7. Samma tabell i mobilversionen. Endast de viktigaste kolumnerna finns kvar, men du kan ta med alla andra om det behövs.

Vilken information är viktig?

Om du bestämmer dig för att dölja viss information på små skärmar, så uppstår naturligtvis frågan: vilken information är viktig? I en sådan situation kan det vara bra att ställa dig själv följande frågor:

• Vilken information behöver människor mest?
• Vilka kolumner är viktigast för att förstå informationen som tabellen ger?
• Vilka högtalare är det mest troligt att människor behöver?

Kommer användare att kunna skilja en del av tabellen från en annan?

När en användare skannar en tabell, rad för rad, och letar efter information, hur kan han snabbt skilja en rad från en annan? Detta är särskilt viktigt när tabeller används i gränssnittet för webbapplikationer.

I den fullständiga versionen av webbplatsen kan vi lägga allt vi vill i tabellen. Men för den mobila versionen är det nödvändigt att lämna den mest nödvändiga informationen och för att vara säker på att användaren inte kommer att blanda ihop en data med en annan.

Måste allt vara på skärmen på en gång, eller kan ytterligare element läggas till efter behov?

Det svåraste att skapa responsiva tabeller är oftast när webbplatsutvecklaren försöker passa in allt som finns på en stor skärm på en liten. I de mest komplexa fallen orsakar detta stora problem med tabellvisning.

Många gör misstaget att tro att responsiv design innebär att man visar allt på sidan, oavsett skärmstorlek. Faktum är att det är bättre att bara lägga de viktigaste sakerna på en smal skärm och lägga till resten när du förstorar.

Intressant nog, oftast när vi startar en design med en helskärmsversion och ser en enorm tabell med mycket innehåll, är det svårt för oss att acceptera att den på en smal skärm kommer att förlora en del av detta innehåll. Men när vi agerar enligt principen "mobil först" uppstår inte sådana problem.

Så, vad spelar det för roll när det kommer till bord i responsiv design?

• Kommer användarna att förstå meningen med tabellen även om dess utseende ändras?
• Kommer de på något sätt att kunna få all information som finns i tabellen?
• Är du säker på att alla webbadresser är tillgängliga oavsett enhet?

Om du kan svara "ja" på alla tre frågorna är det inga problem med tabeller på din sida.

Ditt innehåll kommer att berätta för dig vad du ska göra bäst med dina tabeller.

Det finns många olika sätt att arrangera bord i en responsiv design. Med tiden kommer det att bli ännu fler av dem. Men hur väljer man rätt metod? Det kan bara finnas ett svar.

Ditt innehåll kommer att berätta för dig vad du ska göra bäst med dina tabeller. Din uppgift är att analysera det korrekt.