rgb192
asked on
change from table layout to div layout
<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>
this table layout is confusing. How can I change to div layout
ASKER
I went to website and do not understand how I can implement 'grid' for the code that I have
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I almost understand blueprint
the example by AhmedGeek is very organized and streamlined
thanks
the example by AhmedGeek is very organized and streamlined
thanks
"this table layout is confusing. How can I change to div layout".
The answer by AhmedGeek is still a table?
Thanks for the points.
The answer by AhmedGeek is still a table?
Thanks for the points.
It works like this.
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.