Can this be done better

daggydoo Peon

Messages:: 12

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#1

I new at this and this is my first design I would like to know if this can be done better/ Is the code to long for what i have done so far? Can it be written better ? Any suggest thanks

<body>
<td style="padding-top: 12px" vAlign="top" align="right" height="200">
<div style="width: 721px; border: 3px dashed #000000; padding: 5px; background: #86d0f3; height:504px">
<img border="0" src="lake-oswego-back-bay-big.gif" width="167" height="122"><img border="0" src="sw-hills-2-big.gif" width="170" height="123"><img border="0" src="riveria_col.GIF" width="175" height="124"><img border="0" src="santa_ana_tree4956.GIF" width="185" height="123"><table cellSpacing="0" cellPadding="0" width="40%" align="right" border="0" id="table1">
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
<span style="color: #cc0000">*</span> <b>First Name:</b></td>
<td style="font-size: 8pt">
<input style="width: 160px" maxLength="100" name="txtLname"></td>
</tr><br>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
 </td>
<td style="font-size: 8pt">
 </td>
</tr><br>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
<span style="color: #cc0000">*</span> <b>Last Name:</b></td>
<td style="font-size: 8pt">
<input style="width: 160px" maxLength="100" name="txtLname"></td>
</tr><br>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
 </td>
<td style="font-size: 8pt">
 </td>
</tr>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
<span style="color: #cc0000">*</span> <b>Email:</b></td>
<td style="font-size: 8pt">
<input style="width: 160px" maxLength="100" name="txtLname"></td>
</tr>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
 </td>
<td style="font-size: 8pt">
 </td>
</tr>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
<span style="color: #cc0000">*</span> <b>Confirm
Email:</b></td>
<td style="font-size: 8pt">
<input style="width: 160px" maxLength="100" name="txtLname"></td>
</tr>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
 </td>
<td style="font-size: 8pt">
 </td>
</tr>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
<span style="color: #cc0000">*</span><b>Address:</b></td>
<td style="font-size: 8pt">
<input style="width: 160px" maxLength="100" name="txtLname"></td>
</tr>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
 </td>
<td style="font-size: 8pt">
 </td>
</tr>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
<span style="color: #cc0000">*</span> <b>City:</b></td>
<td style="font-size: 8pt">
<input style="width: 160px" maxLength="100" name="txtLname"></td>
</tr>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
 </td>
<td style="font-size: 8pt">
 </td>
</tr>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
<span style="color: #cc0000">*</span> <b>
County/State:</b></td>
<td style="font-size: 8pt">
<input style="width: 160px" maxLength="100" name="txtLname"></td>
</tr>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
 </td>
<td style="font-size: 8pt">
 </td>
</tr>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
<span style="color: #cc0000">*</span> <b>
Postcode/Zip:</b></td>
<td style="font-size: 8pt">
<input style="width: 160px" maxLength="100" name="txtLname"></td>
</tr>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
 </td>
<td style="font-size: 8pt">
 </td>
</tr>
<tr>
<td style="font-size: 9pt" noWrap align="right" width="120">
<span style="color: #cc0000">*</span><b>Country:</b></td>
<td style="font-size: 8pt">
<select style="width:165;height:22" name="country" valtype="mandatory" valmsg="Country is unselected.">
<option value=""></option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU" selected>Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaidjan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Banglades</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BO">Bolivia</option>
<option value="BA">Bosnia-Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian O. Terr.</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="BT">Buthan</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Rep.</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Isl.</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="CS">Czechoslovakia</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="TP">East Timor</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Isl.(Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="FX">France (European Ter.)</option>
<option value="TF">French Southern Terr.</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="UK">United Kingdom</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe (Fr.)</option>
<option value="GU">Guam (US)</option>
<option value="GT">Guatemala</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea Bissau</option>
<option value="GY">Guyana</option>
<option value="GF">Guyana (Fr.)</option>
<option value="HT">Haiti</option>
<option value="HM">Heard & McDonald Isl.</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="CI">Ivory Coast</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazachstan</option>
<option value="KE">Kenya</option>
<option value="KG">Kirgistan</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea (North)</option>
<option value="KR">Korea (South)</option>
<option value="KW">Kuwait</option>
<option value="LA">Laos</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macau</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique (Fr.)</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia</option>
<option value="MD">Moldavia</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="AN">Netherland Antilles</option>
<option value="NL">Netherlands</option>
<option value="NT">Neutral Zone</option>
<option value="NC">New Caledonia (Fr.)</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Isl.</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PF">Polynesia (Fr.)</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico (US)</option>
<option value="QA">Qatar</option>
<option value="RE">Reunion (Fr.)</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="LC">Saint Lucia</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SK">Slovak Republic</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="SU">Soviet Union</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SH">St. Helena</option>
<option value="PM">St. Pierre & Miquelon</option>
<option value="ST">St. Tome and Principe</option>
<option value="KN">St.Kitts Nevis Anguilla</option>
<option value="VC">St.Vincent & Grenadines</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard & Jan Mayen Is</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syria</option>
<option value="TJ">Tadjikistan</option>
<option value="TW">Taiwan</option>
<option value="TZ">Tanzania</option>
<option value="TH">Thailand</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad & Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks & Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UM">US Minor outlying Isl.</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="US">United States</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VA">Vatican City State</option>
<option value="VE">Venezuela</option>
<option value="VN">Vietnam</option>
<option value="VG">Virgin Islands (British)</option>
<option value="VI">Virgin Islands (US)</option>
<option value="WF">Wallis & Futuna Islands</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="YU">Yugoslavia</option>
<option value="ZR">Zaire</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select></td>
</tr>
<tr><TD align=right height=30> </TD>
<TD width="63%" height=30>
 </TD></TR>

<td style="font-size: 9pt" noWrap align="right" width="120">
<b>:</b></td>
<td style="font-size: 8pt">
 </td>
</tr>
</body>
</html>

daggydoo, Apr 25, 2008 IP

wd_2k6 Peon

Messages:: 1,740

Likes Received:: 54

Best Answers:: 0

Trophy Points:: 0

#2

Yes it could be made better via a tableless layout, meaning the use of no Tables at all.
A substitue for tables are div's, which are just seen as blocks and can be placed wherever need be. Then you can style these in an external CSS.
Why is this better, because it's more future-proof, and has better browser compatabiltiy as browsers choose different ways of styling there tables.
Also it provides cleaner code, and increases the chance of problem solutions within your layout as tables can be very tricky to fix!

wd_2k6, Apr 25, 2008 IP

seven7 Peon

Messages:: 14

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 0

#3

Tabless is obviously the better route to take, though sometimes with forms it can be easier (& semantically permissible) to use tables. However, same rules apply as with containers <div>'s ... take the formatting out of the document & into the stylesheet (css) & use valid code.

I presume that isn't the actually <body> of the document & just part of it?

seven7, Apr 26, 2008 IP

itcn Well-Known Member

Messages:: 795

Likes Received:: 31

Best Answers:: 0

Trophy Points:: 118

#4

If you must use a table, remove code like this:
<td style="font-size: 9pt" noWrap align="right" width="120">
Code (markup):
and move it to a style sheet
font-size: 9pt;
text-align: right;
width: 120px;
Code (markup):
etc, - you get the idea.

itcn, Apr 27, 2008 IP

Log in or Sign up

Can this be done better

daggydoo Peon

wd_2k6 Peon

seven7 Peon

itcn Well-Known Member

Useful Searches