I am creating 1 of 3 nested tables within the <form> tag in my HTML document. I inserted input fields to create the text boxes to the right of the text. That all works my only problem is that the following cells: "First Name, Last Name, Address, City, State, Zip Code, and County" are not directly under one another in such a way as to keep the cells aligned and the text boxes aligned. How do I align each section? I hope I am explaining this well if not please ask for further clarification. Any help on this minor problem would be greatly appreciated.
Here's my code so far so you can see what I did:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<img src="j0182695_downsized.jpg" alt="Oatmeal Raisin cookies" style="float: left" >
</head>
<body background="back-225.gif">
<h1 style="text-align: center; color: red; font-family: Arial, Helvetica, sans-serif;">Cookies</h1>
<table width="500" border="0">
<tr>
<td align="center">About Us</td>
<td align="center">Contact Us</td>
<td align="center">Place an Order</td>
<td align="center">Sample Recipe</td>
</tr>
</table>
<form name="Web Order Form" id="Web Order Form">
<table border="0" cellpadding="2" width="65%">
<tr>
<td>Personal Information</td>
</tr>
<tr>
<td>First Name:
<input name="fname" id="fname" size="30" type="text" />
</td>
</tr>
<tr>
<td>Last Name:
<input name="lname" id="lname" size="30" type="text" />
</td>
</tr>
<tr>
<td>Address:
<input name="address" id="address" size="30" type="text" />
</td>
</tr>
<tr>
<td>City:
<input name="city" id="city" size="35" type="text" />
</td>
</tr>
<tr>
<td>State:
<input name="state" id="state" size="3" type="text" />
</td>
</tr>
<tr>
<td>Zip Code:
<input name="zip" id="zip" size="10" type="text" />
</td>
</tr>
<tr>
<td>Country:
<input name="country" id="country" size="10" type="text" />
</td>
</tr>
</table>
</form>
Just put the input boxes in another cell like this:
<tr>
<td>First Name:</td>
<td><input name="fname" id="fname" size="30" type="text" /></td>
</tr>
If you make all your rows like that, then the labels and input boxes will line up.
I posted an answer to your question over at Doctype: http://doctype.com/create-nested-table-html.
You should really look into using DIV's & CSS instead of Tables and Inline Styling for designing websites.
The following is an example of separating content from presentation. You have two main components on the page: A navigation menu (which is a list of links) and a contact form (which consists of a list of form elements). The HTML stands on its own and would display reasonably even without any styling.
First, styles are reset using Yahoo!'s reset stylesheet to ensure that the starting point is the same regardless of browser-specific defaults. Then, specific styles are applied until the resulting display reasonably matches the requirements.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link id="screen-reset" rel="stylesheet" type="text/css" media="screen"
href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">
<style type="text/css">
html { background:#eef; font-size:18px;}
body { background:#eee; margin:0 auto; width:95%;}
#main { clear:both; }
#hmenu { background:#fed; height:2em }
#hmenu li {
background:#fed;
display:block;
float:left;
padding:0 4px;
border-left:solid 4px #dcb;
}
#hmenu a {
display:block;
font-family:sans-serif;
font-size:1.5em;
font-weight:bold;
line-height:1.3333;
text-decoration:none;
}
form { padding:1em 0; }
fieldset {
background:#fff;
border:solid 1px #222;
padding:0.5em 0;
margin:0 auto;
width:90%;
}
legend {
background:#eee;
padding:0.1667em;
}
form li {
clear:both;
display:block;
padding:1em 0;
}
form li label {
display:block;
float:left;
font-family:sans-serif;
font-weight:bold;
padding:0 0.25em 0 0;
text-align:right;
width:35%;
}
form li input[type="text"] {
display:block;
float:left;
}
form input[type="submit"] {
margin:0 0 0 35%;
}
</style>
<title>Contact Form</title>
</head>
<body>
<div id="hmenu">
<ul>
<li>About Us</li>
<li>Contact Us</li>
<li>Place an Order</li>
<li>Sample Recipe</li>
</ul>
</div>
<div id="main">
<form name="web-order-form" id="web-order-form">
<fieldset>
<legend>Personal Information</legend>
<ul>
<li><label for="fname">First Name: </label>
<input name="fname" id="fname" size="30" type="text"></li>
<li><label for="lname">Last Name: </label>
<input name="lname" id="lname" size="30" type="text"></li>
<li><label for="address">Address: </label>
<input name="address" id="address" size="30"
type="text"></li>
<li><label for="city">City: </label>
<input name="city" id="city" size="35" type="text"></li>
<li><label for="state">State: </label>
<input name="state" id="state" size="3" type="text"></li>
<li><label for="zip">Zip Code: </label>
<input name="zip" id="zip" size="10" type="text"></li>
<li><label for="country">Country: </label>
<input name="country" id="country" size="10"
type="text"></li>
<li><input type="submit" name="submit-order" id="submit-order"
value="Place Order"></li>
</ul>
</fieldset>
</form>
</div>
</body>
</html>
Simply put the inputs into tds of their own:
<tr>
<td>First Name:</td>
<td><input name="fname" id="fname" size="30" type="text" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input name="lname" id="lname" size="30" type="text" /></td>
</tr>
<tr>
<td>Address:</td>
<td><input name="address" id="address" size="30" type="text" /></td>
</tr>
And so on.
One easy option might be using flex style in table cell
<td style="display:flex">
<label>Flex</label>
<input type="text">
<input type="text">
</td>
It will show all elements in one row as long as there is enough space.
Related
I am trying to display image using css. But it is not display anyway. please help me. My code is :
//styles.css
table tr td span.glyphicon-eye-open{
background: url("../images/private-eye.png") no-repeat;
}
//Register.php
<form method="post" id="form1">
<table align="center" width="45%" cellpadding="7px">
<tr>
<td><label>*</label><input type="text" name="email" placeholder=" Your Email" value="<?=$email?>"/></td>
</tr>
<tr>
<td><label>*</label> <input type="password" name="pass" id="passwordfield" placeholder=" Your Password" value="<?=$password?>"/>
<span class="glyphicon-eye-open"></span>
</td>
<tr>
<td><button type="submit" name="btn_Register">Register</button></td>
</tr>
</table>
</form>
I also has included
'link rel="stylesheet" href="../css/styles.css" type="text/css" /'
in head with tags
That is because your span has no height at all. Every span has no height until you insert some text in it or edit its height via CSS. For example, I've put some text in here, like so:
span.glyphicon-eye-open {
background: url("http://beerhold.it/320/200") no-repeat;
color: #fff;
}
//Register.php
<form method="post" id="form1">
<table align="center" width="45%" cellpadding="7px">
<tr>
<td><label>*</label><input type="text" name="email" placeholder=" Your Email" value="<?=$email?>"/></td>
</tr>
<tr>
<td><label>*</label> <input type="password" name="pass" id="passwordfield" placeholder=" Your Password" value="<?=$password?>"/>
<span class="glyphicon-eye-open">###</span>
</td>
<tr>
<td><button type="submit" name="btn_Register">Register</button></td>
</tr>
</table>
</form>
Change this line
<span class="glyphicon-eye-open"></span>
to:
<span class="glyphicon-eye-open"> </span>
DEMO
span.glyphicon-eye-open {
background: url("http://previews.123rf.com/images/arnau2098/arnau20981503/arnau2098150300166/37873708-small-squares-background-color-Stock-Photo.jpg") no-repeat;
}
//Register.php
<form method="post" id="form1">
<table align="center" width="45%" cellpadding="7px">
<tr>
<td><label>*</label><input type="text" name="email" placeholder=" Your Email" value="<?=$email?>"/></td>
</tr>
<tr>
<td><label>*</label> <input type="password" name="pass" id="passwordfield" placeholder=" Your Password" value="<?=$password?>"/>
<span class="glyphicon-eye-open"> </span>
</td>
<tr>
<td><button type="submit" name="btn_Register">Register</button></td>
</tr>
</table>
</form>
It now works fine using following css code :
table tr td span.glyphicon-eye-open{
background: url("../images/private-eye.png");
background-repeat:no-repeat;
/*width:50px;
height:50px;*/
padding-left:15px;
padding-right:15px;
padding-bottom:2px;
}
try this one
.glyphicon-eye-open{
background: url("../images/private-eye.png");
background-repeat:no-repeat;
}
Make sure your css is included
I have tried using the method of making div's act like tables by using display" table; and display: table-cell; now for some reason my tables are not becoming of equal height, and im not sure as to why that is, here is what it looks like when I add in the css:
Here is when I don't:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" />
</head>
<body>
<form action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/cardApplication.cgi" method="post" id="application" name="application">
<fieldset>
<legend class="t"><img src="https://zenit.senecac.on.ca/~emile.ohan/int222/bank-logo.png"alt="Assignment #3" />Seneca Bank - Credit Card Application</legend>
<div class="clearfix parent">
<aside class="l child">
<fieldset>
<legend>Primary Applicant's Information</legend>
<table>
<tr>
<td>First Name*</td>
<td><input type="text" name="fName" id="fName" size="20" maxlength="20" autofocus="autofocus"></td>
</tr>
<tr>
<td>Surname*</td>
<td><input type="text" name="sName" id="sName" size="20" maxlength="30"></td>
</tr>
<tr>
<td>Date of Birth*</td>
<td><input type="text" name="dob" id="dob" size="10" maxlength="9" placeholder="MMMDDYYYY"></td>
</tr>
<tr>
<td>Email Address*</td>
<td><input type="text" name="email" id="email" size="20" maxlength="60"></td>
</tr>
<tr>
<td>Phone No.*</td>
<td><input type="text" name="phone" id="phone" size="20" maxlength="12"></td>
</tr>
</table>
</fieldset>
</aside>
<section class="s child">
<fieldset>
<legend>Primary Applicant's Address</legend>
<table>
<tr>
<td>Home Address*</td>
<td>Apt.</td>
</tr>
<tr>
<td><input type="text" name="address" id="address" size="30" maxlength="60"></td>
<td><input type="text" name="apt" id="apt" size="5" maxlength="4"></td>
</tr>
<tr>
<td><br />City* </td>
</tr>
<tr>
<td><input type="text" name="city" id="city" size="20" maxlength="40">
</tr>
<tr>
<td><br />Province*</td>
<td><br />Postal Code</td>
</tr>
<tr>
<td>
<select id="province" name="province" size="2">
<optgroup label="Province">
<option value="">(Select a Province)</option>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland & Labrador">Newfoundland & Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">PE</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
</optgroup>
<optgroup label="Territory">
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</optgroup>
</select>
</td>
<td>
<input type="text" name="postal" id="postal" size="8" maxlength="7" placeholder="ANA NAN">
</td>
</tr>
</table>
</fieldset>
</section>
<aside class="r child">
<fieldset>
<legend>Housing Status</legend>
<table>
<tr>
<td>Do you:</td>
<td>$Monthly Payment* </td>
</tr>
<tr>
<td><input type="checkbox" name="hStatus" id="s01" value="Own" />Own the property</td>
<td><input type="text" name="payment" id="payment" size="8" maxlength="6"></td>
</tr>
<tr>
<td><input type="checkbox" name="hStatus" id="s02" value="Rent" />Rent the property</td>
</tr>
<tr>
<td>Monthly Income*</td>
<td><input type="text" name="income" id="income" size="8" maxlength="6"></td>
</tr>
<tr>
<td>Years at current location*</td>
<td><input type="text" name="currYears" id="currYears" size="3" maxlength="2"></td>
</tr>
<tr>
<td>Pre-authorized Code*</td>
<td><input type="text" name="preCode" id="preCode" size="8"></td>
</tr>
</table>
</fieldset>
</aside>
</div>
<div class="clearfix parent">
<section class="s child">
<fieldset>
<legend>Reserved - See below</legend>
<p><b>If you submit your application with errors and/or omissions, a list of errors and/or omissions will show here. Make the corrections and re-submit.</b></p>
<p><b>If you continue to have a problem submitting your application, make a note of the Reference No. and call us at 1-800-010-2000.</b></p>
</fieldset>
</section>
<aside class="l child">
<fieldset>
<legend>Credit Check / Email Consent</legend>
<p><b>I consent to have a credit check performed</b></p>
<input type="checkbox" name="creditCheck" id="c01" value="Yes" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" />No
<br />
<p><b>I consent to have email messages sent to me</b></p>
<input type="radio" name="emailConsent" id="m01" value="Yes" />Yes
<input type="radio" name="emailConsent" id="m02" value="No" />No
<br />
Submitted on:
<script>
var d = new Date();
document.write(d.toDateString());
</script>
Ref. # <input type="text" name="refNo" id="refNo" size="8" readonly="readonly"> <br />
<!--Submit Application--> <input type="submit" value="Submit Application">
<!--Start Over--> <input type="reset" value="Start Over">
<input type="hidden" name="hName" id="hName" value="Mahmood"> <br />
<input type="hidden" name="hId" id="hId" value="int222_162d16"> <br />
</fieldset>
</aside>
</div>
</fieldset>
</form>
<footer class=f>
My zenit Account My JavaScript My CSS My Honesty
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
</script>
</footer>
</body>
</html>
CSS:
footer.f
{
text-align: center;
}
legend
{
border: 4px groove #ff0000;
background-color: #9999ff;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
padding: 15px;
text-shadow:0.1em 0.1em 0.01em #333;
}
legend.t
{
vertical-align: top;
}
fieldset
{
border-color:#F00;
border-style: solid;
}
html, body
{
max-width: 100%;
/*overflow-x: hidden;*/
margin:0;
}
aside.r
{
float: right;
width: 31%;
margin: 1%;
}
aside.l
{
float: left;
width: 31%;
margin: 1%;
}
section.s /*shadow on sections*/
{
width: 31%;
margin: 1%;
display: inline-block;
}
.clearfix:before,
.clearfix:after
{
content: " ";
display: table;
}
.clearfix:after
{
clear: both;
}
/**
* For IE 6/7 only
*/
.clearfix
{
*zoom: 1;
}
table
{
border-spacing: 5px;
border-collapse:separate;
}
.parent
{
display: table;
}
.child
{
display: table-cell;
}
In the code that you have provided some tags are not closed
<tr>
<td><input type="text" name="city" id="city" size="20" maxlength="40"> <!-- Missing </td> -->
</tr>
and here add double quotes on the class
<footer class=f> <!-- <footer class="f"> -->
I tried putting float: right for textboxes (input text) and it aligned the boxes properly but I texts gets misaligned and the add book button as well. How can i fix it? Thanks.
<div id="add_div">
<form method="POST" action="add.php">
<!--start of form -->
<label>Enter Author Name</label>
<input type="text" name="author">
<br />
<label>Enter Book Title</label>
<input type="text" name="title">
<br />
<label>Enter Year Levels</label>
<input type="text" name="yrLevel">
<br />
<label>Enter ISBN</label>
<input type="text" name="isbn">
<br />
<label></label>
<input type="submit" name="add" value="Add Book">
<br />
</form>
<!-- end of form -->
</div>
My CSS below
#add_div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input {
display:inline-block;
margin: 1px;
}
A simple solution would be to change the display to inline-block instead of floating:
label, input {
display:inline-block;
width:150px;
}
<div id="add_div">
<form method="POST" action="add.php">
<!--start of form -->
<label>Enter Author Name</label>
<input type="text" name="author">
<br />
<label>Enter Book Title</label>
<input type="text" name="title">
<br />
<label>Enter Year Levels</label>
<input type="text" name="yrLevel">
<br />
<label>Enter ISBN</label>
<input type="text" name="isbn">
<br />
<label></label>
<input type="submit" name="add" value="Add Book">
<br />
</form>
<!-- end of form -->
</div>
You can add everything to a table and set border="0" so you can't see it. This will keep everything together since all of the content belongs to the table element.
See Fiddle here: https://jsfiddle.net/2Lzo9vfc/100/
label, input {
display:inline-block;
width:150px;
}
<div id="add_div">
<form method="POST" action="add.php"> <!--start of form -->
<table padding="1" border="0">
<tr>
<td>
<label> Enter Author Name</label>
</td>
<td>
<input type="text" name="author">
</td>
</tr>
<tr>
<td>
<label> Enter Book Title </label>
</td>
<td>
<input type="text" name="title">
</td>
</tr>
<tr>
<td>
<label> Enter Year Levels </label>
</td>
<td>
<input type="text" name="yrLevel">
</td>
</tr>
<tr>
<td>
<label> Enter ISBN </label>
</td>
<td>
<input type="text" name="isbn">
</td>
</tr>
<tr>
<td>
 
</td>
<td align="right">
<input type = "submit" name="add" value="Add Book">
</td>
</tr>
</table> <br/>
</form> <!-- end of form -->
</div>
This may help-
input {
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
vertical-align:middle;
}
label {
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
float: left;
text-align: left;
}
I was trying to make a form with a username, password and an email. But for some reason the input text or the box for email isn't aligned with the boxes for the username and the password. I was wondering if there's a way to make them all align each other.
<form>
<label for="username">Username</label>
<input type="text" id="username" name="username" maxlength="30"><br><br>
<label for="password">Password</label>
<input type="password" id="password" name="password"><br><br>
<label for="email">Email</label>
<input type="email" id="email" name="email" maxlength="30">
<br>
<input type="submit" value="Register">
</form>
It's just for the sake of making everything look nice and pretty.
Oh man... Tables?? HTML from '90s incoming!
<style>
label {
width: 80px;
display: inline-block;
}
</style>
<form>
<label for="username">Username</label>
<input type="text" id="username" name="username" maxlength="30"><br><br>
<label for="password">Password</label>
<input type="password" id="password" name="password"><br><br>
<label for="email">Email</label>
<input type="email" id="email" name="email" maxlength="30">
<br>
<input type="submit" value="Register">
</form>
I went for a different approach than a table, since if your are going to table up your form, I suggest you use a solid css framework, which is simply better.
This is the approach of CSS only A Cool Fiddle
form {
width: 80%;
margin: 0 auto;
}
label, input {
/* in order to define widths */
display: inline-block;
}
label {
width: 30%;
/* positions the label text beside the input */
text-align: right;
}
label + input {
width: 30%;
/* large margin-right to force the next element to the new-line
and margin-left to create a gutter between the label and input */
margin: 0 30% 0 4%;
}
/* only the submit button is matched by this selector,
but to be sure you could use an id or class for that button */
input + input {
float: right;
}
input[type="submit"]{
margin: 4% 40%;
}
With all that said, I also suggest you change the old way of forms being written with label values to placeholder.
for more reference Placeholders are cool!
<form>
<table>
<tr> <td> <label for="username">Username</label> </td> <td> <input type="text" id="username" name="username" maxlength="30"> </td> </tr>
<tr> <td> <label for="password">Password</label> </td> <td> <input type="password" id="password" name="password"></td> </tr>
<tr> <td> <label for="email">Email</label> </td> <td><input type="email" id="email" name="email" maxlength="30"></td> </tr>
<tr> <td></td> <td> <input type="submit" value="Register"> </td> </tr>
</table>
</form>
should work, just surroundet it with a table.
<table>
<form>
<tr>
<td> <label for="username">Username</label></td>
<td> <input type="text" id="username" name="username" maxlength="30"> </td>
</tr>
<tr>
<td><label for="password">Password</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" id="email" name="email" maxlength="30"></td>
</tr>
<tr>
<td><input type="submit" value="Register"></td>
</tr>
</form>
</table>
It is always a good practice to make any form in either a Table or in a Div.
I understand css and have an external file, but I don't know how to move everything from this poll to the css file. The poll is under the div id "poll" so anything I change in css will affect the entire poll instead of specific parts. Can I split the question of the poll and the answers into separate divs or is there a better way to re-write the code?
I know that the poll still works but I like to be organized and the validator is showing many errors because of this.
<div id="poll">
<form method="post" action="http://poll.pollcode.com/t78ar8">
<table>
<tr>
<th colspan="2">What game site do you visit most?</th>
</tr>
<tr>
<td>
<input type="radio" name="answer" value="1" id="t78ar8answer1">
</td>
<td> <font face="Tahoma" size="2" color="000000"><label for="t78ar8answer1">Ign</label></font>
</td>
</tr>
<tr>
<td width="5">
<input type="radio" name="answer" value="2" id="t78ar8answer2">
</td>
<td>
<label for="t78ar8answer2">GameSpot</label>
</td>
</tr>
<tr>
<td width="5">
<input type="radio" name="answer" value="3" id="t78ar8answer3">
</td>
<td> <font face="Tahoma" size="2" color="000000"><label for="t78ar8answer3">GameFAQs</label></font>
</td>
</tr>
<tr>
<td width="5">
<input type="radio" name="answer" value="4" id="t78ar8answer4">
</td>
<td> <font face="Tahoma" size="2" color="000000"><label for="t78ar8answer4">GamerZone</label></font>
</td>
</tr>
<tr>
<td width="5">
<input type="radio" name="answer" value="5" id="t78ar8answer5">
</td>
<td> <font face="Tahoma" size="2" color="000000"><label for="t78ar8answer5">Mmohut</label></font>
</td>
</tr>
<tr>
<td colspan="2" height="10">
<center>
<input type="submit" value=" Vote ">
<input type="submit" name="view" value=" View ">
</center>
</td>
</tr>
</a> </font>
</td>
</tr>
</table>
</form>
</div>
Here's the jsfiddle http://jsfiddle.net/qX3Jp/ for a visual. Also, I know the code's format isnt right. I did that because it was all in one line and harder to read. If any additional information is needed, please ask before rejecting my question. Thanks
Here is a jsfiddle showing how i would do it. without a table because I hate tables and think that the only time they should be used is to display data and never for page layout.
also all of the styling has been separated from the markup.
for those too lazy to click the link... here is the code.
HTML:
<div id="poll">
<form method="post" action="http://poll.pollcode.com/t78ar8">
<h2 id="title">What game site do you visit most?</h2>
<div id="radio_btns">
<input type="radio" name="answer" value="1" id="t78ar8answer1">Ign<br />
<input type="radio" name="answer" value="2" id="t78ar8answer2">GameSpot<br />
<input type="radio" name="answer" value="3" id="t78ar8answer3">GameFAQs<br />
<input type="radio" name="answer" value="4" id="t78ar8answer4">GamerZone<br />
<input type="radio" name="answer" value="5" id="t78ar8answer5">Mmohut
</div>
<div id="submit_btns">
<input type="submit" value=" Vote ">
<input type="submit" name="view" value=" View ">
</div>
</form>
</div>
CSS:
#poll {
margin: 30px 0px 0px 5px;
font-family: Tahoma;
}
#radio_btns {
margin-bottom: 5px;
font-size: 13px;
}
#radio_btns input {
margin: 5px 10px 5px 5px;
}
#title {
margin-bottom: 3px;
font-size: 13px;
}
#submit_btns {
margin: 0px 0px 0px 60px;
}
notice that I broke the markup into sections and gave them ID's to make the CSS styling easier.
I went full form and removed what I see as unnecessary elements: tables + more. I put the font information in the body tag. Everything else in the CSS is layout related.
CSS:
* {
padding:0;
margin:0;
}
body {
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
color:#000;
}
label {
display:block;
}
fieldset {
border:none;
text-align:center;
}
legend {
font-weight:bold;
}
HTML:
<form method="post" action="http://poll.pollcode.com/t78ar8" id="poll">
<legend>What game site do you visit most?</legend>
<label for="t78ar8answer1"><input type="radio" name="answer" value="1" id="t78ar8answer1"> Ign</label>
<label for="t78ar8answer2"><input type="radio" name="answer" value="2" id="t78ar8answer2"> GameSpot</label>
<label for="t78ar8answer3"><input type="radio" name="answer" value="3" id="t78ar8answer3"> GameFAQs</label>
<label for="t78ar8answer4"><input type="radio" name="answer" value="4" id="t78ar8answer4"> GamerZone</label>
<label for="t78ar8answer5"><input type="radio" name="answer" value="5" id="t78ar8answer5"> Mmohut</label>
<fieldset>
<input type="submit" value=" Vote ">
<input type="submit" name="view" value=" View ">
</fieldset>
</form>