• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 231
  • Last Modified:

looking to organize a table layout

    <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
rgb192
Asked:
rgb192
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
rgb192Author Commented:
thanks
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now