<template> : The Template Element for Repeating Content
On this page
- Summary
- Usage
- Supported Attributes
- Data Context and Binding
- Notes
- Examples
- Basic Iteration
- Table Row Generation
- Nested Templates for Hierarchical Data
- Pagination with Start and Max
- Step Iteration (Every Other Item)
- Conditional Rendering with Expressions
- Complex Nested Template with Totals
- Multi-Level Nested Categories
- Inline Content Template
- Styled Cards with Alternating Colors
- Directory Listing with File Types
- Chart Data Labels
- Timeline with Date Grouping
- Performance-Optimized Large Dataset
- Conditional Sections
- Master-Detail Report
- See Also
Summary
The <template> element is a powerful data-binding component that generates repeating content by iterating over collections. It enables dynamic content generation, data context scoping, and complex data transformations in PDF documents.
Usage
The <template> element creates repeating content that:
- Iterates over arrays, lists, and enumerable collections
- Creates a new data context for each item
- Supports nested templates for hierarchical data
- Can filter and paginate data with start, step, and max count
- Works with XML, JSON, and .NET object data sources
- Supports conditional rendering through data binding
- Allows inline content definition via
data-contentattribute
<template data-bind="">
<div class="item">
<h3></h3>
<p></p>
</div>
</template>
Supported Attributes
Data Binding Attributes
| Attribute | Type | Description |
|---|---|---|
data-bind |
expression | Required. Binds to a collection to iterate over. Each item becomes the data context for the template content. |
data-bind-start |
integer | Zero-based index of the first item to generate. Default is 0. |
data-bind-step |
integer | Step increment for iteration. Use 2 to show every other item, 3 for every third, etc. Default is 1. |
data-bind-max |
integer | Maximum number of items to generate. Useful for pagination or limiting output. Default is unlimited. |
data-content |
string | Inline HTML content to use as the template. Overrides child elements. |
Styling and Performance Attributes
| Attribute | Type | Description |
|---|---|---|
data-cache-styles |
boolean | When true, caches styles for better performance with large datasets. Default is false. |
data-style-identifier |
string | Unique identifier for style caching across the document. |
Standard HTML Attributes
| Attribute | Type | Description |
|---|---|---|
hidden |
string | Controls visibility. Set to “hidden” to prevent template rendering. |
Data Context and Binding
Current Item Reference
Within a template, use to reference the current item, or to access properties:
<template data-bind="">
<div>
<strong></strong> -
</div>
</template>
Parent Context Access
Access parent context using path notation:
<template data-bind="">
<div>
Order for customer
</div>
</template>
Index and Count
The template automatically provides context about iteration:
<template data-bind="">
<div>Item of 9: </div>
</template>
Notes
Template Content
The template element itself doesn’t render - only its content is generated for each iteration. The content can be:
- Child Elements: Standard HTML elements as children
- Inline Content: Using
data-contentattribute with HTML string - Mixed Content: Text and elements combined
Data Types Supported
The data-bind attribute accepts:
- .NET Collections:
List<T>,Array,IEnumerable<T> - JSON Arrays: When using JSON data sources
- XML NodeSets: When using XPath expressions
- Data Tables: Rows from database results
- Custom Enumerables: Any type implementing
IEnumerable
Performance Optimization
For large datasets (100+ items):
- Enable
data-cache-styles="true"to reuse style calculations - Set
data-style-identifierfor consistent style caching - Use
data-bind-maxto limit items per page - Minimize complex expressions in binding
Nested Templates
Templates can be nested to handle hierarchical data. Each nested template creates its own data context.
Empty Collections
If the bound collection is empty or null, the template generates no output without error.
Examples
Basic Iteration
<!-- Model: { products: [{name: "Widget", price: 19.99}, {name: "Gadget", price: 29.99}] } -->
<template data-bind="">
<div style="margin-bottom: 10pt;">
<strong></strong>: $
</div>
</template>
<!-- Output: -->
<!-- Widget: $19.99 -->
<!-- Gadget: $29.99 -->
Table Row Generation
<table style="width: 100%;">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<template data-bind="">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</template>
</tbody>
</table>
Nested Templates for Hierarchical Data
<!-- Model: { departments: [{name: "Sales", employees: [{name: "John"}, {name: "Jane"}]}] } -->
<template data-bind="">
<div style="margin-bottom: 20pt; padding: 10pt; border: 1pt solid #ccc;">
<h2> Department</h2>
<ul>
<template data-bind="">
<li></li>
</template>
</ul>
</div>
</template>
<!-- Output: -->
<!-- Sales Department -->
<!-- - John -->
<!-- - Jane -->
Pagination with Start and Max
<!-- Show items 10-19 (page 2 of 10 items per page) -->
<template data-bind=""
data-bind-start="10"
data-bind-max="10">
<div class="item"></div>
</template>
Step Iteration (Every Other Item)
<!-- Show only odd-indexed items -->
<template data-bind=""
data-bind-start="0"
data-bind-step="2">
<div></div>
</template>
<!-- Show only even-indexed items -->
<template data-bind=""
data-bind-start="1"
data-bind-step="2">
<div></div>
</template>
Conditional Rendering with Expressions
<template data-bind="">
<div hidden="">
<h1 class="no_toc" id="td-and-th--table-cell-elements"><td> and <th> : Table Cell Elements</h1>
<hr />
<details open="" class="top-toc">
<summary class="text-delta">
On this page
</summary>
<ul id="markdown-toc">
<li><a href="#summary" id="markdown-toc-summary">Summary</a></li>
<li><a href="#usage" id="markdown-toc-usage">Usage</a></li>
<li><a href="#supported-attributes" id="markdown-toc-supported-attributes">Supported Attributes</a> <ul>
<li><a href="#standard-html-attributes" id="markdown-toc-standard-html-attributes">Standard HTML Attributes</a></li>
<li><a href="#table-specific-attributes" id="markdown-toc-table-specific-attributes">Table-Specific Attributes</a></li>
<li><a href="#data-attributes" id="markdown-toc-data-attributes">Data Attributes</a></li>
<li><a href="#css-style-support" id="markdown-toc-css-style-support">CSS Style Support</a></li>
</ul>
</li>
<li><a href="#cell-types" id="markdown-toc-cell-types">Cell Types</a> <ul>
<li><a href="#td---table-data-cell" id="markdown-toc-td---table-data-cell"><td> - Table Data Cell</a></li>
<li><a href="#th---table-header-cell" id="markdown-toc-th---table-header-cell"><th> - Table Header Cell</a></li>
</ul>
</li>
<li><a href="#notes" id="markdown-toc-notes">Notes</a> <ul>
<li><a href="#default-styling" id="markdown-toc-default-styling">Default Styling</a></li>
<li><a href="#column-spanning" id="markdown-toc-column-spanning">Column Spanning</a></li>
<li><a href="#row-spanning" id="markdown-toc-row-spanning">Row Spanning</a></li>
<li><a href="#cell-width-control" id="markdown-toc-cell-width-control">Cell Width Control</a></li>
<li><a href="#vertical-alignment" id="markdown-toc-vertical-alignment">Vertical Alignment</a></li>
<li><a href="#content-overflow" id="markdown-toc-content-overflow">Content Overflow</a></li>
<li><a href="#text-wrapping" id="markdown-toc-text-wrapping">Text Wrapping</a></li>
</ul>
</li>
<li><a href="#examples" id="markdown-toc-examples">Examples</a> <ul>
<li><a href="#basic-table-cells" id="markdown-toc-basic-table-cells">Basic Table Cells</a></li>
<li><a href="#cells-with-different-alignments" id="markdown-toc-cells-with-different-alignments">Cells with Different Alignments</a></li>
<li><a href="#cells-with-column-spanning" id="markdown-toc-cells-with-column-spanning">Cells with Column Spanning</a></li>
<li><a href="#styled-cells-with-colors" id="markdown-toc-styled-cells-with-colors">Styled Cells with Colors</a></li>
<li><a href="#cells-with-different-widths" id="markdown-toc-cells-with-different-widths">Cells with Different Widths</a></li>
<li><a href="#data-bound-table-cells" id="markdown-toc-data-bound-table-cells">Data-Bound Table Cells</a></li>
<li><a href="#cells-with-custom-padding-and-borders" id="markdown-toc-cells-with-custom-padding-and-borders">Cells with Custom Padding and Borders</a></li>
<li><a href="#cells-with-images-and-mixed-content" id="markdown-toc-cells-with-images-and-mixed-content">Cells with Images and Mixed Content</a></li>
<li><a href="#numeric-data-cells-with-formatting" id="markdown-toc-numeric-data-cells-with-formatting">Numeric Data Cells with Formatting</a></li>
<li><a href="#header-cells-with-scope" id="markdown-toc-header-cells-with-scope">Header Cells with Scope</a></li>
<li><a href="#cells-with-conditional-formatting" id="markdown-toc-cells-with-conditional-formatting">Cells with Conditional Formatting</a></li>
<li><a href="#cells-with-text-wrapping-control" id="markdown-toc-cells-with-text-wrapping-control">Cells with Text Wrapping Control</a></li>
<li><a href="#complex-cell-layout" id="markdown-toc-complex-cell-layout">Complex Cell Layout</a></li>
</ul>
</li>
<li><a href="#see-also" id="markdown-toc-see-also">See Also</a></li>
</ul>
</details>
<hr />
<h2 id="summary">Summary</h2>
<p>The <code class="language-plaintext highlighter-rouge"><td></code> (table data) and <code class="language-plaintext highlighter-rouge"><th></code> (table header) elements represent individual cells within a table row. They contain the actual content of the table and support spanning multiple columns, custom styling, alignment, and all standard CSS properties.</p>
<h2 id="usage">Usage</h2>
<p>Table cell elements create individual cells that:</p>
<ul>
<li>Contain text, images, or other content</li>
<li>Can span multiple columns with <code class="language-plaintext highlighter-rouge">colspan</code></li>
<li>Support vertical and horizontal alignment</li>
<li>Have default padding and borders</li>
<li>Can be styled independently</li>
<li>Support data binding for dynamic content</li>
<li><code class="language-plaintext highlighter-rouge"><th></code> displays in <strong>bold</strong> by default (header cells)</li>
<li><code class="language-plaintext highlighter-rouge"><td></code> uses normal font weight (data cells)</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Header Cell<span class="nt"></th></span>
<span class="nt"><td></span>Data Cell<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">colspan=</span><span class="s">"2"</span><span class="nt">></span>Cell spanning 2 columns<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
</code></pre></div></div>
<hr />
<h2 id="supported-attributes">Supported Attributes</h2>
<h3 id="standard-html-attributes">Standard HTML Attributes</h3>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">id</code></td>
<td>string</td>
<td>Unique identifier for the element.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">class</code></td>
<td>string</td>
<td>CSS class name(s) for styling. Multiple classes separated by spaces.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">style</code></td>
<td>string</td>
<td>Inline CSS styles applied directly to the element.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">title</code></td>
<td>string</td>
<td>Sets the outline/bookmark title for the cell.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">hidden</code></td>
<td>string</td>
<td>Controls visibility. Set to “hidden” to hide the cell.</td>
</tr>
</tbody>
</table>
<h3 id="table-specific-attributes">Table-Specific Attributes</h3>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">colspan</code></td>
<td>integer</td>
<td>Number of columns this cell should span (default: 1).</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">scope</code></td>
<td>string</td>
<td>For <code class="language-plaintext highlighter-rouge"><th></code> only: Indicates if header is for row, col, rowgroup, or colgroup. No effect on output.</td>
</tr>
</tbody>
</table>
<h3 id="data-attributes">Data Attributes</h3>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">data-style-identifier</code></td>
<td>string</td>
<td>Unique identifier for the cell’s style set. Used internally for style caching.</td>
</tr>
</tbody>
</table>
<h3 id="css-style-support">CSS Style Support</h3>
<p><strong>Box Model</strong>:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">width</code>, <code class="language-plaintext highlighter-rouge">min-width</code>, <code class="language-plaintext highlighter-rouge">max-width</code> - Cell width (as percentage or fixed units)</li>
<li><code class="language-plaintext highlighter-rouge">padding</code>, <code class="language-plaintext highlighter-rouge">padding-top</code>, <code class="language-plaintext highlighter-rouge">padding-right</code>, <code class="language-plaintext highlighter-rouge">padding-bottom</code>, <code class="language-plaintext highlighter-rouge">padding-left</code></li>
<li><code class="language-plaintext highlighter-rouge">margin</code> (limited support - use cell spacing on table instead)</li>
</ul>
<p><strong>Borders</strong>:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">border</code>, <code class="language-plaintext highlighter-rouge">border-width</code>, <code class="language-plaintext highlighter-rouge">border-color</code>, <code class="language-plaintext highlighter-rouge">border-style</code></li>
<li><code class="language-plaintext highlighter-rouge">border-top</code>, <code class="language-plaintext highlighter-rouge">border-right</code>, <code class="language-plaintext highlighter-rouge">border-bottom</code>, <code class="language-plaintext highlighter-rouge">border-left</code></li>
<li><code class="language-plaintext highlighter-rouge">border-corner-radius</code> - Rounded corners</li>
</ul>
<p><strong>Alignment</strong>:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">text-align</code>: <code class="language-plaintext highlighter-rouge">left</code>, <code class="language-plaintext highlighter-rouge">center</code>, <code class="language-plaintext highlighter-rouge">right</code>, <code class="language-plaintext highlighter-rouge">justify</code></li>
<li><code class="language-plaintext highlighter-rouge">vertical-align</code>: <code class="language-plaintext highlighter-rouge">top</code>, <code class="language-plaintext highlighter-rouge">middle</code>, <code class="language-plaintext highlighter-rouge">bottom</code></li>
</ul>
<p><strong>Visual Styling</strong>:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">background-color</code>, <code class="language-plaintext highlighter-rouge">background-image</code></li>
<li><code class="language-plaintext highlighter-rouge">background-position</code>, <code class="language-plaintext highlighter-rouge">background-size</code>, <code class="language-plaintext highlighter-rouge">background-repeat</code></li>
<li><code class="language-plaintext highlighter-rouge">color</code> - Text color</li>
<li><code class="language-plaintext highlighter-rouge">opacity</code></li>
</ul>
<p><strong>Typography</strong>:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">font-family</code>, <code class="language-plaintext highlighter-rouge">font-size</code>, <code class="language-plaintext highlighter-rouge">font-weight</code>, <code class="language-plaintext highlighter-rouge">font-style</code></li>
<li><code class="language-plaintext highlighter-rouge">text-decoration</code>, <code class="language-plaintext highlighter-rouge">text-transform</code></li>
<li><code class="language-plaintext highlighter-rouge">line-height</code>, <code class="language-plaintext highlighter-rouge">letter-spacing</code>, <code class="language-plaintext highlighter-rouge">word-spacing</code></li>
</ul>
<p><strong>Content Overflow</strong>:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">overflow</code>: <code class="language-plaintext highlighter-rouge">visible</code>, <code class="language-plaintext highlighter-rouge">hidden</code>, <code class="language-plaintext highlighter-rouge">clip</code></li>
<li><code class="language-plaintext highlighter-rouge">word-wrap</code>, <code class="language-plaintext highlighter-rouge">word-break</code> - Control text wrapping</li>
<li><code class="language-plaintext highlighter-rouge">white-space</code> - Control whitespace handling</li>
</ul>
<hr />
<h2 id="cell-types">Cell Types</h2>
<h3 id="td---table-data-cell"><td> - Table Data Cell</h3>
<p>Standard cells for table data:</p>
<ul>
<li>Normal font weight</li>
<li>Used in <code class="language-plaintext highlighter-rouge"><tbody></code> for data rows</li>
<li>Can contain any content type</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt;"</span><span class="nt">></span>Standard data cell<span class="nt"></td></span>
</code></pre></div></div>
<h3 id="th---table-header-cell"><th> - Table Header Cell</h3>
<p>Header cells for column/row labels:</p>
<ul>
<li><strong>Bold</strong> font weight by default</li>
<li>Typically used in <code class="language-plaintext highlighter-rouge"><thead></code></li>
<li>Can be used in rows or columns as headers</li>
<li>Supports <code class="language-plaintext highlighter-rouge">scope</code> attribute (informational only)</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><th</span> <span class="na">style=</span><span class="s">"padding: 8pt;"</span><span class="nt">></span>Column Header<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">scope=</span><span class="s">"col"</span><span class="nt">></span>Column Header with Scope<span class="nt"></th></span>
</code></pre></div></div>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="default-styling">Default Styling</h3>
<p>Table cells have these default styles:</p>
<ul>
<li><strong>Padding</strong>: 2pt on all sides</li>
<li><strong>Margin</strong>: 2pt on all sides</li>
<li><strong>Border</strong>: 1pt solid gray (#999999)</li>
<li><strong>Vertical Alignment</strong>: Middle</li>
<li><strong>Display Mode</strong>: Table cell</li>
<li><strong>Overflow</strong>: Clip (content clipped if too large)</li>
</ul>
<p>Header cells (<code class="language-plaintext highlighter-rouge"><th></code>) additionally have:</p>
<ul>
<li><strong>Font Weight</strong>: Bold</li>
</ul>
<h3 id="column-spanning">Column Spanning</h3>
<p>Use <code class="language-plaintext highlighter-rouge">colspan</code> to make a cell span multiple columns:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><tr></span>
<span class="nt"><td></span>Column 1<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">colspan=</span><span class="s">"2"</span><span class="nt">></span>Spans columns 2 and 3<span class="nt"></td></span>
<span class="nt"></tr></span>
</code></pre></div></div>
<p><strong>Important</strong>: Total colspan in a row should equal the table’s column count.</p>
<h3 id="row-spanning">Row Spanning</h3>
<p><strong>Note</strong>: While HTML supports <code class="language-plaintext highlighter-rouge">rowspan</code>, the Scryber implementation does not expose this attribute in the HTML components. Use <code class="language-plaintext highlighter-rouge">colspan</code> for horizontal spanning.</p>
<h3 id="cell-width-control">Cell Width Control</h3>
<p>Cell widths can be specified in several ways:</p>
<p><strong>Percentage widths</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><td</span> <span class="na">style=</span><span class="s">"width: 30%;"</span><span class="nt">></span>30% of table width<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"width: 70%;"</span><span class="nt">></span>70% of table width<span class="nt"></td></span>
</code></pre></div></div>
<p><strong>Fixed widths</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><td</span> <span class="na">style=</span><span class="s">"width: 100pt;"</span><span class="nt">></span>Fixed 100 points<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"width: 200pt;"</span><span class="nt">></span>Fixed 200 points<span class="nt"></td></span>
</code></pre></div></div>
<p><strong>Auto widths</strong>: Omit width to let cells size to content.</p>
<h3 id="vertical-alignment">Vertical Alignment</h3>
<p>Control vertical positioning of content within cells:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><td</span> <span class="na">style=</span><span class="s">"vertical-align: top;"</span><span class="nt">></span>Top aligned<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"vertical-align: middle;"</span><span class="nt">></span>Middle aligned (default)<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"vertical-align: bottom;"</span><span class="nt">></span>Bottom aligned<span class="nt"></td></span>
</code></pre></div></div>
<h3 id="content-overflow">Content Overflow</h3>
<p>Cells have <code class="language-plaintext highlighter-rouge">overflow: clip</code> by default, meaning content that doesn’t fit will be clipped:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Content will be clipped if too large --></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"width: 100pt; overflow: clip;"</span><span class="nt">></span>
Very long content that exceeds cell width will be clipped
<span class="nt"></td></span>
<span class="c"><!-- Allow content to be visible --></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"width: 100pt; overflow: visible;"</span><span class="nt">></span>
Content may overflow cell boundaries
<span class="nt"></td></span>
</code></pre></div></div>
<h3 id="text-wrapping">Text Wrapping</h3>
<p>Control how text wraps within cells:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><td</span> <span class="na">style=</span><span class="s">"word-wrap: break-word;"</span><span class="nt">></span>
LongWordsThatDontFitWillBeBreken
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"white-space: nowrap;"</span><span class="nt">></span>
This text won't wrap to next line
<span class="nt"></td></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="basic-table-cells">Basic Table Cells</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; background-color: #e0e0e0;"</span><span class="nt">></span>
Name
<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; background-color: #e0e0e0;"</span><span class="nt">></span>
Email
<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>John Doe<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>john@example.com<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="cells-with-different-alignments">Cells with Different Alignments</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: left;"</span><span class="nt">></span>
Left aligned text
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: center;"</span><span class="nt">></span>
Center aligned text
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: right;"</span><span class="nt">></span>
Right aligned text
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 20pt; vertical-align: top;"</span><span class="nt">></span>
Top aligned
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 20pt; vertical-align: middle;"</span><span class="nt">></span>
Middle aligned (default)
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 20pt; vertical-align: bottom;"</span><span class="nt">></span>
Bottom aligned
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="cells-with-column-spanning">Cells with Column Spanning</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">colspan=</span><span class="s">"3"</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 10pt;
background-color: #34495e; color: white;
text-align: center; font-size: 14pt;"</span><span class="nt">></span>
Sales Report - Q1 2024
<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; background-color: #95a5a6;"</span><span class="nt">></span>
Month
<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; background-color: #95a5a6;"</span><span class="nt">></span>
Revenue
<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; background-color: #95a5a6;"</span><span class="nt">></span>
Growth
<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>January<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: right;"</span><span class="nt">></span>$42,000<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: right;"</span><span class="nt">></span>5%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>February<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: right;"</span><span class="nt">></span>$45,000<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: right;"</span><span class="nt">></span>7%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>March<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: right;"</span><span class="nt">></span>$48,000<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: right;"</span><span class="nt">></span>7%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"><tfoot></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; font-weight: bold;"</span><span class="nt">></span>
Total
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">colspan=</span><span class="s">"2"</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;
text-align: right; font-weight: bold;"</span><span class="nt">></span>
$135,000
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tfoot></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="styled-cells-with-colors">Styled Cells with Colors</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"padding: 10pt; background-color: #2c3e50; color: white; border: 1pt solid white;"</span><span class="nt">></span>
Status
<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"padding: 10pt; background-color: #2c3e50; color: white; border: 1pt solid white;"</span><span class="nt">></span>
Count
<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt; background-color: #2ecc71; color: white;
border: 1pt solid #27ae60; font-weight: bold;"</span><span class="nt">></span>
Completed
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt; background-color: #2ecc71; color: white;
border: 1pt solid #27ae60; text-align: center;"</span><span class="nt">></span>
45
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt; background-color: #f39c12; color: white;
border: 1pt solid #e67e22; font-weight: bold;"</span><span class="nt">></span>
In Progress
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt; background-color: #f39c12; color: white;
border: 1pt solid #e67e22; text-align: center;"</span><span class="nt">></span>
23
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt; background-color: #e74c3c; color: white;
border: 1pt solid #c0392b; font-weight: bold;"</span><span class="nt">></span>
Pending
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt; background-color: #e74c3c; color: white;
border: 1pt solid #c0392b; text-align: center;"</span><span class="nt">></span>
12
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="cells-with-different-widths">Cells with Different Widths</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"width: 10%; border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>ID<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"width: 40%; border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>Description<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"width: 20%; border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>Category<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"width: 15%; border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>Date<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"width: 15%; border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>Amount<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: center;"</span><span class="nt">></span>001<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>
Premium Widget with Extended Warranty
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>Electronics<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>2024-01-15<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: right;"</span><span class="nt">></span>$299.99<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="data-bound-table-cells">Data-Bound Table Cells</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: {
products: [
{id: "P001", name: "Laptop", price: 1299.99, stock: 15},
{id: "P002", name: "Mouse", price: 24.99, stock: 150},
{id: "P003", name: "Keyboard", price: 79.99, stock: 75}
]
} --></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; background-color: #34495e; color: white;"</span><span class="nt">></span>
Product ID
<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; background-color: #34495e; color: white;"</span><span class="nt">></span>
Product Name
<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; background-color: #34495e; color: white;"</span><span class="nt">></span>
Price
<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; background-color: #34495e; color: white;"</span><span class="nt">></span>
Stock
<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; font-family: monospace;"</span><span class="nt">></span>
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: right;"</span><span class="nt">></span>
$
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: center;
color: ; font-weight: bold;"</span><span class="nt">></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="cells-with-custom-padding-and-borders">Cells with Custom Padding and Borders</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: separate; border-spacing: 3pt;"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 3pt solid #3498db; padding: 15pt;
background-color: #ebf5fb; border-radius: 5pt;"</span><span class="nt">></span>
Cell with thick blue border and generous padding
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border-left: 5pt solid #e74c3c; padding: 10pt 10pt 10pt 15pt;
background-color: #fadbd8;"</span><span class="nt">></span>
Cell with thick left border accent
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="cells-with-images-and-mixed-content">Cells with Images and Mixed Content</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt; width: 25%; text-align: center;"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"product.jpg"</span> <span class="na">style=</span><span class="s">"width: 80pt; height: 80pt;"</span> <span class="nt">/></span>
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 10pt; width: 75%;"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"margin: 0 0 5pt 0; color: #2c3e50;"</span><span class="nt">></span>Premium Product<span class="nt"></h3></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin: 0 0 5pt 0; color: #7f8c8d; font-size: 9pt;"</span><span class="nt">></span>
SKU: PROD-12345
<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin: 0; font-size: 10pt; line-height: 1.5;"</span><span class="nt">></span>
High-quality product with excellent features and outstanding
customer reviews. Perfect for professional use.
<span class="nt"></p></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="numeric-data-cells-with-formatting">Numeric Data Cells with Formatting</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: left;"</span><span class="nt">></span>Metric<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: right;"</span><span class="nt">></span>Q1<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: right;"</span><span class="nt">></span>Q2<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: right;"</span><span class="nt">></span>Q3<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: right;"</span><span class="nt">></span>Q4<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>Revenue<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt; text-align: right;
font-family: monospace;"</span><span class="nt">></span>$125,000<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt; text-align: right;
font-family: monospace;"</span><span class="nt">></span>$145,000<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt; text-align: right;
font-family: monospace;"</span><span class="nt">></span>$138,000<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt; text-align: right;
font-family: monospace;"</span><span class="nt">></span>$167,000<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt;"</span><span class="nt">></span>Growth %<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt; text-align: right;
color: #27ae60;"</span><span class="nt">></span>+8.5%<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt; text-align: right;
color: #27ae60;"</span><span class="nt">></span>+16.0%<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt; text-align: right;
color: #e74c3c;"</span><span class="nt">></span>-4.8%<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 8pt; text-align: right;
color: #27ae60;"</span><span class="nt">></span>+21.0%<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="header-cells-with-scope">Header Cells with Scope</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">scope=</span><span class="s">"col"</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>Product<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">scope=</span><span class="s">"col"</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>Price<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">scope=</span><span class="s">"col"</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>Stock<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">scope=</span><span class="s">"row"</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: left;"</span><span class="nt">></span>
Widget A
<span class="nt"></th></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>$25.00<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>100<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">scope=</span><span class="s">"row"</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: left;"</span><span class="nt">></span>
Widget B
<span class="nt"></th></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>$45.00<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>50<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="cells-with-conditional-formatting">Cells with Conditional Formatting</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: {
scores: [
{student: "Alice", math: 95, english: 88, science: 92},
{student: "Bob", math: 72, english: 85, science: 78},
{student: "Carol", math: 88, english: 91, science: 89}
]
} --></span>
<span class="nt"><style></span>
<span class="nc">.grade-a</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#d4edda</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#155724</span><span class="p">;</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.grade-b</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#d1ecf1</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#0c5460</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.grade-c</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#fff3cd</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#856404</span><span class="p">;</span> <span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>Student<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>Math<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>English<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></span>Science<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt;"</span><span class="nt">></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: center;"</span>
<span class="na">class=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: center;"</span>
<span class="na">class=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; text-align: center;"</span>
<span class="na">class=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="cells-with-text-wrapping-control">Cells with Text Wrapping Control</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; width: 150pt;
word-wrap: break-word;"</span><span class="nt">></span>
ThisIsAVeryLongWordThatNeedsToBeWrappedWithinTheCellBoundaries
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid black; padding: 8pt; width: 150pt;
white-space: nowrap; overflow: hidden;"</span><span class="nt">></span>
This text will not wrap and may be clipped
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="complex-cell-layout">Complex Cell Layout</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse;"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 0; width: 40%;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #3498db; color: white; padding: 10pt;"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"margin: 0;"</span><span class="nt">></span>Section Title<span class="nt"></h3></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 10pt;"</span><span class="nt">></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin: 5pt 0;"</span><span class="nt">></span>Content area with multiple elements<span class="nt"></p></span>
<span class="nt"><ul</span> <span class="na">style=</span><span class="s">"margin: 5pt 0; padding-left: 15pt;"</span><span class="nt">></span>
<span class="nt"><li></span>Feature one<span class="nt"></li></span>
<span class="nt"><li></span>Feature two<span class="nt"></li></span>
<span class="nt"><li></span>Feature three<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; padding: 15pt; width: 60%;
vertical-align: top; background-color: #ecf0f1;"</span><span class="nt">></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin: 0 0 10pt 0; font-size: 11pt; line-height: 1.6;"</span><span class="nt">></span>
This cell contains detailed description text with proper
formatting and spacing. The content is top-aligned within
the cell.
<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin: 0; font-size: 9pt; color: #7f8c8d; font-style: italic;"</span><span class="nt">></span>
Additional notes or metadata can be included here.
<span class="nt"></p></span>
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmltags/table.html">table</a> - Table element</li>
<li><a href="/reference/htmltags/tr.html">tr</a> - Table row element</li>
<li><a href="/reference/htmltags/table.html#table-sections">thead, tbody, tfoot</a> - Table sections</li>
<li><a href="/reference/styles/">CSS Styles</a> - Complete CSS styling reference</li>
<li><a href="/reference/binding/">Data Binding</a> - Dynamic data binding</li>
<li><a href="/reference/htmltags/template.html">Template Element</a> - Template for repeating content</li>
</ul>
<hr />
</div>
</template>
Complex Nested Template with Totals
<!-- Invoice with line items -->
<div class="invoice">
<h1>Invoice #</h1>
<p>Customer: </p>
<table style="width: 100%; margin: 20pt 0;">
<thead>
<tr style="background-color: #f0f0f0;">
<th>Description</th>
<th style="text-align: right;">Qty</th>
<th style="text-align: right;">Price</th>
<th style="text-align: right;">Total</th>
</tr>
</thead>
<tbody>
<template data-bind="">
<tr>
<td></td>
<td style="text-align: right;"></td>
<td style="text-align: right;">$</td>
<td style="text-align: right;">$</td>
</tr>
</template>
</tbody>
<tfoot>
<tr style="font-weight: bold; border-top: 2pt solid black;">
<td colspan="3" style="text-align: right;">Total:</td>
<td style="text-align: right;">$</td>
</tr>
</tfoot>
</table>
</div>
Multi-Level Nested Categories
<!-- Model: categories with subcategories and products -->
<template data-bind="">
<div style="margin-bottom: 30pt;">
<h2 style="color: #336699; border-bottom: 2pt solid #336699;">
</h2>
<template data-bind="">
<div style="margin: 15pt 0 15pt 20pt;">
<h3 style="color: #666;"></h3>
<template data-bind="">
<div style="margin: 5pt 0 5pt 20pt; padding: 5pt; border-left: 3pt solid #ccc;">
<strong></strong> - $
<br/>
<span style="font-size: 9pt; color: #666;"></span>
</div>
</template>
</div>
</template>
</div>
</template>
Inline Content Template
<!-- Using data-content for dynamic template generation -->
<template data-bind=""
data-content="<div style='padding: 10pt;'><strong></strong><br/></div>">
</template>
Styled Cards with Alternating Colors
<style>
.card {
padding: 15pt;
margin-bottom: 10pt;
border-radius: 5pt;
}
.card:nth-child(odd) {
background-color: #f9f9f9;
}
.card:nth-child(even) {
background-color: #e9e9e9;
}
</style>
<template data-bind="">
<div class="card">
<h3 style="margin: 0 0 5pt 0;"></h3>
<p style="margin: 0; color: #666;"></p>
<div style="margin-top: 5pt; font-size: 9pt; color: #999;">
By on
</div>
</div>
</template>
Directory Listing with File Types
<template data-bind="">
<div style="padding: 8pt; border-bottom: 1pt solid #ddd;">
<div style="display: inline-block; width: 40%;">
<img src="" style="width: 16pt; height: 16pt; vertical-align: middle;"/>
<span style="margin-left: 5pt;"></span>
</div>
<div style="display: inline-block; width: 30%;">
</div>
<div style="display: inline-block; width: 30%; text-align: right;">
</div>
</div>
</template>
Chart Data Labels
<!-- Generating labels for a bar chart -->
<div style="position: relative; height: 300pt;">
<template data-bind="">
<div style="position: absolute;
left: pt;
bottom: 0;
width: 40pt;
height: pt;
background-color: #336699;">
</div>
<div style="position: absolute;
left: pt;
bottom: -20pt;
width: 40pt;
text-align: center;
font-size: 8pt;">
</div>
</template>
</div>
Timeline with Date Grouping
<template data-bind="">
<div style="margin-bottom: 15pt; padding-left: 20pt; border-left: 2pt solid #336699;">
<div style="font-weight: bold; color: #336699; margin-bottom: 5pt;">
</div>
<template data-bind="">
<div style="margin-bottom: 8pt; padding-left: 15pt;">
<div style="font-weight: bold;"> - </div>
<div style="color: #666; font-size: 9pt;"></div>
</div>
</template>
</div>
</template>
Performance-Optimized Large Dataset
<!-- Efficient rendering of 1000+ items -->
<template data-bind=""
data-cache-styles="true"
data-style-identifier="large-list-item">
<div class="list-item">
-
</div>
</template>
Conditional Sections
<!-- Only render template if collection has items -->
<div style="border: 1pt solid #ccc; padding: 10pt;">
<h3>Available Products</h3>
<template data-bind="">
<div class="product">
- $
</div>
</template>
<div hidden="">
<em>No products available.</em>
</div>
</div>
Master-Detail Report
<template data-bind="">
<div style="page-break-before: always; padding: 20pt;">
<!-- Customer Header -->
<div style="background-color: #336699; color: white; padding: 10pt; margin-bottom: 15pt;">
<h1 style="margin: 0;"></h1>
<div>Contact: | Phone: </div>
</div>
<!-- Customer Orders -->
<h2>Orders</h2>
<table style="width: 100%; margin-bottom: 20pt;">
<thead>
<tr style="background-color: #f0f0f0;">
<th>Order Date</th>
<th>Order #</th>
<th style="text-align: right;">Amount</th>
</tr>
</thead>
<tbody>
<template data-bind="">
<tr>
<td></td>
<td></td>
<td style="text-align: right;">$</td>
</tr>
</template>
</tbody>
</table>
<!-- Order Details -->
<h2>Order Details</h2>
<template data-bind="">
<div style="margin-bottom: 20pt; padding: 10pt; border: 1pt solid #ddd;">
<h3>Order - </h3>
<table style="width: 100%;">
<thead>
<tr>
<th>Product</th>
<th style="text-align: right;">Qty</th>
<th style="text-align: right;">Price</th>
<th style="text-align: right;">Total</th>
</tr>
</thead>
<tbody>
<template data-bind="">
<tr>
<td></td>
<td style="text-align: right;"></td>
<td style="text-align: right;">$</td>
<td style="text-align: right;">$</td>
</tr>
</template>
</tbody>
<tfoot>
<tr style="font-weight: bold;">
<td colspan="3" style="text-align: right;">Order Total:</td>
<td style="text-align: right;">$</td>
</tr>
</tfoot>
</table>
</div>
</template>
</div>
</template>
See Also
- Data Binding - Complete guide to data binding expressions
- ForEach Component - Base ForEach component in Scryber namespace
- Data Sources - XML, JSON, and database data sources
- div - Generic container element
- span - Inline container element
- Expressions - Expression syntax and functions