Tabellengenerator von Werner Zenk
Tabellengenerator von Werner Zenk
Hallo,
ich habe mir mit dem Tabellengenerator von Werner Zenk eine Tabelle erstellt und in einen einfachen Article Block mit Überschrift und Text von Mobirise 4 eingefügt.
Bei dem Versuch den HTML Code anstatt Text einzufügen oder bearbeiten, hat es mir die komplette Seite zerschossen !
So habe ich den Text gelassen (den ich ausblenden kann) und die Tabelle im unteren Bereich des HTML-Editors eingefügt.
So kann ich aber leider keinen Text in die Tabelle einfügen, sondern muss das über den Editor machen.
Meine Frage ist, ob und evtl. wie ich das anders machen kann.
Meine weitere Frage ist, wie ich das "Handygerecht" hinkriege.
https://www.meinlangengrassau.de/Notrufe.html
Als Alternative habe ich mal eine Tabelle von "Witsec" (ja, ich weiß ) auf der gleichen Seite weiter unten dargestellt. Ob da was geht !?
ich habe mir mit dem Tabellengenerator von Werner Zenk eine Tabelle erstellt und in einen einfachen Article Block mit Überschrift und Text von Mobirise 4 eingefügt.
Bei dem Versuch den HTML Code anstatt Text einzufügen oder bearbeiten, hat es mir die komplette Seite zerschossen !
So habe ich den Text gelassen (den ich ausblenden kann) und die Tabelle im unteren Bereich des HTML-Editors eingefügt.
So kann ich aber leider keinen Text in die Tabelle einfügen, sondern muss das über den Editor machen.
Meine Frage ist, ob und evtl. wie ich das anders machen kann.
Meine weitere Frage ist, wie ich das "Handygerecht" hinkriege.
https://www.meinlangengrassau.de/Notrufe.html
Als Alternative habe ich mal eine Tabelle von "Witsec" (ja, ich weiß ) auf der gleichen Seite weiter unten dargestellt. Ob da was geht !?
Gruss
Reinhard
Reinhard
- Tommy Herrmann
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tabellengenerator von Werner Zenk
Moin,
die Beispiele auf Deiner Seite sind doch beide OK, was ist da Deiner Meinung nach nicht in Ordnung
... wobei die Tabelle von "Witsec" am Handy einen kleinen CSS-Fehler hat. Sie zeigt die Border nicht vollständig an.
Warum verwendest Du keine Tabelle von Mobirise?
https://www.mobirise-tutorials.com/Tabellen/
Gucke Dir auch mal meine Tutorials zu händisch erstellten "Bootstrap" Tabellen an, die ich auch sortierbar gemacht habe. Meine Tabellen kann man am Handy auch waagerecht scrollen, sodass es keine unschöne Umbrüche gibt und daher auch die Anzahl der Spalten keine Rolle spielt:
https://www.mobirise-tutorials.com/Tuto ... belle.html
... oder auch hier eine scrollbare (größere) Tabelle:
https://www.mobirise-tutorials.com/Tuto ... -Tutorials
Zu den Erweiterungen von "Witsec" kann ich nichts sagen, da ich diese nie installiert habe und auch nie installieren werde. Ich halte alle diese Drittanbieter-Anwendungen, die man direkt über Mobirise einlesen kann, für rechtlich sehr fragwürdig und bin mir nicht sicher ob es da irgendwann Copyright-Klagen hageln wird. Bei einer Verwendung verliert man auch das Recht auf Support von Mobirise.
Im Moment werden diese Drittanbieter-Erweiterungen von Mobirise lediglich
Ich werde diese jedenfalls nicht verwenden.
die Beispiele auf Deiner Seite sind doch beide OK, was ist da Deiner Meinung nach nicht in Ordnung
... wobei die Tabelle von "Witsec" am Handy einen kleinen CSS-Fehler hat. Sie zeigt die Border nicht vollständig an.
Warum verwendest Du keine Tabelle von Mobirise?
https://www.mobirise-tutorials.com/Tabellen/
Gucke Dir auch mal meine Tutorials zu händisch erstellten "Bootstrap" Tabellen an, die ich auch sortierbar gemacht habe. Meine Tabellen kann man am Handy auch waagerecht scrollen, sodass es keine unschöne Umbrüche gibt und daher auch die Anzahl der Spalten keine Rolle spielt:
https://www.mobirise-tutorials.com/Tuto ... belle.html
... oder auch hier eine scrollbare (größere) Tabelle:
https://www.mobirise-tutorials.com/Tuto ... -Tutorials
Zu den Erweiterungen von "Witsec" kann ich nichts sagen, da ich diese nie installiert habe und auch nie installieren werde. Ich halte alle diese Drittanbieter-Anwendungen, die man direkt über Mobirise einlesen kann, für rechtlich sehr fragwürdig und bin mir nicht sicher ob es da irgendwann Copyright-Klagen hageln wird. Bei einer Verwendung verliert man auch das Recht auf Support von Mobirise.
Im Moment werden diese Drittanbieter-Erweiterungen von Mobirise lediglich
toleriertund das reicht mir nicht aus.
Ich werde diese jedenfalls nicht verwenden.
Re: Tabellengenerator von Werner Zenk
Die Tabelle von Witsec lasse ich mal weg !
Mir würde es schon reichen, wenn ich bei Werners Tabelle den Text in der Arbeitsansicht verändern könnte (Farbe, Größe, Fett).
Mir würde es schon reichen, wenn ich bei Werners Tabelle den Text in der Arbeitsansicht verändern könnte (Farbe, Größe, Fett).
Gruss
Reinhard
Reinhard
- Tommy Herrmann
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tabellengenerator von Werner Zenk
na da kannst Du doch wieder mit den Browser-Werkzeugen gucken.
Oder poste mal die ganze CSS, die Du da vom Werner rein kopiert hast. Mit dieser änderst Du Textgröße, Farben usw. Diese CSS hast Du doch (wie immer) in den "CSS Editor" des Blocks kopiert.
Ich sehe da auf Anhieb das hier:
Was genau willst Du denn wie haben, bzw. anpassen?
Zunächst muss mal auch die Tabelle vom "Witsec" da raus - Du hast sonst noch ganz viele andere "table" Klassen und da blickt man dann nur schwer durch.
Oder poste mal die ganze CSS, die Du da vom Werner rein kopiert hast. Mit dieser änderst Du Textgröße, Farben usw. Diese CSS hast Du doch (wie immer) in den "CSS Editor" des Blocks kopiert.
Ich sehe da auf Anhieb das hier:
Code: Alles auswählen
table#table tr th {
background-color: #0E1C3D;
}
table#table tr th,
table#table tr td {
padding: 10px;
}
table#table tr td {
text-align: left;
}
table#table tr:nth-child(even) {
background-color: #878743;
}
table#table tr:nth-child(odd) {
background-color: #645f0b;
}
Was genau willst Du denn wie haben, bzw. anpassen?
Zunächst muss mal auch die Tabelle vom "Witsec" da raus - Du hast sonst noch ganz viele andere "table" Klassen und da blickt man dann nur schwer durch.
- Tommy Herrmann
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tabellengenerator von Werner Zenk
Um das in der Arbeitsansicht von Mobirise editierbar zu machen, musst Du an alle diese Tags wie <th> oder <td>, wo Du was rein schreibst, das Mobirise Attribut mbr-text hinzufügen. Das macht es dann in der Arbeitsansicht editierbar. Deswegen hatte ich Dir u.a. den Link zu meinem Tutorial geschrieben, denn das steht genau dort auch beschrieben.
Beispiel - also dann ungefähr so:
Mit dieser class="table-responsive" außen, um die Tabelle herum, in einem <div>, könntest Du die gesamte Tabelle responsive am Handy machen, sodass man sie mit dem Finger auch waagerecht scrollen kann. So könnte die Tabelle dann auch beliebig mehr (als nur zwei) Spalten haben ohne das irgendetwas unschön in die nächste Zeile umbrechen muss.
Beispiel - also dann ungefähr so:
Code: Alles auswählen
<table id="table">
<tbody>
<tr>
<td mbr-text>Name</td>
<td mbr-text>Telefon</td>
</tr>
<tr>
<td mbr-text>Polizeinotruf</td>
<td mbr-text>110</td>
</tr>
<tr>
<td mbr-text>Feuerwehr</td>
<td mbr-text>112</td>
</tr>
<tr>
<td mbr-text>Ärztlicher Bereitschaftsdienst</td>
<td mbr-text>116 117</td>
</tr>
<tr>
<td mbr-text>Krankenkaus Luckau</td>
<td mbr-text>03544 580</td>
</tr>
</tbody>
</table>
Mit dieser class="table-responsive" außen, um die Tabelle herum, in einem <div>, könntest Du die gesamte Tabelle responsive am Handy machen, sodass man sie mit dem Finger auch waagerecht scrollen kann. So könnte die Tabelle dann auch beliebig mehr (als nur zwei) Spalten haben ohne das irgendetwas unschön in die nächste Zeile umbrechen muss.
Code: Alles auswählen
<div class="table-responsive">
<table id="table">
<tbody>
<tr>
<td mbr-text>Name</td>
<td mbr-text>Telefon</td>
</tr>
<tr>
<td mbr-text>Polizeinotruf</td>
<td mbr-text>110</td>
</tr>
<tr>
<td mbr-text>Feuerwehr</td>
<td mbr-text>112</td>
</tr>
<tr>
<td mbr-text>Ärztlicher Bereitschaftsdienst</td>
<td mbr-text>116 117</td>
</tr>
<tr>
<td mbr-text>Krankenkaus Luckau</td>
<td mbr-text>03544 580</td>
</tr>
</tbody>
</table>
</div>
- Tommy Herrmann
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tabellengenerator von Werner Zenk
Gucke Dir möglichst auch mal den Aufbau einer Tabelle in "Bootstrap" an:
Bootstrap 4:
https://getbootstrap.com/docs/4.0/content/tables/
Bootstrap 5:
https://getbootstrap.com/docs/5.0/content/tables/
Bootstrap 4:
https://getbootstrap.com/docs/4.0/content/tables/
Bootstrap 5:
https://getbootstrap.com/docs/5.0/content/tables/
Re: Tabellengenerator von Werner Zenk
Hallo Tommy,
Witsec ist gelöscht.
Mobirise Attribut mbr-text ist hinzugefügt.
Die class="table-responsive" ist in einem <div> außen um die Tabelle herum eingefügt.
Nun kann ich zwar den Text bearbeiten, aber die Textgröße läßt sich leider nicht ändern !?
Folgenden Code habe ich derzeit:
HTML
CSS
Witsec ist gelöscht.
Mobirise Attribut mbr-text ist hinzugefügt.
Die class="table-responsive" ist in einem <div> außen um die Tabelle herum eingefügt.
Nun kann ich zwar den Text bearbeiten, aber die Textgröße läßt sich leider nicht ändern !?
Folgenden Code habe ich derzeit:
HTML
Code: Alles auswählen
<div class="table-responsive">
<table id="table">
<tbody>
<tr>
<td mbr-text>Name</td>
<td mbr-text>Telefon</td>
</tr>
<tr>
<td mbr-text>Polizeinotruf</td>
<td mbr-text>110</td>
</tr>
<tr>
<td mbr-text>Feuerwehr</td>
<td mbr-text>112</td>
</tr>
<tr>
<td mbr-text>Ärztlicher Bereitschaftsdienst</td>
<td mbr-text>116 117</td>
</tr>
<tr>
<td mbr-text>Krankenkaus Luckau</td>
<td>03544 580</td>
</tr>
<tr>
<td mbr-text>Telefonseelsorge</td>
<td mbr-text>0800 111 0 111 / 0800 111 0 222</td>
</tr>
<tr>
<td mbr-text>TAZV</td>
<td mbr-text>0800 880 70 88</td>
</tr>
<tr>
<td mbr-text>Stadt- und Überlandwerke</td>
<td mbr-text>04544 502 699</td>
</tr>
<tr>
<td mbr-text>Taxi Habarth Luckau</td>
<td mbr-text>04544 50 80 90</td>
</tr>
<tr>
<td mbr-text>Taxi Pawelcyk Luckau</td>
<td mbr-text>03544 3093</td>
</tr>
</tbody>
</table>
</div>
Code: Alles auswählen
table#table {
margin: Auto;
background-color: #0F2D4E;
color: #FFFFFF;
}
table#table tr th {
background-color: #0E1C3D;
}
table#table tr th, table#table tr td {
padding: 10px;
}
table#table tr td {
text-align: left;
}
table#table tr:nth-child(even) {
background-color: #878743;
}
table#table tr:nth-child(odd) {
background-color: #645f0b;
}
H2 {
color: #ffffff;
}
TD {
color: #ffffff;
}
Gruss
Reinhard
Reinhard
Re: Tabellengenerator von Werner Zenk
Deine Links zu Bootstrap 4 und 5 habe ich mir angesehen, da gibt es ja noch viel mehr Möglichkeiten um so eine Tabelle zu gestalten. Dazu werde ich mich auf einer "Testseite" austesten. Danke, noch mal.
Gruss
Reinhard
Reinhard
- Tommy Herrmann
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tabellengenerator von Werner Zenk
ja - dann musst Du die Anweisung für die Textgröße hinzufügen, also z.B. 1.2rem
font-size: 1.2rem;
also dann so:
geht natürlich auch in Pixeln, z.B.:
font-size: 18px;
font-size: 1.2rem;
also dann so:
Code: Alles auswählen
table#table tr th, table#table tr td {
padding: 10px;
font-size: 1.2rem;
}
font-size: 18px;
- Tommy Herrmann
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tabellengenerator von Werner Zenk
... also Deine Tabelle ist am Handy noch nicht responsive.
Ich weiß gerade auch nicht auswendig warum
Vielleicht weil die class="table" noch fehlt. Schreibe die mal noch dazu.
Also anstelle von:
schreibst Du dann:
Ich weiß gerade auch nicht auswendig warum
Vielleicht weil die class="table" noch fehlt. Schreibe die mal noch dazu.
Also anstelle von:
Code: Alles auswählen
<table id="table">
Code: Alles auswählen
<table id="table" class="table">
- Tommy Herrmann
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tabellengenerator von Werner Zenk
ja - das sieht man jetzt nur nicht, weil Tabellen an Leerzeichen immer umbrechen.
Schreibe mal diese CSS noch in den Block mit der Tabelle in den Bereich "CSS Editor":
... dann geht das auch, bzw. dann sieht man das auch.
Schreibe mal diese CSS noch in den Block mit der Tabelle in den Bereich "CSS Editor":
Code: Alles auswählen
thead, tbody {
white-space: nowrap;
}
... dann geht das auch, bzw. dann sieht man das auch.
- Tommy Herrmann
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tabellengenerator von Werner Zenk
Nur zur Info:
die class="table" könntest Du auch wieder entfernen (die hatte damit nichts zu tun).
Diese Class ist von "Bootstrap" und beinhaltet alle möglichen Einstellungen, wie z.B. diese Trennlinie zwischen den Einträgen und auch einen größeren Abstand zwischen den Spalten.
Musst Du Dir ausprobieren, ob Du das mit oder ohne diese Class besser findest.
die class="table" könntest Du auch wieder entfernen (die hatte damit nichts zu tun).
Diese Class ist von "Bootstrap" und beinhaltet alle möglichen Einstellungen, wie z.B. diese Trennlinie zwischen den Einträgen und auch einen größeren Abstand zwischen den Spalten.
Musst Du Dir ausprobieren, ob Du das mit oder ohne diese Class besser findest.
- Tommy Herrmann
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tabellengenerator von Werner Zenk
Na bestens
Re: Tabellengenerator von Werner Zenk
Hey,
ich habe doch noch ein Anliegen, was die Darstellung auf dem Smartphone betrifft.
Die Möglichkeit quer zu scrollen, ist eine tolle Sache. Das ist für Tabellen mit vielen Spalten eine enorme Erleichterung für den Nutzer.
Nun besteht meine Tabelle lediglich aus zwei Spalten. Sie würde mit einer Anweisung sehr gut lesbar in das Handy-Display passen, zumal sie nicht mehr erweitert wird.
Ich möchte sie aber nicht von vornherein kleiner machen, auf dem PC soll die Größe so bleiben.
Gibt es da noch was ( trotz der bisherigen Bemühungen ) ?
ich habe doch noch ein Anliegen, was die Darstellung auf dem Smartphone betrifft.
Die Möglichkeit quer zu scrollen, ist eine tolle Sache. Das ist für Tabellen mit vielen Spalten eine enorme Erleichterung für den Nutzer.
Nun besteht meine Tabelle lediglich aus zwei Spalten. Sie würde mit einer Anweisung sehr gut lesbar in das Handy-Display passen, zumal sie nicht mehr erweitert wird.
Ich möchte sie aber nicht von vornherein kleiner machen, auf dem PC soll die Größe so bleiben.
Gibt es da noch was ( trotz der bisherigen Bemühungen ) ?
Gruss
Reinhard
Reinhard
- Tommy Herrmann
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tabellengenerator von Werner Zenk
na dann musst Du das <div> mit dem Overflow wieder entfernen:
... und auch die Unterbindung von Leerzeichen wieder entfernen, denn sonst passt das ja nicht auf den Bildschirm vom Handy:
... beides geht leider nicht. Du kannst eine Tabelle nicht breiter als das Display vom Handy machen und gleichzeitig alles darstellen wollen.
Du könntest Deine Tabelle auch etwas anders aufbauen und auf lange Adressen wie:
verzichten, bzw. ein Umbruch-Tag <br> (break) einbauen wie z.B.:
Dann steht es so - mit Umbruch - in der Tabelle:
Ärztlicher
Bereitschaftsdienst
... und/oder eben wieder am Handy eine etwas kleinere Schrift wählen - wie Du (wir) es doch gerade erst bei der Anwendung "Kommentar-Box" gemacht hattest, wie z.B. 1rem oder auch 0.8rem:
Wenn den Spalten einer Tabelle nicht mittels CSS eine bestimmte Breite zugewiesen wird, dann werden alle Spalten immer so breit sein, wie der breiteste Inhalt dieser Spalte. Das kannst Du doch super einfach bei den paar Einträgen gestalten.
Code: Alles auswählen
<div class="table-responsive">
Code: Alles auswählen
thead, tbody {
white-space: nowrap;
}
Du könntest Deine Tabelle auch etwas anders aufbauen und auf lange Adressen wie:
Code: Alles auswählen
Ärztlicher Bereitschaftsdienst
Code: Alles auswählen
Ärztlicher<br>Bereitschaftsdienst
Ärztlicher
Bereitschaftsdienst
... und/oder eben wieder am Handy eine etwas kleinere Schrift wählen - wie Du (wir) es doch gerade erst bei der Anwendung "Kommentar-Box" gemacht hattest, wie z.B. 1rem oder auch 0.8rem:
Code: Alles auswählen
@media (max-width: 991px) {
table#table tr th, table#table tr td {
font-size: 1rem;
}
}
Wenn den Spalten einer Tabelle nicht mittels CSS eine bestimmte Breite zugewiesen wird, dann werden alle Spalten immer so breit sein, wie der breiteste Inhalt dieser Spalte. Das kannst Du doch super einfach bei den paar Einträgen gestalten.
Re: Tabellengenerator von Werner Zenk
Dankeschön nochmal, alles berücksichtigt, jezt ist wirklich gut
(und sollte ich den Rappel bekommen, dass es vorher besser war, hab´ ich vorab eine Sicherung gemacht)
(und sollte ich den Rappel bekommen, dass es vorher besser war, hab´ ich vorab eine Sicherung gemacht)
Gruss
Reinhard
Reinhard
- Tommy Herrmann
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Tabellengenerator von Werner Zenk
... ja - habe gerade nochmals mit dem Handy geguckt.
So ist es doch OK!
Du kannst, wenn man Blöcke aufbewahren will - auch wenn man z.B. unsicher sein sollte ob man einen Fehler macht - diese als "User-Blocks" (Benutzer-Blöcke) speichern.
Das aber immer nur einzeln (einen nach dem anderen), sonst werden die bei Mobirise eventuell nicht korrekt gespeichert. Du kannst diesen dann auch noch eine verständlichen Namen geben, sodass man das auch noch nach Jahren weiß.
So kann man dann z.B. die Variante, die Du vorher hattest, zumindest für andere Einsatzzwecke, sichern um sie bei Bedarf wieder hervorzaubern.
So ist es doch OK!
Du kannst, wenn man Blöcke aufbewahren will - auch wenn man z.B. unsicher sein sollte ob man einen Fehler macht - diese als "User-Blocks" (Benutzer-Blöcke) speichern.
Das aber immer nur einzeln (einen nach dem anderen), sonst werden die bei Mobirise eventuell nicht korrekt gespeichert. Du kannst diesen dann auch noch eine verständlichen Namen geben, sodass man das auch noch nach Jahren weiß.
So kann man dann z.B. die Variante, die Du vorher hattest, zumindest für andere Einsatzzwecke, sichern um sie bei Bedarf wieder hervorzaubern.
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 42 Gäste