Exercise 6: Making Tables, Using an IFrame, Creating and Embedding a Google Form
This exercise covers the use of tables and iframes. Tables were initially developed to hold data, moved on to hold complete webpages and have now gone back to being used for data again. Iframes have a multitude of interesting uses, including being used for online ad placement - or for holding Google maps and YouTube videos and for using the simple Google Form you will create.
Exercise Requirements
Watch: the step by step Videos Lectures for Exercise 6.
Read: Chapter 8 in the Book on Tables
Minimum Number of Pages/Documents Required for Exercise: 5
All Pages in the Exercise Must Link Together.
Use Brackets HTML Editor to create your pages.
Page Content:
- Index.html Simple HTML Tables
Create several tables on this page (minimum 5) and use all the different attributes including alignments, valign, cellpadding, cellspacing, and more.
- Page2.html CSS Styled Tables
Created 4-5 tables that are styled with CSS. You can actually use the same table content, just experiment with different CSS styles on each one.
- Page3.html A Large Table
Make a usable table that has table headers (th), table data (td), images placed inside cells, has the text correctly aligned so it looks nice. Suggestions for a table - restaurant menu or a table with parts in it, with images, item numbers, prices, and a description. It should be a minimum of 3-4 columns wide and 5-6 rows long.
- Page4.html IFrame page
Create and IFrame. Make sure to have either an image or another page in place in the IFrame when the page is accessed. Include at least 3 or 4 more items that will show up in the IFrame when you click on them. Have one of your table pages be linked into it. Use thumbnail images as the linking content. These can be placed in a simple table next to or above the IFrame.
- Page5.html Embed a Google Form
Create a simple Google Form (you will need a gmail address) and embed it on this page. The Form needs to have an overall theme, use single & multiple answer questions, text boxes (for an email or name) and a comment box. Images added into the form make it even better.
Review the Exercise 6 demo pages and video pages for more information.
Points: 30
Coding Tables
The overall element for a table is table
Place all the table pieces between the opening and closing table tags. The table tags contain the whole set of pieces making up the overall table. Once you are done making your table be sure to close your table tag.
<table> </table>
Common Attributes for the table Element
Attribute: align
Value: left, center or right
Attribute: width
Value: px amount
Attribute: cellpadding
Value: px amount
Attribute: cellspacing
Value: px amount
Attribute: border
Value: px amount
By default the table border is 1px black. Use CSS to add color, weight and type of border.
The Table Elements
Tables have several parts to them. They are made up of table rows and table cells or table headers. They can also have captions.
The Table Caption
If you want to add a caption to your table use the caption tag after you open your table tag.
<caption> </caption>
TR - The Table Row
Once you open up your table, you need to put all the pieces in rows. Use the TR element to do this. Each row needs to match up in number of cells included in it.
Open your row up, add your data cells and close the row. Repeat for as many rows as you want.
<tr> </tr>
The TH & TD Cell Elements
Use the TD & TH elements create the individual cells.
- TH styles the cell as a header cell. By default the text is bold and centered.
<th> </th>
- TD is the most commonly used cell element. The text is normal weight and aligned to the left by default.
<td> </td>
Common Attributes for the TH or TD Elements
Attribute: align
Value: left, center or right
Attribute: rowspan
Value: # of rows
Attribute: colspan
Value: # of columns
Attribute: valign
Value: top, middle, bottom
Basic 2 Row Table Example:
<table width="400px"
align="center" cellspacing="10px" border="3px">
<tr>
<td align="right">
Content in the
Data Cell with a line break
</td>
<td valign="top">
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
</table>
IFrames
IFrames are used to place or embed content into an existing page. Online magazines use them for ad placement. Google maps and forms can be embedded on a page by using an iframe. They can be used to share a portfolio by clicking on thumbnail images that pull larger images into the IFrame.There are other uses for as well.
By default the IFrame is 300px wide by 180px tall. You can change the sizes to match the content you want to have in there.
Nothing goes in the area between the opening and closing IFrame tags. All the information goes in the opening IFrame tag.
<iframe> </iframe>
Common IFrame Attributes and Values
Attribute: align
Value: left, center or right
Attribute: width
Value: px amount
Attribute: height
Value: px amount
Attribute: name
Value: Choose a Name*
*I typically name mine "window"
Attribute: frameborder
Value: px amount
Attribute: src
Value: an image or page or other external content
Basic IFrame Example:
<iframe src="images/cat.jpg" width="400px" height="450px"
name="window" frameborder="2px" align="right">
</iframe>
Making A Google Form
If you have a gmail address to use Google Forms for free. It is easy to set up a gmail account.
Plan out what theme you want your form to be about. A good time to use that Mood Board/Style Tile information we covered in Exercise 5. Think of questions that range from a yes or no answer, multiple choices for answers, fill in a small text box (like a name or email address or both) and a content box for a longer answer.
Here is the link to Google Forms
Once you create your Google Form it has an option to embed it into your page (The page5 that you will make for your exercise) Google gives you the code to place in your page in the body area. There are templates you can choose from, colors, images, or use your own image. Style your page and add the coding for the iframe that Google generates.Be sure to link it to your other pages.