[{"data":1,"prerenderedAt":75},["Reactive",2],{"blog-post-markdown-table-cell-padding-spacing-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":49,"related":50},"markdown-table-cell-padding-spacing-complete-guide","Markdown Table Cell Padding and Spacing: Complete Guide for Enhanced Readability and Professional Layout Design","Master table cell padding and spacing techniques in Markdown for improved readability and professional presentation. Learn CSS customization, responsive spacing, and advanced layout control for optimal data visualization.","Table cell padding and spacing control in Markdown enables professional data presentation that transforms dense, cramped information into visually accessible layouts with optimal readability and…","2025-11-08","Tutorial","Matthew Rathbone","markdown table padding, table cell spacing, markdown table css styling, table readability improvement, professional table design, markdown table customization, table layout optimization, table spacing techniques",17,"\u003Cp>Table cell padding and spacing control in Markdown enables professional data presentation that transforms dense, cramped information into visually accessible layouts with optimal readability and scanning efficiency. While basic Markdown tables provide functional data organization, advanced padding and spacing techniques using CSS integration, responsive design principles, and contextual spacing strategies create sophisticated table layouts that enhance user comprehension and reduce cognitive load.\u003C/p>\n\u003Ch2 id=\"why-control-table-cell-padding-and-spacing\">Why Control Table Cell Padding and Spacing?\u003C/h2>\n\u003Cp>Professional table spacing provides essential benefits for data presentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Enhanced Readability\u003C/strong>: Proper padding prevents text from appearing cramped and improves scanning efficiency\u003C/li>\n\u003Cli>\u003Cstrong>Visual Hierarchy\u003C/strong>: Strategic spacing creates clear relationships between data elements and content groups\u003C/li>\n\u003Cli>\u003Cstrong>Professional Appearance\u003C/strong>: Consistent spacing elevates documentation quality and user perception\u003C/li>\n\u003Cli>\u003Cstrong>Reduced Cognitive Load\u003C/strong>: Optimal white space helps readers process information more efficiently\u003C/li>\n\u003Cli>\u003Cstrong>Mobile Optimization\u003C/strong>: Responsive spacing maintains usability across different screen sizes and devices\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"understanding-default-markdown-table-spacing\">Understanding Default Markdown Table Spacing\u003C/h2>\n\u003Ch3 id=\"standard-browser-defaults\">Standard Browser Defaults\u003C/h3>\n\u003Cp>Basic Markdown tables inherit browser default spacing which often lacks optimal readability:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Default Markdown Table Spacing\u003C/span>\n| Product | Price | Stock | Status |\n|---------|-------|-------|--------|\n| Laptop | $1299 | 15 | Available |\n| Mouse | $29 | 50 | In Stock |\n| Keyboard | $79 | 25 | Limited |\n\n\u003Cspan class=\"hljs-section\"># Problems with Default Spacing:\u003C/span>\n\u003Cspan class=\"hljs-section\"># - Minimal cell padding (usually 8px or less)\u003C/span>\n\u003Cspan class=\"hljs-section\"># - No visual breathing room between content\u003C/span>\n\u003Cspan class=\"hljs-section\"># - Poor mobile responsiveness\u003C/span>\n\u003Cspan class=\"hljs-section\"># - Inconsistent cross-browser rendering\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"browser-variation-analysis\">Browser Variation Analysis\u003C/h3>\n\u003Cp>Understanding how different browsers handle table spacing:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Browser default table spacing comparison */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Chrome/Safari defaults */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: separate;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">td\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: inherit;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Firefox defaults */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: separate;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">td\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: unset;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Edge/IE defaults */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: separate;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">td\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"foundation-padding-and-spacing-techniques\">Foundation Padding and Spacing Techniques\u003C/h2>\n\u003Ch3 id=\"basic-css-padding-control\">Basic CSS Padding Control\u003C/h3>\n\u003Cp>Establishing consistent, readable table cell spacing:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Base table spacing system */\u003C/span>\n\u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--table-padding-xs\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-padding-sm\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-padding-md\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-padding-lg\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-padding-xl\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">24px\u003C/span>;\n  \n  \u003Cspan class=\"hljs-attr\">--table-spacing-tight\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-spacing-normal\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-spacing-loose\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-spacing-extra-loose\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n  \n  \u003Cspan class=\"hljs-attr\">--table-line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-header-bg\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-hover-bg\u003C/span>: \u003Cspan class=\"hljs-number\">#f5f5f5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Foundation table styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-spacing-normal) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, Roboto, sans-serif;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-line-height);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-padding-md);\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-header-bg);\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-padding-md);\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-hover-bg);\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"responsive-padding-system\">Responsive Padding System\u003C/h3>\n\u003Cp>Implementing padding that adapts to screen size and content density:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Responsive padding system */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Desktop spacing (default) */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Tablet spacing */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">1024px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.95em\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile spacing */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Compact mobile spacing */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"content-aware-padding-classes\">Content-Aware Padding Classes\u003C/h3>\n\u003Cp>Different padding approaches based on content type and density:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Content-specific padding classes */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-compact\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-compact\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.table-compact\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-comfortable\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-comfortable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.table-comfortable\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">18px\u003C/span> \u003Cspan class=\"hljs-number\">24px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-spacious\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-spacious\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.table-spacious\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">24px\u003C/span> \u003Cspan class=\"hljs-number\">32px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.7\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.05em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Data-dense tables */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-dense\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.table-dense\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Presentation tables */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-presentation\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.table-presentation\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">28px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.8\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.1em\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-spacing-control-techniques\">Advanced Spacing Control Techniques\u003C/h2>\n\u003Ch3 id=\"contextual-padding-based-on-content\">Contextual Padding Based on Content\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Content-aware padding system */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-padding-md);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Headers need more padding for visual weight */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding-top\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-padding-md) * \u003Cspan class=\"hljs-number\">1.2\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-padding-md) * \u003Cspan class=\"hljs-number\">1.2\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Numeric content needs right alignment and specific padding */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.numeric\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n  \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Long text content needs more horizontal padding */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.text-content\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">300px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">word-wrap\u003C/span>: break-word;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Status indicators need balanced padding */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.status-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: middle;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Action buttons need minimal padding */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.actions\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Icon columns need minimal horizontal padding */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.icon-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"dynamic-spacing-with-css-grid\">Dynamic Spacing with CSS Grid\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* CSS Grid approach for precise spacing control */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: grid;\n  \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-built_in\">repeat\u003C/span>(auto-fit, \u003Cspan class=\"hljs-built_in\">minmax\u003C/span>(\u003Cspan class=\"hljs-number\">150px\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>fr));\n  \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-header\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-header-bg);\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">min-height\u003C/span>: \u003Cspan class=\"hljs-number\">48px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">min-height\u003C/span>: \u003Cspan class=\"hljs-number\">44px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-cell\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-hover-bg);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive grid adjustments */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>fr;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-cell\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-header\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-cell\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">attr\u003C/span>(data-label) \u003Cspan class=\"hljs-string\">': '\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">120px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"vertical-spacing-and-rhythm\">Vertical Spacing and Rhythm\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Vertical spacing and typography rhythm */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.rhythmic-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1.6rem\u003C/span> * \u003Cspan class=\"hljs-number\">1.5\u003C/span>) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.rhythmic-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1.6rem\u003C/span> * \u003Cspan class=\"hljs-number\">0.75\u003C/span>) \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1.6rem\u003C/span> * \u003Cspan class=\"hljs-number\">0.75\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: bottom;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.rhythmic-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1.6rem\u003C/span> * \u003Cspan class=\"hljs-number\">0.5\u003C/span>) \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1.6rem\u003C/span> * \u003Cspan class=\"hljs-number\">0.75\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Multi-line cell content */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.rhythmic-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.multi-line\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding-top\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1.6rem\u003C/span> * \u003Cspan class=\"hljs-number\">0.75\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1.6rem\u003C/span> * \u003Cspan class=\"hljs-number\">0.75\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.rhythmic-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.multi-line\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1.6rem\u003C/span> * \u003Cspan class=\"hljs-number\">0.5\u003C/span>) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.rhythmic-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.multi-line\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* List content in cells */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.rhythmic-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ul\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.rhythmic-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">ol\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1.6rem\u003C/span> * \u003Cspan class=\"hljs-number\">0.25\u003C/span>) \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1.6rem\u003C/span> * \u003Cspan class=\"hljs-number\">1.25\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.rhythmic-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">li\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1.6rem\u003C/span> * \u003Cspan class=\"hljs-number\">0.25\u003C/span>);\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"implementation-examples\">Implementation Examples\u003C/h2>\n\u003Ch3 id=\"financial-report-table-with-optimized-spacing\">Financial Report Table with Optimized Spacing\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Financial Performance Report\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"financial-report-wrapper"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-table financial-report"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <thead>\n      <tr>\n        <th class="account-header">Account</th>\n        <th class="amount-header">Q1 2025</th>\n        <th class="amount-header">Q2 2025</th>\n        <th class="amount-header">Q3 2025</th>\n        <th class="amount-header">Q4 2025</th>\n        <th class="total-header">Annual Total</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr class="revenue-section">\n        <td class="account-name primary-account">Total Revenue</td>\n        <td class="currency-cell positive">$247,500</td>\n        <td class="currency-cell positive">$289,750</td>\n        <td class="currency-cell positive">$312,400</td>\n        <td class="currency-cell positive">$356,800</td>\n        <td class="currency-cell total positive">$1,206,450</td>\n      </tr>\n      <tr class="expense-section">\n        <td class="account-name primary-account">Operating Expenses</td>\n        <td class="currency-cell negative">($142,300)</td>\n        <td class="currency-cell negative">($158,900)</td>\n        <td class="currency-cell negative">($167,200)</td>\n        <td class="currency-cell negative">($189,500)</td>\n        <td class="currency-cell total negative">($657,900)</td>\n      </tr>\n      <tr class="sub-account">\n        <td class="account-name sub-account-name">├─ Personnel</td>\n        <td class="currency-cell">$85,000</td>\n        <td class="currency-cell">$88,000</td>\n        <td class="currency-cell">$92,000</td>\n        <td class="currency-cell">$95,000</td>\n        <td class="currency-cell">$360,000</td>\n      </tr>\n      <tr class="sub-account">\n        <td class="account-name sub-account-name">├─ Marketing</td>\n        <td class="currency-cell">$32,500</td>\n        <td class="currency-cell">$38,200</td>\n        <td class="currency-cell">$41,800</td>\n        <td class="currency-cell">$48,600</td>\n        <td class="currency-cell">$161,100</td>\n      </tr>\n      <tr class="profit-section">\n        <td class="account-name primary-account">Net Income</td>\n        <td class="currency-cell profit">$105,200</td>\n        <td class="currency-cell profit">$130,850</td>\n        <td class="currency-cell profit">$145,200</td>\n        <td class="currency-cell profit">$167,300</td>\n        <td class="currency-cell total profit">$548,550</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n.financial-report-wrapper {\n  margin: 2rem 0;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.financial-report {\n  margin: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n.financial-report th {\n  padding: 18px 24px;\n  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n  border-bottom: 2px solid #dee2e6;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  font-size: 0.9em;\n}\n\n.financial-report td {\n  padding: 16px 24px;\n  border-bottom: 1px solid #f1f3f4;\n  vertical-align: middle;\n}\n\n.financial-report .account-header {\n  text-align: left;\n  padding-left: 32px;\n}\n\n.financial-report .amount-header,\n.financial-report .total-header {\n  text-align: right;\n  padding-right: 32px;\n}\n\n.financial-report .account-name {\n  font-weight: 500;\n  padding-left: 32px;\n}\n\n.financial-report .sub-account-name {\n  font-weight: 400;\n  color: #6c757d;\n  padding-left: 48px;\n}\n\n.financial-report .primary-account {\n  font-weight: 600;\n  font-size: 1.05em;\n}\n\n.financial-report .currency-cell {\n  text-align: right;\n  padding-right: 32px;\n  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.financial-report .positive {\n  color: #28a745;\n}\n\n.financial-report .negative {\n  color: #dc3545;\n}\n\n.financial-report .profit {\n  color: #007bff;\n  font-weight: 600;\n}\n\n.financial-report .total {\n  font-weight: 700;\n  border-top: 2px solid #dee2e6;\n  background-color: rgba(248, 249, 250, 0.8);\n  font-size: 1.05em;\n}\n\n.financial-report .revenue-section {\n  background-color: rgba(212, 237, 218, 0.3);\n}\n\n.financial-report .expense-section {\n  background-color: rgba(248, 215, 218, 0.3);\n}\n\n.financial-report .profit-section {\n  background-color: rgba(204, 229, 255, 0.3);\n  border-top: 3px solid #007bff;\n}\n\n.financial-report .sub-account {\n  background-color: rgba(248, 249, 250, 0.5);\n}\n\n/* Responsive adjustments \u003Cspan class=\"hljs-emphasis\">*/\n@media screen and (max-width: 768px) {\n  .financial-report th,\n  .financial-report td {\n    padding: 12px 16px;\n    font-size: 0.9em;\n  }\n  \n  .financial-report .account-name {\n    padding-left: 20px;\n  }\n  \n  .financial-report .sub-account-name {\n    padding-left: 32px;\n  }\n  \n  .financial-report .currency-cell {\n    padding-right: 20px;\n  }\n}\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"product-comparison-table-with-enhanced-spacing\">Product Comparison Table with Enhanced Spacing\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Product Feature Comparison\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"comparison-table-container"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-table comparison-table"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <thead>\n      <tr>\n        <th class="feature-column">Features</th>\n        <th class="plan-column">\n          <div class="plan-header">\n            <div class="plan-name">Basic</div>\n            <div class="plan-price">$9/month</div>\n          </div>\n        </th>\n        <th class="plan-column popular">\n          <div class="plan-header">\n            <div class="plan-name">Professional</div>\n            <div class="plan-price">$29/month</div>\n            <div class="plan-badge">Most Popular</div>\n          </div>\n        </th>\n        <th class="plan-column">\n          <div class="plan-header">\n            <div class="plan-name">Enterprise</div>\n            <div class="plan-price">$99/month</div>\n          </div>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr class="feature-group-header">\n        <td colspan="4" class="group-title">Core Features</td>\n      </tr>\n      <tr>\n        <td class="feature-name">User Accounts</td>\n        <td class="feature-value">5 users</td>\n        <td class="feature-value highlight">25 users</td>\n        <td class="feature-value">Unlimited</td>\n      </tr>\n      <tr>\n        <td class="feature-name">Storage Space</td>\n        <td class="feature-value">10 GB</td>\n        <td class="feature-value highlight">100 GB</td>\n        <td class="feature-value">1 TB</td>\n      </tr>\n      <tr>\n        <td class="feature-name">API Calls/Month</td>\n        <td class="feature-value">1,000</td>\n        <td class="feature-value highlight">10,000</td>\n        <td class="feature-value">Unlimited</td>\n      </tr>\n      <tr class="feature-group-header">\n        <td colspan="4" class="group-title">Advanced Features</td>\n      </tr>\n      <tr>\n        <td class="feature-name">\n          <div class="feature-title">Priority Support</div>\n          <div class="feature-description">24/7 email and chat support</div>\n        </td>\n        <td class="feature-value unavailable">✗</td>\n        <td class="feature-value available highlight">✓</td>\n        <td class="feature-value available">✓</td>\n      </tr>\n      <tr>\n        <td class="feature-name">\n          <div class="feature-title">Custom Integrations</div>\n          <div class="feature-description">Build custom API integrations</div>\n        </td>\n        <td class="feature-value unavailable">✗</td>\n        <td class="feature-value limited highlight">Limited</td>\n        <td class="feature-value available">Full Access</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n.comparison-table-container {\n  margin: 2.5rem 0;\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n  border: 1px solid #e1e5e9;\n}\n\n.comparison-table {\n  margin: 0;\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n}\n\n.comparison-table th {\n  padding: 0;\n  border: none;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  position: relative;\n}\n\n.comparison-table .feature-column {\n  width: 35%;\n  padding: 24px 32px;\n  text-align: left;\n  font-weight: 600;\n  font-size: 1.1em;\n}\n\n.comparison-table .plan-column {\n  width: 21.67%;\n  text-align: center;\n  padding: 0;\n  position: relative;\n}\n\n.comparison-table .plan-column.popular::before {\n  content: '';\n  position: absolute;\n  top: -3px;\n  left: -1px;\n  right: -1px;\n  height: 3px;\n  background: #ffd700;\n}\n\n.plan-header {\n  padding: 24px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  height: 100%;\n  justify-content: center;\n}\n\n.plan-name {\n  font-size: 1.2em;\n  font-weight: 700;\n  margin-bottom: 4px;\n}\n\n.plan-price {\n  font-size: 1.5em;\n  font-weight: 800;\n  margin-bottom: 8px;\n}\n\n.plan-badge {\n  background: rgba(255, 255, 255, 0.2);\n  padding: 4px 12px;\n  border-radius: 20px;\n  font-size: 0.8em;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.comparison-table tbody tr {\n  border-bottom: 1px solid #f1f3f4;\n}\n\n.comparison-table tbody tr:last-child {\n  border-bottom: none;\n}\n\n.comparison-table td {\n  padding: 20px 24px;\n  vertical-align: top;\n  border: none;\n  background: white;\n}\n\n.comparison-table .feature-group-header td {\n  background: #f8f9fa;\n  border-top: 2px solid #dee2e6;\n  border-bottom: 1px solid #dee2e6;\n}\n\n.group-title {\n  font-weight: 700;\n  font-size: 1.1em;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: #495057;\n  padding: 16px 32px !important;\n}\n\n.feature-name {\n  font-weight: 500;\n  padding-left: 32px !important;\n  text-align: left;\n}\n\n.feature-title {\n  font-weight: 600;\n  font-size: 1.05em;\n  margin-bottom: 4px;\n}\n\n.feature-description {\n  font-size: 0.9em;\n  color: #6c757d;\n  line-height: 1.4;\n}\n\n.feature-value {\n  text-align: center;\n  font-weight: 500;\n  font-size: 1.05em;\n  padding: 20px 16px !important;\n}\n\n.feature-value.highlight {\n  background: rgba(102, 126, 234, 0.1);\n  font-weight: 600;\n  color: #4c63d2;\n  position: relative;\n}\n\n.feature-value.available {\n  color: #28a745;\n  font-weight: 700;\n  font-size: 1.4em;\n}\n\n.feature-value.unavailable {\n  color: #dc3545;\n  font-weight: 700;\n  font-size: 1.4em;\n  opacity: 0.7;\n}\n\n.feature-value.limited {\n  color: #ffc107;\n  font-weight: 600;\n}\n\n/* Responsive adjustments \u003Cspan class=\"hljs-emphasis\">*/\n@media screen and (max-width: 768px) {\n  .comparison-table-container {\n    margin: 1.5rem 0;\n  }\n  \n  .comparison-table th,\n  .comparison-table td {\n    padding: 16px 12px;\n    font-size: 0.9em;\n  }\n  \n  .plan-header {\n    padding: 20px 16px;\n  }\n  \n  .plan-name {\n    font-size: 1.1em;\n  }\n  \n  .plan-price {\n    font-size: 1.3em;\n  }\n  \n  .feature-name {\n    padding-left: 20px !important;\n  }\n  \n  .feature-value {\n    padding: 16px 8px !important;\n  }\n}\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"data-analytics-dashboard-table\">Data Analytics Dashboard Table\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Website Analytics Summary\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"analytics-dashboard"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-table analytics-table"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <thead>\n      <tr>\n        <th class="metric-header">Metric</th>\n        <th class="period-header">Yesterday</th>\n        <th class="period-header">Last Week</th>\n        <th class="period-header">Last Month</th>\n        <th class="trend-header">Trend</th>\n        <th class="change-header">Change</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr class="metric-row primary">\n        <td class="metric-name">\n          <div class="metric-title">Page Views</div>\n          <div class="metric-subtitle">Total page impressions</div>\n        </td>\n        <td class="metric-value">12,847</td>\n        <td class="metric-value">89,329</td>\n        <td class="metric-value">367,492</td>\n        <td class="trend-indicator">\n          <div class="trend-chart positive">📈</div>\n        </td>\n        <td class="change-value positive">+12.4%</td>\n      </tr>\n      <tr class="metric-row">\n        <td class="metric-name">\n          <div class="metric-title">Unique Visitors</div>\n          <div class="metric-subtitle">Individual user sessions</div>\n        </td>\n        <td class="metric-value">8,234</td>\n        <td class="metric-value">57,681</td>\n        <td class="metric-value">234,567</td>\n        <td class="trend-indicator">\n          <div class="trend-chart positive">📊</div>\n        </td>\n        <td class="change-value positive">+8.7%</td>\n      </tr>\n      <tr class="metric-row">\n        <td class="metric-name">\n          <div class="metric-title">Bounce Rate</div>\n          <div class="metric-subtitle">Single-page sessions</div>\n        </td>\n        <td class="metric-value">34.2%</td>\n        <td class="metric-value">36.8%</td>\n        <td class="metric-value">38.5%</td>\n        <td class="trend-indicator">\n          <div class="trend-chart positive">📉</div>\n        </td>\n        <td class="change-value positive">-4.3%</td>\n      </tr>\n      <tr class="metric-row secondary">\n        <td class="metric-name">\n          <div class="metric-title">Avg. Session Duration</div>\n          <div class="metric-subtitle">Time spent per visit</div>\n        </td>\n        <td class="metric-value">3m 24s</td>\n        <td class="metric-value">3m 18s</td>\n        <td class="metric-value">3m 12s</td>\n        <td class="trend-indicator">\n          <div class="trend-chart positive">📈</div>\n        </td>\n        <td class="change-value positive">+6.3%</td>\n      </tr>\n      <tr class="metric-row">\n        <td class="metric-name">\n          <div class="metric-title">Conversion Rate</div>\n          <div class="metric-subtitle">Goal completions</div>\n        </td>\n        <td class="metric-value">2.8%</td>\n        <td class="metric-value">2.6%</td>\n        <td class="metric-value">2.4%</td>\n        <td class="trend-indicator">\n          <div class="trend-chart positive">📈</div>\n        </td>\n        <td class="change-value positive">+16.7%</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n.analytics-dashboard {\n  margin: 2rem 0;\n  border-radius: 12px;\n  overflow: hidden;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  padding: 2px;\n}\n\n.analytics-table {\n  margin: 0;\n  background: white;\n  border-radius: 10px;\n  overflow: hidden;\n}\n\n.analytics-table th {\n  padding: 24px 28px;\n  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n  border: none;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  font-size: 0.85em;\n  color: #495057;\n}\n\n.analytics-table .metric-header {\n  text-align: left;\n  padding-left: 40px;\n  width: 35%;\n}\n\n.analytics-table .period-header {\n  text-align: center;\n  width: 15%;\n}\n\n.analytics-table .trend-header {\n  text-align: center;\n  width: 10%;\n}\n\n.analytics-table .change-header {\n  text-align: right;\n  padding-right: 40px;\n  width: 12%;\n}\n\n.analytics-table td {\n  padding: 24px 28px;\n  border: none;\n  border-bottom: 1px solid rgba(222, 226, 230, 0.5);\n  vertical-align: middle;\n}\n\n.analytics-table tbody tr:last-child td {\n  border-bottom: none;\n}\n\n.metric-row:hover {\n  background: rgba(102, 126, 234, 0.05);\n}\n\n.metric-row.primary {\n  background: rgba(102, 126, 234, 0.08);\n  border-left: 4px solid #667eea;\n}\n\n.metric-row.secondary {\n  background: rgba(118, 75, 162, 0.08);\n  border-left: 4px solid #764ba2;\n}\n\n.metric-name {\n  padding-left: 40px !important;\n  text-align: left;\n}\n\n.metric-title {\n  font-weight: 600;\n  font-size: 1.1em;\n  margin-bottom: 6px;\n  color: #212529;\n}\n\n.metric-subtitle {\n  font-size: 0.85em;\n  color: #6c757d;\n  line-height: 1.3;\n}\n\n.metric-value {\n  text-align: center;\n  font-weight: 600;\n  font-size: 1.2em;\n  font-variant-numeric: tabular-nums;\n  color: #495057;\n}\n\n.trend-indicator {\n  text-align: center;\n  padding: 20px 16px !important;\n}\n\n.trend-chart {\n  font-size: 1.8em;\n  display: inline-block;\n  animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.7; }\n}\n\n.change-value {\n  text-align: right;\n  font-weight: 700;\n  font-size: 1.1em;\n  padding-right: 40px !important;\n}\n\n.change-value.positive {\n  color: #28a745;\n}\n\n.change-value.negative {\n  color: #dc3545;\n}\n\n.change-value.neutral {\n  color: #6c757d;\n}\n\n/* Responsive adjustments \u003Cspan class=\"hljs-emphasis\">*/\n@media screen and (max-width: 768px) {\n  .analytics-table th,\n  .analytics-table td {\n    padding: 16px 20px;\n    font-size: 0.9em;\n  }\n  \n  .analytics-table .metric-header {\n    padding-left: 24px;\n  }\n  \n  .metric-name {\n    padding-left: 24px !important;\n  }\n  \n  .metric-title {\n    font-size: 1em;\n    margin-bottom: 4px;\n  }\n  \n  .metric-subtitle {\n    font-size: 0.8em;\n  }\n  \n  .metric-value {\n    font-size: 1.1em;\n  }\n  \n  .change-value {\n    padding-right: 24px !important;\n    font-size: 1em;\n  }\n}\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-integration-and-customization\">Platform Integration and Customization\u003C/h2>\n\u003Ch3 id=\"jekyll-integration-with-custom-spacing\">Jekyll Integration with Custom Spacing\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _includes/spaced-table.html -->\n<div class="table-container spacing-{{ include.spacing | default: 'normal' }}">\n  {% if include.responsive %}\n  <div class="table-responsive">\n  {% endif %}\n    <table class="markdown-table {{ include.class }}">\n      {% if include.headers %}\n        <thead>\n          <tr>\n            {% for header in include.headers %}\n              <th class="{{ header.class }}">{{ header.text }}</th>\n            {% endfor %}\n          </tr>\n        </thead>\n      {% endif %}\n      <tbody>\n        {% for row in include.rows %}\n          <tr class="{{ row.class }}">\n            {% for cell in row.cells %}\n              <td class="{{ cell.class }}" {% if cell.data_label %}data-label="{{ cell.data_label }}"{% endif %}>\n                {{ cell.content }}\n              </td>\n            {% endfor %}\n          </tr>\n        {% endfor %}\n      </tbody>\n    </table>\n  {% if include.responsive %}\n  </div>\n  {% endif %}\n</div>\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Usage in Jekyll content:\u003C/strong>\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">---\ncomparison\u003Cspan class=\"hljs-emphasis\">_data:\n  headers:\n    - text: "Feature"\n      class: "feature-col"\n    - text: "Basic"\n      class: "plan-col text-center"\n    - text: "Pro"\n      class: "plan-col text-center highlight"\n  rows:\n    - class: "feature-row"\n      cells:\n        - content: "Storage"\n          class: "feature-name"\n          data_\u003C/span>label: "Feature"\n\u003Cspan class=\"hljs-bullet\">        -\u003C/span> content: "10GB"\n\u003Cspan class=\"hljs-code\">          class: "plan-value"\n          data_label: "Basic"\n        - content: "100GB"\n          class: "plan-value highlight"\n          data_label: "Pro"\n---\n\u003C/span>\n{% include spaced-table.html \n   headers=page.comparison\u003Cspan class=\"hljs-emphasis\">_data.headers \n   rows=page.comparison_\u003C/span>data.rows \n   spacing="comfortable"\n   responsive=true\n   class="comparison-table" %}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-shortcode-with-spacing-control\">Hugo Shortcode with Spacing Control\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-go-html-template\"><!-- layouts/shortcodes/padded-table.html -->\n{{ $spacing := .Get "spacing" | default "normal" }}\n{{ $responsive := .Get "responsive" | default false }}\n{{ $class := .Get "class" | default "markdown-table" }}\n\n<div class="table-wrapper spacing-{{ $spacing }}{{ if $responsive }} responsive{{ end }}">\n  <table class="{{ $class }}">\n    {{ .Inner | markdownify }}\n  </table>\n</div>\n\n<style>\n.spacing-compact table th,\n.spacing-compact table td {\n  padding: 8px 12px;\n  line-height: 1.4;\n}\n\n.spacing-normal table th,\n.spacing-normal table td {\n  padding: 12px 16px;\n  line-height: 1.5;\n}\n\n.spacing-comfortable table th,\n.spacing-comfortable table td {\n  padding: 18px 24px;\n  line-height: 1.6;\n}\n\n.spacing-spacious table th,\n.spacing-spacious table td {\n  padding: 24px 32px;\n  line-height: 1.7;\n}\n\n.table-wrapper.responsive {\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n@media screen and (max-width: 768px) {\n  .table-wrapper.responsive table th,\n  .table-wrapper.responsive table td {\n    padding: 10px 14px;\n    font-size: 0.9em;\n  }\n}\n</style>\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Usage in Hugo content:\u003C/strong>\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">{{< padded-table spacing="comfortable" responsive="true" class="data-table" >}}\n| Metric | Value | Change |\n|--------|-------|--------|\n| Users | 1,234 | +15% |\n| Sessions | 5,678 | +23% |\n| Revenue | $9,876 | +8% |\n{{< /padded-table >}}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"mobile-optimized-spacing-strategies\">Mobile-Optimized Spacing Strategies\u003C/h2>\n\u003Ch3 id=\"touch-friendly-padding\">Touch-Friendly Padding\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Touch-optimized table spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.touch-table\u003C/span> {\n  touch-action: pan-x pan-y;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.touch-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.touch-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">min-height\u003C/span>: \u003Cspan class=\"hljs-number\">44px\u003C/span>; \u003Cspan class=\"hljs-comment\">/* Apple's recommended minimum touch target */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Increase touch targets for interactive elements */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.touch-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">24px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n  user-select: none;\n  -webkit-tap-highlight-\u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.touch-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:active\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.05\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">scale\u003C/span>(\u003Cspan class=\"hljs-number\">0.98\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Action buttons in tables */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.touch-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.action-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.touch-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.action-button\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">44px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">min-height\u003C/span>: \u003Cspan class=\"hljs-number\">44px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.touch-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.action-button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:active\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">scale\u003C/span>(\u003Cspan class=\"hljs-number\">0.95\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile-specific spacing adjustments */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.touch-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.touch-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.touch-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">18px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.touch-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.action-button\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85em\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"adaptive-content-spacing\">Adaptive Content Spacing\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Content-density aware spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.adaptive-table\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--base-padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--density-multiplier\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.adaptive-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.high-density\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--density-multiplier\u003C/span>: \u003Cspan class=\"hljs-number\">0.75\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.adaptive-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.low-density\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--density-multiplier\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.adaptive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.adaptive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--base-padding) * \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--density-multiplier)) \n           \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--base-padding) * \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--density-multiplier) * \u003Cspan class=\"hljs-number\">1.2\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1.4\u003C/span> + (\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--density-multiplier) - \u003Cspan class=\"hljs-number\">1\u003C/span>) * \u003Cspan class=\"hljs-number\">0.3\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Auto-adjust based on content */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.adaptive-table\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[data-rows=\u003Cspan class=\"hljs-string\">"1-5"\u003C/span>]\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--density-multiplier\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.adaptive-table\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[data-rows=\u003Cspan class=\"hljs-string\">"6-20"\u003C/span>]\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--density-multiplier\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.adaptive-table\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[data-rows=\u003Cspan class=\"hljs-string\">"21-50"\u003C/span>]\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--density-multiplier\u003C/span>: \u003Cspan class=\"hljs-number\">0.85\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.adaptive-table\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[data-rows=\u003Cspan class=\"hljs-string\">"51+"\u003C/span>]\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--density-multiplier\u003C/span>: \u003Cspan class=\"hljs-number\">0.7\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"performance-and-accessibility\">Performance and Accessibility\u003C/h2>\n\u003Ch3 id=\"efficient-spacing-with-css-custom-properties\">Efficient Spacing with CSS Custom Properties\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Performance-optimized spacing system */\u003C/span>\n\u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--table-base-unit\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-padding-ratio\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n  \n  \u003Cspan class=\"hljs-comment\">/* Computed values for consistent spacing */\u003C/span>\n  \u003Cspan class=\"hljs-attr\">--table-padding-1\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-base-unit) * \u003Cspan class=\"hljs-number\">1\u003C/span>);\n  \u003Cspan class=\"hljs-attr\">--table-padding-2\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-base-unit) * \u003Cspan class=\"hljs-number\">2\u003C/span>);\n  \u003Cspan class=\"hljs-attr\">--table-padding-3\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-base-unit) * \u003Cspan class=\"hljs-number\">3\u003C/span>);\n  \u003Cspan class=\"hljs-attr\">--table-padding-4\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-base-unit) * \u003Cspan class=\"hljs-number\">4\u003C/span>);\n  \u003Cspan class=\"hljs-attr\">--table-padding-5\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-base-unit) * \u003Cspan class=\"hljs-number\">5\u003C/span>);\n  \u003Cspan class=\"hljs-attr\">--table-padding-6\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-base-unit) * \u003Cspan class=\"hljs-number\">6\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.efficient-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">contain\u003C/span>: layout style paint;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.efficient-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-padding-\u003Cspan class=\"hljs-number\">4\u003C/span>) \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-padding-\u003Cspan class=\"hljs-number\">5\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">will-change\u003C/span>: background-color;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.efficient-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-padding-\u003Cspan class=\"hljs-number\">3\u003C/span>) \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-padding-\u003Cspan class=\"hljs-number\">5\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">will-change\u003C/span>: background-color;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduce reflow during interactions */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.efficient-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateZ\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.efficient-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--hover-color);\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateZ\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"accessibility-compliant-spacing\">Accessibility-Compliant Spacing\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* WCAG-compliant spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#333\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n  \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">1.25rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-width\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n  \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: none;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Focus management for keyboard navigation */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#4c90f0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: -\u003Cspan class=\"hljs-number\">3px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">76\u003C/span>, \u003Cspan class=\"hljs-number\">144\u003C/span>, \u003Cspan class=\"hljs-number\">240\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">0.75rem\u003C/span> - \u003Cspan class=\"hljs-number\">2px\u003C/span>) \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">1rem\u003C/span> - \u003Cspan class=\"hljs-number\">2px\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#4c90f0\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-documentation-workflows\">Integration with Modern Documentation Workflows\u003C/h2>\n\u003Cp>Table cell padding and spacing control integrates seamlessly with comprehensive Markdown documentation systems. When combined with \u003Ca href=\"/blog/markdown-table-column-width-alignment-complete-guide\">table column width and alignment techniques\u003C/a>, optimized spacing creates sophisticated data presentations that balance information density with readability across all viewing contexts.\u003C/p>\n\u003Cp>For comprehensive technical documentation, proper spacing works effectively with \u003Ca href=\"/blog/markdown-syntax-highlighting-complete-guide\">syntax highlighting systems\u003C/a> to create code documentation tables that present complex information in scannable, accessible formats that enhance developer productivity and comprehension.\u003C/p>\n\u003Cp>When building complex content architectures, table spacing complements \u003Ca href=\"/blog/markdown-responsive-images-complete-guide\">responsive design principles\u003C/a> to ensure that data presentation maintains optimal readability and functionality across desktop, tablet, and mobile viewing experiences while preserving professional appearance.\u003C/p>\n\u003Ch2 id=\"troubleshooting-common-spacing-issues\">Troubleshooting Common Spacing Issues\u003C/h2>\n\u003Ch3 id=\"inconsistent-padding-across-browsers\">Inconsistent Padding Across Browsers\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Tables display different padding in different browsers\u003Cbr>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Normalize table spacing across browsers */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.normalized-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n  \u003Cspan class=\"hljs-attribute\">border-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.normalized-table\u003C/span> *,\n\u003Cspan class=\"hljs-selector-class\">.normalized-table\u003C/span> *\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.normalized-table\u003C/span> *\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">box-sizing\u003C/span>: border-box;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.normalized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.normalized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: baseline;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reset browser-specific padding */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.normalized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.normalized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"mobile-layout-breaking\">Mobile Layout Breaking\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Table spacing causes horizontal scroll on mobile\u003Cbr>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Progressive enhancement for mobile */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.mobile-safe-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: visible;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">767px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.mobile-safe-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.mobile-safe-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.mobile-safe-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">word-wrap\u003C/span>: break-word;\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: normal;\n  }\n  \n  \u003Cspan class=\"hljs-comment\">/* Alternative: Stack layout */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.mobile-stack-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.mobile-stack-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.mobile-stack-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.mobile-stack-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"performance-issues-with-large-tables\">Performance Issues with Large Tables\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Large tables with complex spacing cause rendering performance issues\u003Cbr>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Optimize rendering for large tables */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.performance-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">table-layout\u003C/span>: fixed;\n  \u003Cspan class=\"hljs-attribute\">contain\u003C/span>: layout style paint;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.performance-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.performance-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n  \u003Cspan class=\"hljs-attribute\">text-overflow\u003C/span>: ellipsis;\n  \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Virtual scrolling container */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.virtual-table-container\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">400px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow-y\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">contain\u003C/span>: strict;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.virtual-table-container\u003C/span> \u003Cspan class=\"hljs-selector-class\">.performance-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateZ\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Minimize repaints */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.performance-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f5f5f5\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">will-change\u003C/span>: background-color;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Table cell padding and spacing control in Markdown transforms basic data presentation into sophisticated, readable layouts that enhance user comprehension while maintaining professional standards across all viewing contexts. By mastering responsive spacing techniques, CSS integration methods, and accessibility-compliant implementations, content creators can produce tables that serve both functional and aesthetic requirements.\u003C/p>\n\u003Cp>The key to successful table spacing lies in understanding the relationship between content density, visual hierarchy, and user experience, then applying these principles consistently throughout your documentation workflow. Whether you're presenting financial reports, feature comparisons, or analytical dashboards, the techniques covered in this guide provide the foundation for professional table formatting that engages users while maintaining accessibility and performance standards.\u003C/p>\n\u003Cp>Remember to test your spacing implementations across different devices and browsers, validate touch-friendly interactions on mobile devices, and optimize for performance when handling large datasets. With proper cell padding and spacing control, your Markdown tables become powerful tools for data communication that balance information density with visual clarity, creating documentation that truly serves your audience's needs.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43,46],{"id":16,"text":17,"level":18},"why-control-table-cell-padding-and-spacing","Why Control Table Cell Padding and Spacing?",2,{"id":20,"text":21,"level":18},"understanding-default-markdown-table-spacing","Understanding Default Markdown Table Spacing",{"id":23,"text":24,"level":18},"foundation-padding-and-spacing-techniques","Foundation Padding and Spacing Techniques",{"id":26,"text":27,"level":18},"advanced-spacing-control-techniques","Advanced Spacing Control Techniques",{"id":29,"text":30,"level":18},"implementation-examples","Implementation Examples",{"id":32,"text":33,"level":18},"platform-integration-and-customization","Platform Integration and Customization",{"id":35,"text":36,"level":18},"mobile-optimized-spacing-strategies","Mobile-Optimized Spacing Strategies",{"id":38,"text":39,"level":18},"performance-and-accessibility","Performance and Accessibility",{"id":41,"text":42,"level":18},"integration-with-modern-documentation-workflows","Integration with Modern Documentation Workflows",{"id":44,"text":45,"level":18},"troubleshooting-common-spacing-issues","Troubleshooting Common Spacing Issues",{"id":47,"text":48,"level":18},"conclusion","Conclusion",[],[51,59,67],{"slug":52,"title":53,"description":54,"excerpt":55,"date":56,"category":9,"author":10,"keywords":57,"readingMinutes":58},"markdown-table-column-width-cell-padding-complete-guide","Markdown Table Column Width and Cell Padding: Complete Guide for Professional Data Presentation","Master advanced Markdown table formatting with column width control, cell padding techniques, responsive design, and professional styling for optimal data presentation across all platforms.","Advanced Markdown table column width and cell padding techniques enable professional data presentation that optimizes readability, visual hierarchy, and responsive behavior across different…","2025-11-07","markdown table column width, cell padding markdown, table formatting, responsive tables, markdown table styling, data presentation, table design, column sizing",35,{"slug":60,"title":61,"description":62,"excerpt":63,"date":64,"category":9,"author":10,"keywords":65,"readingMinutes":66},"markdown-line-height-spacing-complete-guide","Markdown Line Height and Spacing: Complete Guide for Professional Typography and Layout Control","Master line height, spacing, and typography controls in Markdown for professional document layouts. Learn CSS integration, platform-specific implementations, and advanced spacing techniques for enhanced readability and visual appeal.","Line height and spacing control in Markdown enables professional typography that transforms plain text documents into visually appealing, readable content with proper vertical rhythm and enhanced…","2025-09-12","markdown line height, markdown spacing, markdown typography, line spacing markdown, paragraph spacing markdown, markdown css styling, document formatting markdown, professional markdown layout",18,{"slug":68,"title":69,"description":70,"excerpt":71,"date":72,"category":9,"author":10,"keywords":73,"readingMinutes":74},"markdown-table-cell-merging-and-advanced-formatting","Markdown Table Cell Merging and Advanced Formatting: Complete Guide for Professional Data Presentation","Master advanced table formatting in Markdown including cell merging, column spanning, row grouping, and complex table layouts. Learn platform-specific features and professional table design techniques.","Advanced Markdown table formatting capabilities extend far beyond basic grid layouts, offering sophisticated cell merging, column spanning, and professional formatting options that transform…","2025-12-13","markdown table merging, markdown table formatting, advanced markdown tables, cell spanning markdown, table design markdown, markdown table styling, professional markdown tables",13,1792184944497]