Custom Table

  • HTML

Es gibt 19 Antworten in diesem Thema. Der letzte Beitrag () ist von Drahuverar.

    Custom Table

    Hey VB-Gemeinde,

    ich bin kein HTML Genie, weswegen ich hier mal die Frage Stelle;
    Kann ich wie bei dem Bild (siehe Anhang) eine Tabelle über HTML erstellen?

    Im Grunde möchte ich durch Outlook eine HTML Seite versenden und diese beinhaltet die Tabelle.
    Würde natürlich schöner aussehen wenn die Gesamtmenge erfasst werden würde!

    Andernfalls tut es auch ein text, was momentan der Fall ist.

    Vielen Dank für eure Hilfe!

    Grüße,
    Drahuverar
    Bilder

    • HTML Tabelle.png

      2,67 kB, 287×106, 133 mal angesehen
    Option Strict On!

    Hey @petaod

    Also momentan mach ich es so, in VB:

    VB.NET-Quellcode

    1. Dim a As String = "<table id=""t01"" border=""1"">
    2. <thead>
    3. <tr>
    4. <th>Ueberschrift1</th>
    5. <th>Ueberschrift2</th>
    6. <th>Ueberschrift3</th>
    7. </tr>
    8. </thead>" & Environment.NewLine
    10. For i = 0 To list_Ueberschrift1.Count - 1
    11. a += "<tr>" & Environment.NewLine
    12. a += "<td>" & list_Ueberschrift1.Item(i).ToString & "</td>" & Environment.NewLine
    13. a += "<td>" & list_Ueberschrift2.Item(i).ToString & "</td>" & Environment.NewLine
    14. a += "<td>" & list_Ueberschrift3.Item(i).ToString & "</td>" & Environment.NewLine
    15. a += "</tr>" & Environment.NewLine
    16. Next
    18. a += "</table>"


    Mit deinem Link komme ich nicht ganz weiter, bräuchte ich CSS um das zu realisieren? Sprich die Letzte Reihe (Row) hinzufügen und die erste Zelle unsichtbar machen..??
    Option Strict On!

    wieso kommst du mit dem Link nicht weiter? Da ist doch haarklein erklärt, wie HTML eine Tabelle definiert.

    Aber dein Ansatz sieht auch schon nicht so verkehrt aus.
    Du könntest auch überlegen, einen HTMLTextWriter zu nehmen, oder sogar eine lib einbinden, die die HtmlDocument-Klasse beinhaltet (google mal).

    Bedenke aber auch, dass nicht jeder HTML erlaubt in seinen Emails.

    Nach deinem Code:

    HTML-Quellcode

    1. <tr>
    2. <td colspan="2">Gesamt</td><td>123456</td>
    3. </tr>


    oder

    HTML-Quellcode

    1. <tr>
    2. <td style="display: none;"></td><td>Gesamt</td><td>123456</td>
    3. </tr>


    oder

    HTML-Quellcode

    1. <tr>
    2. <td style="visibility: hidden;"></td><td>Gesamt</td><td>123456</td>
    3. </tr>

    @petaod
    @ErfinderDesRades | Danke für den Hinweis mit der HtmlDocumentKlasse. :)
    @Lingo

    Dafür muss ich mich entschuldigen, das war ein Fehler meinerseits. Ich hätte natürlich erwähnen sollen, dass ich das schon hatte. Also eine weitere Zeile mit einer leeren Zelle und 2 gefüllten Zellen in der Zeile.

    Mich "stört" lediglich, nehmen wir mein angefügtes Bild als Beispiel, dass die Zelle 0,4 umrandet angezeigt wird. (Im Bild nicht, aber in der "realität")
    Wenn ich HTML richtig verstanden habe gibt es ja keinen Weg drumherum diese Zelle nicht darzustellen,..?

    ErfinderDesRades schrieb:

    Bedenke aber auch, dass nicht jeder HTML erlaubt in seinen Emails.

    Okay, hier gibt es allerdings auch keine Möglichkeit zu überprüfen ob der Empfänger HTML empfangen möchte bzw. es zulässt, oder? :(
    Option Strict On!

    Habe nun was gefunden, allerdings wird die leere Zelle nicht wirklich versteckt. So sieht die erste Zeile momentan aus:

    HTML-Quellcode

    1. "<table style=""empty-cells: hide"" border=""1"">

    ...Muss weiterschauen. So ein Käse ^^

    @Mono
    Okay, danke für den Hinweis. Muss ich mir mal genauer anschauen!
    Option Strict On!

    Hey Leute,...
    kurzer Zwischenstand..

    Mittlerweile sieht es so aus. Allerdings bekomme ich es nicht hin das die beiden Zellen (rot markiert) nicht erscheinen... Allerdings habe ich nicht viel gemacht, nur einen 4. header hinzugefügt..
    Bin kurz davor auszugeben. Liegt es evtl. daran das ich <thead> nutze?
    ...muss mal, wenn ich weiterschauen kann, testen was passiert, wenn ich einfach ohne <thead> die Geschichte mache.
    Bilder

    • Bild 2.png

      6,05 kB, 468×138, 113 mal angesehen
    Option Strict On!

    Wenn ich die Teile rausnehme, wie ich Sie generiere und einfach in eine .HTML Datei packe, bekomme ich folgendes (richtig).

    Spoiler anzeigen

    HTML-Quellcode

    1. <!DOCTYPE html>
    3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta charset="utf-8" />
    6. <title></title>
    8. </head>
    9. <body>
    10. <table style="empty-cells:hide" border="1">
    11. <thead>
    12. <tr>
    13. <th>erster header</th>
    14. <th>zweiter header</th>
    15. <th>dritter header</th>
    16. <th>vierter header</th>
    17. </tr>
    18. </thead>
    19. <tr>
    20. <td>Irgendwas</td>
    21. <td>Irgendwas</td>
    22. <td>Irgendwas</td>
    23. <td>Irgendwas</td>
    24. </tr>
    25. <tr><td></td><td><b>Gesamt</b></td><td>PreisOhneMWST</td></tr>
    26. <tr><td></td><td><b>inkl. MWST</b></td><td>BerechnePreisInklMWST</td></tr>
    27. </table>
    29. </body>
    30. </html>


    Irgendwas stimmt bei der Übergabe des Strings an mein Outlook-Objekt nicht. Ich muss mal genauer schauen was im Debug steht. (Obiges habe ich über einen StreamWriter ausgeben lassen)

    hmmm.. Komisch!
    So ganz richtig isses ja auch nicht mehr, sieht aus als hätte er überall 1px als abstand 8|
    Ohne Border hätte ich ja keine Umrandung mehr =O
    Bilder

    • Bild 3.png

      8,64 kB, 492×110, 131 mal angesehen
    Option Strict On!

    Merkwürdig, funktioniert, ausgelagert in einer HTML, bei mir auch.
    Da ist wohl was bei meiner Schleife falsch.. Muss ich mal auf die Suche gehen. :|

    @ErfinderDesRades | Edit: 16:05
    Darf ich fragen ob du das auch in einem Outlook Objekt dargestellt hast?
    Ich befürchte solangsam das es wirklich daran liegt.

    Hab schon gedacht ich vergesse irgendwo das schließen eines Befehls, aber daran liegt es auch nicht.
    Option Strict On!

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Drahuverar“ ()

    Hi,

    @Drahuverar
    so wie die Tabelle ausschaut solltest du erstmal ein Style hierauf anwenden, um, wie du es nennst diesen komischen 1 Pixel wegzukriegen. Das geht so:

    Quellcode

    1. table{ border-collapse: collapse; }


    Dieser Doppelrahmen ist von Haus aus so und muss bei Bedarf nur abgeschaltet werden.

    Wenn du das Gefühl hast, dass er Ränder (border) macht wo keine sein sollen, dann gib ihm doch einfach nen border, aber mit weißer Farbe. Oder Transparent.

    Link :thumbup:
    Hello World

    @Link
    Cool, danke für den Hinweis. Wie kann ich denn mehrere Styles anwenden? Momentan sage ich ja schon das alle leeren Zellen "versteckt" werden sollen (empty-cells: hide).
    Oder kann meine Tabelle immer nur eine Eigenschaft haben? Habe so gut wie nie was damit zu tun gehabt,...
    Hab da mal was gefunden (codecademy), werde ich wohl mal durchgehen müssen.

    ...Das man den Dingern (Rechnern) aber auch alles beibringen muss. :thumbsup: (Was natürlich auch Spaß macht)
    Ich werde zunächst einmal, wie EDR empfohlen hat, die HtmlDocument-Klasse durcharbeiten...
    Wie gesagt verstehe ich nicht das in Outlook die Geschichte falsch dargestellt wird, aber in allen Browsern (Chrome, Mozilla, IE) 'richtig'.
    Option Strict On!

Facebook
Telefonspende