Simple Responsive Tables


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

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.


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):

Simple responsive table at sm & larger breakpoints

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):

Simple responsive table at xs breakpoint

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

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

For background colors, use a color picker.

  1. Your caption will wrap. I will show you how to fix that in class. 

  2. To create a bookmarklet that is specific to Bootstrap’s breakpoints, follow these instructions:

    1. Go to the Viewport Resizer Bookmarklet.

    2. Scroll down the page until you come to Build Your Own Bookmarklet Here. In the text area labeled Result • Editor, enter the following:

      <a data-viewport="640×960" data-icon="mobile">xs (640)</a><a data-viewport="800×1280" data-icon="tablet">sm (800)</a><a data-viewport="1024x768" data-icon="notebook">md (1024)</a><a data-viewport="1280x800" data-icon="tv">lg (1280)</a>
    3. Click & drag the blue button labeled Your Customized Bookmarklet to your Bookmarks (or Favorites) toolbar. By default, the name will be ↔ Resizer. Change it to ↔ Resizer (Bootstrap 3). If you already have the Viewport Resizer Bookmarklet installed, you can keep it or delete it—it’s your choice.

WebSanity Top Secret