{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"customize-tables","__idx":0},"children":["Customize tables"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Styling tables in your technical documentation improves readability and aesthetics."," ","This guide shows you how to customize Markdown and Markdoc tables using CSS."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Redocly supports tables written in both Markdown and Markdoc syntax."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"before-you-begin","__idx":1},"children":["Before you begin"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Make sure you have the following:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["a basic understanding of CSS"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/styles.css"]}," file in your project"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"table-styling-basics","__idx":2},"children":["Table styling basics"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In Redocly projects, you can create global styles for all tables or style individual tables."," ","Most table styling requires custom CSS."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Define global table styles with ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/css-variables"},"children":["CSS variables"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create individual table styles using CSS selectors."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["CSS variables handle many table styling needs."," ","For more advanced styling, use CSS selectors to target specific table elements."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"html-table-structure","__idx":3},"children":["HTML table structure"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Markdown and Markdoc tables convert to HTML when displayed."," ","Understanding HTML table structure helps you write more precise CSS selectors for targeted styling."]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["See HTML table syntax"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","data-title":"Example HTML table","header":{"title":"Example HTML table","controls":{"copy":{}}},"source":" \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Heading 1Heading 1
Cell 1Cell 2
Cell 4Cell 5
\n","lang":"html"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"add-global-table-styles","__idx":4},"children":["Add global table styles"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Apply consistent styling across all tables by:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Ensuring your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/styles.css"]}," file has a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":root"]}," selector."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":root.dark"]}," if using color modes."]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Setting ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/css-variables/component#markdown"},"children":["table CSS variables"]}," in your root selectors."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["(Optional) Using HTML table selectors for elements not covered by CSS variables."]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example adds global table styles with color mode variants:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":":root {\n --md-table-cell-padding: 8px;\n --md-table-cell-vertical-align: middle;\n --md-table-border-color: black;\n --md-table-header-bg-color: #EDEDF2;\n\n & table {\n border-collapse: collapse;\n }\n}\n:root.dark {\n --md-table-border-color: white;\n --md-table-header-bg-color: #3B3D44;\n}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"style-markdown-tables","__idx":5},"children":["Style Markdown tables"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Target specific tables and elements with CSS selectors based on table headers."," ","Tables with matching headers will share styling."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"use-the-data-label","__idx":6},"children":["Use the data-label"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each header value automatically becomes a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-label"]}," attribute on ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["th"]}," tags when rendered."," ","Use this attribute to style specific columns or tables."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example sets the width and background color of the \"Favorite veggie\" column:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":":root th[data-label=\"Favorite vegetable\"] {\n width: 80%;\n background-color: lightyellow;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Person"},"children":["Person"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Favorite vegetable"},"children":["Favorite vegetable"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Taylor"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Brussel sprouts"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Annabelle"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Asparagus"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Oliver"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Bell peppers"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Daisy"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Carrots"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"combine-css-selectors","__idx":7},"children":["Combine CSS selectors"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create more advanced styles by combining ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-label"]}," with other CSS selectors:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":":root table:has(th[data-label=\"Favorite animal\"]) {\n --md-table-border-color: black;\n --md-table-header-bg-color: gold;\n\n & tr:nth-child(even) {\n background-color: cornsilk;\n }\n}\n\n:root.dark table:has(th[data-label=\"Favorite animal\"]) {\n --md-table-border-color: white;\n --md-table-header-bg-color: indigo;\n\n & tr:nth-child(even) {\n background-color: mediumpurple;\n }\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Person"},"children":["Person"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Favorite animal"},"children":["Favorite animal"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Oliver"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Penguins"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Daisy"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Rabbits"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Taylor"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Snow leopard"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Annabelle"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Ostrich"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"style-markdoc-tables","__idx":8},"children":["Style Markdoc tables"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Control Markdoc table appearance with attributes or custom classes."," ","Attributes provide quick layout control while classes offer complete styling flexibility."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"use-built-in-attributes","__idx":9},"children":["Use built-in attributes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Shape your table layout with built-in attributes - no CSS required:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]}," - Controls column width"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["align"]}," - Sets horizontal text alignment"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["valign"]}," - Sets vertical text alignment (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["top"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["middle"]},", or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bottom"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["colspan"]}," - Spans cells across columns"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example of a table customized with attributes:"]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Person"},"children":["Person"]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"80%","data-label":"Favorite food"},"children":["Favorite food "]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"center","colSpan":2},"children":["Pizza "]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Annabelle"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Bacon"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Oliver"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Popsicle"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"right","vAlign":"middle"},"children":["Daisy "]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Dog treats"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Belly rubs"]}]}]}]}]}]}]}],"rawContent":"{% table %}\n - Person\n - Favorite food {% width=\"80%\" %}\n---\n - Pizza {% colspan=2 align=\"center\" %}\n---\n - Annabelle\n - Bacon\n---\n - Oliver\n - Popsicle\n---\n - Daisy {% align=\"right\" valign=\"middle\" %}\n - - Dog treats\n - Belly rubs\n{% /table %}\n"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Person"},"children":["Person"]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"80%","data-label":"Favorite food"},"children":["Favorite food "]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"center","colSpan":2},"children":["Pizza "]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Annabelle"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Bacon"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Oliver"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Popsicle"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"right","vAlign":"middle"},"children":["Daisy "]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Dog treats"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Belly rubs"]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"create-custom-classes","__idx":10},"children":["Create custom classes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For advanced styling, create CSS classes and add them to your Markdoc table tag:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":":root .striped-table-rows {\n --md-table-border-color: black;\n --md-table-header-bg-color: royalblue;\n\n & tr:nth-child(even) {\n background-color: lightskyblue;\n }\n}\n\n:root.dark .striped-table-rows {\n --md-table-border-color: white;\n --md-table-header-bg-color: darkgreen;\n\n & tr:nth-child(even) {\n background-color: mediumseagreen;\n }\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"class":"striped-table-rows md","className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Person"},"children":["Person"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Favorite activity"},"children":["Favorite activity"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Taylor"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Snowboarding"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Annabelle"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Roblox"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Oliver"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Swings"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Daisy"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Dog park"]}]}]}]}]}],"rawContent":"{% table .striped-table-rows .md %}\n - Person\n - Favorite activity\n---\n - Taylor\n - Snowboarding\n---\n - Annabelle\n - Roblox\n---\n - Oliver\n - Swings\n---\n - Daisy\n - Dog park\n{% /table %}\n"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Warn"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Include the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".md"]}," class on the tag to inherit default theme styling."]}]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"class":"striped-table-rows md","className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Person"},"children":["Person"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Favorite activity"},"children":["Favorite activity"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Taylor"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Snowboarding"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Annabelle"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Roblox"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Oliver"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Swings"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Daisy"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Dog park"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"style-specific-rows","__idx":11},"children":["Style specific rows"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Highlight important information by styling specific rows in your tables."," ","Add a CSS class directly to a row in your Markdoc table, then target that class in your CSS."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","data-title":"@theme/styles.css","header":{"title":"@theme/styles.css","controls":{"copy":{}}},"source":"/* Style all cells in rows containing the class */\n:root tr:has(.highclick) > * {\n background-color: yellow;\n --md-table-cell-text-color: black;\n}\n\n:root tr:has(.medclick) > * {\n background-color: lightyellow;\n --md-table-cell-text-color: black;\n}\n\n:root.dark tr:has(.highclick) > * {\n background-color: gold;\n --md-table-cell-text-color: black;\n}\n\n:root.dark tr:has(.medclick) > * {\n background-color: khaki;\n --md-table-cell-text-color: black;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's how to apply these classes to specific rows:"]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"class":"md","className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Task"},"children":["Task"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Clicks required"},"children":["Clicks required"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Notes"},"children":["Notes"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"class":"highclick"},"children":["Change your logo "]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["10"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Only found details on Getting started page"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Change the color of a heading"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["2"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"class":"medclick"},"children":["Revert changes "]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Could be highlighted more in the sidebar"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Add admonition"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["3"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]}]}]}]}],"rawContent":"{% table .md %}\n - Task\n - Clicks required\n - Notes\n---\n - Change your logo {% .highclick %}\n - 10\n - Only found details on Getting started page\n---\n - Change the color of a heading\n - 2\n -\n---\n - Revert changes {% .medclick %}\n - 8\n - Could be highlighted more in the sidebar\n---\n - Add admonition\n - 3\n -\n{% /table %}\n"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"class":"md","className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Task"},"children":["Task"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Clicks required"},"children":["Clicks required"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Notes"},"children":["Notes"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"class":"highclick"},"children":["Change your logo "]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["10"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Only found details on Getting started page"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Change the color of a heading"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["2"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"class":"medclick"},"children":["Revert changes "]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Could be highlighted more in the sidebar"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Add admonition"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["3"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to highlight high-click tasks in yellow and medium-click tasks in light yellow, with appropriate dark mode alternatives."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":12},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/customize-styles"},"children":["Customize styles"]}]}," - Learn to customize your project's appearance using CSS variables and custom stylesheets for comprehensive styling control"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/customize-color-modes"},"children":["Customize color modes"]}]}," - Apply different table styling for light and dark modes with mode-specific color schemes and CSS rules"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding"},"children":["Style your site"]}]}," - Explore all available branding and customization approaches from basic configuration to advanced component styling"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/color-mode"},"children":["Color mode"]}]}," - Understand how the color mode feature works and its CSS variable-based implementation for table styling"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/css-variables"},"children":["CSS variables"]}]}," - Complete dictionary of table-specific CSS variables and global styling variables for advanced customization"]}]}]},"frontmatter":{},"tagList":["admonition","html","markdoc-example","table"],"title":"Customize tables","lastModified":"2026-10-01T23:00:57.000Z"}