• The table must have a title, bolded and centered.
• The table must include at least seven columns and seven rows.
• The table must include at least one spanning column and one spanning row.
• The table must include at least one graphic (more would be nice). Remember that all images should have the following attributes: src, width, height, border, alt, title
• The table page must include a reference to the data origin.
• Row and column headings should be bold.
• The table should be visually pleasing and include graphics.
   

  An example is shown below. There is a PDF with more examples at the bottom.

  Keep in mind that you should do this exercise by hand/hard-coding. No editors.

---

 

Central Indiana Wildlife

Counties	Small Game				Big Game
	Squirrel	Rabbit	Muskrat	Mink	Racoon	Fox	Coyote	Deer
Boone	125	113	75	44	98	28	10	75
Carrol	154	125	102	59	101	35	22	89
Clinton	121	145	88	25	89		10	65
Hamilton	90	45	65	33	75	45	6	45
Howard	98	59	92	23	67	40	15
Montgomery	134	155	130	89	78	25	75	88
Tippecanoe	67	76	59	71	75	100	89	55
Tipton	101	96	90	65		55	59	78
Reference: Shmoe, Joe. (1996). Indiana Wild Game. The Hoosier Chronicle. Indianapolis: Times Publishing.

---

Part B: layout8.html & layout9.html

As you are beginning to see, tables are a very powerful feature of the HTML and XHTML languages. When used as a page formatting device, tables can help you control the placement of elements that appear on your page. Used in portions or for an entire page, tables will help you be able to more precisely control the placement of graphics and other elements on your pages.

Fortunately (or unfortunately, whichever way you want to look at it), that infamous professor you previously did some work for has discovered pages on the web that are using tables. Not wanting his papers to look less impressive than some of those he's seen, he is asking you to go back to the two papers that had graphics in them and format them as two-column layouts using tables. As he has suggested, it may help if you create a sketch of the layout of papers before you actually try to create them.

Note: you do not have to start layout8.txt and layout9.txt from scratch again. Use the copy from Exercise 4!!!! When you are completed with exercise 5, it should have the anchors and other formatting that you did in prior exercises!

The papers you create should:

• All pages should adhere to the Standard Page Setup Requirements listed above.
• Use one entire table to format the pages into a two column layout.
• Use the same A-head, B-head, and C-head formatting as last time.
• Put the title, author, affiliation, and abstract into a row that spans both columns across the top of the table.
• Follow the abstract's text with a horizontal line that goes all the way across the spanning data cell.
• Set the cellpadding and cellspacing attributes in the table to 5.
• Set the width of the table to 750 pixels.
• Set the border of the table to 0. (it may be easier to leave border="1" until you are finished, then change border back to 0)
• Note that the "halfway" point has been labeled for you in the text files called layout8.txt and layout9.txt. Break the text file at this point so that the first half of the document is contained in the first column and the second half is contained in the second column. Remove the "halfway" label when you are done.
• Once you create the two columns you will need to use the valign attribute in both of the <td> tags for the columns. Set it to valign="top".
• Set the align attribute of both <td> tags to "justify" so that both columns are justified.
• Note that the graphics for this exercise are contained in L8_figs.zip and L9_figs.zip and will need to be sized differently from the last time you used them. On any image, the maximum width should not exceed 355 pixels. Resize the images in Photoshop and change the height and width attributes in the <img /> tag as needed.
• In layout8.txt, although you will include the a width attribute specification of 355 pixels in each column (<td>), you will find that, without a little workaround, the first column will still not format to the correct width. This is because there is no image in the first column to force it to the correct width (remember that text will not force the width of a table to be true when images are in the table). Thus, for the first file, create a transparent GIF image in Photoshop that is 10 pixels wide by 1 pixel high. Then use it to space the first column. The trick to this is to insert the image at the bottom of the first column, after all of the text in that column, so that it is not anywhere noticable:

  ......the attribute they affect.</p> <img src="10x1gb.gif" width="355" height="1" border="0" alt="spacer" title="" /></td>

  Note that the width is 355 on the image, not 375. This is because some of the width of the table is already being consumed by the cellpadding and cellspacing attributes of the table. On the second file (layout9.txt) you won't need the transparent GIF file as in that file there are images in the first column.

• Table examples from part 1: EC05_SolutionExamples.pdf
• Finished example - layout9.pdf