2018 Nutrition Facts Table in HTML & CSS

2018-nutrition-facts-table-in-html-css.markdown

2018 Nutrition Facts Table in HTML & CSS

HTML and CSS for FDA Nutrition Facts table reflecting updated standards as of May 2016.

A Pen by Maggie on CodePen.

License.

index.html

<section class="nutrition-facts">
  <header>
    <h1>Nutrition Facts</h1>
    <p> <input type="text">
      servings per meal</p>
    <p><strong>Serving Size<span>
      <input type="text"></span>
    </strong></p>
  </header>
  <table class="main-nutrients">
    <thead><tr><th colspan="4">
        Amount per serving 
        <br />
        <strong>Calories</strong>
        <span><input class="cals" type="text"></span>
    </th></tr></thead>
    <tbody>
      <tr class="daily-value"><th colspan="4">
          <strong>% Daily Value*</strong>
        </th></tr>
      <tr id="TotFat"class="br"><th colspan="3">
          <strong>Total Fat </strong> 
        <input type="text">g</th>
        <td><input type="text">%</td>
      </tr>
      <tr id="SatFat"><td></td>
        <th colspan="2">Saturated Fat
          <input type="text">g</th>
        <td><input type="text">%</td>
      </tr>
      <tr id="TransFat">
        <td>&nbsp;</td>
        <th colspan="2">
          <em>Trans</em> Fat
          <input type="text">g
        </th>
        <td>
        </td>
      </tr>
      <tr>
        <th colspan="3">
          <strong>Cholesterol</strong>
          <input type="text">mg
        </th>
        <td>
          <input type="text">%
        </td>
      </tr>
      <tr>
        <th colspan="3">
          <strong>Sodium</strong>
          <input type="text">mg
        </th>
        <td>
          <input type="text">%
        </td>
      </tr>
      <tr>
        <th colspan="3">
          <strong>Total Carbohydrate</strong>
          <input type="text">g
        </th>
        <td><input type="text">%
        </td>
      </tr>
      <tr id="fiber">
        <td>&nbsp;</td><th colspan="2">
          Dietary Fiber
          <input type="text">g</th>
        <td><input type="text">%</td>
      </tr>
      
      <tr id="sugars">
        <td>&nbsp;</td><th colspan="2">
          Total Sugars
          <input type="text">g</th>
        <td></td>
      </tr>
      <tr>
        <td class="indent">&nbsp;</td>
        <td class="indent">&nbsp;</td>
        <th>
          Includes <input type="text">g Added Sugars
        </th>
        <td>
          <input type="text">%
        </td>
      </tr>
      <tr>
        <th colspan="3">
          <strong>Protein</strong>
          <input type="text">g
        </th>
        <td>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="voluntary-nutrients">
    <tbody>
      <tr id="vitD">
        <th>
          Vitamin D <input type="text">mcg
        </th>
        <td>
          <input type="text">%
        </td>
      </tr>
      <tr id="calcium">
         <th class= "label">
           Calcium <input type="text">g</th>
         <td class= "dv"><input type="text">%
         </td>
      </tr>
      <tr id="iron">
        <th class="label">
          Iron <input type="text">mg
        </th>
        <td>
          <input type="text">%
        </td>
      </tr>
      <tr id="potasssium">
        <th>Potasssium <input type="text">mg
        </th>
        <td>
          <input type="text">%
        </td>
      </tr>
      <tr id="vitC">
        <th>
          Vitamin C <input type="text">mg
        </th>
        <td>
          <input type="text">%
        </td>
      </tr>
    </tbody>
 </table>
  <p class="footnote">
        The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
  </p>

</section>





 

style.scss

section 
{ max-width: 250px;
  float: left;
  margin: 20px;
}

.nutrition-facts 
{ margin-top: 20px;
  border: solid 2px #000;
  display: inline-block;
  font: normal 11px/1.1 
        "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0 5px 0;
  width: 250px;
  input
    { border:0;
      width: 25px;
      background-color: lightblue; 
      text-align:right;
      &.cals{
        width:100px;
      }
  }
  
  h1, thead, strong 
  { font-family: "Arial Black", "Arial Bold", sans-serif;
    letter-spacing: -.03em;
  }
  h1 
  { border-bottom: solid 1px #000;
    font-size: 32px;
    margin: -3px 0 4px;
  }
  header 
  { p 
    { font-size: 14px;
      margin: 2px 0 -3px;
      strong 
      { font-size: 15px;
      }
    }
    span 
    { float: right;
    }
  }
  table 
  { border-collapse: collapse;
    width: 100%;
    th, td 
    { letter-spacing: -.03em;
    }
    th 
    { font-weight: normal;
    }
    td 
    { min-width: 1em
    }
    thead,tbody 
    { th, td 
      { text-align: left;
        font-size: 13px;
        border-top: solid 1px #000;
        padding: 2px 0 2px;
        &.indent 
        { border-top: 0;
        }
      }
      th 
      { strong 
        { font-family: "Arial Black", "Arial Bold", sans-serif;
        }
      }
      td:last-child 
      { text-align: right;
      }
      .daily-value 
      { th 
        { font-size: 11px;
          text-align: right;
        }
      }
    }
    thead 
    { td, th 
      { border-bottom: solid 4px blue;
        padding-top: 3px;
        line-height: 1em;
      }
      th 
      { strong 
        { font-size: 28px;
          line-height: 28px;
        }
        span {
          font-size: 34px;
          float: right;
          line-height: 24px;
        }
      }
    }
    &.main-nutrients 
    { border-top: solid 10px #000;
      border-bottom: solid 10px #000;
      margin-top: 8px;
      tbody td:last-child 
      { font-family: "Arial Black", "Arial Bold", sans-serif;
        p 
        { text-align: left;
        }
      }
    }
    &.additional-nutrients 
    { border-bottom: solid 5px #000;
      td 
      {.spacer 
        { width: 1em;
          text-align: center;
        }
        &:last-child 
        { font-weight: normal;
          font-family: arial, sans-serif;
        }
      }
    }
    &.voluntary-nutrients 
    { border-bottom: solid 5px #000;
    }
  } 
  .footnote 
  { font-size: 9px;
    height: 4em;
    margin: 6px 0 -3px;
    padding-left: 1em;
    position: relative;
    &:before 
    { content: '*';
      position: absolute;
      left: 0;
    }
  }
}