Solved

looking to organize a table layout

Posted on 2013-06-05
2
198 Views
Last Modified: 2013-06-12
    <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>

Open in new window


with using less tables
is there a method to use more div for this example
0
Comment
Question by:rgb192
2 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39224600
I have given you the answer on this question http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28146701.html#a39224595

You will have to write your own code, but in simple form if you have a table
<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

You can convert to all div's by using a grid system.  In this case I am  using bootstrap. http://twitter.github.io/bootstrap/index.html 
<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

In simple terms, each class with spanX (where X is a number 1 to 12) has at it's core a float:left with a margin to the right.  Then each has it's own width.
0
 

Author Closing Comment

by:rgb192
ID: 39241506
thanks
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…

808 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