An extension library for Marked.js to enhance Markdown rendering.

@fsegurai/marked-extended-tables Extension for Marked.js that adds support for extended tables, allowing for more complex table structures and styling. It adds support for tables with merged cells, row and column spans, and other advanced features

🎯 Overview

The marked-extended-tables extension supercharges standard Markdown tables with advanced features including cell merging (colspan/rowspan), table captions, multi-row headers, custom alignment, and complex table structures. Transform simple Markdown tables into professional data presentations perfect for documentation, reports, technical specifications, and data-heavy content.

✨ Key Features

• 📐 Cell Spanning: Column spanning (||) and row spanning (^^) for merged cells
• 📋 Table Captions: Add descriptive titles with [Caption] syntax
• 🎯 Multi-row Headers: Support for complex header structures
• ⬅️➡️ Custom Alignment: Left, center, right alignment per column
• 🏷️ Semantic HTML: Proper <thead>, <tbody>, <tfoot> structure
• 📊 Complex Layouts: Build professional reports and specification tables
• 📱 Responsive Design: Mobile-friendly table layouts
• 🎨 Fully Customizable: Complete control over styling
• ♿ Accessible: Semantic HTML with proper table structure
• 📝 Rich Content: Full Markdown support in table cells
• 🔧 Configurable: Extensive options for table behavior
• 🖨️ Print-Ready: Optimized for PDF exports and printing

🎪 Live Demo

Experience all table features and spanning: View Demo

Table of contents

• Installation
• Usage
  • Basic Usage
• Quick Start
  • Syntax & Usage
  • Cell Spanning
  • Table Features
  • Configuration Options
  • Use Cases
  • Basic Enhanced Tables
  • Table Styling
  • Advanced Examples
• More Resources
  • Available Extensions
  • Demo Application
• License

Installation

To add @fsegurai/marked-extended-tables along with Marked.js to your package.json use the following commands.

bun install @fsegurai/marked-extended-tables marked@^17 --save

Usage

Basic Usage

Import @fsegurai/marked-extended-tables and apply it to your Marked instance as shown below.

Quick Start

Basic Concept

Enhanced tables extend standard Markdown table syntax with cell spanning (|| for colspan, ^^ for rowspan) and additional features like captions and multi-row headers.

import { marked } from 'marked';
import markedExtendedTables from '@fsegurai/marked-extended-tables';

// or UMD script
// <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-tables/lib/index.umd.js"></script>

marked.use(markedExtendedTables());

### Installation

Install the package using your preferred package manager:

```bash
# Using Bun (recommended)
bun add @fsegurai/marked-extended-tables

# Using npm
npm install @fsegurai/marked-extended-tables

# Using yarn
yarn add @fsegurai/marked-extended-tables

# Using pnpm
pnpm add @fsegurai/marked-extended-tables

Basic Implementation

import { marked } from 'marked';
import markedExtendedTables from '@fsegurai/marked-extended-tables';

// Optional: Import styles for enhanced appearance
import '@fsegurai/marked-extended-tables/styles/tables.css';
import '@fsegurai/marked-extended-tables/styles/tables-theme.css';

// Register the extension
marked.use(markedExtendedTables({
  useTheadTbody: true,
  captionTop: true,
  handleComplexSpans: true
}));

// Your markdown content with enhanced tables
const markdown = `
# Q4 2025 Sales Report

[Quarterly Sales Performance by Region]

| Region | Q1 Sales | Q2 Sales | Q3 Sales | Q4 Sales | Total | Growth |
|--------|----------|----------|----------|----------|-------|--------|
| **North America** || || || || || |
| United States | $125,000 | $140,000 | $158,000 | $175,000 | $598,000 | +40% |
| Canada | $45,000 | $52,000 | $58,000 | $62,000 | $217,000 | +38% |
| Mexico | $22,000 | $28,000 | $32,000 | $38,000 | $120,000 | +73% |
| **Subtotal** | **$192,000** | **$220,000** | **$248,000** | **$275,000** | **$935,000** | **+43%** |
| **Europe** || || || || || |
| UK | $85,000 | $92,000 | $98,000 | $105,000 | $380,000 | +24% |
| Germany | $78,000 | $82,000 | $88,000 | $95,000 | $343,000 | +22% |
| France | $62,000 | $68,000 | $72,000 | $78,000 | $280,000 | +26% |
| **Subtotal** | **$225,000** | **$242,000** | **$258,000** | **$278,000** | **$1,003,000** | **+24%** |
| **Asia Pacific** || || || || || |
| Japan | $95,000 | $105,000 | $115,000 | $128,000 | $443,000 | +35% |
| Australia | $48,000 | $55,000 | $62,000 | $68,000 | $233,000 | +42% |
| Singapore | $38,000 | $42,000 | $48,000 | $52,000 | $180,000 | +37% |
| **Subtotal** | **$181,000** | **$202,000** | **$225,000** | **$248,000** | **$856,000** | **+37%** |
| **GRAND TOTAL** | **$598,000** | **$664,000** | **$731,000** | **$801,000** | **$2,794,000** | **+34%** |

**Analysis**: Outstanding year-over-year growth of 34% across all regions, with North America leading at 43%.

# Product Feature Comparison

[2026 Product Tiers]

| Feature | Basic | Professional | Enterprise |
|---------|:-----:|:------------:|:----------:|
| **User Management** |||
| Max Users | 5 | 50 | Unlimited |
| SSO Integration | ❌ | ✅ | ✅ |
| Role-Based Access | ❌ | ✅ | ✅ |
| Custom Permissions | ❌ | ❌ | ✅ |
| **Storage & Performance** |||
| Storage Capacity | 10 GB | 500 GB | 5 TB |
| API Rate Limit | 1,000/day | 50,000/day | Unlimited |
| Bandwidth | 10 GB/month | 500 GB/month | Unlimited |
| **Support & SLA** |||
| Response Time | 48 hours | 8 hours | 2 hours |
| Availability SLA | 99% | 99.9% | 99.99% |
| Dedicated Support | ❌ | ❌ | ✅ |
| **Monthly Price** | **$29** | **$99** | **$299** |
`;

// Parse and render
const html = marked.parse(markdown);
document.getElementById('content').innerHTML = html;

Syntax & Usage

Standard Table

Basic Markdown table syntax works as expected:

| Name | Role | Location |
|------|------|----------|
| Alice | Developer | New York |
| Bob | Designer | London |
| Carol | Manager | Tokyo |

Table with Alignment

Use colons in header separator for alignment:

| Item | Price | Quantity | Total |
|:-----|------:|---------:|------:|
| Widget | $10.00 | 5 | $50.00 |
| Gadget | $25.50 | 3 | $76.50 |

• :--- = Left-aligned
• :---: = Center-aligned
• ---: = Right-aligned

Table Caption

Add a caption above the table using brackets:

[Sales Report Q4 2025]

| Month | Revenue |
|-------|---------|
| Oct | $50,000 |
| Nov | $62,000 |
| Dec | $75,000 |

Column Spanning (Colspan)

Use || to merge cells horizontally:

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Regular cell | Spans two columns || 
| Spans all three columns |||

Row Spanning (Rowspan)

Use ^^ to merge cells vertically:

| Category | Item | Price |
|----------|------|-------|
| Fruits | Apple | $1.00 |
| ^^ | Orange | $1.50 |
| ^^ | Banana | $0.75 |
| Vegetables | Carrot | $0.50 |
| ^^ | Broccoli | $2.00 |

Combined Spanning

Mix column and row spanning:

| Quarter | Product A | Product B | Total |
|---------|-----------|-----------|-------|
| Q1 | $10,000 | $8,000 | $18,000 |
| Q2 | $12,000 | $15,000 | $27,000 |
| **Summary** | **Strong Growth** || **$45,000** |

Multi-row Headers

Create complex headers:

| Category || Metrics ||
| Name | Type | Value | Trend |
|------|------|-------|-------|
| CPU | Usage | 45% | ⬆️ +5% |
| Memory | Usage | 62% | ⬇️ -3% |
| Disk | Usage | 78% | ➡️ 0% |

The extension maintains full compatibility with standard Markdown tables while adding powerful enhancements. All tables
support **nested Markdown content** including formatting, links, code, and even other extensions within cells.

### Styling Your Tables

This extension does not inject styles automatically. Instead, it provides optional style sheets you can import into your project.

Available style files:

- `tables.css` / `tables.scss` — minimal structural styles for layout and responsiveness
- `tables-theme.css` / `tables-theme.scss` — optional full theme with visual defaults and variables

Usage examples:

In a CSS/SCSS file:

```css
@import '@fsegurai/marked-extended-tables/styles/tables.css';
@import '@fsegurai/marked-extended-tables/styles/tables-theme.css';

In JavaScript/TypeScript:

import '@fsegurai/marked-extended-tables/styles/tables.css';
import '@fsegurai/marked-extended-tables/styles/tables-theme.css';

In plain HTML (from node_modules):

<link rel="stylesheet" href="node_modules/@fsegurai/marked-extended-tables/styles/tables.css">
<link rel="stylesheet" href="node_modules/@fsegurai/marked-extended-tables/styles/tables-theme.css">

Generated HTML Structure

<!-- Table with caption and spanning -->
<table>
    <caption>Table Caption</caption>
    <thead>
    <tr>
        <th colspan="2">Spanning Header</th>
        <th>Regular Header</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="2">Spanning Cell</td>
        <td>Regular Cell</td>
        <td>Regular Cell</td>
    </tr>
    <tr>
        <td>Regular Cell</td>
        <td>Regular Cell</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3">Footer with spanning</td>
    </tr>
    </tfoot>
</table>

CSS Classes Reference

Note: This extension is pure structural and doesn't add CSS classes. You style standard HTML table elements.

| Element | Purpose | Attributes | |-------------|----------------------|-------------------------------| | <table> | Main table element | Standard HTML | | <caption> | Table caption | Standard HTML | | <thead> | Table header section | Standard HTML | | <tbody> | Table body section | Standard HTML | | <tfoot> | Table footer section | Standard HTML | | <th> | Header cells | colspan, rowspan, align | | <td> | Data cells | colspan, rowspan, align | | <tr> | Table rows | Standard HTML |

Complete Styling Example

/* Base Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Caption Styling */
table caption {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    padding: 0.75rem 1rem;
    text-align: left;
    caption-side: top;
    background: #f8f9fa;
    border-bottom: 2px solid #ddd;
}

/* Bottom caption variant */
table[data-caption-bottom] caption {
    caption-side: bottom;
    border-top: 2px solid #ddd;
    border-bottom: none;
}

/* Header Styles */
table thead th {
    background: #f1f3f5;
    color: #212529;
    font-weight: 700;
    text-align: left;
    padding: 0.875rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.5px;
}

/* Multi-row headers */
table thead tr:not(:last-child) th {
    border-bottom: 1px solid #e9ecef;
}

/* Body Styles */
table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e9ecef;
    color: #495057;
    vertical-align: top;
}

table tbody tr:last-child td {
    border-bottom: none;
}

/* Footer Styles */
table tfoot td {
    background: #f8f9fa;
    color: #495057;
    font-weight: 600;
    padding: 0.875rem 1rem;
    border-top: 2px solid #dee2e6;
}

/* Striped Rows */
table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

/* Hover Effect */
table tbody tr:hover {
    background: #e9ecef;
    transition: background 0.15s ease;
}

/* Cell Alignment */
table th[align="center"],
table td[align="center"] {
    text-align: center;
}

table th[align="right"],
table td[align="right"] {
    text-align: right;
}

table th[align="left"],
table td[align="left"] {
    text-align: left;
}

/* Spanning Cells Highlight */
table th[colspan],
table td[colspan],
table th[rowspan],
table td[rowspan] {
    background: #f1f3f5;
    font-weight: 600;
}

/* Nested Content Spacing */
table td p:first-child,
table th p:first-child {
    margin-top: 0;
}

table td p:last-child,
table th p:last-child {
    margin-bottom: 0;
}

table td ul,
table td ol,
table th ul,
table th ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

table td code,
table th code {
    padding: 0.2em 0.4em;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    font-size: 0.875em;
}

Dark Mode Support

/* Light theme */
body.light table {
    background: #fff;
    border-color: #ddd;
    color: #212529;
}

body.light table thead th {
    background: #f1f3f5;
    color: #212529;
}

body.light table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

body.light table tbody tr:hover {
    background: #e9ecef;
}

/* Dark theme */
body.dark table {
    background: #1e1e1e;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark table caption {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #404040;
}

body.dark table thead th {
    background: #2a2a2a;
    color: #e0e0e0;
    border-bottom-color: #404040;
}

body.dark table tbody td {
    border-bottom-color: #2a2a2a;
    color: #c0c0c0;
}

body.dark table tfoot td {
    background: #2a2a2a;
    color: #c0c0c0;
    border-top-color: #404040;
}

body.dark table tbody tr:nth-child(even) {
    background: #252525;
}

body.dark table tbody tr:hover {
    background: #2d2d2d;
}

body.dark table th[colspan],
body.dark table td[colspan],
body.dark table th[rowspan],
body.dark table td[rowspan] {
    background: #2a2a2a;
}

body.dark table td code,
body.dark table th code {
    background: rgba(255, 255, 255, 0.1);
}

Responsive Tables

/* Wrapper for horizontal scroll */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.table-wrapper table {
    margin: 0;
}

/* Mobile optimization */
@media (max-width: 768px) {
    table {
        font-size: 0.875rem;
    }

    table thead th,
    table tbody td,
    table tfoot td {
        padding: 0.625rem 0.75rem;
    }

    table caption {
        font-size: 0.9375rem;
        padding: 0.625rem 0.75rem;
    }
}

/* Stack table on very small screens */
@media (max-width: 480px) {
    .table-stack-mobile table,
    .table-stack-mobile thead,
    .table-stack-mobile tbody,
    .table-stack-mobile th,
    .table-stack-mobile td,
    .table-stack-mobile tr {
        display: block;
    }

    .table-stack-mobile thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table-stack-mobile tbody tr {
        border: 1px solid #ddd;
        margin-bottom: 0.625rem;
        border-radius: 4px;
    }

    .table-stack-mobile td {
        border: none;
        position: relative;
        padding-left: 50%;
    }

    .table-stack-mobile td::before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem;
        font-weight: 600;
        color: #666;
    }
}

Scrollbar Styling

/* Custom scrollbar for table wrapper */
.table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Dark mode scrollbar */
body.dark .table-wrapper::-webkit-scrollbar-track {
    background: #2a2a2a;
}

body.dark .table-wrapper::-webkit-scrollbar-thumb {
    background: #555;
}

body.dark .table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #777;
}

Print Optimization

@media print {
    table {
        border: 1px solid #000;
        box-shadow: none;
    }

    table thead th {
        background: #f8f9fa !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    table tbody tr:hover {
        background: transparent !important;
    }

    /* Prevent page breaks inside tables */
    table {
        page-break-inside: avoid;
    }

    table tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    table thead {
        display: table-header-group;
    }

    table tfoot {
        display: table-footer-group;
    }
}

Copy Demo Theme

For complete styling with all features: tables-theme.css

Check the demo to see tables with spanning, captions, and responsive layouts.

Basic Enhanced Tables

Enhanced tables start with standard Markdown table syntax but support additional features:

Standard Table

| Name | Age | City |
|------|-----|------|
| John | 25 | New York |
| Jane | 30 | Boston |

Enhanced Table with Styling

| Name | Age | City | Status |
|------|:---:|------|:------:|
| **John Doe** | 25 | New York | ✅ Active |
| *Jane Smith* | 30 | Boston | ⏸️ Pending |
| ~~Bob Jones~~ | 35 | Chicago | ❌ Inactive |

Cell Spanning

Colspan (Column Spanning)

Use || to merge cells horizontally:

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1 | Cell 2 || 
| Single Cell || Spans Three Columns ||

Rowspan (Row Spanning)

Use ^^ to merge cells vertically:

| Category | Item | Price |
|----------|------|-------|
| Fruits | Apple | $1.00 |
| ^^ | Orange | $1.50 |
| ^^ | Banana | $0.75 |
| Vegetables | Carrot | $0.50 |

Combined Spanning

| Quarter | Product A | Product B | Total |
|---------|-----------|-----------|-------|
| Q1 | $10,000 | $8,000 | $18,000 |
| Q2 | $12,000 | $15,000 | $27,000 |
| **Total** | **$22,000** | **$23,000** | **$45,000** |
| **Summary** || **Strong Performance** ||

Table Styling

Alignment Control

| Left | Center | Right | Justify |
|:-----|:------:|------:|:--------|
| Left-aligned | Centered | Right-aligned | Justified text content |

Cell Classes and Attributes

| Product{.highlight} | Price{.currency} | Status{.status-badge} |
|---------------------|------------------|---------------------|
| Premium Widget | $299.99 | In Stock |
| Basic Widget | $99.99 | Limited |

Conditional Formatting

| Metric | Value | Status |
|--------|-------|--------|
| CPU Usage | 45% | 🟢 Normal |
| Memory | 78% | 🟡 Warning |
| Disk Space | 92% | 🔴 Critical |
| Network | 12% | 🟢 Normal |

Configuration Options

The marked-extended-tables extension accepts the following configuration options:

• tableClass: Base CSS class for table elements. Defaults to 'marked-extended-table'.
• enableSpanning: Enable cell spanning features (colspan/rowspan). Defaults to true.
• enableStyling: Enable enhanced cell styling and classes. Defaults to true.
• headerRowClass: CSS class for header rows. Defaults to 'table-header'.
• bodyRowClass: CSS class for body rows. Defaults to 'table-row'.
• cellClass: Base CSS class for table cells. Defaults to 'table-cell'.
• responsiveBreakpoint: CSS breakpoint for responsive table behavior. Defaults to '768px'.
• sortable: Enable sortable column headers. Defaults to false.
• searchable: Enable table search functionality. Defaults to false.
• pagination: Enable pagination for large tables. Defaults to false.
• template: Custom HTML template for table structure. Defaults to built-in template.

Advanced Examples

Complex Data Table

# Sales Performance Report Q3 2023

| Region | Sales Rep | Q3 Target | Q3 Actual | % of Target | Performance |
|--------|-----------|-----------|-----------|-------------|-------------|
| **North America** || || || || |
| East Coast | John Smith | $50,000 | $65,000 | 130% | 🟢 Exceeds |
| West Coast | Sarah Johnson | $45,000 | $48,000 | 107% | 🟢 Meets |
| Central | Mike Wilson | $40,000 | $35,000 | 88% | 🟡 Below |
| **Subtotal** | **3 Reps** | **$135,000** | **$148,000** | **110%** | **🟢 Strong** |
| **Europe** || || || || |
| UK | Emma Thompson | $30,000 | $32,000 | 107% | 🟢 Meets |
| Germany | Hans Mueller | $35,000 | $28,000 | 80% | 🔴 Underperform |
| France | Marie Dubois | $25,000 | $27,000 | 108% | 🟢 Meets |
| **Subtotal** | **3 Reps** | **$90,000** | **$87,000** | **97%** | **🟡 Close** |
| **Asia Pacific** || || || || |
| Japan | Taro Yamada | $40,000 | $45,000 | 113% | 🟢 Exceeds |
| Australia | Lisa Chen | $35,000 | $38,000 | 109% | 🟢 Meets |
| **Subtotal** | **2 Reps** | **$75,000** | **$83,000** | **111%** | **🟢 Strong** |
| **GRAND TOTAL** | **8 Reps** | **$300,000** | **$318,000** | **106%** | **🟢 Success** |

> **Key Insights**: Overall performance exceeded target by 6%, with North America leading at 110% and Asia Pacific close
> behind at 111%.

Technical Specification Table

# Server Specifications Comparison

| Component | Basic Server | Pro Server | Enterprise Server |
|-----------|--------------|------------|-------------------|
| **Hardware** || || |
| CPU | Intel i5-8400 | Intel i7-9700K | Dual Xeon Gold 6248 |
| ^^ | 6 cores @ 2.8GHz | 8 cores @ 3.6GHz | 40 cores @ 2.5GHz |
| RAM | 16GB DDR4 | 32GB DDR4 | 128GB DDR4 ECC |
| Storage | 500GB SSD | 1TB NVMe SSD | 2TB NVMe SSD + 10TB HDD |
| Network | 1Gbps Ethernet | 10Gbps Ethernet | Dual 25Gbps Ethernet |
| **Software** || || |
| OS | Ubuntu 20.04 | Ubuntu 22.04 LTS | RHEL 8 Enterprise |
| Virtualization | ❌ Not Supported | ✅ KVM/QEMU | ✅ VMware vSphere |
| Container Support | ✅ Docker | ✅ Docker + K8s | ✅ Full Orchestration |
| Monitoring | Basic | Advanced | Enterprise Suite |
| **Support** || || |
| Response Time | 24 hours | 8 hours | 2 hours |
| Availability | Business Hours | 24/5 | 24/7/365 |
| Dedicated Engineer | ❌ | ❌ | ✅ |
| **Pricing** || || |
| Monthly Cost | $99/month | $299/month | $999/month |
| Setup Fee | $0 | $100 | $500 |
| **Total Year 1** | **$1,188** | **$3,688** | **$12,488** |

### Performance Benchmarks

| Test Type | Basic | Pro | Enterprise | Winner |
|-----------|-------|-----|------------|--------|
| CPU Benchmark | 1,250 | 2,100 | 8,500 | 🏆 Enterprise |
| RAM Speed | 2,400 MHz | 3,200 MHz | 3,200 MHz ECC | 🏆 Enterprise |
| Disk I/O (Read) | 450 MB/s | 3,200 MB/s | 3,500 MB/s | 🏆 Enterprise |
| Disk I/O (Write) | 400 MB/s | 2,800 MB/s | 3,200 MB/s | 🏆 Enterprise |
| Network Throughput | 950 Mbps | 9.5 Gbps | 47 Gbps | 🏆 Enterprise |

**Recommendation**: Choose based on workload requirements and budget constraints.

Project Timeline Matrix

# Project Development Timeline

| Phase | Week 1-2 | Week 3-4 | Week 5-6 | Week 7-8 | Status |
|-------|----------|----------|----------|----------|---------|
| **Planning** | Requirements | Architecture | Design | Review | ✅ Complete |
| ^^ | Stakeholder meetings | Technical specs | UI/UX mockups | Final approval | ^^ |
| **Development** | ⏸️ Waiting | Backend API | Frontend UI | Integration | 🚧 In Progress |
| ^^ | ^^ | Database setup | Component library | End-to-end testing | ^^ |
| **Testing** | ❌ Not Started | ❌ Not Started | Unit tests | Full QA cycle | ⏳ Planned |
| ^^ | ^^ | ^^ | Integration tests | User acceptance | ^^ |
| **Deployment** | ❌ Not Started | ❌ Not Started | ❌ Not Started | Production release | ⏳ Planned |
| ^^ | ^^ | ^^ | ^^ | Go-live support | ^^ |

### Resource Allocation

| Team Member | Role | Week 1-2 | Week 3-4 | Week 5-6 | Week 7-8 |
|-------------|------|-----------|-----------|-----------|-----------|
| **Alice Johnson** | **Project Manager** | Planning || || |
| **Bob Smith** | **Backend Developer** | Planning | API Development || |
| **Carol Davis** | **Frontend Developer** | Planning | Planning | UI Development | |
| **David Wilson** | **QA Engineer** | Planning | Test Planning | Test Execution || |
| **Eve Brown** | **DevOps** | Infrastructure || || Deployment |

**Legend**: ✅ Complete | 🚧 In Progress | ⏳ Planned | ❌ Not Started | ⏸️ Waiting

Configuration Examples

// Basic enhanced tables
marked.use(markedExtendedTables({
    tableClass: 'enhanced-table',
    enableSpanning: true,
    enableStyling: true
}));

// Professional business reports
marked.use(markedExtendedTables({
    tableClass: 'business-table',
    headerRowClass: 'business-header',
    responsiveBreakpoint: '992px',
    sortable: true
}));

// Data-heavy applications
marked.use(markedExtendedTables({
    tableClass: 'data-table',
    enableSpanning: true,
    searchable: true,
    pagination: true,
    sortable: true,
    responsiveBreakpoint: '768px'
}));

// Custom styling with minimal features
marked.use(markedExtendedTables({
    tableClass: 'custom-table',
    enableSpanning: false,
    enableStyling: false,
    template: customTableTemplate
}));

Table Features Summary

The extension enhances standard Markdown tables with:

| Feature | Syntax | Example | Use Case | |---------|--------|---------|----------| | Caption | [Caption Text] | [Sales Report] | Add descriptive table titles | | Colspan | || | Cell \|\| | Merge cells horizontally | | Rowspan | ^^ | ^^ | Merge cells vertically | | Alignment | :---: | :---: (center) | Control text alignment | | Multi-row Headers | Multiple header rows | See examples | Complex header structures | | Rich Content | Standard Markdown | **bold**, *italic* | Formatted cell content |

Best Practices

1. Use Captions for Context

<!-- Good: Descriptive caption -->
[Q4 2025 Revenue by Product Category]

| Category | Revenue |
|----------|---------|
| Software | $500K |

<!-- Avoid: No context -->
| Category | Revenue |
|----------|---------|
| Software | $500K |

2. Appropriate Spanning

<!-- Good: Logical grouping -->
| Region || Q1 | Q2 |
| Name | Country | Sales | Sales |
|------|---------|-------|-------|
| North America || $100K | $120K |
| USA | United States | $80K | $95K |
| Canada | Canada | $20K | $25K |

<!-- Avoid: Excessive spanning -->
| Header |||||
| Too many merged cells make it confusing |

3. Clear Alignment

<!-- Good: Appropriate alignment -->
| Item | Description | Price | Qty | Total |
|:-----|:------------|------:|----:|------:|
| Widget | Premium quality | $29.99 | 10 | $299.90 |

<!-- Avoid: All centered -->
|:-----:|:-----------:|:-----:|:---:|:-----:|
| Hard to scan when everything is centered |

4. Readable Cell Content

<!-- Good: Concise content -->
| Metric | Value |
|--------|-------|
| CPU | 45% |
| Memory | 8.2 GB |

<!-- Avoid: Overly verbose -->
| Metric | Value |
|--------|-------|
| CPU Usage Percentage | Currently utilizing approximately forty-five percent... |

5. Consistent Formatting

<!-- Good: Consistent style -->
| Status | Count |
|--------|-------|
| ✅ Active | 42 |
| ⏸️ Pending | 15 |
| ❌ Inactive | 8 |

<!-- Avoid: Inconsistent -->
| Status | Count |
|--------|-------|
| Active (check mark) | 42 |
| PENDING | 15 |
| ❌ Inactive | 8 |

Use Cases

1. Financial Report

# Annual Financial Statement 2025

[Consolidated Income Statement]

| Line Item | 2023 | 2024 | 2025 | Change (YoY) |
|-----------|-----:|-----:|-----:|-------------:|
| **Revenue** ||||
| Product Sales | $1,250,000 | $1,450,000 | $1,680,000 | +15.9% |
| Service Revenue | $450,000 | $520,000 | $615,000 | +18.3% |
| Licensing Fees | $180,000 | $220,000 | $265,000 | +20.5% |
| **Total Revenue** | **$1,880,000** | **$2,190,000** | **$2,560,000** | **+16.9%** |
| **Operating Expenses** ||||
| Cost of Goods Sold | $620,000 | $710,000 | $825,000 | +16.2% |
| Sales & Marketing | $380,000 | $440,000 | $512,000 | +16.4% |
| R&D | $225,000 | $275,000 | $320,000 | +16.4% |
| General & Administrative | $190,000 | $215,000 | $245,000 | +14.0% |
| **Total Expenses** | **$1,415,000** | **$1,640,000** | **$1,902,000** | **+16.0%** |
| **Operating Income** | **$465,000** | **$550,000** | **$658,000** | **+19.6%** |
| Interest Expense | ($35,000) | ($28,000) | ($22,000) | -21.4% |
| Income Tax | ($129,000) | ($156,600) | ($190,800) | +21.8% |
| **Net Income** | **$301,000** | **$365,400** | **$445,200** | **+21.8%** |

**Key Metrics:**
- Gross Margin: 67.8% (up from 67.6%)
- Operating Margin: 25.7% (up from 25.1%)
- Net Margin: 17.4% (up from 16.7%)

[Balance Sheet Summary]

| Assets | 2024 | 2025 | Liabilities & Equity | 2024 | 2025 |
|--------|-----:|-----:|----------------------|-----:|-----:|
| **Current Assets** ||| **Current Liabilities** |||
| Cash | $450,000 | $580,000 | Accounts Payable | $185,000 | $215,000 |
| Accounts Receivable | $320,000 | $385,000 | Short-term Debt | $50,000 | $0 |
| Inventory | $180,000 | $210,000 | Accrued Expenses | $95,000 | $110,000 |
| **Total Current** | **$950,000** | **$1,175,000** | **Total Current** | **$330,000** | **$325,000** |
| **Fixed Assets** ||| **Long-term Debt** | $250,000 | $180,000 |
| Property & Equipment | $620,000 | $680,000 | **Shareholders' Equity** |||
| Less: Depreciation | ($180,000) | ($220,000) | Common Stock | $400,000 | $400,000 |
| **Net Fixed Assets** | **$440,000** | **$460,000** | Retained Earnings | $410,000 | $730,000 |
| **Total Assets** | **$1,390,000** | **$1,635,000** | **Total Liab. & Equity** | **$1,390,000** | **$1,635,000** |

**Financial Health Indicators:**
- Current Ratio: 3.62 (excellent liquidity)
- Debt-to-Equity: 0.16 (low leverage)
- Return on Equity: 39.5%

2. Technical Specifications

# Cloud Server Comparison Matrix

[Instance Type Specifications - 2026]

| Instance Type | vCPUs | RAM | Storage | Network | Price/Hour | Best For |
|---------------|:-----:|:---:|:-------:|:-------:|:----------:|----------|
| **General Purpose** ||||||
| gp.small | 2 | 4 GB | 50 GB SSD | 1 Gbps | $0.08 | Development |
| gp.medium | 4 | 8 GB | 100 GB SSD | 2 Gbps | $0.16 | Small apps |
| gp.large | 8 | 16 GB | 200 GB SSD | 5 Gbps | $0.32 | Production |
| gp.xlarge | 16 | 32 GB | 400 GB SSD | 10 Gbps | $0.64 | High traffic |
| **Compute Optimized** ||||||
| co.large | 8 | 8 GB | 100 GB SSD | 5 Gbps | $0.38 | CPU-intensive |
| co.xlarge | 16 | 16 GB | 200 GB SSD | 10 Gbps | $0.76 | Scientific computing |
| co.2xlarge | 32 | 32 GB | 400 GB SSD | 25 Gbps | $1.52 | Big data processing |
| **Memory Optimized** ||||||
| mo.large | 4 | 32 GB | 100 GB SSD | 5 Gbps | $0.48 | Databases |
| mo.xlarge | 8 | 64 GB | 200 GB SSD | 10 Gbps | $0.96 | In-memory caching |
| mo.2xlarge | 16 | 128 GB | 400 GB SSD | 25 Gbps | $1.92 | Large databases |
| **Storage Optimized** ||||||
| so.large | 4 | 16 GB | 1 TB SSD | 5 Gbps | $0.52 | Data warehousing |
| so.xlarge | 8 | 32 GB | 2 TB SSD | 10 Gbps | $1.04 | Big data storage |

[Performance Benchmarks]

| Test Type | gp.medium | co.xlarge | mo.xlarge | so.xlarge |
|-----------|:---------:|:---------:|:---------:|:---------:|
| **CPU Performance** ||||
| Single-thread | 1,200 | 2,500 | 1,800 | 1,500 |
| Multi-thread | 4,800 | 16,000 | 7,200 | 6,000 |
| **Memory Performance** ||||
| Bandwidth (GB/s) | 12 | 18 | 38 | 20 |
| Latency (ns) | 85 | 75 | 55 | 80 |
| **Storage Performance** ||||
| Read (MB/s) | 450 | 600 | 550 | 2,400 |
| Write (MB/s) | 380 | 500 | 480 | 2,100 |
| IOPS | 3,000 | 4,500 | 4,000 | 15,000 |
| **Network Performance** ||||
| Bandwidth (Gbps) | 2 | 10 | 10 | 10 |
| Packets/sec | 250K | 500K | 500K | 500K |

**Recommendation Guide:**
- Web Apps: gp.medium or gp.large
- APIs: co.large or co.xlarge
- Databases: mo.large or mo.xlarge
- Analytics: so.large or so.xlarge

3. Project Planning

# Sprint 15 Planning Board

[Task Breakdown & Assignments]

| Epic | Story | Priority | Story Points | Assignee | Status |
|------|-------|:--------:|:------------:|----------|:------:|
| **User Authentication** |||||
| ^^ | SSO Integration | High | 8 | Alice | 🚧 In Progress |
| ^^ | Password Reset Flow | Medium | 5 | Bob | ⏳ Planned |
| ^^ | 2FA Implementation | High | 13 | Alice | ⏳ Planned |
| **Payment System** |||||
| ^^ | Stripe Integration | High | 8 | Carol | ✅ Complete |
| ^^ | Invoice Generation | Medium | 5 | Carol | 🚧 In Progress |
| ^^ | Payment History | Low | 3 | David | ⏳ Planned |
| **Admin Dashboard** |||||
| ^^ | User Management UI | Medium | 8 | Eve | 🚧 In Progress |
| ^^ | Analytics Charts | Low | 5 | Eve | ⏳ Planned |
| ^^ | System Logs | Low | 3 | Frank | ⏳ Planned |
| **Bug Fixes** |||||
| ^^ | Login Timeout Issue | Critical | 2 | Bob | ✅ Complete |
| ^^ | Mobile Layout Fixes | High | 3 | David | 🚧 In Progress |
| **Total Story Points** |||| **62** ||

[Team Capacity & Velocity]

| Team Member | Capacity (hours/week) | Available Points | Assigned Points | Remaining |
|-------------|:---------------------:|:----------------:|:---------------:|:---------:|
| Alice | 40 | 20 | 21 | ⚠️ -1 |
| Bob | 40 | 20 | 7 | 13 |
| Carol | 36 | 18 | 13 | 5 |
| David | 40 | 20 | 6 | 14 |
| Eve | 40 | 20 | 13 | 7 |
| Frank | 32 | 16 | 3 | 13 |
| **Total** | **228** | **114** | **63** | **51** |

**Sprint Goals:**
1. Complete authentication system
2. Finalize payment integration
3. Begin admin dashboard work

**Risks:**
- Alice slightly over-capacity (needs support)
- 2FA implementation may need spike

4. Product Comparison

# 2026 Smartphone Comparison Guide

[Flagship Models Specifications]

| Specification | iPhone 15 Pro | Samsung S25 Ultra | Google Pixel 9 Pro | OnePlus 12 Pro |
|---------------|:-------------:|:-----------------:|:------------------:|:--------------:|
| **Display** ||||
| Size | 6.1" | 6.8" | 6.7" | 6.7" |
| Technology | OLED | AMOLED | LTPO OLED | AMOLED |
| Refresh Rate | 120Hz | 120Hz | 144Hz | 120Hz |
| Peak Brightness | 2,000 nits | 2,600 nits | 2,400 nits | 1,600 nits |
| **Performance** ||||
| Processor | A17 Pro | Snapdragon 8 Gen 3 | Tensor G4 | Snapdragon 8 Gen 3 |
| RAM | 8 GB | 12 GB | 12 GB | 16 GB |
| Storage Options | 128/256/512GB/1TB | 256/512GB/1TB | 128/256/512GB | 256/512GB/1TB |
| **Camera System** ||||
| Main Camera | 48 MP | 200 MP | 50 MP | 50 MP |
| Ultra-wide | 12 MP | 12 MP | 48 MP | 48 MP |
| Telephoto | 12 MP (3x) | 50 MP (5x + 10x) | 48 MP (5x) | 64 MP (3x) |
| Front Camera | 12 MP | 12 MP | 10.8 MP | 32 MP |
| **Battery & Charging** ||||
| Battery Size | 3,650 mAh | 5,000 mAh | 5,050 mAh | 5,400 mAh |
| Wired Charging | 27W | 45W | 30W | 100W |
| Wireless Charging | 15W MagSafe | 15W | 23W | 50W |
| **Connectivity** ||||
| 5G | ✅ | ✅ | ✅ | ✅ |
| Wi-Fi | Wi-Fi 6E | Wi-Fi 7 | Wi-Fi 7 | Wi-Fi 7 |
| Bluetooth | 5.3 | 5.3 | 5.3 | 5.4 |
| **Special Features** ||||
| Water Resistance | IP68 | IP68 | IP68 | IP64 |
| Stylus Support | ❌ | ✅ S-Pen | ❌ | ❌ |
| Face Unlock | ✅ Face ID | ✅ | ✅ | ✅ |
| Fingerprint | ❌ | ✅ Ultrasonic | ✅ Optical | ✅ Optical |
| **Price (MSRP)** ||||
| Base Model | $999 | $1,199 | $899 | $799 |
| Max Model | $1,599 | $1,619 | $1,099 | $1,099 |

**Winner by Category:**
- 🏆 Display: Samsung S25 Ultra
- 🏆 Performance: Tie (iPhone/Samsung)
- 🏆 Camera: Samsung S25 Ultra
- 🏆 Battery: OnePlus 12 Pro
- 🏆 Value: Google Pixel 9 Pro

Troubleshooting

Spanning Not Working

Problem: Cell spanning doesn't merge cells.

Solutions:

1. Check syntax:

<!-- Correct colspan -->
| Cell 1 | Cell 2 || 
         ^^^^^^^^^^ Two cells merged

<!-- Wrong -->
| Cell 1 | Cell 2 | |   <!-- ❌ Space before last pipe -->

2. Verify rowspan:

<!-- Correct rowspan -->
| Category | Item |
|----------|------|
| Fruits | Apple |
| ^^ | Orange |   <!-- ✅ Same column -->

<!-- Wrong -->
| Category | Item |
|----------|------|
| Fruits | Apple |
^^ | Orange |   <!-- ❌ Wrong position -->

Table Not Rendering

Problem: Table doesn't appear in output.

Solutions:

1. Ensure blank lines:

Text before table

| Header |
|--------|
| Cell |

Text after table

2. Check pipe alignment:

<!-- Correct -->
| Col 1 | Col 2 |
|-------|-------|
| A | B |

<!-- Wrong: Misaligned pipes -->
| Col 1 | Col 2 |
|-------|-------|
| A | B |

Caption Not Showing

Problem: Caption doesn't display above table.

Solutions:

1. Correct bracket syntax:

<!-- Correct -->
[Table Caption]

| Header |
|--------|

<!-- Wrong -->
(Table Caption)  <!-- ❌ Parentheses -->
[Table Caption]  <!-- ❌ No blank line -->
| Header |

2. Enable caption in config:

marked.use(markedExtendedTables({
  captionTop: true  // Ensure this is true
}));

Alignment Not Applied

Problem: Text doesn't align as specified.

Solution:

<!-- Ensure colons in header separator -->
| Left | Center | Right |
|:-----|:------:|------:|
| A | B | C |
     ↑      ↑       ↑
   Left  Center  Right

Framework Integration

React Integration

// EnhancedTable.tsx
import { marked } from 'marked';
import markedExtendedTables from '@fsegurai/marked-extended-tables';
import '@fsegurai/marked-extended-tables/styles/tables.css';
import '@fsegurai/marked-extended-tables/styles/tables-theme.css';
import { useEffect, useState } from 'react';

marked.use(markedExtendedTables({
  useTheadTbody: true,
  captionTop: true,
  handleComplexSpans: true
}));

interface Props {
  markdown: string;
  className?: string;
}

export function EnhancedTable({ markdown, className }: Props) {
  const [html, setHtml] = useState('');
  
  useEffect(() => {
    const parsed = marked.parse(markdown);
    setHtml(parsed);
  }, [markdown]);
  
  return (
    <div className={`table-wrapper ${className || ''}`}>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
}

// Usage:
// <EnhancedTable markdown={tableMarkdown} className="responsive" />

Vue 3 Integration

<script setup lang="ts">
import { marked } from 'marked';
import markedExtendedTables from '@fsegurai/marked-extended-tables';
import '@fsegurai/marked-extended-tables/styles/tables.css';
import '@fsegurai/marked-extended-tables/styles/tables-theme.css';
import { computed } from 'vue';

marked.use(markedExtendedTables({
  useTheadTbody: true,
  captionTop: true
}));

interface Props {
  markdown: string;
}

const props = defineProps<Props>();

const html = computed(() => {
  return marked.parse(props.markdown);
});
</script>

<template>
  <div class="table-container" v-html="html" />
</template>

<style scoped>
.table-container {
  overflow-x: auto;
}
</style>

Angular Integration

// enhanced-table.component.ts
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { marked } from 'marked';
import markedExtendedTables from '@fsegurai/marked-extended-tables';

marked.use(markedExtendedTables({
  useTheadTbody: true,
  captionTop: true
}));

@Component({
  selector: 'app-enhanced-table',
  template: \`<div class="table-wrapper" [innerHTML]="parsedContent"></div>\`,
  styleUrls: [
    '../node_modules/@fsegurai/marked-extended-tables/styles/tables.css',
    '../node_modules/@fsegurai/marked-extended-tables/styles/tables-theme.css'
  ]
})
export class EnhancedTableComponent implements OnChanges {
  @Input() markdown: string = '';
  parsedContent: SafeHtml = '';

  constructor(private sanitizer: DomSanitizer) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['markdown']) {
      const html = marked.parse(this.markdown);
      this.parsedContent = this.sanitizer.bypassSecurityTrustHtml(html);
    }
  }
}

Performance Tips

1. Limit table size: Keep tables under 100 rows for best performance
2. Use responsive wrappers: Enable horizontal scrolling for wide tables
3. Optimize complex spanning: Minimize deeply nested spans

/* Wrapper for large tables */
.table-wrapper {
  max-height: 500px;
  overflow: auto;
}

Contributing

Found a bug or have a feature request? Please open an issue on GitHub.

Related Resources

• Marked.js Documentation
• Extension Demo
• Source Code
• npm Package
• HTML Table Guide

Available Extensions

| Extension | Package | Version | Description | |-------------|--------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|----------------------------------------------------------------------| | All - Bundle | @fsegurai/marked-extended-bundle | | Includes all extensions in a single package for easy integration | | Accordion | @fsegurai/marked-extended-accordion | | Add collapsible accordion sections to your markdown | | Alert | @fsegurai/marked-extended-alert | | Create styled alert boxes for important information | | Comments | @fsegurai/marked-extended-comments | | Add comment sections with author and timestamp metadata | | Embeds | @fsegurai/marked-extended-embeds | | Easily embed content from various platforms (YouTube, Twitter, etc.) | | Footnote | @fsegurai/marked-extended-footnote | | Add footnotes with automatic numbering | | Kanban | @fsegurai/marked-extended-kanban | | Create kanban boards with customizable columns and cards | | Lists | @fsegurai/marked-extended-lists | | Enhanced list formatting options | | Slide | @fsegurai/marked-extended-slide | | Create slide decks directly from markdown content | | Spoiler | @fsegurai/marked-extended-spoiler | | Hide content behind spoiler tags | | Tables | @fsegurai/marked-extended-tables | | Advanced table formatting with cell spanning | | Tabs | @fsegurai/marked-extended-tabs | | Create tabbed content sections | | Timeline | @fsegurai/marked-extended-timeline | | Display content in an interactive timeline format | | Typographic | @fsegurai/marked-extended-typographic | | Improve typography with smart quotes, dashes, and more |

Demo Application

To see all extensions in action, check out the [DEMO].

To set up the demo locally, follow the next steps:

git clone https://github.com/fsegurai/marked-extensions.git
bun install
bun start

This will serve the application locally at http://[::1]:8000.

License

Licensed under MIT.