Tabelle für Signatur in Outlook

  • Hallo Zusammen,

    ich bin absoluter Laie in html und habe mit dieser Tabelle Probleme.

    Ich hoffe ihr könnt mir helfen.

    Ich will eine Signatur für Outlook erstellen, dazu brauche ich Tabellen.

    Die Tabelle soll eine durchgezogene Linie oben und in der letzten Zeile unten haben.

    die Tags die ich Zusammengestellt habe zeigen mir oben für zwei Spalten jeweils eine durchgezogene

    Linie mit einer kleinen Lücke zwischen der ersten und zweiten Spalte.

    Und die erste Spalte ist leicht versetzt nach unten.


    wäre Super wenn Ihr mir Helfen könntet.

    Im voraus besten Dank!!:)


    <table>

    <tr>

    <td HEIGHT="10" VALIGN="TOP" class="inner contents" style="padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;width:22%;text-align:left;" >

    <div style="font-size: 0pt;"></div>

    <p style="border-top-width:1px;border-top-style:solid;border-top-color:#8B8682;">

    <span style="border-top-color=#8B8682;font-family:calibri; font-size:11px; color:#6B6B6B;">

    TextTextTextTextTextTextTextTextTextText

    </span>

    </td>

    </p>

    <td>

    <p style="border-top-width:1px;border-top-style:solid;border-top-color:#6B6B6B;">

    <span style="font-family:calibri; font-size:11px; color:#6B6B6B;">

    TextTextTextTextTextTextTextTextTextTextTextTextText

    </span>

    </td>

    </p>

    </tr>


    <td HEIGHT="10"VALIGN="TOP" class="inner contents" style="padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;width:22%;text-align:left;" >

    <span style="font-family:calibri; font-size:11px; color:#6B6B6B;">

    texttexttexttexttexttexttext

    </td>

    <td>

    <span style="font-family:calibri; font-size:11px; color:#6B6B6B;">

    texttexttexttexttexttexttexttexttexttexttex

    </span>

    </td>

    </tr>

    <td HEIGHT="10" VALIGN="TOP" class="inner contents" style="padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;width:22%;text-align:left;" >

    <span style="font-family:calibri; font-size:11px; color:#6B6B6B;">

    texttexttexttexttexttexttexttext

    </span>

    </td>

    <td>

    <span style="font-family:calibri; font-size:11px; color:#6B6B6B;">

    text<br>

    texttexttexttexttexttexttext

    </span>

    </td>

    </tr>

    <td HEIGHT="10" VALIGN="TOP" class="inner contents" style="padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;width:22%;text-align:left;" >

    <span style="font-family:calibri; font-size:11px; color:#6B6B6B;">

    texttexttexttexttexttexttexttext

    </span>

    </td>

    <td>

    <span style="font-family:calibri; font-size:11px; color:#6B6B6B;">

    text<br>

    texttexttexttexttexttexttext

    </span>

    </td>

    </tr>

    <td>

    <span style="font-family:calibri; font-size:11px; color:#6B6B6B;">

    <p style="border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#6B6B6B;">

    texttexttexttexttexttexttexttexttexttext

    </span>

    </td>

    </p>

    <td>

    <p style="border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#8B8682;">

    <span style="font-family:calibri; font-size:11px; color:#6B6B6B;">

    text

    </span>

    </td>

    </p>

    </tr>

    </table>

  • Muß das ganze mit <p> und <span> sein ?

    Das brauch man eigentlich nicht.

    Weil ohne würde das dann auch so gehen.

    https://codepen.io/basti1012/pen/rNOMOdw?editors=1010

    Falls ich das richtig verstanden habe.

    An besten wäre ja die ganze Css in <style> </style> zu packen .

    Da du aber von Outlook redest weiß ich nur nicht ob das da geht ?

  • An besten wäre ja die ganze Css in <style> </style> zu packen .

    Da du aber von outlook redest weiß ich nur nicht ob das da geht ?

    Da wäre ich sehr vorsichtig mit. Outlook und HTML-Mails, das ist ein riesiger Murks, den MicroSoft da gebaut hat. Ich weiß zwar nicht, welche Engine in Outlook genau steckt, aber ich habe immer das Gefühl, dass die Engine aus dem IE 3.0 stammt. :(

  • Hallo basti1012,

    danke für deine Hilfe, werde das gleich in Outlook umsetzten.

    :)

  • Hallo,

    im Browser zeigt er mir dir Tabellenrahmen außen richtig an, nur wenn ich das in Outlook öffne sind die Rahmen weg und die Spalten sind unterschiedlich groß!







    <table <span style="margin:0;padding:0;border-collapse:collapse;font-family:calibri; font-size:11.5px; color:#2E2E2E;width:50%"></span>


    <tr <span style="height:10px;border-top:1px solid #8B8682">

    <td>

    TextTextTextText

    </span>

    </td>

    <td>

    TextTextTextText

    </td>

    </tr>

    <tr <span style="height:10px">

    <td>

    TextTextTextText

    </td>

    <td>

    TextTextTextText

    </td>

    </tr>

    <tr <span style="height:10px">

    <td>

    <td>

    TextTextTextText

    </span>

    </td>

    <br>

    <br>

    </td>

    </tr>

    <tr <span style="height:10px;border-bottom:1px solid #8B8682">

    <td>

    TextTextTextText

    </td>

    <td>

    TextTextTextText

    </span>

    </td>


    </table>


    Im Browser

    pasted-from-clipboard.png

    In Outlook


    pasted-from-clipboard.png

  • Dein HTML-Code ist völlig kaputt!


    <table <span

    <tr <span


    Da kann man mal sehen, wie gnädig Browser mit so einem (sorry) Schrott umgehen. Dass Outlook bei so einem HTML-Code ins Essen bricht ist mehr als verständlich. Lerne bitte erst einmal die HTML-Grundlagen.


    Und wieso nutzt du wieder nicht die Code-Tags des Forums??? :(

  • Hallo

    Code-Tags vom Forum im Browser

    Das meine ich:

    Dashalb auch das pasted-from-clipboard.png

  • Ich habe mal vor einiger Zeit einen Newsletter-Code gebastelt, der auch in Outlook korrekt dargestellt wird. Vielleicht hilft dir das weiter:

  • Hallo nochmal,

    erstmal besten Dank für eure Hilfe, ich werde es wie ursprünglich geplant, die Abstände mit Leerzeichen &nbsp ausführen, ist zwar nicht die eleganteste Art aber immerhin die beste Darstellung


    <span style="color:#2E2E2E";">Text</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <span style="color:#2E2E2E";">Text <br></span> usw.

  • Hallo, habe jetzt mal den ganzen Code: der aber so in Outlook nicht angezeigt wird, vor allem die Tabelle wird nicht so dargestellt.


    <!-- DISCLAIMER START -->

    <html xmlns:v="urn:schemas-microsoft-com:vml"

    xmlns:o="urn:schemas-microsoft-com:office:office"

    xmlns:w="urn:schemas-microsoft-com:office:word"

    xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"

    xmlns="http://www.w3.org/TR/REC-html40">

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <head>


    <link rel=File-List href="textxxxxxxxxxxxxxxxxxxxxxxxxxxx-Dateien/filelist.xml">

    <link rel=Edit-Time-Data href="textxxxxxxxxxxxxxxxxxxxxxxxxxxx-Dateien/editdata.mso">

    <link rel=themeData href="textxxxxxxxxxxxxxxxxxxxxxxxxxxx-Dateien/themedata.thmx">

    <link rel=colorSchemeMapping href="textxxxxxxxxxxxxxxxxxxxxxxxxxxx-Dateien/colorschememapping.xml">


    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!--<![endif]-->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>textxxxxxxxxxxxxxxxxxxxxxxxxxxx</title>

    <style type="text/css" style="-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" >

    @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

    @font-face {

    font-family: 'Open Sans';

    font-style: normal;

    font-weight: 400;

    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/op…MiZpBA-UFVZ0bf8pkAg.woff2) format('woff2');

    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

    mso-font-alt: 'Calibri';

    }

    </style>




    </head>

    <div style="font-family: 'Calibri'; font-size: 11pt; color: black; font-weight: normal;">


    <div style="font-size: 6pt;">&nbsp;</div>

    <div style="font-size: 11pt;">

    Mit freundlichen Grüßen

    </div>

    <div style="font-size: 3pt;">&nbsp;</div>

    <div style="font-size: 11pt;">

    <b>Max Muster</b>

    </div>


    <div style="font-size: 0pt;">&nbsp;</div>

    <div style="font-size: 11pt;">

    Beruf

    </div>

    <div style="font-size: 3pt;">&nbsp;</div><br>

    <img src="textxxxxxxxxxxxxxxxxxxxxxxxxxxx/image001.jpg" border="0" /></a>xx

    <img src="textxxxxxxxxxxxxxxxxxxxxxxxxxxx/image002.jpg" border="0" /></a>




    <div style="font-size: 11pt;">

    Textffffffffffffffffffffffffffffffffff<br>

    textxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>

    textxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br><br>


    Tel: 12589999 | FAX: 12589999<br>

    mmustermann@mustermann.de<br>




    <table style="margin:0;padding:0;border-collapse:collapse;font-family:calibri; font-size:11px; color:#6B6B6B;width:44%">


    <tr style="height:10px;border-top:1px solid #8B8682">

    <td>

    TextTextTextTextTextTextTextTextTextText

    </td>

    <td>

    TextTextTextTextTextTextTextTextTextTextTextTextText

    </td>

    </tr>

    <tr style="height:10px">

    <td>

    texttexttexttexttexttexttext

    </td>

    <td>

    texttexttexttexttexttexttexttexttexttexttex

    </td>

    </tr>

    <tr style="height:10px">

    <td>

    texttexttexttexttexttexttexttext

    </td>

    <td>

    text<br>

    texttexttexttexttexttexttext

    </td>

    </tr>

    <tr style="height:10px">

    <td>

    texttexttexttexttexttexttexttext

    </td>

    <td>

    text<br>

    texttexttexttexttexttexttext

    </td>

    </tr>

    <tr style="height:10px;border-bottom:1px solid #8B8682">

    <td>

    texttexttexttexttexttexttexttexttexttext

    </td>

    <td>

    text

    </td>

    </tr>

    </table>

    </body>

    </html>

  • Das ist aber jetzt doof für den TE, weil du hast ja mit den Outlook kram mehr erfahrung.


    Ich kann dir nur sagen das dein Code bei Codepen angezeigt wird.

    Dabei ist mir aufgefallen das dies Fehlerhaft ist

    Code
    1. <img src="textxxxxxxxxxxxxxxxxxxxxxxxxxxx/image001.jpg" border="0" /></a>xx

    Wo ist den das öffne <a> ?

    Oder warum ist da ein schließendes </a> ?


    Ansonsten kann ich da jetzt nix weiteres sehen.

    Muß aber dazu sagen das ich mit den Outlook html kram noch nicht gearbeitet habe ( was ist das eigentlich html 1-2 ? ).


    Wenn man da ja <style> Tags nutzen kann könnte man da ja auch die ganze Css reinschreiben, vermute ich mal.