HTML- Form - is breaking the alignment in the table layout</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2019-04-16T20:57:39.713" class="fromnow">Apr 16 '19 at 20:57</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2019-04-17T13:10:53.307" datetime="2019-04-17T13:10:53.307">Apr 17 '19 at 13:10</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 54 times"> <span class="fc-light mr2">Viewed</span> 54 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="55716497" data-ownerid="11370647" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="55716497"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>In HTML I am making a form where there are 2 tables side by side. In one table all the form <code><label>/Name/E Mail/Password</label></code> and in another table I am trying to put the form <code><inputs></code> text/email/password to make them look nicely visible.</p> <p>But when I gave the label Message and <code><textarea name="Message" rows="1" cols="30"></text area></code> my whole form layout is getting disturbed due to which I am not able keep my initial labels and inputs aligned.</p> <pre><code> <form class="" action="index.html" method="post"> <table> <tr> <td> <table> <tr> <td> <label>Name</label> </td> </tr> <tr> <td> <label>Email</label> </td> </tr> <tr> <td> <label>Password</label> </td> </tr> <tr> <td> <label>Message</label> </td> </tr> </table> </td> <td> <table> <tr> <td> <input type="text" name="" value=""> </td> </tr> <tr> <td> <input type="email" name="" value=""> </td> </tr> <tr> <td> <input type="password" name="" value=""> </td> </tr> <tr> <td> <textarea name="Message" rows="1" cols="30"></textarea> </td> </tr> </table> </td> </tr> </table> </form> </code></pre> <p><a class="external-link" href="https://i.stack.imgur.com/x1GXV.png" rel="nofollow noreferrer">When the labels and inputs are aligned</a> <a class="external-link" href="https://i.stack.imgur.com/Wy16b.png" rel="nofollow noreferrer">When the labels and inputs are not aligned</a></p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Apr 16 '19 at 21:50">edited Apr 16 '19 at 21:50</time> <a href="../../users/215552/heretic-monkey" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/215552.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Heretic Monkey" /> </a> <div class="s-user-card--info"> <a href="../../users/215552/heretic-monkey" class="s-user-card--link">Heretic Monkey</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">11,687</li> <li class="s-award-bling s-award-blinggold" title="7 gold badges">7</li> <li class="s-award-bling s-award-blingsilver" title="53 silver badges">53</li> <li class="s-award-bling s-award-blingbronze" title="122 bronze badges">122</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 16 '19 at 20:57">asked Apr 16 '19 at 20:57</time> <a href="../../users/11370647/bharath" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/11370647.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Bharath" /> </a> <div class="s-user-card--info"> <a href="../../users/11370647/bharath" class="s-user-card--link">Bharath</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">11</li> <li class="s-award-bling s-award-blingbronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-55716497" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="55716497" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-98114322" class="comment js-comment " data-comment-id="98114322" data-comment-owner-id="5314179" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment98114322_55716497"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Please post your HTML.</span> – <a href="../../users/5314179/sankha-karunasekara" title="1,636 reputation" class="comment-user ">Sankha Karunasekara</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/55716497/html-form-textarea-is-breaking-the-alignment-in-the-table-layout#comment98114322_55716497"><span title="2019-04-16T21:33:26.320 License: CC BY-SA 4.0" class="relativetime-clean">Apr 16 '19 at 21:33</span></a></span> </div> </div> </li> <li id="comment-98114599" class="comment js-comment " data-comment-id="98114599" data-comment-owner-id="215552" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment98114599_55716497"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">[You should not use tables for layout](https://stackoverflow.com/q/83073/215552). [Let me repeat that again. You should not use tables for layout.](http://www.shouldiusetablesforlayout.com/). If you must, use a single table with two columns, not three tables...</span> – <a href="../../users/215552/heretic-monkey" title="11,687 reputation" class="comment-user ">Heretic Monkey</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/55716497/html-form-textarea-is-breaking-the-alignment-in-the-table-layout#comment98114599_55716497"><span title="2019-04-16T21:48:06.613 License: CC BY-SA 4.0" class="relativetime-clean">Apr 16 '19 at 21:48</span></a></span> </div> </div> </li> <li id="comment-98135670" class="comment js-comment " data-comment-id="98135670" data-comment-owner-id="3204142" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment98135670_55716497"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I've updated my answer to include your code.</span> – <a href="../../users/3204142/riddlemethis" title="1,345 reputation" class="comment-user ">RiddleMeThis</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/55716497/html-form-textarea-is-breaking-the-alignment-in-the-table-layout#comment98135670_55716497"><span title="2019-04-17T13:13:45.610 License: CC BY-SA 4.0" class="relativetime-clean">Apr 17 '19 at 13:13</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="55716580"></a> <div id="answer-55716580" class="answer " data-answerid="55716580" data-ownerid="3204142" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="55716580"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>There is no need for the extra table inside of the table, and you are including everything inside of 1 row, which is why its formatted like that.</p> <p>You shouldn't be using tables for this, not when you have things like <a class="external-link" href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow noreferrer">CSS Flexbox</a> and <a class="external-link" href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="nofollow noreferrer">CSS Grid</a>. Here is a <a class="external-link" href="https://webdesign.tutsplus.com/tutorials/building-responsive-forms-with-flexbox--cms-26767" rel="nofollow noreferrer">basic example</a> of using flexbox with a form.</p> <p>But if you must use a table, try a table format like this ...</p> <pre><code><table> <tr> <td>label here</td> <td>form field here</td> </tr> <tr> <td>label here</td> <td>form field here</td> </tr> ... </table> </code></pre> <p>Here is an example using your code.</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code> <form class="" action="index.html" method="post"> <table> <tr> <td> <label>Name</label> </td> <td> <input type="text" name="" value=""> </td> </tr> <tr> <td> <label>Email</label> </td> <td> <input type="email" name="" value=""> </td> </tr> <tr> <td> <label>Password</label> </td> <td> <input type="password" name="" value=""> </td> </tr> <tr> <td> <label>Message</label> </td> <td> <textarea name="Message" rows="1" cols="30"></textarea> </td> </tr> </table> </form></code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2019-04-17T13:10:53.307" class="relativetime">Apr 17 '19 at 13:10</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">RiddleMeThis</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Apr 16 '19 at 21:04">answered Apr 16 '19 at 21:04</time> <a href="../../users/3204142/riddlemethis" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3204142.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="RiddleMeThis" /> </a> <div class="s-user-card--info"> <a href="../../users/3204142/riddlemethis" class="s-user-card--link">RiddleMeThis</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,345</li> <li class="s-award-bling s-award-blinggold" title="4 gold badges">4</li> <li class="s-award-bling s-award-blingsilver" title="16 silver badges">16</li> <li class="s-award-bling s-award-bling__bronze" title="29 bronze badges">29</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-55716580" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="55716580" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-98114464" class="comment js-comment " data-comment-id="98114464" data-comment-owner-id="11370647" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment98114464_55716580"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Added the code, Please correct me where i am wrong.</span> – <a href="../../users/11370647/bharath" title="11 reputation" class="comment-user owner">Bharath</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/55716497/html-form-textarea-is-breaking-the-alignment-in-the-table-layout#comment98114464_55716580"><span title="2019-04-16T21:40:36.213 License: CC BY-SA 4.0" class="relativetime-clean">Apr 16 '19 at 21:40</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>