@colspan and @rowspan : The Table Cell Spanning Attributes

The colspan and rowspan attributes enable table cells to span multiple columns or rows, creating complex table layouts with merged cells. These attributes are essential for creating structured data tables, reports, forms, and sophisticated grid layouts in PDF documents.

Usage

The colspan and rowspan attributes control cell spanning:

colspan - Number of columns a cell spans horizontally
rowspan - Number of rows a cell spans vertically
Default value is 1 (no spanning)
Used exclusively with <td> and <th> table cells
Enable complex table layouts and merged cells
Support data binding for dynamic table structures
Must account for spanned cells in row/column calculations

<!-- Cell spanning 2 columns -->
<td colspan="2">Spans two columns</td>

<!-- Cell spanning 3 rows -->
<td rowspan="3">Spans three rows</td>

<!-- Cell spanning both -->
<td colspan="2" rowspan="2">Spans 2 columns and 2 rows</td>

<!-- Dynamic spanning -->
<td colspan="">Dynamic column span</td>

Supported Elements

The colspan and rowspan attributes are used with:

Table Cell Elements

<td> - Table data cell (primary use)
<th> - Table header cell

Binding Values

The colspan and rowspan attributes support data binding:

<!-- Dynamic colspan -->
<td colspan="">Dynamic column span</td>

<!-- Dynamic rowspan -->
<td rowspan="">Dynamic row span</td>

<!-- Calculated spanning -->
<td colspan="">Spans all but one column</td>

<!-- Conditional spanning -->
<td colspan="">
    Conditionally merged cell
</td>

<!-- In repeating table structures -->
<template data-bind="">
    <tr>
        <td colspan=""><h1 id="color-face-size--deprecated-font-element-attributes">@color, @face, @size : Deprecated Font Element Attributes</h1>

<p>The <code class="language-plaintext highlighter-rouge">color</code>, <code class="language-plaintext highlighter-rouge">face</code>, and <code class="language-plaintext highlighter-rouge">size</code> attributes are deprecated HTML attributes historically used with the <code class="language-plaintext highlighter-rouge">&lt;font&gt;</code> element for styling text appearance. While still supported for backward compatibility, <strong>modern CSS properties are strongly recommended</strong> for all new templates.</p>

<h2 id="usage">Usage</h2>

<p>These attributes were used with the deprecated <code class="language-plaintext highlighter-rouge">&lt;font&gt;</code> element to control text styling:</p>
<ul>
  <li><strong><code class="language-plaintext highlighter-rouge">color</code></strong>: Sets the text color (use CSS <code class="language-plaintext highlighter-rouge">color</code> instead)</li>
  <li><strong><code class="language-plaintext highlighter-rouge">face</code></strong>: Sets the font family name (use CSS <code class="language-plaintext highlighter-rouge">font-family</code> instead)</li>
  <li><strong><code class="language-plaintext highlighter-rouge">size</code></strong>: Sets the font size (use CSS <code class="language-plaintext highlighter-rouge">font-size</code> instead)</li>
</ul>

<p><strong>⚠️ Deprecation Notice</strong>: These attributes are deprecated in favor of CSS. They are maintained only for legacy HTML document compatibility and should not be used in new templates.</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Deprecated approach (still works) --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"red"</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"14pt"</span><span class="nt">&gt;</span>Styled text<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Modern CSS approach (strongly recommended) --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"color: red; font-family: Arial; font-size: 14pt;"</span><span class="nt">&gt;</span>Styled text<span class="nt">&lt;/span&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="supported-elements">Supported Elements</h2>

<p>These attributes are only supported by the deprecated <code class="language-plaintext highlighter-rouge">&lt;font&gt;</code> element:</p>

<table>
  <thead>
    <tr>
      <th>Element</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">&lt;font&gt;</code></td>
      <td>Deprecated font styling element</td>
    </tr>
  </tbody>
</table>

<p><strong>Note</strong>: These attributes do not work on other HTML elements. Use CSS styling with <code class="language-plaintext highlighter-rouge">style</code> attribute or CSS classes instead.</p>

<hr />

<h2 id="attribute-details">Attribute Details</h2>

<h3 id="color-attribute">@color Attribute</h3>

<p>Sets the text color using various color formats.</p>

<h4 id="syntax">Syntax</h4>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"value"</span><span class="nt">&gt;</span>Text<span class="nt">&lt;/font&gt;</span>
</code></pre></div></div>

<h4 id="accepted-values">Accepted Values</h4>

<table>
  <thead>
    <tr>
      <th>Value Type</th>
      <th>Example</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Color name</td>
      <td><code class="language-plaintext highlighter-rouge">"red"</code>, <code class="language-plaintext highlighter-rouge">"blue"</code>, <code class="language-plaintext highlighter-rouge">"green"</code></td>
      <td>Standard HTML color names</td>
    </tr>
    <tr>
      <td>Hex value</td>
      <td><code class="language-plaintext highlighter-rouge">"#FF0000"</code>, <code class="language-plaintext highlighter-rouge">"#336699"</code></td>
      <td>Six-digit hexadecimal RGB color</td>
    </tr>
    <tr>
      <td>Short hex</td>
      <td><code class="language-plaintext highlighter-rouge">"#F00"</code>, <code class="language-plaintext highlighter-rouge">"#369"</code></td>
      <td>Three-digit hexadecimal shorthand</td>
    </tr>
    <tr>
      <td>RGB function</td>
      <td><code class="language-plaintext highlighter-rouge">"rgb(255, 0, 0)"</code></td>
      <td>RGB color function notation</td>
    </tr>
    <tr>
      <td>RGBA function</td>
      <td><code class="language-plaintext highlighter-rouge">"rgba(255, 0, 0, 0.5)"</code></td>
      <td>RGB with alpha transparency</td>
    </tr>
  </tbody>
</table>

<h4 id="css-equivalent">CSS Equivalent</h4>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Old: --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"red"</span><span class="nt">&gt;</span>Text<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- New: --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"color: red;"</span><span class="nt">&gt;</span>Text<span class="nt">&lt;/span&gt;</span>
</code></pre></div></div>

<hr />

<h3 id="face-attribute">@face Attribute</h3>

<p>Sets the font family (typeface) for the text.</p>

<h4 id="syntax-1">Syntax</h4>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"font-name"</span><span class="nt">&gt;</span>Text<span class="nt">&lt;/font&gt;</span>
</code></pre></div></div>

<h4 id="accepted-values-1">Accepted Values</h4>

<table>
  <thead>
    <tr>
      <th>Font Family</th>
      <th>Example</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Single font</td>
      <td><code class="language-plaintext highlighter-rouge">"Arial"</code></td>
      <td>Single font family name</td>
    </tr>
    <tr>
      <td>Font list</td>
      <td><code class="language-plaintext highlighter-rouge">"Arial, Helvetica, sans-serif"</code></td>
      <td>Fallback font list</td>
    </tr>
    <tr>
      <td>Generic family</td>
      <td><code class="language-plaintext highlighter-rouge">"serif"</code>, <code class="language-plaintext highlighter-rouge">"sans-serif"</code>, <code class="language-plaintext highlighter-rouge">"monospace"</code></td>
      <td>Generic font family keywords</td>
    </tr>
  </tbody>
</table>

<h4 id="common-font-families">Common Font Families</h4>

<p><strong>Serif Fonts</strong>:</p>
<ul>
  <li><code class="language-plaintext highlighter-rouge">"Times New Roman"</code></li>
  <li><code class="language-plaintext highlighter-rouge">"Georgia"</code></li>
  <li><code class="language-plaintext highlighter-rouge">"Garamond"</code></li>
</ul>

<p><strong>Sans-Serif Fonts</strong>:</p>
<ul>
  <li><code class="language-plaintext highlighter-rouge">"Arial"</code></li>
  <li><code class="language-plaintext highlighter-rouge">"Helvetica"</code></li>
  <li><code class="language-plaintext highlighter-rouge">"Verdana"</code></li>
  <li><code class="language-plaintext highlighter-rouge">"Tahoma"</code></li>
</ul>

<p><strong>Monospace Fonts</strong>:</p>
<ul>
  <li><code class="language-plaintext highlighter-rouge">"Courier New"</code></li>
  <li><code class="language-plaintext highlighter-rouge">"Consolas"</code></li>
  <li><code class="language-plaintext highlighter-rouge">"Monaco"</code></li>
</ul>

<h4 id="css-equivalent-1">CSS Equivalent</h4>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Old: --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span><span class="nt">&gt;</span>Text<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- New: --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"font-family: Arial, sans-serif;"</span><span class="nt">&gt;</span>Text<span class="nt">&lt;/span&gt;</span>
</code></pre></div></div>

<hr />

<h3 id="size-attribute">@size Attribute</h3>

<p>Sets the font size in points.</p>

<h4 id="syntax-2">Syntax</h4>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;font</span> <span class="na">size=</span><span class="s">"value"</span><span class="nt">&gt;</span>Text<span class="nt">&lt;/font&gt;</span>
</code></pre></div></div>

<h4 id="accepted-values-2">Accepted Values</h4>

<table>
  <thead>
    <tr>
      <th>Unit Type</th>
      <th>Example</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Points</td>
      <td><code class="language-plaintext highlighter-rouge">"12pt"</code>, <code class="language-plaintext highlighter-rouge">"14pt"</code>, <code class="language-plaintext highlighter-rouge">"16pt"</code></td>
      <td>Absolute size in typographic points</td>
    </tr>
    <tr>
      <td>Pixels</td>
      <td><code class="language-plaintext highlighter-rouge">"16px"</code>, <code class="language-plaintext highlighter-rouge">"20px"</code></td>
      <td>Absolute size in screen pixels (less common)</td>
    </tr>
  </tbody>
</table>

<p><strong>Note</strong>: Unlike modern HTML where font size can use relative units, the deprecated <code class="language-plaintext highlighter-rouge">size</code> attribute primarily works with absolute point values in Scryber PDF generation.</p>

<h4 id="css-equivalent-2">CSS Equivalent</h4>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Old: --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">size=</span><span class="s">"14pt"</span><span class="nt">&gt;</span>Text<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- New: --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"font-size: 14pt;"</span><span class="nt">&gt;</span>Text<span class="nt">&lt;/span&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="migration-guide">Migration Guide</h2>

<h3 id="why-migrate-to-css">Why Migrate to CSS?</h3>

<ol>
  <li><strong>Standards Compliance</strong>: Modern HTML standards deprecate presentational markup</li>
  <li><strong>Maintainability</strong>: CSS classes centralize styling and make updates easier</li>
  <li><strong>Flexibility</strong>: CSS offers far more styling options</li>
  <li><strong>Separation of Concerns</strong>: Keep HTML structure separate from presentation</li>
  <li><strong>Reusability</strong>: CSS classes can be reused across multiple elements</li>
</ol>

<h3 id="migration-table">Migration Table</h3>

<table>
  <thead>
    <tr>
      <th>Old (Deprecated)</th>
      <th>New (CSS)</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">&lt;font color="red"&gt;</code></td>
      <td><code class="language-plaintext highlighter-rouge">style="color: red;"</code></td>
      <td>Direct inline style</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">&lt;font face="Arial"&gt;</code></td>
      <td><code class="language-plaintext highlighter-rouge">style="font-family: Arial;"</code></td>
      <td>Always include fallback fonts</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">&lt;font size="14pt"&gt;</code></td>
      <td><code class="language-plaintext highlighter-rouge">style="font-size: 14pt;"</code></td>
      <td>Points work best for PDFs</td>
    </tr>
    <tr>
      <td>Combined attributes</td>
      <td>Combined CSS properties</td>
      <td>Use semicolons to separate</td>
    </tr>
  </tbody>
</table>

<h3 id="complete-migration-example">Complete Migration Example</h3>

<p><strong>Before (Deprecated):</strong></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#336699"</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"16pt"</span><span class="nt">&gt;</span>
    Important heading text
<span class="nt">&lt;/font&gt;</span>
</code></pre></div></div>

<p><strong>After (CSS Inline):</strong></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"color: #336699; font-family: Arial, sans-serif; font-size: 16pt;"</span><span class="nt">&gt;</span>
    Important heading text
<span class="nt">&lt;/span&gt;</span>
</code></pre></div></div>

<p><strong>After (CSS Class - Best Practice):</strong></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.heading</span> <span class="p">{</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
        <span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</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="nt">&lt;/style&gt;</span>

<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"heading"</span><span class="nt">&gt;</span>Important heading text<span class="nt">&lt;/span&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="binding-values">Binding Values</h2>

<p>While deprecated, these attributes support data binding:</p>

<h3 id="static-values">Static Values</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"red"</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span><span class="nt">&gt;</span>Static text<span class="nt">&lt;/font&gt;</span>
</code></pre></div></div>

<h3 id="dynamic-values-with-data-binding">Dynamic Values with Data Binding</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Model: { textColor: "blue", fontFamily: "Helvetica", fontSize: "14pt" } --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">""</span>
      <span class="na">face=</span><span class="s">""</span>
      <span class="na">size=</span><span class="s">""</span><span class="nt">&gt;</span>
    Dynamically styled text
<span class="nt">&lt;/font&gt;</span>
</code></pre></div></div>

<h3 id="conditional-values">Conditional Values</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Model: { isError: true } --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">""</span>
      <span class="na">size=</span><span class="s">""</span><span class="nt">&gt;</span>
    Conditional styling
<span class="nt">&lt;/font&gt;</span>
</code></pre></div></div>

<p><strong>Better Alternative with CSS:</strong></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"color: ; font-family: ; font-size: ;"</span><span class="nt">&gt;</span>
    Dynamically styled text
<span class="nt">&lt;/span&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="notes">Notes</h2>

<h3 id="legacy-support">Legacy Support</h3>

<p>These attributes are maintained for:</p>
<ul>
  <li>Converting legacy HTML documents to PDF</li>
  <li>Supporting old HTML templates</li>
  <li>Backward compatibility with existing systems</li>
  <li>Quick prototyping (though CSS is still preferred)</li>
</ul>

<h3 id="limitations">Limitations</h3>

<p><strong>Cannot control:</strong></p>
<ul>
  <li>Font weight (bold)</li>
  <li>Font style (italic)</li>
  <li>Text decoration (underline)</li>
  <li>Letter spacing</li>
  <li>Line height</li>
  <li>Text transform</li>
  <li>Text shadow</li>
  <li>And dozens of other CSS properties</li>
</ul>

<p><strong>CSS provides:</strong></p>
<ul>
  <li>All font styling capabilities</li>
  <li>Text effects and transformations</li>
  <li>Responsive sizing with relative units</li>
  <li>Fine-grained control over typography</li>
  <li>Better browser/PDF reader compatibility</li>
</ul>

<h3 id="performance">Performance</h3>

<p>These deprecated attributes have <strong>no performance difference</strong> from CSS in Scryber PDF generation. Both are processed identically during rendering.</p>

<h3 id="mixing-with-css">Mixing with CSS</h3>

<p>You can combine deprecated attributes with CSS, though this is not recommended:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"blue"</span> <span class="na">size=</span><span class="s">"14pt"</span>
      <span class="na">style=</span><span class="s">"font-weight: bold; text-decoration: underline;"</span><span class="nt">&gt;</span>
    Mixed styling (not recommended)
<span class="nt">&lt;/font&gt;</span>
</code></pre></div></div>

<p>The CSS <code class="language-plaintext highlighter-rouge">style</code> attribute takes precedence over the deprecated attributes when conflicts occur.</p>

<hr />

<h2 id="examples">Examples</h2>

<h3 id="example-1-basic-color-styling">Example 1: Basic Color Styling</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Red text --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"red"</span><span class="nt">&gt;</span>This text is red<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Blue text with hex --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#0000FF"</span><span class="nt">&gt;</span>This text is blue<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Green text with RGB --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"rgb(0, 128, 0)"</span><span class="nt">&gt;</span>This text is green<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Modern CSS equivalent --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"color: red;"</span><span class="nt">&gt;</span>This text is red<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"color: #0000FF;"</span><span class="nt">&gt;</span>This text is blue<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"color: rgb(0, 128, 0);"</span><span class="nt">&gt;</span>This text is green<span class="nt">&lt;/span&gt;</span>
</code></pre></div></div>

<h3 id="example-2-font-family-variations">Example 2: Font Family Variations</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Serif font --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Times New Roman"</span><span class="nt">&gt;</span>Serif text in Times New Roman<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Sans-serif font --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span><span class="nt">&gt;</span>Sans-serif text in Arial<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Monospace font --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Courier New"</span><span class="nt">&gt;</span>Monospace text in Courier<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Font with fallbacks --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Helvetica, Arial, sans-serif"</span><span class="nt">&gt;</span>Text with fallback fonts<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Modern CSS equivalent --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"font-family: 'Times New Roman', serif;"</span><span class="nt">&gt;</span>Serif text<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"font-family: Arial, sans-serif;"</span><span class="nt">&gt;</span>Sans-serif text<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"font-family: 'Courier New', monospace;"</span><span class="nt">&gt;</span>Monospace text<span class="nt">&lt;/span&gt;</span>
</code></pre></div></div>

<h3 id="example-3-font-size-variations">Example 3: Font Size Variations</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Small text --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">size=</span><span class="s">"10pt"</span><span class="nt">&gt;</span>Small text (10pt)<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Normal text --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">size=</span><span class="s">"12pt"</span><span class="nt">&gt;</span>Normal text (12pt)<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Large text --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">size=</span><span class="s">"16pt"</span><span class="nt">&gt;</span>Large text (16pt)<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Heading size --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">size=</span><span class="s">"24pt"</span><span class="nt">&gt;</span>Heading size (24pt)<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Modern CSS equivalent --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"font-size: 10pt;"</span><span class="nt">&gt;</span>Small text (10pt)<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"font-size: 12pt;"</span><span class="nt">&gt;</span>Normal text (12pt)<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"font-size: 16pt;"</span><span class="nt">&gt;</span>Large text (16pt)<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"font-size: 24pt;"</span><span class="nt">&gt;</span>Heading size (24pt)<span class="nt">&lt;/span&gt;</span>
</code></pre></div></div>

<h3 id="example-4-combined-attributes">Example 4: Combined Attributes</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- All three attributes --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#336699"</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"14pt"</span><span class="nt">&gt;</span>
    Fully styled text with color, font, and size
<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Modern CSS equivalent --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"color: #336699; font-family: Arial, sans-serif; font-size: 14pt;"</span><span class="nt">&gt;</span>
    Fully styled text with color, font, and size
<span class="nt">&lt;/span&gt;</span>
</code></pre></div></div>

<h3 id="example-5-nested-font-tags-not-recommended">Example 5: Nested Font Tags (Not Recommended)</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Nested font tags override parent attributes --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"blue"</span> <span class="na">size=</span><span class="s">"12pt"</span><span class="nt">&gt;</span>
    Blue text at 12pt with
    <span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"red"</span><span class="nt">&gt;</span>red text nested<span class="nt">&lt;/font&gt;</span>
    and back to blue
<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Better with CSS --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"color: blue; font-size: 12pt;"</span><span class="nt">&gt;</span>
    Blue text at 12pt with
    <span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"color: red;"</span><span class="nt">&gt;</span>red text nested<span class="nt">&lt;/span&gt;</span>
    and back to blue
<span class="nt">&lt;/span&gt;</span>
</code></pre></div></div>

<h3 id="example-6-legacy-email-template">Example 6: Legacy Email Template</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Typical legacy email HTML --&gt;</span>
<span class="nt">&lt;table</span> <span class="na">width=</span><span class="s">"600"</span> <span class="na">border=</span><span class="s">"0"</span> <span class="na">cellpadding=</span><span class="s">"10"</span> <span class="na">bgcolor=</span><span class="s">"#f0f0f0"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;tr&gt;</span>
        <span class="nt">&lt;td&gt;</span>
            <span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#333333"</span> <span class="na">face=</span><span class="s">"Verdana, Arial, sans-serif"</span> <span class="na">size=</span><span class="s">"11pt"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;strong&gt;</span>Newsletter Header<span class="nt">&lt;/strong&gt;&lt;br/&gt;&lt;br/&gt;</span>

                Dear Subscriber,<span class="nt">&lt;br/&gt;&lt;br/&gt;</span>

                Thank you for signing up. Your confirmation code is:
                <span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#ff0000"</span> <span class="na">size=</span><span class="s">"14pt"</span><span class="nt">&gt;&lt;strong&gt;</span>ABC123<span class="nt">&lt;/strong&gt;&lt;/font&gt;</span>
                <span class="nt">&lt;br/&gt;&lt;br/&gt;</span>

                <span class="nt">&lt;font</span> <span class="na">size=</span><span class="s">"9pt"</span> <span class="na">color=</span><span class="s">"#666666"</span><span class="nt">&gt;</span>
                    This is an automated message. Please do not reply.
                <span class="nt">&lt;/font&gt;</span>
            <span class="nt">&lt;/font&gt;</span>
        <span class="nt">&lt;/td&gt;</span>
    <span class="nt">&lt;/tr&gt;</span>
<span class="nt">&lt;/table&gt;</span>
</code></pre></div></div>

<h3 id="example-7-status-messages-with-colors">Example 7: Status Messages with Colors</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Error message --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#d32f2f"</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span><span class="nt">&gt;</span>
    ✗ Error: Operation failed
<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Success message --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#388e3c"</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span><span class="nt">&gt;</span>
    ✓ Success: Operation completed
<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Warning message --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#f57c00"</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span><span class="nt">&gt;</span>
    ⚠ Warning: Check your input
<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Info message --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#1976d2"</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span><span class="nt">&gt;</span>
    ℹ Info: Processing in progress
<span class="nt">&lt;/font&gt;</span>
</code></pre></div></div>

<h3 id="example-8-modernized-version-with-css-classes">Example 8: Modernized Version with CSS Classes</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.error</span> <span class="p">{</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#d32f2f</span><span class="p">;</span>
        <span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</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">.success</span> <span class="p">{</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#388e3c</span><span class="p">;</span>
        <span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</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">.warning</span> <span class="p">{</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#f57c00</span><span class="p">;</span>
        <span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</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">.info</span> <span class="p">{</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1976d2</span><span class="p">;</span>
        <span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>

<span class="c">&lt;!-- Much cleaner and maintainable --&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"error"</span><span class="nt">&gt;</span>✗ Error: Operation failed<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"success"</span><span class="nt">&gt;</span>✓ Success: Operation completed<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"warning"</span><span class="nt">&gt;</span>⚠ Warning: Check your input<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"info"</span><span class="nt">&gt;</span>ℹ Info: Processing in progress<span class="nt">&lt;/p&gt;</span>
</code></pre></div></div>

<h3 id="example-9-data-bound-legacy-document">Example 9: Data-Bound Legacy Document</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Model: {
    userName: "John Doe",
    statusColor: "green",
    statusMessage: "Active",
    companyName: "Acme Corp"
} --&gt;</span>

<span class="nt">&lt;h1&gt;</span>
    <span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#2c3e50"</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"24pt"</span><span class="nt">&gt;</span>
        Welcome, 
    <span class="nt">&lt;/font&gt;</span>
<span class="nt">&lt;/h1&gt;</span>

<span class="nt">&lt;p&gt;</span>
    <span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span><span class="nt">&gt;</span>
        Company:
        <span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#336699"</span> <span class="na">size=</span><span class="s">"14pt"</span><span class="nt">&gt;&lt;/font&gt;</span>
    <span class="nt">&lt;/font&gt;</span>
<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;p&gt;</span>
    <span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span><span class="nt">&gt;</span>
        Account Status:
        <span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">""</span> <span class="na">size=</span><span class="s">"13pt"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;strong&gt;&lt;/strong&gt;</span>
        <span class="nt">&lt;/font&gt;</span>
    <span class="nt">&lt;/font&gt;</span>
<span class="nt">&lt;/p&gt;</span>
</code></pre></div></div>

<h3 id="example-10-report-header-with-mixed-styling">Example 10: Report Header with Mixed Styling</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"padding: 20pt; background-color: #f5f5f5; border: 2pt solid #cccccc;"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#2c3e50"</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"20pt"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;strong&gt;</span>Quarterly Financial Report<span class="nt">&lt;/strong&gt;</span>
    <span class="nt">&lt;/font&gt;</span>
    <span class="nt">&lt;br/&gt;</span>
    <span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#666666"</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"11pt"</span><span class="nt">&gt;</span>
        Q4 2024 - Generated on January 15, 2025
    <span class="nt">&lt;/font&gt;</span>
    <span class="nt">&lt;br/&gt;&lt;br/&gt;</span>
    <span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#333333"</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span><span class="nt">&gt;</span>
        This report contains confidential financial information.
    <span class="nt">&lt;/font&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<h3 id="example-11-product-description-with-highlighting">Example 11: Product Description with Highlighting</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;p&gt;</span>
    <span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span><span class="nt">&gt;</span>
        The <span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#336699"</span> <span class="na">size=</span><span class="s">"14pt"</span><span class="nt">&gt;&lt;strong&gt;</span>Premium Widget Pro<span class="nt">&lt;/strong&gt;&lt;/font&gt;</span>
        is now available for just
        <span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#d32f2f"</span> <span class="na">size=</span><span class="s">"16pt"</span><span class="nt">&gt;&lt;strong&gt;</span>$99.99<span class="nt">&lt;/strong&gt;&lt;/font&gt;</span>!
        <span class="nt">&lt;br/&gt;&lt;br/&gt;</span>
        Features include:
    <span class="nt">&lt;/font&gt;</span>
<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;ul&gt;</span>
    <span class="nt">&lt;li&gt;&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"11pt"</span><span class="nt">&gt;</span>Advanced functionality<span class="nt">&lt;/font&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"11pt"</span><span class="nt">&gt;</span>5-year warranty<span class="nt">&lt;/font&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"11pt"</span><span class="nt">&gt;</span>Free shipping<span class="nt">&lt;/font&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>

<span class="nt">&lt;p&gt;</span>
    <span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#388e3c"</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"11pt"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;strong&gt;</span>Limited time offer!<span class="nt">&lt;/strong&gt;</span> Order within 24 hours.
    <span class="nt">&lt;/font&gt;</span>
<span class="nt">&lt;/p&gt;</span>
</code></pre></div></div>

<h3 id="example-12-invoice-with-color-coded-amounts">Example 12: Invoice with Color-Coded Amounts</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;table</span> <span class="na">border=</span><span class="s">"1"</span> <span class="na">cellpadding=</span><span class="s">"10"</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;tr&gt;</span>
        <span class="nt">&lt;td&gt;&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span><span class="nt">&gt;&lt;strong&gt;</span>Description<span class="nt">&lt;/strong&gt;&lt;/font&gt;&lt;/td&gt;</span>
        <span class="nt">&lt;td&gt;&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span><span class="nt">&gt;&lt;strong&gt;</span>Amount<span class="nt">&lt;/strong&gt;&lt;/font&gt;&lt;/td&gt;</span>
    <span class="nt">&lt;/tr&gt;</span>
    <span class="nt">&lt;tr&gt;</span>
        <span class="nt">&lt;td&gt;&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"11pt"</span><span class="nt">&gt;</span>Web Development<span class="nt">&lt;/font&gt;&lt;/td&gt;</span>
        <span class="nt">&lt;td&gt;&lt;font</span> <span class="na">face=</span><span class="s">"Courier New"</span> <span class="na">size=</span><span class="s">"11pt"</span> <span class="na">color=</span><span class="s">"#333333"</span><span class="nt">&gt;</span>$5,000.00<span class="nt">&lt;/font&gt;&lt;/td&gt;</span>
    <span class="nt">&lt;/tr&gt;</span>
    <span class="nt">&lt;tr&gt;</span>
        <span class="nt">&lt;td&gt;&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"11pt"</span><span class="nt">&gt;</span>Design Services<span class="nt">&lt;/font&gt;&lt;/td&gt;</span>
        <span class="nt">&lt;td&gt;&lt;font</span> <span class="na">face=</span><span class="s">"Courier New"</span> <span class="na">size=</span><span class="s">"11pt"</span> <span class="na">color=</span><span class="s">"#333333"</span><span class="nt">&gt;</span>$2,000.00<span class="nt">&lt;/font&gt;&lt;/td&gt;</span>
    <span class="nt">&lt;/tr&gt;</span>
    <span class="nt">&lt;tr&gt;</span>
        <span class="nt">&lt;td&gt;&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span><span class="nt">&gt;&lt;strong&gt;</span>Total<span class="nt">&lt;/strong&gt;&lt;/font&gt;&lt;/td&gt;</span>
        <span class="nt">&lt;td&gt;&lt;font</span> <span class="na">face=</span><span class="s">"Courier New"</span> <span class="na">size=</span><span class="s">"14pt"</span> <span class="na">color=</span><span class="s">"#336699"</span><span class="nt">&gt;&lt;strong&gt;</span>$7,000.00<span class="nt">&lt;/strong&gt;&lt;/font&gt;&lt;/td&gt;</span>
    <span class="nt">&lt;/tr&gt;</span>
<span class="nt">&lt;/table&gt;</span>
</code></pre></div></div>

<h3 id="example-13-multi-language-support">Example 13: Multi-Language Support</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- English --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span> <span class="na">color=</span><span class="s">"#333333"</span><span class="nt">&gt;</span>
    Welcome to our service
<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Spanish --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span> <span class="na">color=</span><span class="s">"#333333"</span><span class="nt">&gt;</span>
    Bienvenido a nuestro servicio
<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- German --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span> <span class="na">color=</span><span class="s">"#333333"</span><span class="nt">&gt;</span>
    Willkommen bei unserem Service
<span class="nt">&lt;/font&gt;</span>

<span class="c">&lt;!-- Chinese (requires appropriate font) --&gt;</span>
<span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"SimSun"</span> <span class="na">size=</span><span class="s">"12pt"</span> <span class="na">color=</span><span class="s">"#333333"</span><span class="nt">&gt;</span>
    欢迎使用我们的服务
<span class="nt">&lt;/font&gt;</span>
</code></pre></div></div>

<h3 id="example-14-certificate-text-styling">Example 14: Certificate Text Styling</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"text-align: center; padding: 40pt; border: 5pt double #336699;"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Georgia"</span> <span class="na">size=</span><span class="s">"32pt"</span> <span class="na">color=</span><span class="s">"#2c3e50"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;strong&gt;</span>Certificate of Achievement<span class="nt">&lt;/strong&gt;</span>
    <span class="nt">&lt;/font&gt;</span>
    <span class="nt">&lt;br/&gt;&lt;br/&gt;</span>

    <span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Georgia"</span> <span class="na">size=</span><span class="s">"14pt"</span> <span class="na">color=</span><span class="s">"#666666"</span><span class="nt">&gt;</span>
        This certifies that
    <span class="nt">&lt;/font&gt;</span>
    <span class="nt">&lt;br/&gt;</span>

    <span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Georgia"</span> <span class="na">size=</span><span class="s">"24pt"</span> <span class="na">color=</span><span class="s">"#336699"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;strong&gt;&lt;/strong&gt;</span>
    <span class="nt">&lt;/font&gt;</span>
    <span class="nt">&lt;br/&gt;&lt;br/&gt;</span>

    <span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Georgia"</span> <span class="na">size=</span><span class="s">"12pt"</span> <span class="na">color=</span><span class="s">"#666666"</span><span class="nt">&gt;</span>
        has successfully completed the course
    <span class="nt">&lt;/font&gt;</span>
    <span class="nt">&lt;br/&gt;</span>

    <span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Georgia"</span> <span class="na">size=</span><span class="s">"16pt"</span> <span class="na">color=</span><span class="s">"#2c3e50"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;strong&gt;&lt;/strong&gt;</span>
    <span class="nt">&lt;/font&gt;</span>
    <span class="nt">&lt;br/&gt;&lt;br/&gt;</span>

    <span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Georgia"</span> <span class="na">size=</span><span class="s">"11pt"</span> <span class="na">color=</span><span class="s">"#999999"</span><span class="nt">&gt;</span>
        Date: 
    <span class="nt">&lt;/font&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<h3 id="example-15-legacy-to-modern-migration-example">Example 15: Legacy to Modern Migration Example</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- BEFORE: Legacy font tags --&gt;</span>
<span class="nt">&lt;div&gt;</span>
    <span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#2c3e50"</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"18pt"</span><span class="nt">&gt;</span>
        Section Title
    <span class="nt">&lt;/font&gt;</span>
    <span class="nt">&lt;br/&gt;</span>
    <span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"#666666"</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"11pt"</span><span class="nt">&gt;</span>
        Section subtitle or description
    <span class="nt">&lt;/font&gt;</span>
    <span class="nt">&lt;br/&gt;&lt;br/&gt;</span>
    <span class="nt">&lt;font</span> <span class="na">face=</span><span class="s">"Arial"</span> <span class="na">size=</span><span class="s">"12pt"</span><span class="nt">&gt;</span>
        Regular paragraph text with <span class="nt">&lt;font</span> <span class="na">color=</span><span class="s">"blue"</span><span class="nt">&gt;</span>highlighted<span class="nt">&lt;/font&gt;</span> words
        and <span class="nt">&lt;font</span> <span class="na">size=</span><span class="s">"14pt"</span><span class="nt">&gt;</span>larger emphasized<span class="nt">&lt;/font&gt;</span> text.
    <span class="nt">&lt;/font&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="c">&lt;!-- AFTER: Modern CSS --&gt;</span>
<span class="nt">&lt;style&gt;</span>
    <span class="nc">.section-title</span> <span class="p">{</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#2c3e50</span><span class="p">;</span>
        <span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">18pt</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="nl">margin-bottom</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nc">.section-subtitle</span> <span class="p">{</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#666666</span><span class="p">;</span>
        <span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nc">.body-text</span> <span class="p">{</span>
        <span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
        <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nc">.highlight</span> <span class="p">{</span>
        <span class="nl">color</span><span class="p">:</span> <span class="no">blue</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nc">.emphasize</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</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="nt">&lt;/style&gt;</span>

<span class="nt">&lt;div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"section-title"</span><span class="nt">&gt;</span>Section Title<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"section-subtitle"</span><span class="nt">&gt;</span>Section subtitle or description<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"body-text"</span><span class="nt">&gt;</span>
        Regular paragraph text with <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"highlight"</span><span class="nt">&gt;</span>highlighted<span class="nt">&lt;/span&gt;</span> words
        and <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"emphasize"</span><span class="nt">&gt;</span>larger emphasized<span class="nt">&lt;/span&gt;</span> text.
    <span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="see-also">See Also</h2>

<ul>
  <li><a href="/reference/htmltags/font.html">font element</a> - The deprecated font element</li>
  <li><a href="/reference/htmltags/span.html">span element</a> - Modern inline container (recommended)</li>
  <li><a href="/reference/htmlattributes/style.html">style attribute</a> - Inline CSS styling</li>
  <li><a href="/reference/htmlattributes/class.html">class attribute</a> - CSS class reference</li>
  <li><a href="/reference/styles/">CSS Styles</a> - Complete CSS styling reference</li>
  <li><a href="/reference/styles/colors.html">Color Values</a> - CSS color reference</li>
  <li><a href="/reference/styles/fonts.html">Font Properties</a> - CSS font styling</li>
  <li><a href="/reference/htmltags/text-formatting.html">Text Formatting</a> - Modern text formatting elements</li>
</ul>

<hr />
</td>
        <td hidden=""></td>
    </tr>
</template>

Data Model Example:

{
  "spanWidth": 3,
  "spanHeight": 2,
  "totalColumns": 4,
  "mergeColumns": true,
  "tableData": [
    {
      "shouldMerge": true,
      "content": "Merged cell content",
      "extraContent": "Hidden when merged"
    },
    {
      "shouldMerge": false,
      "content": "First cell",
      "extraContent": "Second cell"
    }
  ]
}

Notes

Colspan Basics

The colspan attribute specifies how many columns a cell spans:

<table width="100%" style="border-collapse: collapse;">
    <tr>
        <!-- Normal cells (colspan=1 by default) -->
        <td style="border: 1pt solid #ccc; padding: 8pt;">Cell 1</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">Cell 2</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">Cell 3</td>
    </tr>
    <tr>
        <!-- Cell spanning 2 columns -->
        <td colspan="2" style="border: 1pt solid #ccc; padding: 8pt;">
            Spans columns 1-2
        </td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">Cell 3</td>
    </tr>
    <tr>
        <!-- Cell spanning all 3 columns -->
        <td colspan="3" style="border: 1pt solid #ccc; padding: 8pt;">
            Spans all columns
        </td>
    </tr>
</table>

Rowspan Basics

The rowspan attribute specifies how many rows a cell spans:

<table width="100%" style="border-collapse: collapse;">
    <tr>
        <!-- Cell spanning 2 rows -->
        <td rowspan="2" style="border: 1pt solid #ccc; padding: 8pt;">
            Spans rows 1-2
        </td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">Row 1, Col 2</td>
    </tr>
    <tr>
        <!-- Note: Only one cell in this row because first cell spans from above -->
        <td style="border: 1pt solid #ccc; padding: 8pt;">Row 2, Col 2</td>
    </tr>
    <tr>
        <td style="border: 1pt solid #ccc; padding: 8pt;">Row 3, Col 1</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">Row 3, Col 2</td>
    </tr>
</table>

Combining Colspan and Rowspan

Cells can span both columns and rows simultaneously:

<table width="100%" style="border-collapse: collapse;">
    <tr>
        <td colspan="2" rowspan="2"
            style="border: 1pt solid #ccc; padding: 8pt; text-align: center;">
            Spans 2x2 area
        </td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">Cell</td>
    </tr>
    <tr>
        <td style="border: 1pt solid #ccc; padding: 8pt;">Cell</td>
    </tr>
    <tr>
        <td style="border: 1pt solid #ccc; padding: 8pt;">Cell</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">Cell</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">Cell</td>
    </tr>
</table>

Cell Count Calculations

When using colspan/rowspan, ensure each row has the correct logical cell count:

<!-- 3-column table -->
<table width="100%">
    <tr>
        <!-- Row 1: 3 cells (1+1+1) -->
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
    <tr>
        <!-- Row 2: Still 3 columns (2+1) -->
        <td colspan="2">Spans 2 columns</td>
        <td>Cell 3</td>
    </tr>
    <tr>
        <!-- Row 3: Still 3 columns (all merged) -->
        <td colspan="3">Spans all 3 columns</td>
    </tr>
</table>

Common mistake:

<!-- WRONG: Row 2 has 4 columns instead of 3 -->
<tr>
    <td colspan="2">Spans 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>  <!-- Breaks layout! -->
</tr>

Rowspan Cell Accounting

When a cell spans multiple rows, remember to account for it in subsequent rows:

<table width="100%">
    <tr>
        <td rowspan="3">Spans 3 rows</td>
        <td>Row 1, Col 2</td>
        <td>Row 1, Col 3</td>
    </tr>
    <tr>
        <!-- First cell continues from above -->
        <td>Row 2, Col 2</td>
        <td>Row 2, Col 3</td>
    </tr>
    <tr>
        <!-- First cell still continues from above -->
        <td>Row 3, Col 2</td>
        <td>Row 3, Col 3</td>
    </tr>
</table>

Header Cells with Spanning

Header cells (<th>) can also use colspan and rowspan:

<table width="100%">
    <thead>
        <tr>
            <th rowspan="2">Product</th>
            <th colspan="3">Sales by Quarter</th>
        </tr>
        <tr>
            <!-- Product header continues from above -->
            <th>Q1</th>
            <th>Q2</th>
            <th>Q3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Widget A</td>
            <td>$100</td>
            <td>$150</td>
            <td>$200</td>
        </tr>
    </tbody>
</table>

Valid Values

Must be positive integers (1, 2, 3, etc.)
Default value is 1
Zero or negative values are invalid
Should not exceed total table dimensions

<!-- Valid -->
<td colspan="1">Normal cell</td>
<td colspan="2">Spans 2 columns</td>
<td colspan="5">Spans 5 columns</td>

<!-- Invalid -->
<td colspan="0">Invalid</td>
<td colspan="-1">Invalid</td>

Table Layout Considerations

Spanned cells affect table layout and rendering:

Width distribution: Colspan cells affect column width calculations
Alignment: Consider alignment within spanned cells
Borders: Border rendering in spanned cells
Background colors: Backgrounds fill the entire spanned area

<table width="100%" style="border-collapse: collapse;">
    <tr>
        <td colspan="2"
            style="border: 1pt solid #ccc; padding: 8pt;
                   background-color: #e3f2fd; text-align: center;">
            Centered header spanning 2 columns
        </td>
    </tr>
    <tr>
        <td style="border: 1pt solid #ccc; padding: 8pt; width: 50%;">
            Column 1
        </td>
        <td style="border: 1pt solid #ccc; padding: 8pt; width: 50%;">
            Column 2
        </td>
    </tr>
</table>

Nested Tables vs Spanning

For very complex layouts, consider whether nested tables or spanning is more appropriate:

<!-- Using spanning -->
<table>
    <tr>
        <td colspan="2" rowspan="2">Complex merged area</td>
        <td>Cell</td>
    </tr>
    <!-- ... complex spanning structure ... -->
</table>

<!-- Using nested tables (sometimes clearer) -->
<table>
    <tr>
        <td>
            <table>
                <!-- Nested table structure -->
            </table>
        </td>
        <td>Cell</td>
    </tr>
</table>

Accessibility Considerations

When using spanning cells:

Use clear header associations
Ensure logical reading order
Consider screen reader interpretation
Use <th> appropriately for headers

<table>
    <thead>
        <tr>
            <th colspan="2">Product Information</th>
            <th colspan="2">Pricing</th>
        </tr>
        <tr>
            <th>Name</th>
            <th>Category</th>
            <th>Regular</th>
            <th>Sale</th>
        </tr>
    </thead>
    <tbody>
        <!-- Data rows -->
    </tbody>
</table>

Examples

Basic Colspan Example

<table width="100%" style="border-collapse: collapse;">
    <tr>
        <th style="border: 1pt solid #ccc; padding: 8pt;">Name</th>
        <th style="border: 1pt solid #ccc; padding: 8pt;">Age</th>
        <th style="border: 1pt solid #ccc; padding: 8pt;">City</th>
    </tr>
    <tr>
        <td style="border: 1pt solid #ccc; padding: 8pt;">John</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">30</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">New York</td>
    </tr>
    <tr>
        <td colspan="3" style="border: 1pt solid #ccc; padding: 8pt;
                                background-color: #f0f0f0; text-align: center;">
            Total: 1 person
        </td>
    </tr>
</table>

Basic Rowspan Example

<table width="100%" style="border-collapse: collapse;">
    <tr>
        <th style="border: 1pt solid #ccc; padding: 8pt;">Category</th>
        <th style="border: 1pt solid #ccc; padding: 8pt;">Item</th>
        <th style="border: 1pt solid #ccc; padding: 8pt;">Price</th>
    </tr>
    <tr>
        <td rowspan="3" style="border: 1pt solid #ccc; padding: 8pt;
                                background-color: #e3f2fd; font-weight: bold;">
            Electronics
        </td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">Laptop</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">$1,200</td>
    </tr>
    <tr>
        <td style="border: 1pt solid #ccc; padding: 8pt;">Mouse</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">$25</td>
    </tr>
    <tr>
        <td style="border: 1pt solid #ccc; padding: 8pt;">Keyboard</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">$80</td>
    </tr>
</table>

Header Row with Colspan

<table width="100%" style="border-collapse: collapse;">
    <thead>
        <tr>
            <th colspan="4"
                style="border: 1pt solid #336699; padding: 15pt;
                       background-color: #336699; color: white;
                       text-align: center; font-size: 16pt;">
                Quarterly Sales Report
            </th>
        </tr>
        <tr>
            <th style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #e3f2fd;">Product</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #e3f2fd;">Q1</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #e3f2fd;">Q2</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #e3f2fd;">Q3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Widget A</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$50,000</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$65,000</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$72,000</td>
        </tr>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Widget B</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$40,000</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$45,000</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$48,000</td>
        </tr>
    </tbody>
</table>

Complex Multi-Level Headers

<table width="100%" style="border-collapse: collapse;">
    <thead>
        <tr>
            <th rowspan="2" style="border: 1pt solid #ccc; padding: 8pt;
                                   background-color: #336699; color: white;">
                Product
            </th>
            <th colspan="3" style="border: 1pt solid #ccc; padding: 8pt;
                                   background-color: #336699; color: white;">
                2023
            </th>
            <th colspan="3" style="border: 1pt solid #ccc; padding: 8pt;
                                   background-color: #336699; color: white;">
                2024
            </th>
        </tr>
        <tr>
            <!-- Product header continues from above -->
            <th style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #66aacc; color: white;">Q1</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #66aacc; color: white;">Q2</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #66aacc; color: white;">Q3</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #66aacc; color: white;">Q1</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #66aacc; color: white;">Q2</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #66aacc; color: white;">Q3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Widget A</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$10K</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$12K</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$15K</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$18K</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$20K</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$22K</td>
        </tr>
    </tbody>
</table>

Product Comparison Table

<table width="100%" style="border-collapse: collapse;">
    <thead>
        <tr>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Feature</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Basic</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Pro</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Enterprise</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="4"
                style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #e3f2fd; font-weight: bold;">
                Core Features
            </td>
        </tr>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Storage</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">10 GB</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">100 GB</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Unlimited</td>
        </tr>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Users</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">1</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">5</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Unlimited</td>
        </tr>
        <tr>
            <td colspan="4"
                style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #e3f2fd; font-weight: bold;">
                Advanced Features
            </td>
        </tr>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">API Access</td>
            <td style="border: 1pt solid #ccc; padding: 8pt; text-align: center;">✗</td>
            <td style="border: 1pt solid #ccc; padding: 8pt; text-align: center;">✓</td>
            <td style="border: 1pt solid #ccc; padding: 8pt; text-align: center;">✓</td>
        </tr>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">24/7 Support</td>
            <td colspan="2" style="border: 1pt solid #ccc; padding: 8pt;
                                   text-align: center;">Email only</td>
            <td style="border: 1pt solid #ccc; padding: 8pt; text-align: center;">
                Phone & Email
            </td>
        </tr>
    </tbody>
</table>

Schedule/Timetable

<table width="100%" style="border-collapse: collapse;">
    <thead>
        <tr>
            <th style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #336699; color: white;">Time</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #336699; color: white;">Monday</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #336699; color: white;">Tuesday</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;
                       background-color: #336699; color: white;">Wednesday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">9:00 AM</td>
            <td rowspan="2" style="border: 1pt solid #ccc; padding: 8pt;
                                   background-color: #e3f2fd;">
                Morning Meeting<br/>(9:00-10:30)
            </td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Email Review</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Team Standup</td>
        </tr>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">10:00 AM</td>
            <!-- Morning Meeting continues -->
            <td style="border: 1pt solid #ccc; padding: 8pt;">Development</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Development</td>
        </tr>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">11:00 AM</td>
            <td colspan="3" style="border: 1pt solid #ccc; padding: 8pt;
                                   background-color: #fff3cd; text-align: center;">
                Company All-Hands Meeting
            </td>
        </tr>
    </tbody>
</table>

Grouped Data Table

<table width="100%" style="border-collapse: collapse;">
    <thead>
        <tr>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Region</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;">City</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Sales</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="3" style="border: 1pt solid #ccc; padding: 8pt;
                                   background-color: #e8f5e9; font-weight: bold;">
                North
            </td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">New York</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$500K</td>
        </tr>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Boston</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$350K</td>
        </tr>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Chicago</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$420K</td>
        </tr>
        <tr>
            <td rowspan="2" style="border: 1pt solid #ccc; padding: 8pt;
                                   background-color: #fff3e0; font-weight: bold;">
                South
            </td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Miami</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$380K</td>
        </tr>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Atlanta</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">$290K</td>
        </tr>
        <tr>
            <td colspan="2" style="border: 1pt solid #ccc; padding: 8pt;
                                   font-weight: bold; text-align: right;">
                Total:
            </td>
            <td style="border: 1pt solid #ccc; padding: 8pt; font-weight: bold;">
                $1,940K
            </td>
        </tr>
    </tbody>
</table>

Form Layout with Spanning

<table width="100%" style="border-collapse: collapse;">
    <tr>
        <td colspan="2"
            style="border: 1pt solid #ccc; padding: 15pt;
                   background-color: #336699; color: white;
                   font-size: 16pt; font-weight: bold;">
            Registration Form
        </td>
    </tr>
    <tr>
        <td style="border: 1pt solid #ccc; padding: 8pt; width: 30%;
                   font-weight: bold;">
            Full Name:
        </td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">
            [Input field]
        </td>
    </tr>
    <tr>
        <td style="border: 1pt solid #ccc; padding: 8pt; font-weight: bold;">
            Email:
        </td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">
            [Input field]
        </td>
    </tr>
    <tr>
        <td style="border: 1pt solid #ccc; padding: 8pt; font-weight: bold;
                   vertical-align: top;">
            Address:
        </td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">
            [Textarea field]
        </td>
    </tr>
    <tr>
        <td colspan="2" style="border: 1pt solid #ccc; padding: 10pt;
                               text-align: center; background-color: #f0f0f0;">
            <button style="padding: 8pt 20pt;">Submit</button>
        </td>
    </tr>
</table>

Invoice Table

<table width="100%" style="border-collapse: collapse;">
    <thead>
        <tr>
            <th colspan="4"
                style="border: 1pt solid #ccc; padding: 15pt;
                       background-color: #336699; color: white; text-align: left;">
                <h2 style="margin: 0;">INVOICE #12345</h2>
            </th>
        </tr>
        <tr>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Item</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Quantity</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Price</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Premium Widget</td>
            <td style="border: 1pt solid #ccc; padding: 8pt; text-align: center;">2</td>
            <td style="border: 1pt solid #ccc; padding: 8pt; text-align: right;">$150.00</td>
            <td style="border: 1pt solid #ccc; padding: 8pt; text-align: right;">$300.00</td>
        </tr>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">Standard Widget</td>
            <td style="border: 1pt solid #ccc; padding: 8pt; text-align: center;">5</td>
            <td style="border: 1pt solid #ccc; padding: 8pt; text-align: right;">$75.00</td>
            <td style="border: 1pt solid #ccc; padding: 8pt; text-align: right;">$375.00</td>
        </tr>
        <tr>
            <td colspan="3"
                style="border: 1pt solid #ccc; padding: 8pt; text-align: right;
                       font-weight: bold;">
                Subtotal:
            </td>
            <td style="border: 1pt solid #ccc; padding: 8pt; text-align: right;">
                $675.00
            </td>
        </tr>
        <tr>
            <td colspan="3"
                style="border: 1pt solid #ccc; padding: 8pt; text-align: right;
                       font-weight: bold;">
                Tax (10%):
            </td>
            <td style="border: 1pt solid #ccc; padding: 8pt; text-align: right;">
                $67.50
            </td>
        </tr>
        <tr>
            <td colspan="3"
                style="border: 1pt solid #ccc; padding: 8pt; text-align: right;
                       font-weight: bold; background-color: #f0f0f0;">
                Total:
            </td>
            <td style="border: 1pt solid #ccc; padding: 8pt; text-align: right;
                       font-weight: bold; font-size: 14pt; background-color: #f0f0f0;">
                $742.50
            </td>
        </tr>
    </tbody>
</table>

Data Matrix with Merged Cells

<table width="100%" style="border-collapse: collapse;">
    <tr>
        <td colspan="2" rowspan="2"
            style="border: 1pt solid #ccc; padding: 8pt; background-color: #e0e0e0;">
        </td>
        <td colspan="3" style="border: 1pt solid #ccc; padding: 8pt;
                                background-color: #e3f2fd; text-align: center;
                                font-weight: bold;">
            Product Type
        </td>
    </tr>
    <tr>
        <td style="border: 1pt solid #ccc; padding: 8pt; text-align: center;">A</td>
        <td style="border: 1pt solid #ccc; padding: 8pt; text-align: center;">B</td>
        <td style="border: 1pt solid #ccc; padding: 8pt; text-align: center;">C</td>
    </tr>
    <tr>
        <td rowspan="3" style="border: 1pt solid #ccc; padding: 8pt;
                                background-color: #fff3e0; font-weight: bold;
                                writing-mode: vertical-rl; text-align: center;">
            Region
        </td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">North</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">120</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">95</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">78</td>
    </tr>
    <tr>
        <td style="border: 1pt solid #ccc; padding: 8pt;">South</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">105</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">110</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">92</td>
    </tr>
    <tr>
        <td style="border: 1pt solid #ccc; padding: 8pt;">West</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">88</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">102</td>
        <td style="border: 1pt solid #ccc; padding: 8pt;">85</td>
    </tr>
</table>

Dynamic Spanning with Data Binding

<!-- Model: {
    report: {
        title: "Sales Report",
        columns: 4,
        sections: [
            { name: "Q1", items: [{...}, {...}] },
            { name: "Q2", items: [{...}] }
        ]
    }
} -->

<table width="100%">
    <tr>
        <th colspan="">
            
        </th>
    </tr>
    <template data-bind="">
        <tr>
            <td colspan=""
                style="background-color: #e3f2fd; font-weight: bold; padding: 10pt;">
                
            </td>
        </tr>
        <template data-bind="">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </template>
    </template>
</table>

Calendar Grid

<table width="100%" style="border-collapse: collapse;">
    <thead>
        <tr>
            <th colspan="7"
                style="border: 1pt solid #ccc; padding: 15pt;
                       background-color: #336699; color: white;">
                January 2025
            </th>
        </tr>
        <tr>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Sun</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Mon</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Tue</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Wed</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Thu</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Fri</th>
            <th style="border: 1pt solid #ccc; padding: 8pt;">Sat</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2" style="border: 1pt solid #ccc; padding: 8pt;
                                   background-color: #f0f0f0;"></td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">1</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">2</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">3</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">4</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">5</td>
        </tr>
        <tr>
            <td style="border: 1pt solid #ccc; padding: 8pt;">6</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">7</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">8</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">9</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">10</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">11</td>
            <td style="border: 1pt solid #ccc; padding: 8pt;">12</td>
        </tr>
        <!-- Additional weeks... -->
    </tbody>
</table>