Tabellengenerator von Werner Zenk

[struggle]

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 !?

[Tommy Herrmann]

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 toleriert und das reicht mir nicht aus.

Ich werde diese jedenfalls nicht verwenden.

[struggle]

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

[Tommy Herrmann]

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:

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]

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:

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]

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/

[struggle]

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

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>

CSS

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;
}

[struggle]

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.

[Tommy Herrmann]

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:

Code: Alles auswählen

table#table tr th, table#table tr td {
  padding: 10px;
  font-size: 1.2rem;
}

geht natürlich auch in Pixeln, z.B.:

font-size: 18px;

[Tommy Herrmann]

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

Code: Alles auswählen

<table id="table">

schreibst Du dann:

Code: Alles auswählen

<table id="table" class="table">

[struggle]

Ist leider nicht responsive

[Tommy Herrmann]

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":

Code: Alles auswählen

thead, tbody {
  white-space: nowrap;
}

... dann geht das auch, bzw. dann sieht man das auch.

[Tommy Herrmann]

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.

[struggle]

Jetzt geht's, Super, Danke

[Tommy Herrmann]

Na bestens

[struggle]

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 ) ?

[Tommy Herrmann]

na dann musst Du das <div> mit dem Overflow wieder entfernen:

Code: Alles auswählen

<div class="table-responsive">

... und auch die Unterbindung von Leerzeichen wieder entfernen, denn sonst passt das ja nicht auf den Bildschirm vom Handy:

Code: Alles auswählen

thead, tbody {
  white-space: nowrap;
}

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

Code: Alles auswählen

Ärztlicher Bereitschaftsdienst

verzichten, bzw. ein Umbruch-Tag <br> (break) einbauen wie z.B.:

Code: Alles auswählen

Ärztlicher<br>Bereitschaftsdienst

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:

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.

[struggle]

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)

[Tommy Herrmann]

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