html-table-generator

name	html-table-generator
description	This skill generates interactive HTML table MicroSims with clickable cells that reveal detailed information in a sliding panel. Use this skill for matrix comparisons, framework analyses, or any tabular data where cells contain summary values but need expandable explanations. Creates a complete MicroSim package with separated HTML, CSS, JavaScript, and JSON data files.

Interactive HTML Table with Detail Panel

Overview

This skill generates interactive HTML tables where each cell is clickable, revealing detailed information in a sliding side panel. The pattern is ideal for educational comparisons where:

• Rows represent categories/items (e.g., cultural traditions, theories, technologies)
• Columns represent dimensions/criteria (e.g., aspects, features, metrics)
• Cells contain short summary values but need expandable context

When to Use This Skill

Use this skill when:

• Creating framework comparison matrices (e.g., ethical frameworks, cultural perspectives)
• Building feature comparison tables with detailed explanations
• Presenting multi-dimensional analyses where each intersection needs context
• Need clickable cells with sliding detail panels

Do NOT use this skill for:

• Simple star-rating comparisons → use comparison-table-generator
• Timeline data → use timeline-guide
• Network relationships → use vis-network-guide

Example Use Cases

1. Cultural Fairness Frameworks - 6 traditions × 5 dimensions matrix
2. Learning Theory Comparison - Multiple theories × various aspects
3. Technology Stack Comparison - Platforms × evaluation criteria
4. Ethical Framework Analysis - Philosophies × ethical dimensions

File Structure

docs/sims/[microsim-name]/
├── index.md          # Documentation page with iframe
├── main.html         # Minimal HTML structure
├── style.css         # Light theme styling
├── script.js         # Matrix generation and interactions
├── data.json         # All row/column data
└── [name].png        # Screenshot for index page

Architecture: Separation of Concerns

1. data.json - All Content Data

Structure your data with rows and columns:

{
  "rows": [
    {
      "name": "Row Name",
      "subtitle": "Optional subtitle",
      "metadata": ["Tag 1", "Tag 2"],
      "cells": {
        "column1Key": {
          "value": "Short Display Value",
          "emphasis": "high|medium|low|balanced|unique",
          "description": "Detailed explanation...",
          "example": "Concrete example..."
        }
      }
    }
  ],
  "columns": [
    { "key": "column1Key", "name"  
  

2. style.css - Light Theme Styling

Use aliceblue background with dark text for MkDocs consistency:

body {
    font-family: 'Inter', sans-serif;
    background: aliceblue;
    padding: 10px;
    color: #333;
}

.matrix-wrapper {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

th {
    background: #e8f4f8;
    font-weight: 600;
    color: #1a1a2e;
}

td.cell {
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f8fafc;
}

td.cell:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, , , );
}

3. Emphasis Color System (Light Theme)

Use semantic colors with reduced opacity for light backgrounds:

Emphasis	Color	Use Case
high	rgba(20,184,166,0.2)	Primary/strong values
medium	rgba(139,92,246,0.15)	Secondary values
low	rgba(239,68,68,0.12)	Minimal/weak values
balanced	rgba(245,158,11,0.18)	Neutral/mixed values
unique	rgba(6,182,212,0.18)	Distinctive/special values

4. script.js - Dynamic Matrix Generation

let data = null;

async function init() {
    const response = await fetch('./data.json');
    data = await response.json();
    generateMatrix();
    setupEventListeners();
}

function generateMatrix() {
    const tbody = document.getElementById('matrix-body');
    tbody.innerHTML = '';

    data.rows.forEach(row => {
        const tr = document.createElement('tr');

        // Row header cell
        const nameCell = document.createElement('td');
        nameCell.className = 'row-name';
        nameCell.innerHTML = `${row.name}<span class="sub">${row.subtitle}</span>`;
        tr.appendChild(nameCell);

        // Data cells
        data.columns.forEach(col => {
            const cell = .();
             cellData = row.[col.];
            cell. = ;
            cell. = cellData.;
            cell.(,  (row, col., col.));
            tr.(cell);
        });

        tbody.(tr);
    });
}

 () {
     cellData = row.[colKey];
    .(). = row.;
    .(). = colName;
    .(). = cellData.;
    .(). = cellData.;

    .()..();
    .()..();
}

 () {
    .()..();
    .()..();
}

.(, init);

5. main.html - Minimal Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Matrix Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Matrix Title</h1>
        <p class="subtitle">Subtitle description</p>

        <div class="matrix-wrapper">
            <table>
                <thead>
                    
                        Row Label
                        Column 1
                        Column 2
                        
                    
                
                
                    
                
            
        

        
            
        

        Click any cell to see details
    

    

    
        
        
        
        
        
            Example
            
        
    

    

Compact Layout for MkDocs Iframe

MkDocs content area is typically 750-800px wide. Use these compact settings:

body { padding: 10px; }
.matrix-wrapper { padding: 10px; }
th, td { padding: 8px 6px; }
th.row-header { min-width: 120px; }
th.column-header { min-width: 80px; }
h1 { font-size: 1.4rem; }
td.cell { font-size: 0.7rem; }
.legend { font-size: 0.7rem; gap: 12px; padding: 8px; }

Detail Panel Styling

.detail-panel {
    position: fixed;
    top: 0;
    right: -450px;
    width: 420px;
    height: 100vh;
    background: #fff;
    border-left: 1px solid #e0e0e0;
    padding: 30px;
    transition: right 0.3s ease;
    z-index: 100;
    overflow-y: auto;
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.1);
}

.detail-panel.open { right: 0; }

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    : opacity ;
    : ;
}

 {
    : ;
    : auto;
}


 (: ) {
     {
        : ;
        : -;
    }
}

Event Handling

Include keyboard navigation for accessibility:

function setupEventListeners() {
    document.getElementById('close-btn').addEventListener('click', closeDetail);
    document.getElementById('overlay').addEventListener('click', closeDetail);

    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') closeDetail();
    });
}

Workflow Summary

1. Gather requirements: Number of rows/columns, cell values, descriptions, examples
2. Create data.json: Structure all content data
3. Create style.css: Light theme with emphasis colors
4. Create script.js: Matrix generation and panel interactions
5. Create main.html: Minimal HTML linking to external files
6. Create index.md: Documentation with iframe embed
7. Capture screenshot: For index page thumbnail
8. Update mkdocs.yml: Add to navigation

Lessons Learned

1. Separation of concerns - Keep data in JSON for easy updates without touching code
2. Light theme colors - Use lower opacity values than dark themes (0.15-0.2 vs 0.3-0.5)
3. Compact layouts - Systematically reduce all padding/margins/font-sizes for iframe fit
4. Async data loading - Use fetch() with proper error handling
5. Mobile responsiveness - Full-width detail panel on small screens
6. Keyboard accessibility - Always support ESC to close panels

Reference Implementation

See ethics-course/docs/sims/fairness-frameworks/ for a complete working example:

• 6 rows (cultural traditions) × 5 columns (dimensions)
• Emphasis-coded cells
• Sliding detail panel with descriptions and examples
• Light theme matching MkDocs styling