Wenn Sie jemals versucht haben, eine Website zu erstellen, die auf ... zugeschnitten ist mobile Geräte oder die Umwandlung einer Website für Desktop-Computer in eine responsive Website, dann wissen Sie wahrscheinlich, dass eines der größten Probleme bei einem solchen Layout die korrekte Darstellung von Tabellen ist. Tabellen passen sich normalerweise nicht gut an kleine Bildschirme an. Wenn Ihre Website also nicht ohne sie auskommt, müssen Sie eine Möglichkeit finden, sie für den Benutzer bequem anzuzeigen.

Website-Ersteller haben sich dafür mehr als eine Möglichkeit ausgedacht. MIT mit CSS und JavaScript können Sie Zellen auf kleinen Bildschirmen in einer Spalte anordnen, Sie können Spalten mit nicht sehr wichtigen Daten ausblenden und sogar die Tabelle in ein Kreisdiagramm umwandeln. Alle diese Methoden wurden mehr als einmal sowohl auf Englisch als auch auf Russisch beschrieben und Sie können sie leicht im Internet nachlesen. In meinem Artikel möchte ich darüber sprechen, wie Sie aus diesen Lösungen diejenige auswählen können, die Sie speziell für Ihre Website benötigen.

Bevor Sie sich für die richtige Methode entscheiden, müssen Sie sich einige Fragen zum Inhalt der Tabelle stellen.

Werden Daten in Spalten oder Zeilen verglichen?

Beispiel 1: Menschen vergleichen keine Daten.

Schauen wir uns zunächst eine Beispieltabelle an, in der Benutzer keine Daten vergleichen müssen. Ein Beispiel für eine solche Tabelle ist eine Liste von Filmen. In dieser Tabelle sind die Filme nach Bewertung geordnet.

An großer Bildschirm Es ist praktisch, diese Daten in Form einer Tabelle anzuzeigen, aber es ist unwahrscheinlich, dass es für irgendjemanden von entscheidender Bedeutung ist, einen Regisseur mit einem anderen zu vergleichen. Daher können die Spalten dieser Tabelle auf kleinen Bildschirmen sicher in eine einzige umgewandelt werden.

Genau das haben die Ersteller der JQuery Mobile-Website getan.

Beispiel 2: Personen vergleichen Zeilen- oder Spaltendaten

Wenn Sie in Ihrer Tabelle beispielsweise eine Liste identischer Daten für verschiedene Unternehmen haben, ist es offensichtlich, dass der Benutzer diese vergleicht, um selbst eine Auswahl zu treffen beste Option. Ein Beispiel für eine solche Tabelle sehen wir im Bild.

Reis. 3. Tabelle mit zu vergleichenden Daten

In diesem Fall benötigen wir eine Lösung, die es dem Benutzer ermöglicht, Serien zu vergleichen. Eine der angebotenen Optionen besteht darin, auf kleinen Bildschirmen die Tabelle so umzudrehen, dass die Daten von einer horizontalen in eine vertikale Position verschoben werden. Somit ist die oberste Zeile – die Tabellenüberschriften – nun zur Spalte ganz links geworden, und der Benutzer kann bei Bedarf horizontal durch die Spalten mit Daten scrollen.

Reis. 4. Tabelle mit Daten auf dem Handy-Bildschirm

Eine weitere Möglichkeit besteht darin, dem Benutzer die Auswahl zu ermöglichen, welche Spalten angezeigt werden sollen und welche nicht. Dies wurde umgesetzt. Auf schmalen Bildschirmen werden Spalten mit nicht sehr wichtigen Daten ausgeblendet, aber wenn jemand sie sehen möchte, kann er diese Spalten einschalten.

Reis. 5. Tabelle mit Daten in Vollversion Website

Reis. 6 und 7. Die gleiche Tabelle in mobile Version. Es bleiben nur die wichtigsten Spalten übrig, bei Bedarf können Sie aber auch alle anderen einbinden.

Welche Informationen sind wichtig?

Wenn Sie sich dazu entschließen, einige Informationen auf kleinen Bildschirmen zu verbergen, stellt sich natürlich die Frage: Welche Informationen sind wichtig? In einer solchen Situation kann es sinnvoll sein, sich die folgenden Fragen zu stellen:

• Welche Informationen brauchen die Menschen am meisten?
• Welche Spalten sind für das Verständnis der in der Tabelle bereitgestellten Informationen am wichtigsten?
• Welche Lautsprecher werden die Leute am wahrscheinlichsten brauchen?

Können Benutzer einen Teil der Tabelle von einem anderen unterscheiden?

Während der Benutzer die Tabelle Zeile für Zeile durchsucht, sucht er nach notwendige Informationen Wie kann er schnell eine Reihe von der anderen unterscheiden? Dies ist besonders wichtig, wenn Tabellen in der Oberfläche von Webanwendungen verwendet werden.

In der Vollversion der Website können wir alles, was wir wollen, in die Tabelle einfügen. Für die mobile Version ist es jedoch notwendig, die wichtigsten Informationen zu hinterlassen und sicherzustellen, dass der Benutzer keine Daten mit anderen verwechselt.

Muss alles gleichzeitig auf dem Bildschirm sein, oder kann man das ergänzen? zusätzliche Elemente ggf.?

Am schwierigsten ist es normalerweise, responsive Tabellen zu erstellen, wenn der Website-Entwickler versucht, alles, was auf einem großen Bildschirm angezeigt wird, auf einen kleinen Bildschirm zu bringen. Dies führt in den komplexesten Fällen zu erheblichen Problemen bei der Tabellendarstellung.

Viele Leute machen den Fehler zu glauben, dass Responsive Design bedeutet, dass alles auf der Seite angezeigt wird, unabhängig von der Bildschirmgröße. Tatsächlich ist es besser, nur die wichtigsten Dinge auf einem schmalen Bildschirm anzuzeigen und den Rest beim Vergrößern hinzuzufügen.

Interessanterweise fällt es uns oft schwer, zu akzeptieren, dass auf einem schmalen Bildschirm ein Teil dieses Inhalts verloren geht, wenn wir ein Design mit einer Vollbildversion beginnen und eine große Tabelle mit viel Inhalt sehen. Aber wenn wir nach dem „Mobile First“-Prinzip handeln, entstehen solche Probleme nicht.

Was macht es also aus, wenn es um Tische geht? responsives Design?

• Werden Benutzer die Bedeutung der Tabelle verstehen, selbst wenn dies der Fall ist? Aussehen Wird es sich ändern?
• Werden sie irgendwie in der Lage sein, alle in der Tabelle enthaltenen Informationen zu erhalten?
• Sind Sie sicher, dass alle URLs unabhängig vom Gerät zugänglich sind?

Wenn Sie alle drei Fragen mit „Ja“ beantworten können, gibt es keine Probleme mit Tabellen auf Ihrer Website.

Ihr Inhalt verrät Ihnen, was Sie mit Ihren Tabellen am besten machen können.

Es gibt viele auf verschiedene Weise Platzieren Sie Tische im Responsive Design. Mit der Zeit werden es noch mehr davon sein. Aber wie wählt man die richtige Methode? Es kann nur eine Antwort geben.

Ihr Inhalt verrät Ihnen, was Sie mit Ihren Tabellen am besten machen können. Ihre Aufgabe ist es, es richtig zu analysieren.

Adaptive Websites sind schon lange kein Kuriosum mehr und werden immer häufiger eingesetzt. Berücksichtigung der neuesten Nachrichten mit Rankings Suchmaschinen(Falls jemand es nicht weiß: Bei der Suche auf einem mobilen Gerät werden responsive Websites bevorzugt.) Die Anzahl solcher Websites wird weiter zunehmen. Sie können gegen die Adaption für mobile Geräte sein oder dafür, aber die Tatsache bleibt bestehen: Immer mehr Kunden fordern, dass ihre Website anpassungsfähig ist, und Webmaster müssen dies tun.

Eines der Hauptprobleme bei der Anpassung einer Site an unterschiedliche Auflösungen sind Tabellen. Vor allem, wenn sie viele Daten enthalten. Schauen wir uns zwei Möglichkeiten an, eine responsive Tabelle zu gestalten.

Schauen wir uns zunächst an, wie die Tabelle aussieht:

Seien wir ehrlich: Eine solche Tabelle kann nicht als wirklich anpassungsfähig bezeichnet werden. Auf Mobilgeräten sieht es gut aus, nichts ragt irgendwo hervor und das Layout der Website ist nicht „fließend“. Diese Methode eignet sich gut, wenn Tabellen auf Ihrer Website selten sind und es keinen Sinn macht, ein Plugin anzuschließen und deswegen zusätzliche Stile zu schreiben. Diese Methode wird von Bootstrap verwendet. Wie funktioniert das?

Es ist ganz einfach: Die Tabelle wird in ein Div eingeschlossen, das auf eine maximale Breite von 100 % und Überlauf: Auto eingestellt ist.

Wenn der Tisch lang ist, können Sie auch die maximale Höhe festlegen und den Tabellenkopf fixieren.

Das Ergebnis, wie das folgende Beispiel, kann auf dieser Seite eingesehen werden.

Wenn Sie häufig Tabellen auf Ihrer Website haben, ist es sinnvoll, das Footable-Plugin zu verwenden.

Zuerst müssen Sie das Plugin verbinden (auf GitHub herunterladen oder über ein CDN verbinden) und es auch initialisieren:

$(function() ( $(".table").footable(); ));

Hier müssen wir etwas klarstellen: Aus irgendeinem Grund zählt das Skript nicht die Breite des Ansichtsfensters, sondern die Breite der Tabelle. Um dies zu beheben, müssen Sie das Skript leicht „modernisieren“:

JQuery(function () ( jQuery(".table").footable(( berechneWidthOverride: function() ( return (width: jQuery(window).width()); ) )); ))

Bei der Initialisierung geben wir die Tabellenklasse oder nur das Tabellen-Tag an, wenn alle Tabellen auf der Site adaptiv sein sollen.

Was bedeutet das alles? Auf Tablets werden die Spalten „RAM“, „Diagonal“, „PPI“ und „Akku“ ausgeblendet. Bei der Reduzierung auf Telefone wird auch die Spalte „Preis“ hinzugefügt.

Bei der Initialisierung können Checkpoints angegeben werden:

JQuery(function () ( jQuery(".table").footable(( berechneWidthOverride: function() ( return (width: jQuery(window).width()); ), Haltepunkte: ( Mobil: 0, Tablet: 720, Desktop: 1024 ) ));

Das bedeutet, dass die Regel im Bereich 0–720 für Mobilgeräte, 720–1024 für Tablets und über 1024 für Desktops gilt. Nichts hindert Sie daran, bei Bedarf noch mehr Regeln zu erstellen.

Sie können auch sicherstellen, dass einige Spalten standardmäßig erweitert werden. Geben Sie dazu das Datenattribut data-expanded="true" an

Die Möglichkeiten des Plugins enden damit nicht, sondern mit der Erstellung adaptive Tabellen das ist völlig ausreichend. Beim nächsten Mal werden wir uns andere Möglichkeiten ansehen.

In Aspro: Next können Sie ab Version 1.1.7 Tabellen für die mobile Version anpassen. Es müssen Änderungen vorgenommen werden Quellcode Seiten – Fügen Sie eine Klasse hinzu, die für die Anpassungsfähigkeit von Tabellen verantwortlich ist.

Eine einfache Tabelle in der mobilen Version geht über die Seite hinaus.

Um die Tabelle responsiv zu machen, bearbeiten Sie die Seite, auf der die Tabelle hinzugefügt wurde. Gehen Sie dann in den Quellcode-Bearbeitungsmodus.

Vor dem Eröffnungstag

Nach dem schließenden Tag

Speichern Sie Ihre Änderungen.

Jetzt scrollt die Tabelle und geht nicht über den Rahmen hinaus.

Beim horizontalen Scrollen geht die Tabelle nicht über den Rahmen hinaus, beim Scrollen nach rechts in der mobilen Version öffnet sich jedoch ein Seitenmenü. Um sicherzustellen, dass das Menü die Arbeit mit der Tabelle nicht beeinträchtigt, müssen Sie Änderungen am Seitencode vornehmen.

Wir müssen die Klasse „swipeignore“ zu dem Tag hinzufügen, das wir zuvor hinzugefügt haben. Als Ergebnis vor dem Tag

Speichern Sie Ihre Änderungen.

Beim Scrollen der Tabelle nach rechts öffnet sich nun das Seitenmenü nicht, was die Arbeit mit der Tabelle beeinträchtigte.

Sie können das Seitenmenü beim Scrollen nach rechts und auf anderen Seiten ausblenden. Sie müssen die Klasse „swipeignore“ zum Block-Tag hinzufügen, für das Sie die Seitenmenüanzeige entfernen möchten. Wenn für das Tag keine Klasse angegeben wurde, hat es die Form . Wenn dem Tag bereits Klassen hinzugefügt wurden, schreiben Sie „swipeignore“ getrennt durch ein Leerzeichen, zum Beispiel .

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

Wenn eine HTML-Tabelle zu viele Daten enthält, wird sie größer als der verfügbare Platz auf der Seite und beginnt überzulaufen. Um Abhilfe zu schaffen, können Sie der Tabelle horizontales Scrollen hinzufügen. Beispiel:

HTML/XHTML. Code:

1

2

3

4

5

6

7

8

9

10

Table_data_1

Table_data_2

Table_data_3

Table_data_4

Table_data_5

Table_data_6

Table_data_7

Table_data_8

Table_data_9

Table_data_10

Tabelle (Anzeige: Block; Überlauf-x: Auto;)

/* Zusätzliches CSS, nur um dem Beispiel etwas Aussehen zu verleihen: */

Tabelle (border-collapse:collapse;)

Tabelle td,th (Auffüllung: 10 Pixel; Rand: 1 Pixel #000 fest;)

Notiz: CSS-Eigenschaft Der display:-Block sorgt dafür, dass die Tabelle nur so viel Breite einnimmt, wie sie benötigt, um die Daten ohne visuelle Verzerrung aufzunehmen. Nicht mehr, ohne sich über die gesamte Breite des verfügbaren Platzes auf der Seite auszudehnen. Auch wenn width: 100 % zum CSS-Code hinzugefügt wird. Beispiel:

Aliosque Untertitel und Thema

Es gibt einige Online-Dienste um sitemap.xml zu erstellen. Sie können dies jedoch auch selbst auf Ihrem Computer tun, indem Sie den Lynx-Browser und verschiedene Dienstprogramme verwenden Befehlszeile Linux. Das Folgende ist ein Beispiel für ein Bash-Skript namens „sitemap.sh“, das sie verwendet. Bash-Skript, das die Datei sitemap.xml erstellt: #!/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" | sortieren | 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/