Grundlagen: Tabellenformate in HTML String

[knoxville]

Hallo, für mich ist noch alles neu.
Ich geben Messwerte über einen HTML-String am Webserver aus. Um den Text besser formatiert darzustellen, sollen die Werte in Tabellenform dargestellt werden. Hier ein Auszug aus dem Scatch:

  ptr +="<table border='1';>";
    ptr +="<tr>";
      ptr +="<th>Speicher";
      ptr +="</th>";
      ptr +="<th>";
      ptr +="</th>";
    ptr +="</tr>";

Nun die ganz banale Frage:
Wie füge ich hier colspan="2" ein,
um im Header 2 Zellen zusammenzufassen?
Wie füge ich noch eine weitere Eigenschaft wie Schriftfarbe ein?
Wie ist die Syntax bei ptr +=

[Tommy56]

Ich würde Dir empfehlen, den HTML-Code erst mal in einer test.html zu schreiben. Dann kannst Du im Browser gleich austesten, ob es so aussieht, wie Du Dir das vorstellst. Die Werte kannst Du ja erst mal als Text einsetzen.
Literatur zu HTML: Selfhtml und/oder w3schools

Gruß Tommy

[knoxville]

Hallo Tommy56, danke für deine schnelle Antwort.
Das HTML ist vorhanden. Jetzt geht es aber um die Umsetzung in diese Ptr += Syntax.

[Tommy56]

Wenn ich mal vermute, dass ptr ein String ist, dann fügt += das rechts stehende an das bestehende an.

ptr = "<table><tr>";
ptr += "<th colspan=\"2\">";
ptr += "Text";
ptr += "</th>";

Da " die Begrenzung für ein Zeichenkettenliteral ist, müssen die " um die 2 mit \ maskiert werden.

Gruß Tommy

[wno158]

Noch zwei " sind nötig:

ptr += "<th colspan=\"2\">";

[knoxville]

@Tommy56

ptr = "<table><tr>";
ptr += <th colspan=\"2\">;
ptr += "Text";
ptr += "</th>

Nicht ganz - so funktioniert es:

  ptr +="<table border='1';>";
  ptr +="<tr>";
  ptr +="<th colspan='2';>";
  ptr += "Speicher";
  ptr += "</th>";     
  ptr +="</tr>";

[noiasca]

@knoxville

Um den Text besser formatiert darzustellen, sollen die Werte in Tabellenform dargestellt werden.

3mal überlegen ob eine Tabelle richtig ist.
(edit: eine Werte Reihe + Größenangabe ist keine Tabelle!)
"Formatieren" sollte mit sauberen css eigentlich auch funktionieren.

@knoxville

Hier ein Auszug aus dem Scatch:

Arduino verwendet "Sketch" für ihre Programme

Ansonsten wie schon geschrieben, mach erst mal ein lokales test.html,
dann evtl. noch in einem Validator überprüfen: https://validator.w3.org/ und erst wenn du einen saubern html code hast, machst deinen Arduino Sketch.

edit:

ptr +="<th colspan='2';>";

und der ; im HTML tag schließt genau was ab?

[Tommy56]

Hast Recht. Korrigiert.

Gruß Tommy

[knoxville]

Danke für den Hinweis. Aber Tabelle ist ganz OK. Mir geht es jetzt erst mal um Grundlagenwissen zur Syntax.
Beim Aufteilen des Codes funktioniert es aber nicht mehr.
Was ist hier falsch?

  ptr +="<table border='1';>";
  ptr +="<tr>";
  ptr +="<th>";
  ptr +="<colspan='2';>";
  ptr += "Speicher";
  ptr += "</th>";     
  ptr +="</tr>";

Hier kommt dann wieder das heraus:

[noiasca]

der beste Beweis dafür, dass eine Tabelle hier das falsche Element ist...

aber wennst meinst ... wohin gehört colspan.
und wieder: was soll der ; abschließen?!?

falls es dir noch nicht geschrieben wurde:
schreibe Plain-HTML und prüfe es in einem Validator...

[knoxville]

HTML ist klar. Der Code oben funktioniert ja. Ich möchte diesen aber aufteilen, dass ich einfach noch mehr Formatierungen wie Farbe einfügen kann. Nur was bringt mir das Plain-HTML (Tabelle 3 Zeilen, 2 Spalten), wenn ich dies nicht in dieses Ptr += Format (String-Format) umgesetzt bekomme. Zu diesem String-Format finde ich keine Syntaxbeschreibung also eine Beschreibung wie man HTML in dieses String-Format mit Ptr+= umsetzt

[noiasca]

@knoxville

Nur was bringt mir das Plain-HTML (Tabelle 3 Zeilen, 2 Spalten), wenn ich dies nicht in dieses Ptr += Format (String-Format) umgesetzt bekomme.

Plain HTML kannst in einem Validator überprüfen und so richtiges HTML erstellen.
Nur weils in deinem Browser dargestellt wird, heißt noch lange nicht, dass das korrektes HTML ist.

Und ein ganzes HTML aufteilen ist doch übersichtlich:
Einmal ist das Fixtext - und vor den Variablen Teilen musst du nun unterbrechen und ein neues ptr += setzen ... sorry - das ist doch nur Tipparbeit.

Langes HTML
Anführungszeichen Anführungszeichen setzen
Zeilenschaltung zwischen den zwei neuen Anführungszeichen setzen
;
ptr+= variable;
Zeilenschaltung
dafür den Demo-Text löschen
und dann noch mal ein ptr += vor dem zweiten oben eingefügten Anführungszeichen setzen wo wieder fortgesetzt wird.

dann einmal auf den ESP hochladen,
html einmal vom ESP generieren lassen - noch mal im Validator überprüfen ob eh alles richtig umgesetzt wurde.

[knoxville]

OK, aber was habe ich hier bei der Teilung falsch gemacht:

  ptr +="<table border='1';>";
  ptr +="<tr>";
  ptr +="<th>";
  ptr +="<colspan='2';>";
  ptr += "Speicher";
  ptr += "</th>";     
  ptr +="</tr>";

Der Header sollte so zusammengefasst werden:

[Tommy56]

Die 2 sollte in ", nicht in ' und ein ; hat in Tags nichts zu suchen.
Warum fragst Du, wenn Du die Antworten dann ignorierst?

Gruß Tommy

[noiasca]

@knoxville
nur als Vorschlag: kopiere das HTML in dem von mir oben verlinkten Validator und lass dir Zeilenweise ausgeben was alles falsch ist. wird. Das Ding zeigt dir jede einzelne Zeile die nicht valide ist! Und vielen Fällen auch ziemlich genau WAS nicht stimmt.

[knoxville]

Habe es jetzt so abgeändert:

  ptr +="<tr>";
  ptr +="<th colspan='4';>";
  ptr += "Speicher";
  ptr += "</th>"; 
  ptr +="</tr>"; 
  ptr +="<tr>";
  ptr +="<td colspan='4';>";
  ptr +="<span style='color:red;'>";
  ptr +=String (tempSensor7, digit);
  ptr +="<span style='color:black;'>";
  ptr +=" &deg;C";
  ptr += "</td>";     
  ptr +="</tr>";  
  ptr +="<td colspan='4';>";
  ptr +="<span style='color:orange;'>";
  ptr +=String (tempSensor8, digit);
  ptr +="<span style='color:black;'>";
  ptr +=" &deg;C";
  ptr += "</td>";     
  ptr +="</tr>";
  ptr +="<tr>";
  ptr +="<td colspan='4';>";
  ptr +="<span style='color:blue;'>";
  ptr +=String (tempSensor9, digit);
  ptr +="<span style='color:black;'>";
  ptr +=" &deg;C";
  ptr += "</td>";     
  ptr +="</tr>";

Das liefert das gewünschte Ergebnis:

Danke für eure Unterstützung!

[noiasca]

23 Fehler und Warnings

De facto hast du jetzt eine einspaltige Tabelle, warum du dann ein colspan 4 glaubst zu brauchen, das ist schon fast witzig.
Auf die falschen ; hat man dich bereits mehrmals hingewiesen.
wenn du span aufmachst, musst du es auch wieder zu machen.

immer noch ein Schmarren, aber das validiert wenigstens:

<!DOCTYPE html>
<html lang='de'>
 <head>
  <title>foo</title>
 </head>
 <body>
  <table>
  <tr>
   <th colspan='1'>  <!-- ausgebessert, strichpunkt entfernt, colspan kann ganz weg -->
    foo
   </th>
  </tr> 
  <tr>
   <td colspan='1'>   <!-- ausgebessert, strichpunkt entfernt, colspan kann ganz weg -->
    <span style='color:red;'>
     blabla
    </span> <!-- ergänzt-->
    <span style='color:black;'>
     &deg;C
    </span> <!-- ergänzt-->
   </td>  
  </tr>
  <tr>      <!-- ergänzt-->
   <td colspan='1'>  <!-- ausgebessert, strichpunkt entfernt, colspan kann ganz weg -->
    <span style='color:orange;'>
    bar
    </span>
    <span style='color:black;'>
    &deg;C
    </span> <!-- ergänzt-->
   </td>     
  </tr>
  
  <tr>
    <td colspan='1'>  <!-- ausgebessert, strichpunkt entfernt, colspan kann ganz weg -->
     <span style='color:blue;'>
      foo
     </span> <!-- ergänzt-->
     <span style='color:black;'>
      &deg;C
     </span> <!-- ergänzt-->
    </td>     
  </tr>
  </table>
 </body>
 </html>

[knoxville]

ja aber genauso funktioniert es mit ";" und wird auf meinen Geräten richtig angezeigt (Handy, Tablet Browser). Mehr wollte ich nicht. Colespan kommt weiter oben in der Tabelle zum Einsatz.
In dieser String-Syntax wird es nur so angenommen.