→ Cleo Claren
→ Nutrition Facts Table Design

Nutrition Facts Table Design

Display detailed nutritional information using this accessible HTML and CSS Nutrition Facts table component. Ideal for food product websites and health applications.

This Example is contributed by Cleo Claren, on 17-Feb-2025. It is responsive.

Table Data Display

Author Cleo Claren

Fork Fullscreen

<table class="nutrition-facts">
 <thead>
 <tr>
 <th colspan="2">
 <h2>Nutrition Facts</h2>
 <p>Serving Size 1 cup (228g)</p>
 <p>Servings Per Container 2</p>
 </th>
 </tr>
 </thead>
 <tbody>
 <tr class="calories-row">
 <td><strong>Calories</strong></td>
 <td>230</td>
 </tr>
 <tr class="spacer-row">
 <td colspan="2"></td>
 </tr>
 <tr>
 <td colspan="2" class="daily-value">
 <strong>% Daily Value*</strong>
 </td>
 </tr>
 <tr>
 <td><strong>Total Fat</strong> 8g</td>
 <td><strong>10%</strong></td>
 </tr>
 <tr class="indent">
 <td>Saturated Fat 1g</td>
 <td><strong>5%</strong></td>
 </tr>
 <tr class="indent">
 <td>Trans Fat 0g</td>
 <td></td>
 </tr>
 <tr>
 <td><strong>Cholesterol</strong> 0mg</td>
 <td><strong>0%</strong></td>
 </tr>
 <tr>
 <td><strong>Sodium</strong> 160mg</td>
 <td><strong>7%</strong></td>
 </tr>
 <tr>
 <td><strong>Total Carbohydrate</strong> 37g</td>
 <td><strong>13%</strong></td>
 </tr>
 <tr class="indent">
 <td>Dietary Fiber 4g</td>
 <td><strong>14%</strong></td>
 </tr>
 <tr class="indent">
 <td>Total Sugars 1g</td>
 <td></td>
 </tr>
 <tr class="indent-sub">
 <td colspan="2">Includes 0g Added Sugars <strong>0%</strong></td>

</tr>
 <tr>
 <td><strong>Protein</strong> 3g</td>
 <td></td>
 </tr>
 <tr class="spacer-row">
 <td colspan="2"></td>
 </tr>
 <tr>
 <td>Vitamin D 2mcg</td>
 <td>10%</td>
 </tr>
 <tr>
 <td>Calcium 260mg</td>
 <td>20%</td>
 </tr>
 <tr>
 <td>Iron 8mg</td>
 <td>45%</td>
 </tr>
 <tr>
 <td>Potassium 235mg</td>
 <td>6%</td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td colspan="2" 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.
 </td>
 </tr>
 </tfoot>
</table>

Related Examples

Bold Impact Stats Showcase for Product Metrics
A visually striking statistics component with bold typography and modern design to highlight your product's key performance metrics and achievements.

Author:
Alex Morgan

3 months ago
Key Metrics Overview
Showcase your expertise with key metrics, including years of experience, client satisfaction, project completion, and awards won.

Author:
M. Johnson

4 months ago
Animated Progress Bar with Percentage - Smooth & Engaging

Author:
Eleanor Vance

4 months ago
Data Card with Hover Effects
Engaging KPI card that displays key metrics with interactive hover effects and a progress bar.

Author:
Laura Mitchell

4 months ago
Customizable Progress Bar with Dynamic Animation

Author:
Eleanor Vance

4 months ago
Pricing Cards
Engaging pricing table highlighting key features with animations. Boost conversions with clear, interactive plan comparisons.

Author:
Jorrit

4 months ago
Admin Panel Statistic Cards

Author:
Anonymous

4 months ago
Admin Dashboard Info Cards
Display key metrics and user statistics with these informative cards designed for admin dashboards. Easily track performance and user engagement.

Author:
Cleo Claren

4 months ago
List with Highlighted Text Elements

Author:
Anonymous

3 months ago
Animated Progress Bar with Percentage
Visually engaging circular progress bar with smooth animations and percentage display. Ideal for dashboards and loading screens.

Author:
Anonymous

4 months ago
Interactive Skill Graph with Animated Progress Bars
Visualize your skills with this interactive, animated skill graph component. Impress potential employers with a dynamic display of your expertise.

Author:
Amelia Clarke

4 months ago
Social Sharing Component with Blog Post Details

Author:
Anonymous

2 months ago

Didn't find component you were looking for?

Search from 500+ components