Member Avatar for niche1

Please see the comment in my code. How would you do it?

Thanks.

<div style='width:400px; margin-left:auto; margin-right:auto;'>
  <table cellspacing="10" border="2">
    <form action="" method="post">

   	  <tr>
 <!--How do I get this cell to right justify without the align attribute which has been depreciated-->
        <td align="right">
          Login Email:
        </td>
        <td>
          <input size="24" type="text" name="firstname" />
        </td>
      </tr>

      <tr>
        <td>
         Login Password:
        </td>
        <td>
          <input size="24" type="text" name="firstname" />
        </td>
      </tr>

	  </form>
  </table>
</div>
  • 2 Contributors
  • 2 Replies
  • 93 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by Spycat

Dani AI

Generated

originally used the deprecated align attribute; was right to move presentation into CSS. For modern, accessible forms prefer semantic labels and CSS layout (grid or flex) instead of using a table purely for positioning. Using <label> tied to its <input> improves keyboard and screen-reader support — see the MDN guidance on the label element.

A compact, practical pattern that avoids table layout:

<form class="login-form">
  <label for="email">Login Email:</label>
  <input id="email" name="email" type="email">
  <label for="pwd">Login Password:</label>
  <input id="pwd" name="password" type="password">
  <button type="submit">Sign in</button>
</form>

<style>
.login-form { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; align-items: center; }
.login-form label { justify-self: end; }
/* stacked, readable layout on small screens */
@media (max-width:480px) { .login-form { grid-template-columns: 1fr; } .login-form label { justify-self: start; } }
</style>

If the table must stay (server-side constraints), keep styling in an external stylesheet and target the label column with a selector so presentation remains separate from markup. Also add vertical-align and padding for visual balance. For background reading: MDN on the td element and deprecated alignment, MDN on the label element, and MDN on CSS Grid Layout: MDN: td element (deprecation notes), MDN: label element, MDN: CSS Grid Layout.

Member Avatar for niche1

style='text-align:right'

I should have been more thorough.

Please see the comment in my code. How would you do it?

Thanks.

<div style='width:400px; margin-left:auto; margin-right:auto;'>
  <table cellspacing="10" border="2">
    <form action="" method="post">

   	  <tr>
 <!--How do I get this cell to right justify without the align attribute which has been depreciated-->
        <td align="right">
          Login Email:
        </td>
        <td>
          <input size="24" type="text" name="firstname" />
        </td>
      </tr>

      <tr>
        <td>
         Login Password:
        </td>
        <td>
          <input size="24" type="text" name="firstname" />
        </td>
      </tr>

	  </form>
  </table>
</div>
Member Avatar for Spycat

Is this what you're after? :

<td style="text-align:right;">
   Login Email:
</td>

Or, to make it easier if you're going to right-align more than one cell,
use a css class attribute:

<style type="text/css">
.cell-right
{
   text-align:right;
}
</style>

Then...
HTML Section:

<td class="cell-right">
      Login Email:
      </td>

Voila...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.