What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Html help needed - tables dont align under each other

    Asked by alltronicsbeveiliging on December 11, 2014 at 04:51 AM

    Hi Jotform,

    I a problem with the tables in my responder email.

    On smaller screens, the tables align prefect under each other. Only on bigger screens the tables align next to each other.

    I have tried to adjust the html code but i couldnt figger it out.

    Could you help me out?

    Form: http://form.jotformpro.com/form/43363171149958

     

    Code:

    <p><span style="font-size: small;">Geachte {uwNaam},</span></p>

    <p><span style="color: #000000; font-size: small;">Onderstaand vindt u een kopie van de aangeleverde gegevens. Wij adviseren u de gegevens goed op te bergen.</span></p>

    <p><span style="color: #000000; font-size: small;">Met vriendelijke groet,</span></p>

    <p><span style="color: #000000; font-size: small;">Alltronics beveiliging B.V.&nbsp;</span></p>

    <p>&nbsp;</p>

    <table style="border: 1px solid #666666; height: 19px; width: 685px; background-color: #ffffff;" border="1" frame="border" align="left">

    <tbody>

    <tr>

    <td>&nbsp;</td>

    <td><span style="font-size: small;"><strong>Gebruiker &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</strong></span></td>

    <td><span style="font-size: small;"><strong>Sleuteltag</strong></span></td>

    <td><span style="font-size: small;"><strong>Code &nbsp; &nbsp;&nbsp;</strong></span></td>

    <td><span style="font-size: small;"><strong>Waarschuwen</strong></span></td>

    <td><span style="font-size: small;"><strong>Telefoonnummer(s)</strong></span></td>

    </tr>

    <tr>

    <td><strong>&nbsp;1</strong></td>

    <td>{naam31}</td>

    <td><span style="white-space: pre;">{ontvangtEen}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij28}</span></td>

    <td><span style="white-space: pre;">{telefoonnummers}</span></td>

    </tr>

    <tr>

    <td><strong>&nbsp;2</strong></td>

    <td><span style="white-space: pre;">{naam43}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen44}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode45}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij}</span></td>

    <td><span style="white-space: pre;">{telefoonnummers47}</span></td>

    </tr>

    <tr>

    <td><strong>&nbsp;3</strong></td>

    <td><span style="white-space: pre;">{naam49}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen26}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode60}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij51}</span></td>

    <td><span style="white-space: pre;">{telefoonnummers29}</span></td>

    </tr>

    <tr>

    <td><strong>&nbsp;4</strong></td>

    <td><span style="white-space: pre;">{naam64}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen65}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode50}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij67}</span></td>

    <td><span style="white-space: pre;">{telefoonnummers68}</span></td>

    </tr>

    <tr>

    <td><strong>&nbsp;5</strong></td>

    <td><span style="white-space: pre;">{naam}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen75}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode66}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij98}</span></td>

    <td><span style="white-space: pre;">{telefoonnummers99}</span></td>

    </tr>

    <tr>

    <td><strong>&nbsp;6</strong></td>

    <td><span style="white-space: pre;">{naam58}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen78}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode76}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij102}</span></td>

    <td><span style="white-space: pre;">{telefoonnummers101}</span>&nbsp;</td>

    </tr>

    <tr>

    <td><strong>&nbsp;7</strong></td>

    <td><span style="white-space: pre;">{naam74}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen81}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode79}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij100}</span></td>

    <td><span style="white-space: pre;">{telefoonnummers103}</span></td>

    </tr>

    <tr>

    <td><strong>&nbsp;8</strong></td>

    <td><span style="white-space: pre;">{naam80}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen84}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode85}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij106}</span></td>

    <td><span style="white-space: pre;">{telefoonnummers105}</span></td>

    </tr>

    <tr>

    <td><strong>&nbsp;9</strong></td>

    <td><span style="white-space: pre;">{naam86}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen87}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode82}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij108}</span></td>

    <td><span style="white-space: pre;">{telefoonnummers109}</span></td>

    </tr>

    <tr>

    <td><strong>&nbsp;10</strong></td>

    <td><span style="white-space: pre;">{naam111}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen112}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode113}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij114}</span></td>

    <td><span style="white-space: pre;">{telefoonnummers107}</span></td>

    </tr>

    <tr>

    <td><strong>&nbsp;11</strong></td>

    <td><span style="white-space: pre;">{naam83}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen120}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode88}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij104}</span></td>

    <td><span style="white-space: pre;">{telefoonnummers115}</span></td>

    </tr>

    <tr>

    <td><strong>&nbsp;12</strong></td>

    <td><span style="white-space: pre;">{naam119}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen59}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode121}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij117}</span></td>

    <td><span style="white-space: pre;">{telefoonnummers116}</span></td>

    </tr>

    <tr>

    <td><strong>&nbsp;13</strong></td>

    <td><span style="white-space: pre;">{naam124}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen123}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode125}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij126}</span></td>

    <td><span style="white-space: pre;">{telefoonnummers127}</span></td>

    </tr>

    <tr>

    <td><strong>&nbsp;14</strong></td>

    <td><span style="white-space: pre;">{naam135}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen130}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode131}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij132}</span></td>

    <td>{telefoonnummers133}&nbsp;</td>

    </tr>

    <tr>

    <td><strong>&nbsp;15</strong></td>

    <td><span style="white-space: pre;">{naam129}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen136}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode137}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij138}</span></td>

    <td>{telefoonnummers139}</td>

    </tr>

    <tr>

    <td><strong>&nbsp;16</strong></td>

    <td><span style="white-space: pre;">{naam141}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen142}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode143}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij144}</span></td>

    <td>{telefoonnummers145}</td>

    </tr>

    <tr>

    <td><strong>&nbsp;17</strong></td>

    <td><span style="white-space: pre;">{naam147}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen148}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode149}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij150}</span></td>

    <td>{telefoonnummers151}</td>

    </tr>

    <tr>

    <td><strong>&nbsp;18</strong></td>

    <td><span style="white-space: pre;">{naam153}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen154}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode155}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij156}</span></td>

    <td>{telefoonnummers157}</td>

    </tr>

    <tr>

    <td><strong>&nbsp;19</strong></td>

    <td><span style="white-space: pre;">{naam159}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen160}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode161}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij162}</span></td>

    <td>{telefoonnummers163}</td>

    </tr>

    <tr>

    <td><strong>&nbsp;20</strong></td>

    <td><span style="white-space: pre;">{naam165}</span></td>

    <td><span style="white-space: pre;">{ontvangtEen166}</span></td>

    <td><span style="white-space: pre;">{persoonlijkeCode167}</span></td>

    <td><span style="white-space: pre;">{waarschuwenBij168}</span></td>

    <td>{telefoonnummers169}</td>

    </tr>

    </tbody>

    </table>

    <p>&nbsp;</p>

    <table style="height: 50px; width: 685px; border: 1px solid #666666; background-color: #ffffff;" border="1" cellpadding="0" align="left">

    <tbody>

    <tr>

    <td><strong>Toelichting gebruikersgegevens:&nbsp;</strong><br />&nbsp;{toelichting53}</td>

    </tr>

    </tbody>

    </table>

    <p>&nbsp;</p>

    <table style="height: 20px; width: 685px; border: 1px solid #666666; background-color: #ffffff;" border="1" align="left">

    <tbody>

    <tr>

    <td><strong><span style="font-size: small;">Dag</span></strong></td>

    <td><strong><span style="font-size: small;">Mag open om - moet sluiten om</span></strong></td>

    </tr>

    <tr>

    <td>Maandag</td>

    <td>{maandagMag}</td>

    </tr>

    <tr>

    <td>Dinsdag</td>

    <td>{dinsdagMag185}</td>

    </tr>

    <tr>

    <td>Woensdag</td>

    <td>{woensdagMag}</td>

    </tr>

    <tr>

    <td>Donderdag</td>

    <td>{donderdagMag}</td>

    </tr>

    <tr>

    <td>Vrijdag</td>

    <td>{vrijdagMag}</td>

    </tr>

    <tr>

    <td>Zaterdag</td>

    <td>{zaterdagMag}</td>

    </tr>

    <tr>

    <td>Zondag</td>

    <td>{zondagMag}</td>

    </tr>

    </tbody>

    </table>

    Screenshot

    Screenshot
    JotForm problem style size
  • Profile Image

    Answered by val on December 11, 2014 at 09:10 AM

    Hi,

    Please try put a "margin: 0 auto;" on the <table> style tag, you can notice that there are 3 the same styles on your <table> tag, Please do this to the 3 <table> tags and your Email template will be centered, so that it will prevent making 3 cols on each tables.

    Also, change the align="left" to align="middle" this is also under the <table> tag.

    Hope this help.

    Thanks.

     

  • Profile Image

    Answered by alltronicsbeveiliging on January 08, 2015 at 04:58 AM

    It worked! many thanks!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on January 08, 2015 at 08:24 AM

    Hello alltronicsbeveiliging,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!