<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PowerPoint Table Style Visualizer</title>
<link rel="stylesheet" href="table-styles.css">
</head>
<body>
<div class="container">
<h1>PowerPoint Table Style Visualizer</h1>
<p>Preview different table styling combinations for the deck builder</p>
<h2>Header Styles</h2>
<h3>dark_blue_white_text</h3>
<table class="header-dark-blue">
<tr>
<th>Name</th>
<th>Sales</th>
<th>Region</th>
<th>Year</th>
</tr>
<tr>
<td>John Smith</td>
<td>$125,000</td>
<td>North</td>
<td>2024</td>
</tr>
<tr>
<td>Sarah Johnson</td>
<td>$98,500</td>
<td>South</td>
<td>2024</td>
</tr>
<tr>
<td>Mike Chen</td>
<td>$156,700</td>
<td>East</td>
<td>2024</td>
</tr>
</table>
<h3>light_blue_dark_text</h3>
<table class="header-light-blue">
<tr>
<th>Name</th>
<th>Sales</th>
<th>Region</th>
<th>Year</th>
</tr>
<tr>
<td>John Smith</td>
<td>$125,000</td>
<td>North</td>
<td>2024</td>
</tr>
<tr>
<td>Sarah Johnson</td>
<td>$98,500</td>
<td>South</td>
<td>2024</td>
</tr>
<tr>
<td>Mike Chen</td>
<td>$156,700</td>
<td>East</td>
<td>2024</td>
</tr>
</table>
<h3>dark_gray_white_text</h3>
<table class="header-dark-gray">
<tr>
<th>Name</th>
<th>Sales</th>
<th>Region</th>
<th>Year</th>
</tr>
<tr>
<td>John Smith</td>
<td>$125,000</td>
<td>North</td>
<td>2024</td>
</tr>
<tr>
<td>Sarah Johnson</td>
<td>$98,500</td>
<td>South</td>
<td>2024</td>
</tr>
<tr>
<td>Mike Chen</td>
<td>$156,700</td>
<td>East</td>
<td>2024</td>
</tr>
</table>
<h3>light_gray_dark_text</h3>
<table class="header-light-gray">
<tr>
<th>Name</th>
<th>Sales</th>
<th>Region</th>
<th>Year</th>
</tr>
<tr>
<td>John Smith</td>
<td>$125,000</td>
<td>North</td>
<td>2024</td>
</tr>
<tr>
<td>Sarah Johnson</td>
<td>$98,500</td>
<td>South</td>
<td>2024</td>
</tr>
<tr>
<td>Mike Chen</td>
<td>$156,700</td>
<td>East</td>
<td>2024</td>
</tr>
</table>
<h2>Row Styles with Headers</h2>
<h3>alternating_light_gray + dark_blue_white_text header</h3>
<table class="header-dark-blue rows-alternating-gray">
<tr>
<th>Product</th>
<th>Q1 Sales</th>
<th>Q2 Sales</th>
<th>Q3 Sales</th>
</tr>
<tr>
<td>Widget A</td>
<td>$45,000</td>
<td>$52,000</td>
<td>$48,000</td>
</tr>
<tr>
<td>Widget B</td>
<td>$38,500</td>
<td>$41,200</td>
<td>$39,800</td>
</tr>
<tr>
<td>Widget C</td>
<td>$62,100</td>
<td>$59,900</td>
<td>$64,300</td>
</tr>
<tr>
<td>Widget D</td>
<td>$29,800</td>
<td>$33,400</td>
<td>$31,600</td>
</tr>
</table>
<h3>alternating_light_blue + dark_gray_white_text header</h3>
<table class="header-dark-gray rows-alternating-blue">
<tr>
<th>Department</th>
<th>Budget</th>
<th>Spent</th>
<th>Remaining</th>
</tr>
<tr>
<td>Marketing</td>
<td>$100,000</td>
<td>$85,000</td>
<td>$15,000</td>
</tr>
<tr>
<td>Development</td>
<td>$250,000</td>
<td>$198,500</td>
<td>$51,500</td>
</tr>
<tr>
<td>Sales</td>
<td>$150,000</td>
<td>$142,800</td>
<td>$7,200</td>
</tr>
<tr>
<td>Support</td>
<td>$75,000</td>
<td>$68,200</td>
<td>$6,800</td>
</tr>
</table>
<h3>solid_white + light_blue_dark_text header</h3>
<table class="header-light-blue rows-solid-white">
<tr>
<th>Metric</th>
<th>January</th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>Revenue</td>
<td>$450,000</td>
<td>$482,000</td>
<td>$501,000</td>
</tr>
<tr>
<td>Customers</td>
<td>1,250</td>
<td>1,340</td>
<td>1,425</td>
</tr>
<tr>
<td>Conversion</td>
<td>12.5%</td>
<td>13.2%</td>
<td>14.1%</td>
</tr>
</table>
<h2>Border Styles</h2>
<h3>thin_gray (all borders)</h3>
<table class="header-dark-blue border-thin-gray">
<tr>
<th>Feature</th>
<th>Basic</th>
<th>Premium</th>
<th>Enterprise</th>
</tr>
<tr>
<td>Storage</td>
<td>10GB</td>
<td>100GB</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Users</td>
<td>5</td>
<td>25</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Support</td>
<td>Email</td>
<td>Phone + Email</td>
<td>24/7 Dedicated</td>
</tr>
</table>
<h3>header_only (border under header only)</h3>
<table class="header-dark-gray border-header-only">
<tr>
<th>Task</th>
<th>Owner</th>
<th>Due Date</th>
<th>Status</th>
</tr>
<tr>
<td>Website Redesign</td>
<td>Alice Cooper</td>
<td>Mar 15</td>
<td>In Progress</td>
</tr>
<tr>
<td>Mobile App Update</td>
<td>Bob Wilson</td>
<td>Mar 22</td>
<td>Planning</td>
</tr>
<tr>
<td>Database Migration</td>
<td>Carol Smith</td>
<td>Apr 5</td>
<td>Not Started</td>
</tr>
</table>
<h3>outer_only (border around table perimeter)</h3>
<table class="header-light-gray border-outer-only">
<tr>
<th>Region</th>
<th>Population</th>
<th>Growth Rate</th>
<th>GDP</th>
</tr>
<tr>
<td>North America</td>
<td>579M</td>
<td>0.7%</td>
<td>$26.3T</td>
</tr>
<tr>
<td>Europe</td>
<td>748M</td>
<td>0.1%</td>
<td>$23.2T</td>
</tr>
<tr>
<td>Asia Pacific</td>
<td>4.6B</td>
<td>0.9%</td>
<td>$38.5T</td>
</tr>
</table>
<h3>no_borders</h3>
<table class="header-light-blue border-none">
<tr>
<th>Color</th>
<th>Hex Code</th>
<th>RGB</th>
<th>Usage</th>
</tr>
<tr>
<td>Primary Blue</td>
<td>#4472C4</td>
<td>68, 114, 196</td>
<td>Headers, Accents</td>
</tr>
<tr>
<td>Light Gray</td>
<td>#F8F8F8</td>
<td>248, 248, 248</td>
<td>Alternating Rows</td>
</tr>
<tr>
<td>Dark Gray</td>
<td>#666666</td>
<td>102, 102, 102</td>
<td>Text, Borders</td>
</tr>
</table>
</div>
</body>
</html>
