CODEWITHSUNDEEP
javascripthtmlcssuser-interface
Sahil Sharma
Sahil Sharma

Reputation: 1899

Text alignment without using table in html and css

I'm trying to learn HTML and CSS and using the old-school approach by creating a login page with three input controls (two text and one button). However, I'm using <table></table> for the alignment issues of textboxes. But I've read somewhere that using tables is not considered a good approach. This is what I'm doing:

Home.html

<div>
    <table>
        <thead>
            <tr><th><span>Login Page</span></th></tr>
        </thead>
        <tbody>
            <tr>
            <th><label>Username:</label></th>
            <td><input type="text" value="" /></td>
            </tr>
            <tr>
                <th><label>Password:</label></th>
                <td><input type="text" value="" /></td>
            </tr>
            <tr>
                <td><input type="button" value="Submit" /></td>
            </tr>
        </tbody>
    </table>
</div>

However, I'm using some beginner stuff of CSS to align input controls without using tables and this is what I'm trying:

Home.html

<div class="box">
    <span>Login Page</span>
    <br />
    <span>
        <label>Username:</label>
        <input type="text" value="" />
        <br />
        <label>Password:</label>
        <input type="text" value="" />
        <br />
        <input type="button" value="Submit" />
    </span>
</div>

style.css

.box {
   margin: 10px 10px 10px 10px;
   border: dotted 2px #fff;
   width: 500px;
}

.box span:first-child {
    border: dotted 1px;
    margin-left: 30%;
    font-family: Arial, sans-serif;
    width: 50%;
}

.box span label:nth-of-type(odd)
{
    color:blue;
    font-family: Arial, sans-serif;
}

.box span label:nth-of-type(even)
{
    color: red;
    font-family: Arial, sans-serif;
    display: inline-block;
}

My concern is using css, I'm able to align the input controls but I have to use multiple break tags (<br />) and also extra code for alignment which is easier by simply using the <table> tag. Can someone suggest me the standard approach and either I'm on the right path or not?

Upvotes: 1

Views: 873

Answers (5)

Vaibhav Kumar
Vaibhav Kumar

Reputation: 544

Using table is not always good. One way to do is

   <div class="form-wrap">
     <h2>Login Form</h2>
     <div class="form-field">
       <label>User Name</label>
       <input type="text" value="" />
     </div>
     <div class="form-field">
       <label>Password</label>
       <input type="text" value="" />
     </div>
     <input type="button" value="Submit" />
    </div>

CSS:

.form-field label {
  width: 80px;
  display: inline-block;
}
.form-field {
  margin-bottom: 10px;
}

link to codepen

Upvotes: 1

sanjay
sanjay

Reputation: 226

@iSahilSharma Please find following code without using table. I hope you were expecting the same. A part from it just a suggestion that start using Bootstrap framework instead of using custom coding.

.main_container{
  	width:100%;	
  }
  .inner_box {
	 margin: 40px auto;
	 width: 30%;
  }
  
  .inner_box span{
	 clear: both;
	 display: block;
  }
  .inner_box span:first-child{
 	 margin-bottom:10px;
  }
  .inner_box span:nth-child(n+2){
  	margin-bottom:20px;
  }
<div class="main_container">
	<div class="inner_box">
            <span>Login Page</span>
            <span>
                <label>Username:</label>
                <input type="text" value="" />
            </span>
            <span>    
                <label>Password:</label>
                <input type="text" value="" />
            </span>
            <span>    
                
                <input type="button" value="Submit" />
            </span>
    </div> 
</div>

Upvotes: 1

user5341580
user5341580

Reputation:

As a small addition to the things that are said already, I would recommend you to consider an option to use a separate container for a single form control and its label. Like this:

<form>
    <div class="input-group">
        <label for="name">Username:</label>
        <input type="text" id="name" value="" />
    </div>
    <div class="input-group">
        <label for="password">Password:</label>
      <input type="text" id="password" value="" />
    </div>
</form>

Perhaps, one might say this is redundant, but from my perspective, it gives you more control during positioning. On the other hand, Michael Seltenreich is making a good point. I still find tables used for forms in many places, although I'd prefer to keep away from this method.

P.S. In case you want to spread labels and inputs horizontally, you would probably want to use flexboxes.

Upvotes: 1

shubham agrawal
shubham agrawal

Reputation: 3541

Although tables are a very good approach for forms but I prefer the much shorter and easier method ie CSS tables

Here is a code:

form {
  display: table;
}

p {
  display: table-row;
}

label {
  display: table-cell;
}

input {
  display: table-cell;
}
<form>
  <p>
    <label for="a">Short label:</label>
    <input id="a" type="text">
  </p>
  <p>
    <label for="b">Very very very long label:</label>
    <input id="b" type="text">
  </p>
</form>

Upvotes: 1

Michael Seltenreich
Michael Seltenreich

Reputation: 3488

Tables are not a good approach for many reasons, but tables ARE ideal for forms of the type you are trying to create.

Upvotes: 0

Related Questions