From table tags to div and span

abdoukadri · #1 (**permalink**) Dec 5th, 2007, 03:24

Hi there,

I am planning to switch from TABLE tags to DIV and SPAN tags so we would have the same appearance.

For example the following code, How can I shift it to the DIV and SPAN tags and have the same appearance.

Code: Select all

<table>
  <tr>
     <td>Name:</td>
     <td><input /></td>
</tr>
<tr>
     <td>Last Name:</td>
    <td><input/ ></td>
<tr>
</table>

Thanks in Advance for any help and suggestions

Monie · #2 (**permalink**) Dec 5th, 2007, 08:26

There is a way you could do that in CSS, but it is not advisable and it is very complicated!
I have posted the same question here before and all of the professional developer/designer here suggest me to use table for this type of case

dab42pat · #3 (**permalink**) Dec 5th, 2007, 09:29

here is some code I use that is similar to your code above.

HTML: Select all

<fieldset>
  <legend>Contact Details</legend>
  <ol>
  <li>
  <label for="name">Name :</label>
  <input id="name" name="name" class="text" type="text" style="background-color:#CCCCCC"  /> 
  </li>
  <li>
  <label for="email">Email Address :</label>
  <input id="email" name="email" class="text" type="text" style="background-color:#CCCCCC"  /> 
  </li>
  <li>
  <label for="phone">Telephone :</label>
  <input id="phone" name="phone" class="text" type="text" style="background-color:#CCCCCC"  /> 
  </li></ol>  
  </fieldset>

And the CSS.

HTML: Select all

fieldset {
margin: 1.5em 0 0 0;
paddinng: 10px;
color:#878b38;
}
legend {
margin-left: 1em;
color:#878b38;
font-weight: bold;
font-size:14px;
}
fieldset ol {
padding: 1em 1em 0 1em;
list-style:none;
color:#878b38;
}
fieldset li {
padding-bottom: 1em;
color:#878b38;
}

label{
display:block;
color:#878b38;
font-weight: bold;
}

you can have a play around with it.

karinne · #4 (**permalink**) Dec 5th, 2007, 12:23

I've made a thread in the Beginners' Resources section about this

[CSS] Customize your form with CSS

Stuart · #5 (**permalink**) Dec 5th, 2007, 22:09

I use divs to format forms all the time. It's just a little annoying, that's all...

abdoukadri · #6 (**permalink**) Dec 5th, 2007, 22:50

Quote:

Originally Posted by swagner

I use divs to format forms all the time. It's just a little annoying, that's all...

BUT how you are using divs to format forms ? Any example if possible?

Thanks in Advance

Stuart · #7 (**permalink**) Dec 5th, 2007, 22:57

Well, I put the form <label> into a div, and the <input> into another div. Then, I put it all inside the <form>. Simple, really...

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Title Tags, Meta Tags and SEO - Keyword Density or Keyword Spamming?	pctank	Search Engine Optimization (SEO)	2	Jul 4th, 2008 11:52
Can <span></span> tags have position relative?	Oak	Web Page Design	13	Mar 9th, 2008 17:04
<SPAN> help	Access	JavaScript Forum	2	Nov 3rd, 2007 18:13
Div and Span tags...	jjgamepro17	Web Page Design	4	Nov 7th, 2006 19:22
Span questions	maxelcat	Web Page Design	2	Aug 7th, 2006 11:07

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
From table tags to div and span