Lab #3: Designing Without Tables

We've all made sites where we rely on tables to structure our design. What if we want to make a huge design change? We have to go back and modify each and every table on each and every page!

If we separate data by breaking up sections, such as having a header, content, and footer, we can limit the amount of pain we have later on if we decide we need to change our layout!

This link by W3 schools will help you.

This one will help you with positioning cells relatively to one another.

And this one to position elements with absolute.

Problem 1

Convert the following HTML table designed document into a sectioned document using <div> tags instead of <table><tr><td></td></tr></table>. Make sure to put it in an external style sheet!

Problem 2

Play around with the original style. Using positioning elements to move the different div tags into different positions.

Can you move the bottom cell to the top and move all of the other cells to the bottom WITHOUT changing the HTML document?