I was curious if anyone could help me with creating an annoying table (my instructor is awful)? I've tried for almost 3 hours now JUST attempting to set up the rows/columns (I don't understand how to make them span and size them like the picture and instructions want).

Here's what I have to do:


Can anyone help me set up the table, push me in the right direction, or offer some advice? I think I can figure out the rest once I finally get the table to set up correctly.

Thanks in advance if anyone is generous enough to help.

you're looking at three tables nested within one larger table. i won't write out the code for you, since that would defeat the purpose of the class, but i can give you step-by-step for the HTML.

1. make your outer table with one row and three table cells.
2. the first and third cells are the left and right sides of the main table (1 table with 3 rows each).
3. the middle cell (50% width) will have 1 table with 5 rows.
4. make 5 rows in the middle cell. one cell for the first and last rows, with colspan="3". in the middle three rows, make three cells each.

in each cell of the nested tables, you'll need to add  . it's filler space, telling the browser it needs to display any properties you apply to those cells.

just a side note: depending on which version of which browser you're using to display this, you may or may not get that light grey border around the table cells. modern browsers don't display that border.

edit: without styles (except for a solid 1px border around the inner cells just for show and the 5px dotted yellow border) it looks like this:
Click to view attachment