Home   CGS 2820C
  Web Development
#09 Grading Criteria for:
Tables and Forms. Part 1
Rows, Columns, Table Header, Colspan, Borders

Description: Tables - Use a table to create a Contact Form, which will be a linked through your common Menu Navigation to the rest of your website. Your Contact page will have the same format, layout, CSS sheet, and same Navigation as your other pages. This is the first part of two assignments used to create a working Contact Form. It is only designed to introduce tables and layout your Contact Form. The form is not intended to work yet. You are just setting up the structure with the table rows and cells.

Caution: It is OK if you are reluctant to put your real personal home address and personal phone number on the Web.

Below is one way to save time and also make your pages consistent:
  1. Save your refined index.htm or resume.htm as contact.htm.
  2. Delete the specific content from the index or resume page.
  3. Make sure the <title> tag, <meta> tags and <h1> are changed to be specific to the contact page.
  4. Place the contact content (the table) within the <main> element or within a <section> element inside the <body>.
  5. Use the same Cascading stylesheet, same masthead, and same navigation inside the <nav> element for your home page, resume, portfolio, newsletter, and contact page.
  6. In the nav, set the contact.htm page as selected.
Click here for Table Notepad Tutorial
(Make sure you meet all grading criteria below.)
Go to the bottom of this page to see the code that you can copy for a short sample Table.
Topic Directions Points
1. Insert a Table inside the <main> or <section> element of the <body> tag.


Add the <table> tag to start to create a table with 2 columns and 11 rows.

<table>

</table>


Only use one table. Do not use multiple tables, use colspan and rowspan instead if needed (See below)
10 <table>


2. Define Table Rows
<tr> = table row
<td> = table data = columns

Copy the first row from <tr> to </tr>.
Paste it below 10 more times so that there are 11 rows total.
Inside the opening and closing <table> tags, add the code below to create 1 row (<tr>) and 2 columns (<td>):
<table>
 <tr>
   <td style="text-align:right">
   future text
   </td>
   <td>future textbox
   </td>
 </tr>
</table>
10 <tr> & <td>
3. Span or merge table columns
colspan
Merge the two columns in the top row for the contact page title.
Every row in a table must have the same number of columns. Because this is a two-column table, we still must account for two columns in the top row. Use the colspan attribute (shown below) in the top row to merge the cells in the first row for your heading or table title.
 <tr>
   <td colspan="2">Contact (Your Name)
   </td>
 </tr>

10 colspan
4. Set a Table Header
<th>
The first row of a table should be a table header. Replace the <td>s in the top row with <th>s.
 <tr>
   <th colspan="2">Contact (Your Name)
   </th>
 </tr>
10 th
5. Set your table style
style

Position the table/form on the page so that it looks very attractive.
In your stylesheet, set your th attributes to center and apply an attractive format/style to the heading in the top row that matches the styles of your site.
In your stylesheet, set a background color for the th tag.
10 format
& style
6. Set your table style
border
In your stylesheet, set your table attributes to add a border to the table that matches the styles of your site.
For example:
table {border:4px solid #003399; border-collapse:collapse}
10 border
7. Place the Field Labels (First Name, Last Name, City, ST, Zip, Email... ) in column one. Right Justify the field labels in column one:
<td style="text-align:right">

The example at right is NOT a working form; it is just a pictorial sample, so do not highlight and copy it.

Be sure to specify (in an obvious manner) which fields are required - for instance see red *s in sample form shown at the right. Consider defining a class in your css called .required with color:red and bold.

Note 1: The older inline table style cellpadding="6" is no longer valid in HTML5. For padding, set the padding attribute for the table in the stylesheet.
In column one, starting in row 2 type the field labels or descriptions of your form fields such as those shown below.

Title Goes Here
* First Name future text box
* Last Name future text box
City future text box
ST future drop down
Zip future text box
* Email future text box
Gender M F
Education AS BS
Comments
furture buttons
10 Enter field names

5 set style and notation for required fields
8. Position the table/form on the page so that it looks very attractive. 10 position
9. CSS Reports & Validation
Test on multiple browsers: such as IE, FireFox, Chrome, Safari.
Make sure there are no unused Classes or IDs in your Cascading Style sheet.

https://validator.nu/
jigsaw.w3.org/css-validator/
websiteoptimization.com/services/analyze
https://search.google.com/test/amp
http://brokenlinkcheck.com/
In Expression Web:
1. Open your Cascading Style Sheet
2. Click Panels | CSS Reports to open Reports window at bottom of page
3. Click the green menu arrow > in the upper-left corner of pane
4. On the Errors tab, check "Current page" and click the [Check] button

In Dreamweaver: File > Check Page and File > Validate
10 validate and optimize
10. Organize your css stylesheet.

All Existing Tags first and in order they appear on page: body listed first, h1 second, p third...

All IDs listed second and in order they appear on page:
See right for sample order

All custom Classes listed last
(You must have at least 2 classes defined)
/* Existing Tag selectors */
body { ...
h1 { ...
h2 { ...
p { ...
header
nav { ...
main { ...
section { ...
aside { ...
footer { ...

/* IDs */
#wrapper {
#masthead {

/* Classes */
.important { ...
.chapterTitle { ...
.selected { ...
10 organize css
Sample code for a table to use with a small form that you can copy and paste into the <body> of a demo file:

<table>
 <tr>
   <td style="text-align:center;" colspan="2">Contact (Your Name)</td>
 </tr>
 <tr>
   <td style="width:250px; text-align:right">
   * First Name
   </td>
   <td>future FirstName textbox required
   </td>
 </tr>
 <tr>
   <td style="text-align:right">
   * Last Name
   </td>
   <td>future LastName textbox required
   </td>
 </tr>
 <tr>
   <td style="text-align:right">
   Telephone
   </td>
   <td>future Telephone textbox
   </td>
 </tr> 
 <tr>
   <td>...
   </td>
 </tr>
</table>
The root folder of your actual local (USB thumb drive or C:\Users\UserName\Documents\My Web Sites\YourDomainName) and remote (webserver) website should look now like this:
 images      [Dir] This is a subFolder - All images except possibly favicon.ico go here 
    favicon.ico This is often in the images folder
    cantact.htm  
    index.htm Your Home page (usually must be in lower case)
    newsletter.htm  
    portfolio.htm Your artwork, or books, or items for sale...
    resume.htm  
    transcript.htm
    yourSiteName.css Your external stylesheet