htmlとcssでテーブルを使わないテキストの整列

Question

私は、HTMLとCSSを学び、3つの入力コントロール（2つのテキストと1つのボタン）でログインページを作成することで旧式のアプローチを使用しようとしています。しかし、私は<table></table>をテキストボックスのアライメントの問題に使用しています。しかし、私はどこかでテーブルを使用することは良いアプローチとは考えられていないと読んだ。これは私がやっているものです：

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> 

しかし、私はテーブルを使用せずに入力コントロールを整列するためにCSSのいくつかの初心者のものを使用していますし、これは私が」とは何ですかメートルしよう：

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; 
} 

私の関心は、CSSを使用している、私は、入力コントロールを配置することが、私は、複数の改行タグ（<br />）を使用する必要があり、また、余分なコードの位置合わせのためにどの単に<table>タグを使用すると簡単です。誰かが私に標準的なアプローチを提案することができますか、私は正しい道にいるかどうか？

Answer 1

@iSahilSharma表を使用せずに次のコードを見つけてください。私はあなたが同じことを期待していたと思います。その部分は、カスタムコードを使用する代わりにBootstrapフレームワークを使用し始める提案です。

.main_container{ 
 
    \t width:100%; \t 
 
    } 
 
    .inner_box { 
 
\t margin: 40px auto; 
 
\t width: 30%; 
 
    } 
 
    
 
    .inner_box span{ 
 
\t clear: both; 
 
\t display: block; 
 
    } 
 
    .inner_box span:first-child{ 
 
    \t margin-bottom:10px; 
 
    } 
 
    .inner_box span:nth-child(n+2){ 
 
    \t margin-bottom:20px; 
 
    }

<div class="main_container"> 
 
\t <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>

Answer 2

テーブルは、さまざまな理由から優れたアプローチではありませんが、テーブルは作成しようとしているタイプのフォームに最適です。

Answer 3

テーブルは、フォームのために非常に良い方法ですが、私はここでCSS tables

すなわち、はるかに短いと簡単に方法を好むが、コードです：少量の添加として

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>

Answer 4

既に言われていることに、単一のフォームコントロールとそのラベルに別のコンテナを使用するオプションを検討することをお勧めします。このように：

<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> 

おそらく、これは重複していると言えるかもしれませんが、私の見解からすれば、ポジショニング時のコントロールが向上します。一方、Michael Seltenreichは良い点を作っています。私はまだ多くの場所でフォームに使われているテーブルを見つけていますが、私はこの方法を避けたいと思います。

P.S.ラベルや入力を水平方向に広げたい場合は、たぶんフレックスボックスを使いたいでしょう。

Answer 5

テーブルを使用することは常に良いではありません。行うための一つの方法は

<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です：あなたはスペースが必要な場合codepen