MAT 125: Exercises & Projects

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:

  1. 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.

  2. Page2.html CSS Styled Tables
  3. 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.

  4. Page3.html A Large Table
  5. 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.

  6. Page4.html IFrame page
  7. 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.

  8. Page5.html Embed a Google Form
  9. 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">
<td align="right">
Content in the
Data Cell with a line break
<td valign="top">




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">

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.

Exercise Six Grading Rubric
Item/Points 1-3 4-5 6
Coding / Errors Some Mostly Correct All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Most Requirements Above & Beyond
Design & Creativity Basic Average Amount Above & Beyond


This exercise is worth up to 30 points.

Coding (6)
Functionality (6)
Meeting project requirements (6)
Your effort/experimentation (6)
Design (6)