Hour 17 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Hour 17 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Listing 17.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Tables</title>
<link href="rwd code 17.2.css" rel="stylesheet">
</head>

<body>
<table width="100%" border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>URL</th>
      <th>RWD?</th>
      <th>Windows</th>
      <th>Macintosh</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Adobe Dreamweaver</td>
      <td>http://www.adobe.com/products/dreamweaver.html</td>
      <td>yes</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Macaw</td>
      <td>http://macaw.co/</td>
      <td>yes</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Coffee Cup Responsive Layout Maker Pro</td>
      <td>http://www.coffeecup.com/responsive-layout-maker-pro/</td>
      <td>yes</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Microsoft Notepad</td>
      <td>http://www.notepad.org/</td>
      <td>no</td>
      <td>yes</td>
      <td>no</td>
    </tr>
    <tr>
      <td>Tummult Hype</td>
      <td>http://tumult.com/hype/</td>
      <td>no</td>
      <td>no</td>
      <td>yes</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Listing 17.2

@charset "UTF-8";
/* styles for all devices */
table {
  border-collapse: collapse;
  font-size: 14px;
}
/* zebra stripe the table */
table tr:nth-child(2n+1)    {
  background-color: #dfdfdf;
}
/* styles for devices larger than 650px wide */
@media screen and (min-width:651px){
  table {
    font-size: 16px;
  }
}

Listing 17.3

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Contacts Table</title>
<link href="rwd code 17.4.css" rel="stylesheet">
</head>

<body>
<table width="100%" border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Title</th>
      <th>Home Page</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jennifer Kyrnin</td>
      <td>Chief Dandylion Officer</td>
      <td>http://htmljenn.com/</td>
      <td>htmljenn@gmail.com</td>
    </tr>
    <tr>
      <td>McKinley</td>
      <td>Dandelion Observation Officer</td>
      <td>http://responsivewebdesignin24hours.com/mckinley</td>
      <td>mckinley@rwdin24hours.com</td>
    </tr>
    <tr>
      <td>Rambler</td>
      <td>Chief Taste Tester</td>
      <td>http://responsivewebdesignin24hours.com/rambler</td>
      <td>rambler@rwdin24hours.com</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Listing 17.4

@charset "UTF-8";
/* styles for all devices */
table {
  border-collapse: collapse;
}

/* styles for small devices */ 
@media (max-width:720px){
  table { border: none; }
  /* display the whole table as a block */
  table, thead, tbody, th, td, tr { 
    display: block; 
  }
  /* Hide the headers */
  thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  tr { border: 1px solid #ccc; margin-bottom: 1em; }
  tr:nth-of-type(odd) {
    background: #eee;
  }
  
  td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 20%; 
  }
  
  td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 1px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
  }
  
  /* Label the data */
  td:nth-of-type(1):before { content: "Name"; }
  td:nth-of-type(2):before { content: "Title"; }
  td:nth-of-type(3):before { content: "Home Page"; }
  td:nth-of-type(4):before { content: "Email"; }
}

/* styles for larger devices */
@media (min-width:721px) {
  tr:nth-child(2n+1) {
    background-color: #80C5F5;
  }
  table thead tr:nth-child(n) {
    background-color: #3d447e;
    color: #dfdfdf;
  }
}

Listing 17.5

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Tables</title>
<style>
/* styles for all devices */
table {
  border-collapse: collapse;
}
/* zebra stripe the table */
table tbody tr:nth-child(odd)    {
  background-color: #dfdfdf;
}
thead tr {
  background-color: #6E2B75;
  color: #efefef;
}

/* hide the important and optional columns from small screens */
@media screen and (max-width:480px) {
  .optional, .important,
  tr td:nth-child(2), 
  tr td:nth-child(4),
  tr td:nth-child(5){
    display: none;
  }
}

/* hide the optional columns from medium width screens */
@media screen and (min-width:481px) and (max-width:780px) {
  .optional,
  tr td:nth-child(2) {
    display: none;
  }
}
</style>
</head>

<body>
<table width="100%" border="1">
  <thead>
    <tr>
      <th class="required">Name</th>
      <th class="optional">URL</th>
      <th class="required">RWD?</th>
      <th class="important">Windows</th>
      <th class="important">Macintosh</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Adobe Dreamweaver</td>
      <td>http://www.adobe.com/products/dreamweaver.html</td>
      <td>yes</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Macaw</td>
      <td>http://macaw.co/</td>
      <td>yes</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Coffee Cup Responsive Layout Maker Pro</td>
      <td>http://www.coffeecup.com/responsive-layout-maker-pro/</td>
      <td>yes</td>
      <td>yes</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>Microsoft Notepad</td>
      <td>http://www.notepad.org/</td>
      <td>no</td>
      <td>yes</td>
      <td>no</td>
    </tr>
    <tr>
      <td>Tummult Hype</td>
      <td>http://tumult.com/hype/</td>
      <td>no</td>
      <td>no</td>
      <td>yes</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Listing 17.6

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML with Ad Block</title>
    <style>
    body { background-color: #dfdfdf; }
    section {
      width: 95%;
      margin: 0 auto;
      background-color: #fff;
      overflow: auto;
    }
    article { 
      background-color: #fff;
      overflow: auto;
      width: 60%;
      float: left;
    }
    aside {
      width: 300px;
      float: right;
    }
    img { max-width: 100%; width: 300px; height:200px; background-color: #F17A24; }
    </style>
  </head>
  <body>
  <section>
    <article>
      ... article copy ...
      blah blah blah
      blah blah blah
      blah blah blah
      blah blah blah
      blah blah blah
    </article>
    <aside class="ads">
      <img id="ad300">
    </aside>
   </section>
</html>

Listing 17.7

/* CSS Document */

body { background-color: #dfdfdf; }
section {
  display: table;
  width: 95%;
  margin: 0 auto;
  background-color: #fff;
}
article { 
  background-color: #fff;
  display: table-cell;
  vertical-align:top;
}
aside {
  width: 300px;
  display: table-cell;
  vertical-align:top;
}
img { max-width: 100%; width: 300px; height:200px; background-color: #F17A24; }

2 thoughts on “Hour 17 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

  1. Dear Jennifer

    I bought your “Sams Teach Yourself Responsive Web Design in 24 Hours by Jennifer Kyrnin” from Amazon as it seemed to be the only book that addressed the problem of data tables in RWD. However, in your otherwise excellent book, I am disappointed that there is some inconsistency in that content should not be included in CSS, which is for layout only.

    I bought the book as I am updating a rather old-fashioned charity website here in the UK of which I am a Trustee and which I wanted to be a RWD that can be read on mobiles and tablets as well. It has more than one data tables with different pricing information in different pages of the website.

    However, if I understand the book properly in my preferred method, in listing 17.4, you are advocating labelling the titles in the CSS. Surely this is not strictly correct and would not validate with W3C? I have not tried it yet and this is less important to me than a workable site. If I have one CSS file for the site, as recommended, is it acceptable to separate the rest of the CSS from the “/* Label the data */” code and put it into the CSS and leave the labelling CSS code in the individual HTML5 pages so that different tables can be used on the site? And would this validate? Also what would happen if there was more than one table on the HTML5 page?

    It seems to me that there must be a method of coding the tables without having data in the CSS or leaving CSS on the HTML pages, but I am not clever enough to work out how to do it. As you clearly are, I am writing to you in the hope that you have addressed and solved this problem since you wrote the book.

    Yours sincerely

    1. I agree that content shouldn’t be included in the CSS. But there are not a lot of options for creating responsive tables, especially if you cannot use scripts. And many people cannot. Tables are very difficult, and most designers choose to make sacrifices in either their CSS by including content there or in other ways, such as by making them non-responsive. Personally, I would choose a responsive table over a non-responsive one, but every design is different and there will be cases where including content in the CSS is not appropriate.

      Thanks for your comment. This is good information for others reading the book.

Leave a Reply

Your email address will not be published.