Talk:Nutrition

From BC$ MobileTV Wiki
Jump to: navigation, search

DEMO#1 - short label: http://bcmoney-mobiletv.com/diet/nutrition_label.html

DEMO#2 - long label: http://w3schools.com/dhtml/tryit.asp?filename=trydhtml_dom_color (paste in the below code)

<style type="text/css">
table.nutrition {	width:275px; margin-top:10px; margin-left:0; margin-right:0; border:1px solid black; border-collapse:collapse; table-layout:auto; }
.nutrition caption { font-family:Arial; font-size:small; font-style:italic; }
.nutrition tr#calories td { border-bottom:4px solid black; }
.nutrition tr#servings td { border-bottom:6px solid black; }
.nutrition tr#minerals td { border-top:4px solid black; }
.nutrition th { background-color:transparent; padding:3px; border:0; font-family:Arial; font-size:large; font-weight:bolder; }
.nutrition td { padding:3px; font-family:Arial; font-size:x-small; border:0; border-bottom:1px solid black; text-align:left; }
.nutrition td.dv { font-weight:bold; text-align:right; }
.nutrition td.sub { text-indent:10px; }
.nutrition td.disclaimer { font-size:xx-small; }
.nutrition strong { font-weight:x-bolder; }
</style>
<table class="nutrition" summary="This table summarizes nutritional information">
	<caption>Dietary Information</caption>
	<tr>
		<th colspan="2">Nutrition Facts</th>
	</tr>
	<tr id="servings">
		<td colspan="2">Serving Size 1 cupcake (67g)<br />Servings Per Batch 12</td>
	</tr>
	<tr>
		<td colspan="2">Amount Per Serving</td>
	</tr>
	<tr id="calories">
		<td><strong>Calories</strong> 194</td>
		<td>Calories from Fat 81 (42%)</td>
	</tr>
	<tr>
		<td></td>
		<td class="dv">% Daily Value *</td>
	</tr>
	<tr>
		<td><strong>Total Fat</strong> 9g</td>
		<td class="dv">14%</td>
	</tr>
	<tr>
		<td class="sub">Saturated Fat 2g</td>
		<td class="dv">10%</td>
	</tr>
	<tr>
		<td class="sub">Monounsaturated Fat 2g</td>
		<td class="dv"></td>
	</tr>
	<tr>
		<td class="sub">Polyunsaturated Fat 2g</td>
		<td class="dv"></td>
	</tr>

	<tr>
		<td class="sub">Trans Fat 0g</td>
		<td></td>
	</tr>
	<tr>
		<td><strong>Cholesterol</strong> 0g</td>
		<td class="dv">0%</td>
	</tr>
	<tr>
		<td><strong>Sodium</strong> 160mg</td>
		<td class="dv">7%</td>
	</tr>
	<tr>
		<td><strong>Potassium</strong> 80mg</td>
		<td class="dv">2%</td>
	</tr>
	<tr>
		<td><strong>Total Carbohydrate</strong> 29g</td>
		<td class="dv">10%</td>
	</tr>
	<tr>
		<td class="sub">Dietary Fiber 2g</td>
		<td class="dv">8%</td>
	</tr>
	<tr>
		<td class="sub">Sugars 18g</td>
		<td></td>
	</tr>
	<tr>
		<td><strong>Protein</strong> 2g</td>
		<td class="dv">4%</td>
	</tr>
	<tr id="minerals">
		<td>Vitamin A</td>
		<td class="dv">1%</td>
	</tr>
	<tr>
		<td>Vitamin C</td>
		<td class="dv">0%</td>
	</tr>
	<tr>
		<td>Calcium</td>
		<td class="dv">4%</td>
	</tr>
	<tr>
		<td>Iron</td>
		<td class="dv">7%</td>
	</tr>
	<tr>
		<td id="disclaimer" colspan="2">
		* The Percent Daily Values are based on a 2,000 calorie diet, so your values may change depending on your calorie needs. The values here may not be 100% accurate because the recipes have not been professionally evaluated nor have they been evaluated by the U.S. FDA.
		</td>
	</tr>
</table>