Code

You’ll need to understand the following to complete this assignment:

• Media queries
• Bootstrap’s breakpoints (but do not use Bootstrap itself!)
• Tables (including <table>, <tr>, <th>, <td>, <thead>, <tbody>, & <caption>)
• display property
• nth-child pseudo-class selector

Set Up

Create a new project in your Web Dev Projects folder called responsive-tables.

Create a file named table.htm. The <title> is ZOMG! I can actually DO this!.

Create a folder named styles. In that folder, create a file named main.css.

Assignment

Look at the following image. You’ll see that if your viewport is at the Bootstrap sm breakpoint or greater (I am referring to the Bootstrap sm breakpoint only to give you a size for your media query):

Now look at this image. You’ll see this if your viewport is at the Bootstrap xs breakpoint (Again, I am referring to the Bootstrap xs breakpoint only to give you a size for your media query):

Here’s the text for that table (the | delimits the table cells):

Table 6.1: Writers & Their Most Famous Creations

Lovecraft | Cthulhu
Burroughs | Tarzan of the Apes
Dent | Doc Savage
Gibson | The Shadow
Haggard | Allan Quatermain
Wells | The Time Traveler
Verne | Captain Nemo
Howard | Conan the Barbarian
Raymond | Flash Gordon
Rohmer | Fu Manchu
Nolan | Buck Rogers
Leiber | Fafhrd & the Gray Mouser

Create a table that holds that data. Don’t forget the caption to the table!¹

Use media queries (not Boostrap!) to change the appearance & layout of the table at the different breakpoints mentioned above. To test, use the Viewport Resizer Bookmarklet.²

For background colors, use a color picker.