Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

HTML/CSS Tutorials

Tables and Forms

Simple Tables and Forms:

Here's what we're going to do...we're going to make a new page. Make sure you have your page saved and then choose FILE>SAVE AS, and save your file as 'contactUs.html'. Now highlight everything after <h1> How it Started</h1> to just after the closing </p> tag of the last paragraph of the page. Hit the delete button to erase it. You should end up with this in the <body> section of your page:

<body>
   <div id="wrapper">
      <div id="header"><img src="http://photos.bravenet.com/166/366/683/3/4B3DA81507.gif" border="0"></div>
      <!--here is my navigation -->
      <ul id="horizNav">
         <li><a href="index.html">Home</a></li>
         <li><a href="aboutUs.html">About Us</a></li>
         <li><a href="contactUs.html">Contact Us</a></li>
         <li><a href="favoriteLinks.html">Our Favorite Links</a></li><br>
      </ul>
      <!--this is the section on how I found billie -->
      <div class="column">
         <h1>How it Started</h1>
         <!-our content was here but we have deleted it and will add different content for our new page -->
      </div>
      <hr style="clear: left; margin-top: 20px; color: #8e9675; width: 100%; height: 1px;">
      <ul id="footerNav">
         <li><a href="index.html">Home</a>  |</li>
         <li><a href="aboutUs.html">About Us</a>  |</li>
         <li><a href="contactUs.html">Contact Us</a>  |</li>
         <li><a href="favoriteLinks.html">Our Favorite Links</a>  |</li>
         <li><a href="mailto:myemail@addie.com">Email me</a></li><br>				
      </ul>
   </div>
</body>

We are going to build a form to allow people to contact you, and house it within a table. Notice that I've left an <h1> tag. We're going to change the title to "contact us' and override the style to give it the full width of the page.

Table Structure:

It is important to note that we have separate tutorials for both Tables and Forms. If you are a beginner, I would suggest that you read these first. If you have some familiarity, or are just feeling confident, by all means, continue here.

Tables are elements used to structure tabular data which means data that has a relationship and needs structuring to show that relationship. Consider this example of tabular data:

Average red
eyes
heightweight
males1.90.00340%
females1.70.00243%

Now it doesn't have to be scientific data, and you will find that tables can be used to structure your page, but that is not their intended purpose. We are going to use a table to structure our form data. A form is not really tabular data but in this instance we are going to use a table because we are beginners and I don't want to scare you off by getting too advanced with CSS and forms right now. You will evolve into a CSS based layout eventually, but for now, let's get the basics down first.

Here is the basic structure and syntax for a very simple table:

<table>
   <tr>
      <th>table cell #1 header</th>
      <th>table cell #2 header</th>
   </tr>
   <tr>
      <td>table cell #1 contents</td>
      <td>table cell #2 contents</td>
   </tr>   
</table>

Tables are comprised of four main tags but there are others:

  • <table></table> - Opening and closing table tags
  • <tr></tr> - Opening and closing table row tags - structures table cells into rows
  • <th></th> - Opening and closing table header tags - centers and bolds text as a display header
  • <td></td> - Opening and closing table data tags - to structure your table contents

Let's look at the preceding table example with data relevant to what we wish to accomplish:

Please feel free to contact me!
First Name:Our form element

HINT: You can put anything you want inside table data cells! Including text, links, images, form elements, and even another table if you like. You can add borders, spacing, padding, and a width to your table tag to style it the way you would like:

<table border="0" cellspacing="0" cellpadding="2" width="500">

  • border tells the table how large the border should be
  • cellspacing gives the amount of space between cells
  • cellpadding give the amount of padding between the table cells and the cell contents

In the following example we have given a cellpadding of '2' so that our table contents aren't so jammed together. We have also used one of two very important attributes "colspan" on the first table data cell. The colspan attribute tells our table that this cell is going to span over the distance of two cells.

Please feel free to contact me!
First Name:Our form element

You can also declare the attribute "rowspan" on a data cell (<td>), but it doesn't make sense for us to do so.

Please feel free to contact me!
First Name:Our form element
Last Name:Our form element

Let's make a table with the information we want to display and then fill in the values for our form later. You can style the table using CSS the same way you would style other elements. We're going to skip onto forms now, and we'll style the whole thing at the end.

Please feel free to contact me! (This <th> has a colspan="2" on it)
First Name:Our form element
Last Name:Our form element
How did you find us?Our form element
Enter your Comments:Our form element

Adding a simple form to our table:

We're going to add a simple form here for people to be able to contact you. If you want to explore forms further, read our forms tutorials. I'll show you the code, and then explain it to you.

<form method="post" action="mailto:youremail@yourdomain.com?subject=subjectOfYourEmail" id="emailForm">
   <input class="fieldStyle" type="text" name="fname">
   <input class="fieldStyle" type="text" name="lname">
   <input class="fieldStyle" type="checkbox" name="sengine" style="border: 0px">
   <input class="fieldStyle" type="checkbox" name="word" style="border: 0px">
   <input class="fieldStyle" type="checkbox" name="other" style="border: 0px">
   <textarea class="fieldStyle" name="comments" style="width: 300px; height: 200px;"></textarea>
   <input type="submit" value="submit" style="margin-right: 20px; width: 60px;">
   <input type="reset" value="reset" style="margin-right: 20px; width: 60px;">
</form>

Because we aren't teaching any scripting language here, the best we can do is mail the form contents to ourself. We do this through the action attribute of the form tag just like we did with the mailto: link.

The method attribute defines how our data will be handled and in this case we will need to use 'post'. For more explanation on this see our forms tutorials.

I have chosen to use several different form elements in this tutorial including; text input fields, checkboxes, a text-area, and buttons including submit and reset.

You can see that the text input and the checkbox both use the <input> field and are defined by the type attribute but the text-area is distinct.

Now let's see how our form and our table will interact:

Please feel free to contact me!
First Name:
Last Name:
How did you find us? Search Engine: Word of Mouth: Other:
Enter your Comments:

TIP: you can align the contents of your cells both vertically and horizontally, just add one of the following to your <td> tag, you can also set a global style in your style sheet if you want all cell contents to be aligned a certain way:

Horizontally:
align="left"
align="right"
align="center"
Vertically:
valign="top"
valign="middle"
valign="bottom"
Style Sheet:
td {vertical-align: top;} (or middle, or bottom)
td {text-align: left} (or center, or right)

Here is the code for our table containing our contact form:

<form method="post" action="mailto:youremail@yourdomain.com?subject=subjectOfYourEmail" id="emailForm">
   <table cellpadding="2" cellspacing="0" border="1" width="430">
      <tr>
         <th colspan="4">Please feel free to contact me!</th>
      </tr>
      <tr>
         <td width="120">First Name:</td>
         <td colspan="3"><input class="left" type="text" name="fname" style="width: 300px;"></td>
      </tr>
      <tr>
         <td>Last Name:</td>
         <td colspan="3"><input class="left" type="text" name="lname" style="width: 300px;"></td>
      </tr>
      <tr>
         <td>How did you find us?</td>
         <td>Search Engine: <input type="checkbox" name="sengine" style="border: 0px"></td>
         <td>Word of Mouth: <input type="checkbox" name="word" style="border: 0px"></td>
         <td>Other: <input type="checkbox" name="other" style="border: 0px"></td>
      </tr>
      <tr>
         <td valign="top">Enter your Comments:</td>
         <td colspan="3"><textarea class="left" name="comments" style="width: 300px; height: 200px;"></textarea></td>
      </tr>
      <tr>
         <td colspan="4" align="right"><input type="submit" value="submit" style="margin-right: 20px; width: 60px;"><input type="reset" value="reset" style="margin-right: 20px; width: 60px;"></td>
      </tr>
   </table>
</form>

Can you remove the inline styles and put them in your style sheet?

We have one last thing to modify in our styles, and that is the class name of 'column'. We're going to 'stack' class names here, that means that we'll leave 'column' add a space after it, but within the quotations, and add 'contact', like this:

<div class="column contact">

The reason we're going to do this is because we no longer want two columns but rather, only one. We can add a new width to the class 'contact' that will take the whole available space. Because we have called 'column' first, we will still get all of the styles associated with that class, but by calling 'contact' afterwards, we then overwrite the width from 'column' with our new one.

Here is the code for our contact page:

Build your Own!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>My dog Billie-Mae</title>
      <meta name="keywords" content="billie-mae, dog, mutt, canine, pet, friendship, animal, rescue">
      <meta name="description" content ="Pictures and stories about my dog Billie-Mae and the funny things she does">
      <meta name="author" content ="Andrea">
      <meta name="copyright" content ="Copyright ? 2006 Andrea">
      <link rel="stylesheet" type="text/css" href="css/billie-style.css">
      <style type="text/css">
         body {background: #b5c69c url(img_36.gif) repeat}
         .column { width: 355px; height: 400px; padding: 10px; border: 1px solid #000000; float: left; background-color: #b5c69c}
         .column p { font: 12px arial, sans-serif;}
         .column img { float: right; margin-left: 5px;}
         h1 {width: 355px; font: bold 16px arial, sans-serif; color: #af0b1c; border-bottom: 1px solid #af0b1c}
         #wrapper {width: 770px; font: 12px arial, sans-serif; margin: auto;}
         #header {width: 768px; background-color: #b6c39a; border: 1px solid #000000; border-bottom-width: 0px; text-align: center;}
         a:link {font: bold 12px arial, sans-serif; color: #5e6151; text-decoration: underline;}
         a:visited {font: bold 12px arial, sans-serif; color: #5e6151; text-decoration: none;}
         a:hover {font: bold 12px arial, sans-serif; color: #af0b1c; text-decoration: underline;}
         a:active {font: bold 12px arial, sans-serif; color: #af5962; text-decoration: none;}
         #horizNav a:link {text-decoration: none; text-align: center; display: block; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}
         #horizNav a:visited {text-align: center; display: block; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}
         #horizNav a:hover {text-decoration: none; text-align: center; display: block; background-color: #b5c69c; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}
         #horizNav a:active {text-decoration: none; text-align: center; display: block; width: 188px; float: left; border: 1px solid #b5c69c; margin-left: 1px;}
         #horizNav {margin: 0px; padding: 0px; width: 768px; height: 17px; list-style-type: none; margin-bottom: 16px; background-color: #8e9675; border: 1px solid black}
         #horizNav li {display: inline;}
         #footerNav {margin: 0px; padding: 0px; list-style-type: none;}
         #footerNav li {display: inline;}
         #tableForm {margin: auto;}
         td {vertical-align: top}
         .contact {width: 748px;}
         .contact h1 {width: 730px;}
         input {width: 300px;}
         .inline {border: 0px; width: auto;}
         .textArea {width: 300px; height: 200px;}
         .button {margin-right: 20px; width: 60px;}
      </style>
   </head>
   <body>
      <div id="wrapper">
         <div id="header"><img src="http://photos.bravenet.com/166/366/683/3/4B3DA81507.gif" border="0"></div>
         <!--here is my navigation -->
         <ul id="horizNav">
            <li><a href="index.html">Home</a></li>
            <li><a href="aboutUs.html">About Us</a></li>
            <li><a href="contactUs.html">Contact Us</a></li>
            <li><a href="favoriteLinks.html">Our Favorite Links</a></li><br>
         </ul>
         <!--this is my contact page form -->
         <div class="column contact">
            <h1>Contact Us</h1>
            <form method="post" action="#" id="emailForm">
               <table cellpadding="2" cellspacing="0" border="0" width="460" id="tableForm">
                  <tr>
                     <th colspan="4">Please feel free to contact me!</th>
                  </tr>
                  <tr>
                     <td width="150">First Name:</td>
                     <td colspan="3"><input class="left" type="text" name="fname"></td>
                  </tr>
                  <tr>
                     <td>Last Name:</td>
                     <td colspan="3"><input class="left" type="text" name="lname"></td>
                  </tr>
                  <tr>
                     <td>How did you find us?</td>
                     <td>Search Engine: <input class="inline" type="checkbox" name="sengine"></td>
                     <td>Word of Mouth: <input class="inline" type="checkbox" name="word"></td>
                     <td>Other: <input class="inline" type="checkbox" name="other"></td>
                  </tr>
                  <tr>
                     <td>Enter your Comments:</td>
                     <td colspan="3"><textarea class="textArea" name="comments"></textarea></td>
                  </tr>
                  <tr>
                     <td colspan="4" align="right"><input type="submit" value="submit" class="button"><input type="reset" value="reset" class="button"></td>
                  </tr>
               </table>
            </form>
         </div><br style="clear: left;">
         <hr style="margin-top: 20px; color: #8e9675; width: 100%; height: 1px;">
         <!-- here is my footer nav -->
         <ul id="footerNav">
            <li><a href="index.html">Home</a>  |</li>
            <li><a href="aboutUs.html">About Us</a>  |</li>
            <li><a href="contactUs.html">Contact Us</a>  |</li>
            <li><a href="favoriteLinks.html">Our Favorite Links</a>  |</li>
            <li><a href="mailto:myemail@addie.com">Email me</a></li><br>				
         </ul>
      </div>
   </body>
</html>

Ok...ok... I know you're sick of me now but one final thing...let's take our embedded style sheet and turn it into the external style sheet that we linked to with the <link> tag.

Highlight everything between the <style> tags; go to your menu and under EDIT select CUT. Now create a new document, make sure it is completely empty, and paste in your style rules. Now save the document with the name you have selected in your <link> tag (mine is in a new folder called 'css' and the filename is 'billie-style' with the extension '.css'). Remove the <style> tags from the <head> of your document and you are good to go!