<!DOCTYPE html>
<html>
<head>
<title>Nested Table Test Cases</title>
<style>
body { font-family: Georgia, serif; margin: 40px; }
table { border-collapse: collapse; margin: 20px 0; }
th, td { border: 1px solid #333; padding: 10px; vertical-align: top; }
th { background-color: #f0f0f0; }
h2 { margin-top: 40px; color: #333; }
.section { margin-bottom: 60px; }
</style>
</head>
<body>
<h1>Nested Table Test Cases</h1>
<div class="section">
<h2>1. Simple Data Table (no nesting)</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</table>
</div>
<div class="section">
<h2>2. Table with Nested Table</h2>
<table>
<tr>
<th>Category</th>
<th>Details</th>
</tr>
<tr>
<td>Fruits</td>
<td>
<table>
<tr>
<th>Name</th>
<th>Color</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>Red</td>
<td>$1.50</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>$0.75</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple</td>
<td>$2.00</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Vegetables</td>
<td>
<table>
<tr>
<th>Name</th>
<th>Color</th>
<th>Price</th>
</tr>
<tr>
<td>Carrot</td>
<td>Orange</td>
<td>$0.50</td>
</tr>
<tr>
<td>Broccoli</td>
<td>Green</td>
<td>$1.25</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="section">
<h2>3. Table with Lists in Cells</h2>
<table>
<tr>
<th>Topic</th>
<th>Key Points</th>
<th>Resources</th>
</tr>
<tr>
<td>Programming</td>
<td>
<ul>
<li>Learn syntax</li>
<li>Practice algorithms</li>
<li>Build projects</li>
</ul>
</td>
<td>
<ol>
<li>Documentation</li>
<li>Tutorials</li>
<li>Books</li>
</ol>
</td>
</tr>
<tr>
<td>Design</td>
<td>
<ul>
<li>Color theory</li>
<li>Typography</li>
<li>Layout principles</li>
</ul>
</td>
<td>
<ol>
<li>Design blogs</li>
<li>Courses</li>
<li>Practice</li>
</ol>
</td>
</tr>
</table>
</div>
<div class="section">
<h2>4. Table with Images</h2>
<table>
<tr>
<th>Icon</th>
<th>Description</th>
</tr>
<tr>
<td><img src="https://via.placeholder.com/50x50/ff0000/ffffff?text=R" alt="Red square"></td>
<td>This is a <strong>red</strong> indicator showing an error state.</td>
</tr>
<tr>
<td><img src="https://via.placeholder.com/50x50/00ff00/000000?text=G" alt="Green square"></td>
<td>This is a <strong>green</strong> indicator showing success.</td>
</tr>
<tr>
<td><img src="https://via.placeholder.com/50x50/0000ff/ffffff?text=B" alt="Blue square"></td>
<td>This is a <strong>blue</strong> indicator showing information.</td>
</tr>
</table>
</div>
<div class="section">
<h2>5. Table with Code Blocks</h2>
<table>
<tr>
<th>Language</th>
<th>Hello World Example</th>
</tr>
<tr>
<td>Python</td>
<td><pre><code>print("Hello, World!")</code></pre></td>
</tr>
<tr>
<td>JavaScript</td>
<td><pre><code>console.log("Hello, World!");</code></pre></td>
</tr>
<tr>
<td>Rust</td>
<td><pre><code>fn main() {
println!("Hello, World!");
}</code></pre></td>
</tr>
</table>
</div>
<div class="section">
<h2>6. Table with Blockquotes</h2>
<table>
<tr>
<th>Author</th>
<th>Famous Quote</th>
</tr>
<tr>
<td>Albert Einstein</td>
<td>
<blockquote>
Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world.
</blockquote>
</td>
</tr>
<tr>
<td>Carl Jung</td>
<td>
<blockquote>
Who looks outside, dreams; who looks inside, awakes.
</blockquote>
</td>
</tr>
</table>
</div>
<div class="section">
<h2>7. Deeply Nested Tables (3 levels)</h2>
<table>
<tr>
<th>Level 1</th>
<th>Content</th>
</tr>
<tr>
<td>Outer</td>
<td>
<table>
<tr>
<th>Level 2</th>
<th>Content</th>
</tr>
<tr>
<td>Middle</td>
<td>
<table>
<tr>
<th>Level 3</th>
<th>Value</th>
</tr>
<tr>
<td>Inner A</td>
<td>Deep value 1</td>
</tr>
<tr>
<td>Inner B</td>
<td>Deep value 2</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="section">
<h2>8. Table with Mixed Content</h2>
<table>
<tr>
<th>Feature</th>
<th>Description</th>
<th>Example</th>
</tr>
<tr>
<td><strong>Rich Text</strong></td>
<td>
<p>Supports <em>italic</em>, <strong>bold</strong>, and <code>code</code> formatting.</p>
<p>Also supports <a href="https://example.com">links</a>.</p>
</td>
<td>
<ul>
<li>Item with <strong>bold</strong></li>
<li>Item with <em>italic</em></li>
</ul>
</td>
</tr>
<tr>
<td><strong>Nested Structure</strong></td>
<td>
<table>
<tr><td>Sub-item 1</td><td>Value 1</td></tr>
<tr><td>Sub-item 2</td><td>Value 2</td></tr>
</table>
</td>
<td>
<blockquote>A quote inside a table cell with a nested table nearby.</blockquote>
</td>
</tr>
</table>
</div>
<div class="section">
<h2>9. Table with Rowspan and Colspan</h2>
<table>
<tr>
<th rowspan="2">Category</th>
<th colspan="2">Metrics</th>
</tr>
<tr>
<th>Q1</th>
<th>Q2</th>
</tr>
<tr>
<td rowspan="2">Sales</td>
<td>$10,000</td>
<td>$15,000</td>
</tr>
<tr>
<td>$12,000</td>
<td>$18,000</td>
</tr>
<tr>
<td>Marketing</td>
<td colspan="2">Combined: $5,000</td>
</tr>
</table>
</div>
<div class="section">
<h2>10. Complex Real-World Example: Product Comparison</h2>
<table>
<tr>
<th>Product</th>
<th>Specifications</th>
<th>Pricing</th>
</tr>
<tr>
<td>
<strong>Laptop Pro</strong>
<p><em>For professionals</em></p>
</td>
<td>
<table>
<tr><th>Spec</th><th>Value</th></tr>
<tr><td>CPU</td><td>Intel i9</td></tr>
<tr><td>RAM</td><td>32GB</td></tr>
<tr><td>Storage</td><td>1TB SSD</td></tr>
</table>
</td>
<td>
<ul>
<li>Base: $2,499</li>
<li>With warranty: $2,799</li>
</ul>
</td>
</tr>
<tr>
<td>
<strong>Laptop Basic</strong>
<p><em>For students</em></p>
</td>
<td>
<table>
<tr><th>Spec</th><th>Value</th></tr>
<tr><td>CPU</td><td>Intel i5</td></tr>
<tr><td>RAM</td><td>8GB</td></tr>
<tr><td>Storage</td><td>256GB SSD</td></tr>
</table>
</td>
<td>
<ul>
<li>Base: $799</li>
<li>With warranty: $899</li>
</ul>
</td>
</tr>
</table>
</div>
<div>
<table id="ch01_table_5_1730130814941611">
<caption><span class="label">Table 1-5. </span>Different prompts can cause models to perform very differently, as seen in Gemini’s technical report (December 2023).</caption>
<thead>
<tr>
<th> </th>
<th>Gemini Ultra</th>
<th>Gemini Pro</th>
<th>GPT-4</th>
<th>GPT-3.5</th>
<th>PaLM <span class="keep-together">2-L</span></th>
<th>Claude 2</th>
<th>Inflection-2</th>
<th>Grok 1</th>
<th>Llama-2</th>
</tr>
</thead>
<tr>
<td rowspan="2">MMLU performance</td>
<td>90.04%<br/> CoT@32</td>
<td>79.13%<br/> CoT@8</td>
<td>87.29%<br/> CoT@32<br/> (via API)</td>
<td>70%<br/> 5-shot</td>
<td>78.4%<br/> 5-shot</td>
<td>78.5%<br/> 5-shot CoT</td>
<td>79.6%<br/> 5-shot</td>
<td>73.0%<br/> 5-shot</td>
<td>68.0%</td>
</tr>
<tr>
<td>83.7%<br/> 5-shot</td>
<td>71.8%<br/> 5-shot</td>
<td>86.4%<br/> 5-shot (reported)</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>