#1
  1. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,653
    Rep Power
    171

    How can I convert this simple table to css?


    Hello;

    I need some help so I can start using pure css rather than tables. I currently use tables (for many reasons).
    Now I want to learn the css way but I am having a hard time! Little things like float do not work as I expect them to which is very strange!

    I appreciate if anyone could point my problem (by looking at my code).

    For example on this example below: How can I convert this table to pure css? Thank you.
    Code:
    <table style="margin: 50px auto; width:280px; background-color:#cccccc; padding:10px;">
    	<form>
    		<tr>
    			<td>Name</td>
    			<td><input type="text"></td>
    		</tr>
    		<tr>
    			<td>Email</td>
    			<td><input type="text"></td>
    		</tr>
    		<tr>
    			<td>Address</td>
    			<td><input type="text"></td>
    		</tr>
    		
    		<tr>
    			<td></td>
    			<td><input type="submit"></td>
    		</tr>
    	</form>
    </table>
    This is what I tried and failed:
    Code:
    <div style="margin: 50px auto; width:280px; background-color:#cccccc; padding:10px;">
    	<form>
    		<div style=" padding:3px; margin-top:2px;">
    			<span>Name</span>
    			<input type="text" style="float:right; clear:both">
    		</div>
    		
    		<div style=" padding:3px; margin-top:2px;">
    			<span>Email</span>
    			<input type="text" style="float:right; clear:both">
    		</div>
    		
    		<div style=" padding:3px; margin-top:2px;">
    			<span>Address</span>
    			<input type="text" style="float:right; clear:both">
    		</div>
    		
    		<div style=" padding:3px; margin-top:2px;">
    			<span></span>
    			<input type="submit" style="float:right; clear:both">
    		</div>
    	</form>
    </div>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    16
    Rep Power
    0
    You should try using the fieldset tag.
    PHP Code:
    <!doctype html>
    <
    html lang="en">
    <
    meta charset="utf-8">
    <
    head>
    <
    link rel="stylesheet" href="styles.css" />
    <
    title>Testing</title>
    <
    style>
    fieldset{
        
    displayinline-block;
    }
    </
    style>
    </
    head>
    <
    body>
    <
    form>
      <
    fieldset
        <
    legend>Your Form name</legend>
          <
    label for="name">Name</label>
          <
    input type="text" id="name"><br>
          <
    label for="email">Email</legend>
          <
    input type="text" id="email"><br>
          <
    input type ="submit" value="Submit">
          <
    input type ="submit" value="Cancel">

     </
    fieldset
    </
    form>
    </
    body>

    </
    html
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    Hi, this is the form I used on my recent site:

    Code:
    <form> 
      <fieldset>  
        <legend>Your Form name</legend> 
          <p><label for="name">Name:</label><input type="text" name="name" id="name" /></p> 
          <p><label for="email">Email:</label><input type="text" name="email" id="email" /></p>
          <input type ="submit" value="Submit"> 
          <input type ="reset" value="Reset"> 
     </fieldset>  
    </form>
    CSS:
    Code:
    form {text-align: left;
         width: 55%;
    	 margin: 2% 0% 2% 2%;
    	 float: left;}
    
    fieldset {border: 1px solid #000;
           background-color: #362911;}
    	  
    legend {border: 1px solid #000;
          background-color: #1d631d;
    	  padding: 3px 6px 3px 6px;
    	  font-size: 15px;
    	  font-weight: bold;
    	  text-decoration: underline;
    	  color: #fff;}
    	  
    label {width: 15%;
         float: left;
    	 text-align: right;
    	 margin-right: 1%;
    	 display: block;
    	 font-size: 13px;
    	 font-family: 'dejavu sans';
    	 color: #e8e8e8;
    	 padding-top: 0.4%;}
    	 
    input[type="text"] {border: 1px solid #000;
                      background-color: #1d631d;
    				  color: #fff;
    				  margin-right: 2%;}
    				  
    input[type="submit"]{border: 1px solid #000;
                       margin: 3% 2% 0% 16%;
    				   font-size: 14px;}
    				  
    input[type="reset"]{border: 1px solid #000;
    				  font-size: 14px;}
    				  
    input[type="text"]:focus {background-color: #238230;}
    Hope this helps, just style it as you wish. Also, remember that the 'for' attribute value in the <label> tag needs to match the 'id' of it's <input> element.

    Regards,

    NM.

IMN logo majestic logo threadwatch logo seochat tools logo