Tables and Forms, Part1

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

Description: Tables - Use a table to create the first part of 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, external 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.

Short Interactive Tutorials:

W3Schools Tables Tutorial:

W3Schools Table styles Tutorial:

W3Schools Code Tutorial:

Try It Yourself

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:

Save your refined index.htm or resume.htm as contact.htm.
Delete the specific content from the index or resume page.
Make sure the <title> tag, <meta> tags and <h1> are changed to be specific to the contact page.
Place the contact content (the table) within the <main> element or within a <section> element inside the <body>.
Use the same external Cascading stylesheet, same masthead, and same navigation inside the <nav> element for your home page, resume, portfolio, newsletter, and contact page.
In the nav, set the contact.htm page as selected.

Examples and HTML Tutorials below

Click here for Table Notepad Tutorial
Interactive W3Schools Table demo
Go to the bottom of this page to see the code that you can copy for a short sample Table.

Make sure you MEET ALL GRADING CRITERIA below.

Topic Directions Points

You still need
A unique <title> briefly describing your page
Meta Description: <meta name="description" content="Longer Page Description">
The same Stylesheet: <link href="SiteName.css" rel="stylesheet" type="text/css">
The same <nav>, <header> <footer> and stylesheet (.css) as your Home page and Resume
A comment for each closing </div> Example: </div> 
If you do not have a security certificate your URL/Web address is http://site.com, not https://site.com Points
-5
-5
-10
-10
-3
-1

1. Insert a Table inside the <main> or <section> element of the <body> tag.

In DreamWeaver:
Insert | Table, then make the desired settings. 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>

(p 138, 337)

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

(p 133)

4. Set a Table Header
<th>

There is also a <thead> if <tbody> and <tfoot> are also used for better styling. The first row of a table should be a table header.
So replace the <td>s in the first table row with <th>s.
<tr> <th colspan="2">Contact (Your Name) </th> </tr> 10 th

If done correctly, <th> will automatically center
(p 132)

5. Set your table 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

(p 337, 338)

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

(p 339)

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
	future buttons

10 Enter field names

5 set style in the external cascading stylesheet for * required fields

(p 405 for padding)

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 Edge, FireFox, Chrome, Safari.
Make sure there are no unused Classes or IDs in your Cascading Stylesheet. https://validator.nu/
jigsaw.w3.org/css-validator/
websiteoptimization.com/services/analyze
https://search.google.com/test/amp
http://brokenlinkcheck.com/ 10 validate and optimize

10. Organize your external 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 style="width:504px; border:2px blue solid">
	
	 <tr>
	
	   <th colspan="2">Contact (Your Name)</th>
	<!-- th = Table Header -->

	 </tr>

     <tr>

       <td style="width:150px"> 
	<!-- td = Table Data (column) -->
         
	   First Name *

       </td>

       <td style="width:350px"> Add FirstName textbox 
	as a required field
   </td>

     </tr> 

     <tr>  

       <td>
   Last Name 
	*
   </td>

       <td> Add LastName textbox as a 
	required field
   </td>

     </tr> 

     <tr>  

       <td>
   Telephone
   </td>

       <td> Add Telephone textbox
   </td>

     </tr>  

     <tr> 

       <td>...</td>
	
       <td>...</td>

     </tr>

    </table>

The root folder of your actual local 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. See Favicon Tutorial and Favicon Generator
contact.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 cascading stylesheet