Zweispaltige Tabelle erstellen

[Chris2018]

Hallo Zusammen,

ich benötige eine HTML Tabelle die innerhalb einer App auf verschiedenen Geräten angezeigt werden soll:

• 2 Spalten
• 7 Zeilen
• 1 Überschriftenzeile über beide Spalten

Bisher habe ich folgenden Code aufgebaut:

<table border="1" cellspacing="0" cellpadding="5"> <tr>
<th colspan="2">
Attribute
</th>
</tr>
<tr>
<td>
Status
</td>
<td width="100%">
<img src="URL";; width=200>
</td>
</tr>
<tr>
<td nowrap="true">
Bezeichnung
</td>
<td>
Löschwasserdrainage
</td>
</tr>
<tr>
<td nowrap="true">
Bemerkung
</td>
<td>
mit Tiefenpumpe
</td>
</tr>
<tr>
<td nowrap="true">
Volumen / Leistung
</td>
<td>
1100 Liter/min
</td>
</tr>
<tr>
<td nowrap="true">
Foto
</td>
<td>
<a href="URL"><img src ="URL"; width="100%"></a><br><br>
</td>
</tr>
<tr>
<td nowrap="true">
Daten aktualisieren
</td>
<td>
<a href="Daten">URL">Daten aktualisieren</a>
</td>
</tr>
<tr>
<td nowrap="true">
Fehler melden
</td>
<td>
<a href="mailto:MAIL?cc=&subject=Fehlermeldung%20Maps&Body=TEXT">Fehlermeldung</a>
</td>
</tr>
</table>

Den Inhalt der Tabelle habe ich etwas zensiert. Mein Wunsch ist folgender: Die erste Spalte soll ohne Zeilenumbruch angezeigt werden. Da das "nowrap="true" im <td>. Das funktioniert unter Android problemlos, bei iOS gibt es da Probleme. Die rechte Spalte soll einfach auf die gesamte Bildschirmbreite ausgedehnt werden. Die eingefügten Bilder sollen sich proportional passend skalieren.

Der CSS Code muss zwingend in den HTML Code "eingebaut" sein. Also auslagern in extra Datei geht nicht.

[Rolf B]

Hallo Chris2018,

erstens: nowrap war ein Attribut ohne Wert, d.h. entweder <td nowrap> oder für XHTML <td nowrap="nowrap">.

zweitens: nowrap gibt's in HTML 5 nicht mehr, verwende CSS: <td style="white-space:nowrap">

drittens: Die Semikolons in den img Elementen gehören nicht dahin. Das mag an deiner „Zensierung“ liegen...

Rolf

[Gunnar Bittersmann]

@@Rolf B

erstens: nowrap war ein Attribut ohne Wert, d.h. entweder <td nowrap> oder für XHTML <td nowrap="nowrap">.

Oder <td nowrap="">. [Spec]

zweitens: nowrap gibt's in HTML 5 nicht mehr, verwende CSS: <td style="white-space:nowrap">

Aber hier nicht in style-Attributen.

LLAP 🖖

[Gunnar Bittersmann]

@@Chris2018

• 1 Überschriftenzeile über beide Spalten

Eine Tabellenüberschrift ist nicht <tr><th colspan="2">Attribute</th></tr>, sondern: <caption>Attribute</caption>

Die Zeilenköpfe (die linken Zellen) sind keine Datenzellen, also nicht <td>, sondern <th>

Der CSS Code muss zwingend in den HTML Code "eingebaut" sein. Also auslagern in extra Datei geht nicht.

Was dich nicht davon Abhalten sollte, zum Stylen CSS einzusetzen; nicht darstellungsbezogene, missbilligte HTML-Attribute.

Das Stylesheet für diese Tabelle bindest du an Ort und Stelle ins HTML ein:

<style>
	#my-table { … }
</style>
<table id="my-table">
	<caption>Attribute</caption>
	<tbody>
		⋮
	</tbody>
</table>

Die erste Spalte soll ohne Zeilenumbruch angezeigt werden.

Das solltest du dir für schmale Bildschirme nochmal durchdenken. Der Zeilenumbruch kann ja erst ab einer Mindestbreite verhindert werden.

Ich hab das mal so gemacht.

<img src="URL";; width=200>

Hier fehlt das zwingend notwendige alt-Attribut. Die Statusmeldung soll ja auch erscheinen, wenn das Bild aus irgendeinem Grund nicht geladen wird. Und die Statusmeldung soll auch Nutzern zugänglich sein, die keine Bilder sehen können oder wollen.

Bei dem Foto muss evtl. kein Alternativtext zur Verfügung gestellt werden, wenn da keine weiteren nicht-visuellen Informationen dran hängen. Dennoch auch dort mit Attribut alt="" (sonst lesen Screenreader den Dateinamen vor).

<a href="mailto:MAIL?cc=&subject=Fehlermeldung%20Maps&Body=TEXT">Fehlermeldung</a>

Das & ist in HTML ein Sonderzeichen und sollte deshalb als & escapet werden: <a href="mailto:MAIL?cc=&subject=Fehlermeldung%20Maps&amp;Body=TEXT">Fehlermeldung</a>

LLAP 🖖

[Chris2018]

Hallo,

ich habe diesen Code mal getestet: https://codepen.io/gunnarbittersmann/pen/JejJmQ

In der Android App läuft es wunderbar und sieht super aus. Unter iOS wird die komplette erste Spalte nur sehr schmal dargestellt, sodass max. 3 Buchstaben nebeneinander angezeigt werden. Das Bild ragt auch über die Tabelle hinaus.

Woran kann das liegen? Ich vermute, dass der CSS Code nicht durchgängig verarbeitet wird. Evtl. hat ja jemand die Möglichkeit sich das selber mal direkt in der App "maps.me" unter iOS anzusehen?

Könnte man eine solche Tabelle (wenn auch nicht mit der Anpassbarkeit) nur in HTML schreiben? Mal zum Test ob es wirklich an den nicht verarbeitetem CSS liegt. Das Bild welches angezeigt wird, hat immer dieselbe Breite. Der Text der Linken Spalte bleibt immer gleich (auch die Schriftgröße, sodass sich die Gesamtbreite gut bestimmen lässt. Der Text der rechten Spalte soll dann passend mit Zeilenumbrüchen versehen werden.

[Rolf B]

Hallo Gunnar,

ich weiß, dass <style> im <body> im Gespräch war, insbesondere für scoped styles, aber ich weiß auch, dass die Scopes wieder entfallen sind.

<style> im <body> wird von den Browsern verstanden. Aber ist es spec-konform?

In der Spec finde ich nur, dass <style> metadata content ist und dass metadata content im <head> Element enthalten sein darf. Deswegen hatte ich style-Attribute gesetzt.

Dass metadata content, also z.B. ein <style> Element, im <body> Element erlaubt ist, finde ich nicht. Es gibt zwar eine Schnittmenge zwischen flow und metadata content, aber eine Defininition, woraus diese Schnittmenge besteht, finde ich nicht. Am <style> Element steht jedenfalls nicht, dass es metadata UND flow content wäre.

Rolf

[Orlok]

Hallo Rolf

<style> im <body> wird von den Browsern verstanden. Aber ist es spec-konform?

HTML 5.2 (The style Element):

„Contexts in which this element can be used:

Where metadata content is expected.
In a noscript element that is a child of a head element.
In the body, where flow content is expected.“

Ich würde sagen, es ist.

Viele Grüße,

Orlok

[Rolf B]

Hallo Orlok,

danke. In der 5.0 und 5.1 Spec ist es nicht drin.

Im MDN war die HTML 5.0 Spec des W3C sowie das Living Standard Dokument von WhatWG verlinkt. Im Living Standard hätte ich es erwartet.

Rolf

[Gunnar Bittersmann]

@@Rolf B

In der 5.0 und 5.1 Spec ist es nicht drin.

Die haben dieselbe Relevanz wie die 4.01.

Living Standard Dokument von WhatWG

Über die Relevanz der WHATWG-Spec mag man geteilter Meinung sein.

LLAP 🖖

[beatovich]

hallo

Hallo Rolf

<style> im <body> wird von den Browsern verstanden. Aber ist es spec-konform?

HTML 5.2 (The style Element):

„Contexts in which this element can be used:

Where metadata content is expected.
In a noscript element that is a child of a head element.
In the body, where flow content is expected.“

Ich würde sagen, es ist.

Wenn nun noch das Content Modell von pre angepasst würde, wäre folgendes legal

<pre><style contenteditable>
/*experimental CSS */
</style></pre>

[Gunnar Bittersmann]

@@Orlok

Ich würde sagen, es ist.

Ist es.

Zuerst hatte ich das style-Element sogar innerhalb des table-Elements notiert. Dann hätte man die Zuordnung, dass diese Stile nur für die Tabelle sind, im Markup verdeutlicht.

Aber nein, style ist kein script-supporting element. Wieso eigentlich nicht?

LLAP 🖖

[Chris2018]

Okay Okay. Komme nicht mehr hinterher 😂 Gibt es eine Möglichkeit weiterzukommen? Kann man testen inwiefern der HTML / CSS Code von der iOS App gelesen wird? Irgendwo da scheint es ja zu klemmen.

[Chris2018]

Entschuldigt den Doppelpost.

Ich habe nun noch ein wenig herumprobiert. Wenn ich diesen Code auf dem Smartphone in der App aufrufe ist alles wunderbar:

https://codepen.io/gunnarbittersmann/pen/JejJmQ

Rufe ich in auf einem iOS Gerät auf verschieben sich die Spalten. Dann habe ich folgenden Wert mal angepasst:

	#my-table td,
	#my-table img
	{
		width: 50%;
	}

Vorher war width auf 100%. Nun werden die Spalten schon deutlich besser angezeigt. Linke Spalte ohne Zeilenumbruch. Jedoch sorgt nun das 320x180 Bild dafür, dass die Tabelle nach rechts über den verfügbaren Platz hinaus ragt. Zudem ist es so, dass wenn ich auf dem Smartphone den Width Wert auf 50% Stelle das Bild deutlich zu klein ist. Liegt daran, dass der zur Verfügung stehende Platz auf den Geräten unterschiedlich ist.

Desweiteren fällt auf, dass wenn ich auch den Width Wert vom Status heruntersetze sich die linke Spalte ausbreitet und unnötig Platz einnimmt. Das sollte eigtl. vermieden werden und die Spalte soll nur den nötigsten Platz einnehmen.

Lässt sich das beheben?

[Chris2018]

So, ich konnte nun denke ich die Ursache eingrenzen. Jedoch noch nicht beheben. Ich habe nun folgenden Code im Einsatz:

https://codepen.io/chhe/pen/YRPKRJ

In Zeile 23 habe ich ein "min-width: 250px" hinzugefügt. Damit zwinge ich unter iOS, dass die Spaltenbreite breit genug ist, das Zeilenumbrüche enstehen und immer nur 3 Buchstaben nebeneinander stehen.

Unter Android benötige ich dieses "min-width" nicht. Da greifen Zeile 26-29. "white-space: nowrap" scheint unter iOS nicht erkannt zu werden.

Gibt es Alternativen die Zeilenumbrüche zu vermeiden? Wenn wenigstens noch ganze Wörter untereinander stehen würden wäre es ja noch in Ordnung. Aber wenn nur 2-3 Buchstaben nebeneinander erschein ist es halt schon sehr blöd.

[Gunnar Bittersmann]

@@Chris2018

In Zeile 23 habe ich ein "min-width: 250px" hinzugefügt.

Keine gute Idee. Damit muss man bei schmalen Viewports als etwa 540px horizontal scrollen, obwohl eigentlich genug Platz da ist, die Spalteninhalte nebeneinander im Viewport(!) zu plazieren.

Überhaupt ist px im Stylesheet keine gute Idee. Verwende relative Einheiten: em, rem, %, vw, vh, …

Damit zwinge ich unter iOS, dass die Spaltenbreite breit genug ist, das Zeilenumbrüche enstehen und immer nur 3 Buchstaben nebeneinander stehen.

??

Ich kann dein Problem mit iOS nicht nachvollziehen. Kannst du mal deine Seite zeigen (nicht CodePen)?

LLAP 🖖

[Chris2018]

Ich veröffentliche den Code auf keiner Internetseite.

Grob skizziert geht es um folgendes:

• Es gibt eine Offline Kartenapp die maps.me heißt
• hier kann man eigene Lesezeichenlisten erstellen (Marker auf der Karte)
• hinter jedem Marker kann man eine Beschreibung hängen die auch aus HTML bestehen darf
• genau hier kommt der HTML / CSS Code zum Einsatz

[beatovich]

hallo

Ich veröffentliche den Code auf keiner Internetseite.

Grob skizziert geht es um folgendes:

• Es gibt eine Offline Kartenapp die maps.me heißt
• hier kann man eigene Lesezeichenlisten erstellen (Marker auf der Karte)
• hinter jedem Marker kann man eine Beschreibung hängen die auch aus HTML bestehen darf
• genau hier kommt der HTML / CSS Code zum Einsatz

Poste mal das Teil-Dom, das diese App um deinen Marker benutzt.

Es interessiert mich, ob die App einen iframe mit sandbox Attribut benutzt.

Falls nicht, wird wohl der User-Input stark gefiltert.

[Chris2018]

Was ist denn ein Teil-Dom?

[beatovich]

hallo

Was ist denn ein Teil-Dom?

Du kannst in der Browser-Konsole das DOM eines Dokuments betrachten. Man spricht von einem DOM-Tree, und insofern man einen Knoten (ein Element) darin wählt, von einem Subtree. Das meine ich.

[Chris2018]

Die Tabelle soll innerhalb einer App angezeigt werden. Das kann ich mit einem Browser nicht auslesen.

[beatovich]

hallo

Mit Verlaub, das ist doch Inhalt für eine dl Liste.

[Gunnar Bittersmann]

@@beatovich

Mit Verlaub, das ist doch Inhalt für eine dl Liste.

Ja, auch gut.

Und ganz einfach zu stylen:

dl
{
	display: grid;
	grid-template-columns: auto 1fr;
}

– fertig!

Na fast. Kommen noch die Rahmen dazu. Das Ganze in einen @supports (display: grid)-Block gepackt, damit beim Fallback (z.B. im IE) keine Rahmen erscheinen.

☞ Sieht dann so aus.

Zusätze:

• Mit dt { grid-column: 1 } und dd { grid-column: 2 } erhält man die (Zu)ordnung, auch wenn nicht auf jedes dt genau ein dd folgt und umgekehrt.
• Mit dl > div { display: contents } geht das mit dem Grid auch, wenn zusammengehörige dt/dd in divs gruppiert sind. (display: contents ist in Chrome und Safari noch fehlerhaft implementiert, sodass das u.U. negative Auswirkungen auf die Barrierefreiheit hat.)

LLAP 🖖

[Chris2018]

Ich muss den CSS Code mit vor den HTML Code setzen. Habe daher den gesamten CSS Code in <style></style> gesetzt. Jedoch wurde er dann nicht erkannt. Was mache ich falsch?

Dann könnte ich mal testen ob das besser funktioniert.