` | Table footer section | Standard HTML |
| `| ` | Header cells | `colspan`, `rowspan`, `align` |
| ` | ` | Data cells | `colspan`, `rowspan`, `align` |
| ` | ` | Table rows | Standard HTML |
#### Complete Styling Example
```css
/* 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
```css
/* 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
```css
/* 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
```css
/* 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
```css
@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](https://github.com/fsegurai/marked-extensions/blob/main/packages/tables/styles/tables-theme.css)
Check the [demo](https://fsegurai.github.io/marked-extensions) 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
```markdown
| Name | Age | City |
|------|-----|------|
| John | 25 | New York |
| Jane | 30 | Boston |
```
#### Enhanced Table with Styling
```markdown
| 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:
```markdown
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1 | Cell 2 ||
| Single Cell || Spans Three Columns ||
```
#### Rowspan (Row Spanning)
Use `^^` to merge cells vertically:
```markdown
| Category | Item | Price |
|----------|------|-------|
| Fruits | Apple | $1.00 |
| ^^ | Orange | $1.50 |
| ^^ | Banana | $0.75 |
| Vegetables | Carrot | $0.50 |
```
#### Combined Spanning
```markdown
| 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
```markdown
| Left | Center | Right | Justify |
|:-----|:------:|------:|:--------|
| Left-aligned | Centered | Right-aligned | Justified text content |
```
#### Cell Classes and Attributes
```markdown
| Product{.highlight} | Price{.currency} | Status{.status-badge} |
|---------------------|------------------|---------------------|
| Premium Widget | $299.99 | In Stock |
| Basic Widget | $99.99 | Limited |
```
#### Conditional Formatting
```markdown
| 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
```markdown
# 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
```markdown
# 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
```markdown
# 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
```javascript
// 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**
```markdown
[Q4 2025 Revenue by Product Category]
| Category | Revenue |
|----------|---------|
| Software | $500K |
| Category | Revenue |
|----------|---------|
| Software | $500K |
```
#### 2. **Appropriate Spanning**
```markdown
| Region || Q1 | Q2 |
| Name | Country | Sales | Sales |
|------|---------|-------|-------|
| North America || $100K | $120K |
| USA | United States | $80K | $95K |
| Canada | Canada | $20K | $25K |
| Header |||||
| Too many merged cells make it confusing |
```
#### 3. **Clear Alignment**
```markdown
| Item | Description | Price | Qty | Total |
|:-----|:------------|------:|----:|------:|
| Widget | Premium quality | $29.99 | 10 | $299.90 |
|:-----:|:-----------:|:-----:|:---:|:-----:|
| Hard to scan when everything is centered |
```
#### 4. **Readable Cell Content**
```markdown
| Metric | Value |
|--------|-------|
| CPU | 45% |
| Memory | 8.2 GB |
| Metric | Value |
|--------|-------|
| CPU Usage Percentage | Currently utilizing approximately forty-five percent... |
```
#### 5. **Consistent Formatting**
```markdown
| Status | Count |
|--------|-------|
| β
Active | 42 |
| βΈοΈ Pending | 15 |
| β Inactive | 8 |
| Status | Count |
|--------|-------|
| Active (check mark) | 42 |
| PENDING | 15 |
| β Inactive | 8 |
```
### Use Cases
#### 1. **Financial Report**
```markdown
# 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**
```markdown
# 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**
```markdown
# 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**
```markdown
# 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:**
```markdown
| Cell 1 | Cell 2 ||
^^^^^^^^^^ Two cells merged
| Cell 1 | Cell 2 | |
```
2. **Verify rowspan:**
```markdown
| Category | Item |
|----------|------|
| Fruits | Apple |
| ^^ | Orange |
| Category | Item |
|----------|------|
| Fruits | Apple |
^^ | Orange |
```
#### Table Not Rendering
**Problem**: Table doesn't appear in output.
**Solutions**:
1. **Ensure blank lines:**
```markdown
Text before table
| Header |
|--------|
| Cell |
Text after table
```
2. **Check pipe alignment:**
```markdown
| Col 1 | Col 2 |
|-------|-------|
| A | B |
| Col 1 | Col 2 |
|-------|-------|
| A | B |
```
#### Caption Not Showing
**Problem**: Caption doesn't display above table.
**Solutions**:
1. **Correct bracket syntax:**
```markdown
[Table Caption]
| Header |
|--------|
(Table Caption)
[Table Caption]
| Header |
```
2. **Enable caption in config:**
```javascript
marked.use(markedExtendedTables({
captionTop: true // Ensure this is true
}));
```
#### Alignment Not Applied
**Problem**: Text doesn't align as specified.
**Solution**:
```markdown
| Left | Center | Right |
|:-----|:------:|------:|
| A | B | C |
β β β
Left Center Right
```
### Framework Integration
#### React Integration
```tsx
// 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 (
);
}
// Usage:
//
```
#### Vue 3 Integration
```vue
```
#### Angular Integration
```typescript
// 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: \`\`,
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
```css
/* 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](https://github.com/fsegurai/marked-extensions/issues).
### Related Resources
- [Marked.js Documentation](https://marked.js.org/)
- [Extension Demo](https://fsegurai.github.io/marked-extensions)
- [Source Code](https://github.com/fsegurai/marked-extensions)
- [npm Package](https://www.npmjs.com/package/@fsegurai/marked-extended-tables)
- [HTML Table Guide](https://github.com/fsegurai/marked-extensions/wiki/tables-guide)
### Available Extensions
| Extension | Package | Version | Description |
|-------------|--------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|----------------------------------------------------------------------|
| All - Bundle | [@fsegurai/marked-extended-bundle](https://www.npmjs.com/package/@fsegurai/marked-extended-bundle) |  | Includes all extensions in a single package for easy integration |
| Accordion | [@fsegurai/marked-extended-accordion](https://www.npmjs.com/package/@fsegurai/marked-extended-accordion) |  | Add collapsible accordion sections to your markdown |
| Alert | [@fsegurai/marked-extended-alert](https://www.npmjs.com/package/@fsegurai/marked-extended-alert) |  | Create styled alert boxes for important information |
| Comments | [@fsegurai/marked-extended-comments](https://www.npmjs.com/package/@fsegurai/marked-extended-comments) |  | Add comment sections with author and timestamp metadata |
| Embeds | [@fsegurai/marked-extended-embeds](https://www.npmjs.com/package/@fsegurai/marked-extended-embeds) |  | Easily embed content from various platforms (YouTube, Twitter, etc.) |
| Footnote | [@fsegurai/marked-extended-footnote](https://www.npmjs.com/package/@fsegurai/marked-extended-footnote) |  | Add footnotes with automatic numbering |
| Kanban | [@fsegurai/marked-extended-kanban](https://www.npmjs.com/package/@fsegurai/marked-extended-kanban) |  | Create kanban boards with customizable columns and cards |
| Lists | [@fsegurai/marked-extended-lists](https://www.npmjs.com/package/@fsegurai/marked-extended-lists) |  | Enhanced list formatting options |
| Slide | [@fsegurai/marked-extended-slide](https://www.npmjs.com/package/@fsegurai/marked-extended-slide) |  | Create slide decks directly from markdown content |
| Spoiler | [@fsegurai/marked-extended-spoiler](https://www.npmjs.com/package/@fsegurai/marked-extended-spoiler) |  | Hide content behind spoiler tags |
| Tables | [@fsegurai/marked-extended-tables](https://www.npmjs.com/package/@fsegurai/marked-extended-tables) |  | Advanced table formatting with cell spanning |
| Tabs | [@fsegurai/marked-extended-tabs](https://www.npmjs.com/package/@fsegurai/marked-extended-tabs) |  | Create tabbed content sections |
| Timeline | [@fsegurai/marked-extended-timeline](https://www.npmjs.com/package/@fsegurai/marked-extended-timeline) |  | Display content in an interactive timeline format |
| Typographic | [@fsegurai/marked-extended-typographic](https://www.npmjs.com/package/@fsegurai/marked-extended-typographic) |  | Improve typography with smart quotes, dashes, and more |
### Demo Application
To see all extensions in action, check out the [[DEMO]](https://fsegurai.github.io/marked-extensions).
To set up the demo locally, follow the next steps:
```shell
git clone https://github.com/fsegurai/marked-extensions.git
bun install
bun start
```
This will serve the application locally at [http://[::1]:8000](http://[::1]:8000).
## License
Licensed under [MIT](https://opensource.org/licenses/MIT).
