HTML Tabelle automatisch max. vergrößeren

Squicky · 20. September 2017

hallo

Ausgang ist eine HMTL Seite mit einer Tabelle:

Code:

<!doctype html>
<html lang="de">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Titel Test :-)</title>
	</head>
	
	<body>
	
		<table border>
			<tr>
				<th>Essen</th>
				<td>7</td>
			</tr>
			<tr>
				<th>Dortmund</th>
				<td>12</td>
			</tr>
			<tr>
				<th>Hilden</th>
				<td>1</td>
			</tr>
			<tr>
				<th>Hilden</th>
				<td>1</td>
			</tr>
			<tr>
				<th>Bonn</th>
				<td>12</td>
			</tr>
			<tr>
				<th>Berlin</th>
				<td>14</td>
			</tr>
			<tr>
				<th>München</th>
				<td>12</td>
			</tr>
		</table>
	
	</body>
	
</html>

Je nach Fenstergröße des Browsers (z.B. Edge) sieht es so aus:

Wenn man nun im Browser ist und gleichzeitig die zwei Tastaturtasten " Strg " und " + " drückt, dann wird der Seiteninhalt (und somit die Tabelle) vergrößert (gezoomt).

Nun soll diese Seite bzw. die Tabelle immer max. vergrößert werden, ohne dass der User " Strg " und " + " drücken muss.
Die Tabelle und ihr Inhalt (Text, Städtenamen, Zahlen) sollen max. vergrößert werden. Aber nicht zu groß, so dass der User nicht scrollen muss.

Ist dieses automaische Vergrößern bzw. Zoomen der Tabelle und des Tabelleninhaltes (Text, Schriftgröße) möglich?
Wenn ja, was ist die einfachste Möglichkeit?

Danke für eure Hilfe.

Je_Tho · 20. September 2017

Hallo Squicky!

Versuchs mal mit CSS. ;-)
Weitere Info hier:

https://www.mediaevent.de/xhtml/table-HTML-Tabelle.html
https://www.mediaevent.de/css/table.html

Viele Grüße

Je_Tho

paccoderpster · 20. September 2017

Rein mit CSS geht sowas nicht. Wenn ich dich richtig verstehe, willst du immer die gesamte Fläche nutzen. Dafür wirst du JavaScript brauchen. Es gibt in css die "transform" eigenschaft. Du könntest dann berechnen, wie stark gezoomt werden muss und der Tabelle dann die Eigenschaft geben.

Je_Tho · 20. September 2017

Man benötigt nicht zwingend JavaScript, es funktioniert auch mit CSS.
Dann allerdings nicht mit flüssigem Übergang, sondern nur Stufenweise.

Man musste dementsprechend die Größe (und die Größe des Inhalts) der Tabelle mehrmals anhand der Max-Width definieren.

Squicky · 21. September 2017

Hört sich an, als ob es keine Lösung oder keine einfache Lösung gibt.

Habt ihr ein Codeschnipsel für mich, um mir den Einstieg zu erleichtern?

Danke

Webentwickler · 21. September 2017

Willst du wirklich diesen Zoomeffekt haben oder ist das nur eine Umschreibung dafür, dass die Tabelle 100% der möglichen Breite einnehmen soll? Das wäre nämlich ziemlich einfach gelöst.

Squicky · 21. September 2017

Webentwickler schrieb:
Willst du wirklich diesen Zoomeffekt haben oder ist das nur eine Umschreibung dafür, dass die Tabelle 100% der möglichen Breite einnehmen soll? Das wäre nämlich ziemlich einfach gelöst.

Hallo Webentwickler

du hast recht!

Der Beschriebe Zoomeffekt (vergleiche meine vier Bilder) soll nur eine Umschreibung sein.
Ziel ist, dass der Webseiteninhalt (z.B. Tabelle und Tabelleninhalt) auf dem ganzen Browserfenster dargestellt wird.
Es soll die max. mögliche Browseransichtsfläche zu Darstellung benutzt werden.
So dass der Webseiteninhalt max. groß ist, aber ein scrollen (vertikal/horizontal) nicht vorhanden ist.

Ob für dieses Ziel die Browser-intene "Zoom-Funktion" (Strg & +) automatisch eingestellt wird oder eine andere CSS oder HTML Möglichkeit benutzt wird, ist egal.

Da ich html, css und javascript (noch) nur aus der Theorie kenne ( und keine echte praktische Erfahrung habe ) , suche ich eine möglichst einfache Lösung. (kein javascript mit 1000 Zeilen code

)

Danke

Webentwickler · 21. September 2017

Die einfachste Lösung wäre es, Grundlagen zu lernen und diese dann einfach auszuprobieren

.

Auf https://www.w3schools.com/ findet sich bspw. alles zu vielen Webtechnologien wie SQL, PHP, JavaScript, HTML, CSS, etc., alles sehr prägnant erklärt und mit vielen Beispielen versehen.

Squicky · 21. September 2017

...

The Ripper · 21. September 2017

https://www.w3schools.com/ zeigt dir alles, was du im Bezug auf HTML, CSS und JS wissen musst und stellt zusätzlich für alles ein Beispiel zur Verfügung, wo man erklärtes gleich praktisch ausprobieren kann.

Mit den Fähigkeiten, die du dadurch erlangst, kannst du dann entsprechendes einfach bauen.

Squicky · 22. September 2017

The Ripper schrieb:
https://www.w3schools.com/ zeigt dir alles, was du im Bezug auf HTML, CSS und JS wissen musst und stellt zusätzlich für alles ein Beispiel zur Verfügung, wo man erklärtes gleich praktisch ausprobieren kann.

Mit den Fähigkeiten, die du dadurch erlangst, kannst du dann entsprechendes einfach bauen.

Ich hatte halt die Hoffnung, dass ich mir das tagelange Einarbeiten in HTML, CSS und JScript ersparen kann.

Ich hatte halt die Hoffnung, dass ein erfahrener Webentwickler mir den gesuchten Befehl / die gesuchte Code-Zeile einfach mitteilt

xanjin · 22. September 2017

Kleiner Tipp - such nach Tags/attribute für deine Tags für HTML bzw. prinzipiell nur was zum Styling vom HTML - du brauchst wenn du wirklich nur die Weite und die Höhe erweitern möchtest kein CSS und kein JS, bisschen Englisch würde auch schon helfen

.
Dadurch hilfst du dir selbst am meisten.

Squicky · 22. September 2017

xanjin schrieb:
Kleiner Tipp - such nach Tags/attribute für deine Tags für HTML bzw. prinzipiell nur was zum Styling vom HTML - du brauchst wenn du wirklich nur die Weite und die Höhe erweitern möchtest kein CSS und kein JS, bisschen Englisch würde auch schon helfen .
Dadurch hilfst du dir selbst am meisten.

Eine Änderung von

Code:

<table border>

auf

Code:

<table border width="100%">

ist nicht Lösung.
Denn damit wird nur (die Breite) des Tabellen-Rahmens an die Fenstergröße maximiert.
Aber der Inhalt der Tabelle (z.B. Text, Textgröße) wird nicht angepasst.

Denn die Seite sieht dann so aus:

Sie soll aber so aussehen:

xanjin · 22. September 2017

Also doch den Zoom? Und diesen dann responsive je nachdem mit welchem Endgerät zugegriffen wird? sprich ob 24" oder 22" oder wie, wenn das der Fall ist, wirst um Javascript nicht umher kommen damit es flüssig aussieht.

Du hast leider oben auf die Frage von Webentwickler welcher "so oder so" fragte mit "ja genau so" geantwortet das habe ich dann also falsch intepretiert sry.

Wenn du es nur größer darstellen lassen möchtest sprich die Schriftgröße ändern magst und es nur die Anzahl an Werten bleibt kannst du dich mit font size z.b. spielen.

Squicky · 22. September 2017

Diese Webseite mit der Tabelle soll auf 16:9 TFTs mit 27 Zoll und 4K Auflösung, auf 4:3 TFTs mit 17 Zoll und 1027x768 Pixel und auf Smartphones (840x400 bis 1920x1080 Pixel) angezeigt werden.

Dabei soll der Webseiteninhalt (also die Tabelle und der Tabelleninhalt (Text, Textgröße)) automatisch maximal vergrößert werden.
Jedoch soll es auch nicht zu groß sein: Ein horizontales Scrollen oder neue Textumbrüche (z.B. in den Tabellenzellen) sollen nicht entstehen.

Ich möchte den User nicht nötigen jedes mal die "Zoom-Funktion" des Browsers zu benutzen, damit er die ganze Displaybreite zum Tabellenbetrachten nutzen kann.

ayngush · 22. September 2017

Da werden dir dann aber alle Ultra Wide Monitor-Besitzer schon mal "vielen, lieben Dank" für gar nichts sagen

Es gibt da so ein paar etablierte Regeln im Web. Eine lautet: Lass die Finger von den Einstellungen der Endbenutzer.

Wer deinen Inhalt nicht lesen kann, kann ja selber zoomen. Warum sollte das deine Seite übernehmen? Die sollte nur in das Lage sein vernünftig gezoomt zu werden, ohne, dass sie am Ende scheiße aussieht. Und genau dafür gibt es die Möglichkeit responsives Webdesign zu verwenden.

Webentwickler · 22. September 2017

Das ist doch banales CSS, was hier gesucht wird.

Container mit width: 100%, die von html / body durchrutscht und die table bekommt ebenfalls width: 100%.

Overflow-x: auto dabei für den responsiven Umbruch, ggf. eine min-width für die table oder einzelne ths, damit man auch auf kleinen Geräten noch genug Platz hat.

Den Rest wie Aussehen, Schriftgrößen, etc. kann man ebenfalls ganz sauber mit CSS (media queries) abhängig von der Höhe und der Breite des Endgerätes stylen, ohne dafür mit JavaScript herumzukaspern oder gar irgendetwas an den Browsereinstellungen des Users herumzudoktern.

mambokurt · 23. September 2017

Webentwickler schrieb:
Den Rest wie Aussehen, Schriftgrößen, etc. kann man ebenfalls ganz sauber mit CSS (media queries) abhängig von der Höhe und der Breite des Endgerätes stylen, ohne dafür mit JavaScript herumzukaspern oder gar irgendetwas an den Browsereinstellungen des Users herumzudoktern.

Wie soll das denn aussehen, nur mal interessehalber? Also wie kriegst dus hin dass die Schrift mit der Tabellenbreite skaliert, ohne dass das irgendwann lustige Seiteneffekte hat, wie auf einmal umbrechende Schrift? Schriftgrößen lassen sich doch gar nicht prozentual angeben, oder?

In Javascript wüsste ich ad hoc wie ich es mache, aber mit reinem Css käme ich da jetzt echt ins Schwimmen O.o

The Ripper · 23. September 2017

fontsize=5vw -> könnte eventuell hinhauen (Da die Größe dann proportional zur Breite=Tabellengröße ist)

mambokurt · 24. September 2017

The Ripper schrieb:
fontsize=5vw -> könnte eventuell hinhauen (Da die Größe dann proportional zur Breite=Tabellengröße ist)

Stimmt, wenn man die Tabelle suf X vw setzt und die Schrift auf x/100 vw müsste das eigentlich klappen. Schöne neue css Welt 😎

HTML Tabelle automatisch max. vergrößeren

Lt. Commander

Lt. Junior Grade

Lieutenant

Lt. Junior Grade

Lt. Commander

Ensign

Lt. Commander

Ensign

Lt. Commander

Lt. Commander

Lt. Commander

Ensign

Lt. Commander

Ensign

Lt. Commander

Lt. Commander

Ensign

mambokurt

Gast

Lt. Commander

mambokurt

Gast

Ähnliche Themen