Solved

change from table layout to div layout

Posted on 2013-06-03
6
348 Views
Last Modified: 2013-06-05
<table  cellpadding="10" cellspacing="0" width=740>
      <tr>
        <td valign="center" bgcolor="#000000" width="20" align="right">
        <!-- empty placeholder cell -->
        </td>
        <td valign="top" bgcolor="#000000"  colspan=3>
        <img src=step1b.gif>

        <img src=step2b.gif>

        <img src=step3.gif>
          
        <img src=step4b.gif>
        <br>
        </td>
        <td>          
        </td>
      </tr>    
      <tr>
        <td>
        <!-- empty placeholder cell -->
        </td>
        <td colspan=5 >
          <font style="color:454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;font-family:arial, helvetica, sans-serif;line-height:1;">
          <br>
          <br>
          DECLARE GUESTS AND SELECT MENU OPTIONS
          </font>
          <BR>
            <table  width=600 cellpadding=0 cellspacing="0">
              <tr>
                <td >
                  <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                  <br>


                  </font>
                </td>
              </tr>
              <tr>
                <td  >
                  <br>
                  <font face=arial color=ffffff size="3" style="line-height:2;">  
                  Guest Name
                  </font>
                  <br>
                  <br>                  
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            AMUSE BOUCHE
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            First
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Second
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Notes
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Cauliflower Toast</option>
                              <option value="monday">Cocktails</option>
                              <option value="monday">Bottle Service</option>
                            </select>
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Scallops</option>
                            </select>
                          </td>
                          <td>
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Dry-Aged Sirloin</option>
                              <option value="monday">08</option>
                              <option value="monday">09</option>
                            </select>
                          </td>
                          <td>
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                        </tr>
                    </table>
                    <br>
                    <br>
                </td>
              </tr>
              <tr>
                <td >
                  <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                  <br>
                  

                  </font>
                </td>
              </tr>
              <tr>
                <td  >
                  <br>
                  <font face=arial color=ffffff size="3" style="line-height:2;">  
                  Guest 1
                  </font>
                  <br>
                  <br>
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            First Name
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Last Name
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Email
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                          <td>
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>

                        </tr>
                    </table>
                    <br>
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            AMUSE BOUCHE
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            First
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Second
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Notes
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Cauliflower Toast</option>
                              <option value="monday">Cocktails</option>
                              <option value="monday">Bottle Service</option>
                            </select>
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Scallops</option>
                            </select>
                          </td>
                          <td>
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Dry-Aged Sirloin</option>
                              <option value="monday">08</option>
                              <option value="monday">09</option>
                            </select>
                          </td>
                          <td>
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                        </tr>
                    </table>
                    <br>
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Is this guest a child
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <input type=checkbox  name="dinner_days" size="1">
                            </input>
                          </td>
                        </tr>
                    </table>
                    <br>
                    <br>
                </td>
              </tr>
            </table>



            
        </td>
      </tr>
      <tr>
        <td valign="center" bgcolor="#000000" width="40" align="right">
        <!-- empty placeholder cell -->
        </td>
        <td valign="top" bgcolor="#000000" align="center" colspan="5">
          <input class="rounded"  type="submit" value="Declare Guests and Select Menu Options">
          </input>

        </td>
      </tr>
    </table>

Open in new window



this table layout is confusing.  How can I change to div layout
0
Comment
Question by:rgb192
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39217946
Your best bet is to use a grid system.  I like http://twitter.github.io/bootstrap/index.html or http://foundation.zurb.com/  In addition to their grid, there a lot of other goodies to make it easy to account for multiple devices.  If you want something more straight forward http://blueprintcss.org is just an easy grid, nothing fancy.

It works like this.
<div class="span12">I'm a header</div>
<div class="span12">
    <div class="span4">Left side</div>
    <div class="span4">The Man In Middle - 23</div>
    <div class="span4">Right Side</div>
</div>
<div class="span12">I'm a footer</div>

Open in new window


The core of the grid is simply adding a float:left and padding right to each div.  Each number 1-12 has it's own width.  Grids come in more then 12 columns but 12 seems to be the thing right now.  I think blueprint is 24.  It's color by numbers.
0
 

Author Comment

by:rgb192
ID: 39217962
I went to website and do not understand how I can implement 'grid' for the code that I have
0
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 100 total points
ID: 39217990
I'm not going to write your code for you. I can help you with questions.

If you have a table that has 3 rows where the top is the header, the middle is 3 columns and the bottom is a footer you end up with:
<table>
<tr><td colspan="3">header</td></tr>
<tr><td>left</td><td>middle</td><td>right</td></tr>
<tr><td colspan="3">footer</td></tr>
</table>

Open in new window

This table match's my code above.

Just take it in parts.  I would strongly suggest learning on a site like http://www.codecademy.com/tracks/web or http://www.w3schools.com/html/ and spend a couple of hours.  I would also suggest starting with blueprint as that will be easier.  But first learn the basics.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 4

Accepted Solution

by:
Ahmed Hussein earned 400 total points
ID: 39218738
<style>
	.header{
		width:632px;
		padding-left: 60px;
		background: #000000;
		height: 45px;
	}
	.header img{
		vertical-align: middle;
	}
	.content {
		width:680px;
		margin-left: 60px;
	}
	
	.footer{
		width:740px;
		padding-left: 40px;
		background: #000000;
		height: 46px;
		text-align: center;
	}
	.footer input{
		margin-top: 10px;
	}
</style>

<div class="header"><img src=step1b.gif>

        <img src=step2b.gif>

        <img src=step3.gif>
          
        <img src=step4b.gif></div>
<div class="content">
    <font style="color:454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;font-family:arial, helvetica, sans-serif;line-height:1;">
          <br>
          <br>
          DECLARE GUESTS AND SELECT MENU OPTIONS
          </font> <BR>
            <table  width=600 cellpadding=0 cellspacing="0">
              <tr>
                <td >
                  <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                  <br>


                  </font>
                </td>
              </tr>
              <tr>
                <td  >
                  <br>
                  <font face=arial color=ffffff size="3" style="line-height:2;">  
                  Guest Name
                  </font>
                  <br>
                  <br>                  
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            AMUSE BOUCHE
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            First
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Second
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Notes
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Cauliflower Toast</option>
                              <option value="monday">Cocktails</option>
                              <option value="monday">Bottle Service</option>
                            </select>
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Scallops</option>
                            </select>
                          </td>
                          <td>
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Dry-Aged Sirloin</option>
                              <option value="monday">08</option>
                              <option value="monday">09</option>
                            </select>
                          </td>
                          <td>
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                        </tr>
                    </table>
                    <br>
                    <br>
                </td>
              </tr>
              <tr>
                <td >
                  <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                  <br>
                  

                  </font>
                </td>
              </tr>
              <tr>
                <td  >
                  <br>
                  <font face=arial color=ffffff size="3" style="line-height:2;">  
                  Guest 1
                  </font>
                  <br>
                  <br>
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            First Name
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Last Name
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Email
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                          <td>
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>

                        </tr>
                    </table>
                    <br>
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            AMUSE BOUCHE
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            First
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Second
                            </font>
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Notes
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Cauliflower Toast</option>
                              <option value="monday">Cocktails</option>
                              <option value="monday">Bottle Service</option>
                            </select>
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Scallops</option>
                            </select>
                          </td>
                          <td>
                            <select class="rounded3"  name="dinner_days" size="1">
                              <option value="monday">Dry-Aged Sirloin</option>
                              <option value="monday">08</option>
                              <option value="monday">09</option>
                            </select>
                          </td>
                          <td>
                            <input class="rounded"  name="dinner_days" size="25">
                            </input>
                          </td>
                        </tr>
                    </table>
                    <br>
                    <table>
                        <tr>
                          <td>
                          <!-- empty placeholder cell -->
                          </td>
                          <td>
                            <font style="color:#454545 ;text-decoration: none; text-transform:uppercase; font-weight:normal;letter-spacing:1pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;">
                            Is this guest a child
                            </font>
                          </td>
                        </tr>
                        <tr>
                          <td valign="center" bgcolor="#000000" width="20" align="right">
                          <!-- empty placeholder cell -->
                          </td>
                          <td valign="top" bgcolor="#000000">
                            <input type=checkbox  name="dinner_days" size="1">
                            </input>
                          </td>
                        </tr>
                    </table>
                    <br>
                    <br>
                </td>
              </tr>
            </table>
</div>
<div class="footer"> <input class="rounded"  type="submit" value="Declare Guests and Select Menu Options">
          </input></div>

Open in new window

0
 

Author Closing Comment

by:rgb192
ID: 39224561
I almost understand blueprint

the example by AhmedGeek is very organized and streamlined
thanks
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39224595
"this table layout is confusing.  How can I change to div layout".
The answer by AhmedGeek is still a table?
Thanks for the points.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question