[{"data":1,"prerenderedAt":1381},["ShallowReactive",2],{"blog-post:en:\u002Fen\u002Fblog\u002Fmarkdown-table-complete-guide-with-examples":3},{"id":4,"title":5,"author":6,"body":7,"category":1350,"date":1351,"description":1352,"extension":1353,"image":1354,"imageAlt":1355,"meta":1356,"navigation":1357,"path":1358,"seo":1359,"stem":1360,"tags":1361,"translationKey":1362,"__hash__":1363,"html":1364,"bodyMarkdown":1365,"translations":1366,"previous":1373,"next":1378},"blog\u002Fen\u002Fblog\u002F2.markdown-table-complete-guide-with-examples.md","Markdown Table: Complete Guide with Examples","Antoine Frankart",{"type":8,"value":9,"toc":1326},"minimark",[10,14,17,22,25,67,70,93,96,121,128,132,135,165,168,198,209,212,216,219,269,272,302,309,313,319,322,347,358,362,365,368,373,380,405,408,412,415,440,450,454,457,460,484,491,494,588,591,595,598,601,739,742,746,749,752,788,795,890,893,897,900,924,927,961,965,968,995,998,1023,1027,1030,1050,1061,1065,1068,1079,1099,1102,1106,1110,1113,1120,1124,1127,1131,1139,1143,1152,1156,1292,1295,1301,1304,1312,1315,1322],[11,12,13],"p",{},"Markdown tables look intimidating in raw text. Pipes everywhere, dashes lining up (or not), content that refuses to stay in its column. But the syntax is actually simple once you understand the three parts: header, separator, rows.",[11,15,16],{},"Here's everything I've learned about Markdown tables, from the basics to the edge cases.",[18,19,21],"h2",{"id":20},"the-basic-syntax","The basic syntax",[11,23,24],{},"A Markdown table has three components: a header row, a separator row, and one or more data rows.",[26,27,32],"pre",{"className":28,"code":29,"language":30,"meta":31,"style":31},"language-markdown shiki shiki-themes github-light github-dark","| Name    | Role     | Location |\n| ------- | -------- | -------- |\n| Alice   | Dev      | Paris    |\n| Bob     | Designer | Lyon     |\n| Charlie | PM       | Remote   |\n","markdown","",[33,34,35,43,49,55,61],"code",{"__ignoreMap":31},[36,37,40],"span",{"class":38,"line":39},"line",1,[36,41,42],{},"| Name    | Role     | Location |\n",[36,44,46],{"class":38,"line":45},2,[36,47,48],{},"| ------- | -------- | -------- |\n",[36,50,52],{"class":38,"line":51},3,[36,53,54],{},"| Alice   | Dev      | Paris    |\n",[36,56,58],{"class":38,"line":57},4,[36,59,60],{},"| Bob     | Designer | Lyon     |\n",[36,62,64],{"class":38,"line":63},5,[36,65,66],{},"| Charlie | PM       | Remote   |\n",[11,68,69],{},"The rules:",[71,72,73,81,87,90],"ul",{},[74,75,76,77,80],"li",{},"Use ",[33,78,79],{},"|"," (pipe) to separate columns.",[74,82,76,83,86],{},[33,84,85],{},"---"," (three or more hyphens) in the separator row to define each column.",[74,88,89],{},"Add a pipe at the beginning and end of each row. Technically optional in some parsers, but always do it for compatibility.",[74,91,92],{},"Leave a blank line before the table. Without it, some renderers won't parse it correctly.",[11,94,95],{},"Cell widths don't need to match. This is perfectly valid:",[26,97,99],{"className":28,"code":98,"language":30,"meta":31,"style":31},"| Name | Role |\n| --- | --- |\n| Alice | Developer |\n| Bob | Designer |\n",[33,100,101,106,111,116],{"__ignoreMap":31},[36,102,103],{"class":38,"line":39},[36,104,105],{},"| Name | Role |\n",[36,107,108],{"class":38,"line":45},[36,109,110],{},"| --- | --- |\n",[36,112,113],{"class":38,"line":51},[36,114,115],{},"| Alice | Developer |\n",[36,117,118],{"class":38,"line":57},[36,119,120],{},"| Bob | Designer |\n",[11,122,123,124,127],{},"The rendered output will look identical whether you align the pipes in the source file or not. Alignment in the raw file is purely cosmetic, it helps readability when you open the ",[33,125,126],{},".md"," file in a text editor, nothing more.",[18,129,131],{"id":130},"column-alignment","Column alignment",[11,133,134],{},"By default, text is left-aligned. You can change this with colons in the separator row:",[26,136,138],{"className":28,"code":137,"language":30,"meta":31,"style":31},"| Product       | Stock |  Price |\n| :------------ | :---: | -----: |\n| Markdown Book |  Yes  |  19.99 |\n| Cheat Sheet   |  No   |   4.99 |\n| Sticker Pack  |  Yes  |   2.49 |\n",[33,139,140,145,150,155,160],{"__ignoreMap":31},[36,141,142],{"class":38,"line":39},[36,143,144],{},"| Product       | Stock |  Price |\n",[36,146,147],{"class":38,"line":45},[36,148,149],{},"| :------------ | :---: | -----: |\n",[36,151,152],{"class":38,"line":51},[36,153,154],{},"| Markdown Book |  Yes  |  19.99 |\n",[36,156,157],{"class":38,"line":57},[36,158,159],{},"| Cheat Sheet   |  No   |   4.99 |\n",[36,161,162],{"class":38,"line":63},[36,163,164],{},"| Sticker Pack  |  Yes  |   2.49 |\n",[11,166,167],{},"The colons work like this:",[71,169,170,180,189],{},[74,171,172,175,176,179],{},[33,173,174],{},":---"," or ",[33,177,178],{},":--"," left-aligned (default).",[74,181,182,175,185,188],{},[33,183,184],{},":---:",[33,186,187],{},":-:"," center-aligned.",[74,190,191,175,194,197],{},[33,192,193],{},"---:",[33,195,196],{},"--:"," right-aligned.",[11,199,200,201,204,205,208],{},"The number of hyphens doesn't matter. ",[33,202,203],{},":--:"," works the same as ",[33,206,207],{},":--------:",". Only the position of the colons counts.",[11,210,211],{},"A common pattern: left-align text columns, center-align status columns, right-align numbers. This makes tables much easier to scan.",[18,213,215],{"id":214},"formatting-text-inside-cells","Formatting text inside cells",[11,217,218],{},"You can use most inline Markdown formatting inside table cells:",[71,220,221,231,240,248,260],{},[74,222,223,227,228],{},[224,225,226],"strong",{},"Bold",": ",[33,229,230],{},"**text**",[74,232,233,227,237],{},[234,235,236],"em",{},"Italic",[33,238,239],{},"*text*",[74,241,242,227,245],{},[33,243,244],{},"Code",[33,246,247],{},"`code`",[74,249,250,227,257],{},[251,252,256],"a",{"href":253,"rel":254},"https:\u002F\u002Fexample.com",[255],"nofollow","Links",[33,258,259],{},"[text](url)",[74,261,262,227,266],{},[263,264,265],"del",{},"Strikethrough",[33,267,268],{},"~~text~~",[11,270,271],{},"Example:",[26,273,275],{"className":28,"code":274,"language":30,"meta":31,"style":31},"| Feature          | Status        | Notes                    |\n| ---------------- | ------------- | ------------------------ |\n| **Dark mode**    | `Done`        | Shipped in v2.1          |\n| *Sync*           | `In progress` | [See PR #42](https:\u002F\u002F…)  |\n| ~~Old feature~~  | `Removed`     | Deprecated in v3.0       |\n",[33,276,277,282,287,292,297],{"__ignoreMap":31},[36,278,279],{"class":38,"line":39},[36,280,281],{},"| Feature          | Status        | Notes                    |\n",[36,283,284],{"class":38,"line":45},[36,285,286],{},"| ---------------- | ------------- | ------------------------ |\n",[36,288,289],{"class":38,"line":51},[36,290,291],{},"| **Dark mode**    | `Done`        | Shipped in v2.1          |\n",[36,293,294],{"class":38,"line":57},[36,295,296],{},"| *Sync*           | `In progress` | [See PR #42](https:\u002F\u002F…)  |\n",[36,298,299],{"class":38,"line":63},[36,300,301],{},"| ~~Old feature~~  | `Removed`     | Deprecated in v3.0       |\n",[11,303,304,305,308],{},"What you generally ",[224,306,307],{},"cannot"," use inside GitHub Flavored Markdown (GFM) style table cells as Markdown syntax: headings, blockquotes, horizontal rules, lists, or code blocks. Tables parse inline content, not block-level elements. Images are inline, so many renderers support them, but they can make tables harder to read.",[18,310,312],{"id":311},"escaping-the-pipe-character","Escaping the pipe character",[11,314,315,316,318],{},"Since ",[33,317,79],{}," is the column delimiter, displaying a literal pipe inside a cell requires escaping.",[11,320,321],{},"Two methods:",[26,323,325],{"className":28,"code":324,"language":30,"meta":31,"style":31},"| Syntax    | Example      |\n| --------- | ------------ |\n| Backslash | A \\| B       |\n| HTML code | A | B |\n",[33,326,327,332,337,342],{"__ignoreMap":31},[36,328,329],{"class":38,"line":39},[36,330,331],{},"| Syntax    | Example      |\n",[36,333,334],{"class":38,"line":45},[36,335,336],{},"| --------- | ------------ |\n",[36,338,339],{"class":38,"line":51},[36,340,341],{},"| Backslash | A \\| B       |\n",[36,343,344],{"class":38,"line":57},[36,345,346],{},"| HTML code | A | B |\n",[11,348,349,350,353,354,357],{},"The backslash method (",[33,351,352],{},"\\|",") works in GitHub Flavored Markdown (GFM) and most modern parsers. The HTML entity (",[33,355,356],{},"|",") is the universal fallback, it works everywhere.",[18,359,361],{"id":360},"multiline-content-in-cells","Multiline content in cells",[11,363,364],{},"GitHub Flavored Markdown (GFM) tables don't natively support multiline Markdown blocks inside a single cell. In practice, each cell is best treated as a single line of inline content.",[11,366,367],{},"But in practice, you often need more than a few words in a cell. Here are the workarounds:",[369,370,372],"h3",{"id":371},"html-line-breaks","HTML line breaks",[11,374,375,376,379],{},"The ",[33,377,378],{},"\u003Cbr>"," tag works in most renderers:",[26,381,383],{"className":28,"code":382,"language":30,"meta":31,"style":31},"| Step | Description                                  |\n| ---- | -------------------------------------------- |\n| 1    | Clone the repo\u003Cbr>Run `npm install`          |\n| 2    | Create a `.env` file\u003Cbr>Add your API key     |\n",[33,384,385,390,395,400],{"__ignoreMap":31},[36,386,387],{"class":38,"line":39},[36,388,389],{},"| Step | Description                                  |\n",[36,391,392],{"class":38,"line":45},[36,393,394],{},"| ---- | -------------------------------------------- |\n",[36,396,397],{"class":38,"line":51},[36,398,399],{},"| 1    | Clone the repo\u003Cbr>Run `npm install`          |\n",[36,401,402],{"class":38,"line":57},[36,403,404],{},"| 2    | Create a `.env` file\u003Cbr>Add your API key     |\n",[11,406,407],{},"This is the most common workaround. It works on GitHub, Obsidian, GitLab, and many static site generators that allow inline HTML, but it is still worth testing in your target renderer.",[369,409,411],{"id":410},"html-lists-inside-cells","HTML lists inside cells",[11,413,414],{},"If you need actual bullet points inside a cell, use HTML:",[26,416,418],{"className":28,"code":417,"language":30,"meta":31,"style":31},"| Module | Includes                                              |\n| ------ | ----------------------------------------------------- |\n| Core   | \u003Cul>\u003Cli>Parser\u003C\u002Fli>\u003Cli>Renderer\u003C\u002Fli>\u003C\u002Ful>             |\n| Extras | \u003Cul>\u003Cli>Syntax highlighting\u003C\u002Fli>\u003Cli>Tables\u003C\u002Fli>\u003C\u002Ful>  |\n",[33,419,420,425,430,435],{"__ignoreMap":31},[36,421,422],{"class":38,"line":39},[36,423,424],{},"| Module | Includes                                              |\n",[36,426,427],{"class":38,"line":45},[36,428,429],{},"| ------ | ----------------------------------------------------- |\n",[36,431,432],{"class":38,"line":51},[36,433,434],{},"| Core   | \u003Cul>\u003Cli>Parser\u003C\u002Fli>\u003Cli>Renderer\u003C\u002Fli>\u003C\u002Ful>             |\n",[36,436,437],{"class":38,"line":57},[36,438,439],{},"| Extras | \u003Cul>\u003Cli>Syntax highlighting\u003C\u002Fli>\u003Cli>Tables\u003C\u002Fli>\u003C\u002Ful>  |\n",[11,441,442,443,446,447,449],{},"Not every renderer supports this. Because list tags such as ",[33,444,445],{},"\u003Cul>"," are block-level HTML, support inside table cells varies more than with ",[33,448,378],{},". Some renderers handle it, some strip it, and others render it inconsistently. Test before committing to this approach.",[18,451,453],{"id":452},"tables-without-a-header","Tables without a header",[11,455,456],{},"In GitHub Flavored Markdown (GFM) style tables, a header row is required. There's no way around this in that syntax.",[11,458,459],{},"If you don't want a visible header, the closest workaround is using empty header cells:",[26,461,463],{"className":28,"code":462,"language":30,"meta":31,"style":31},"|     |     |\n| --- | --- |\n| A1  | B1  |\n| A2  | B2  |\n",[33,464,465,470,474,479],{"__ignoreMap":31},[36,466,467],{"class":38,"line":39},[36,468,469],{},"|     |     |\n",[36,471,472],{"class":38,"line":45},[36,473,110],{},[36,475,476],{"class":38,"line":51},[36,477,478],{},"| A1  | B1  |\n",[36,480,481],{"class":38,"line":57},[36,482,483],{},"| A2  | B2  |\n",[11,485,486,487,490],{},"The header row still exists in the HTML output (as ",[33,488,489],{},"\u003Cthead>","), but visually it renders as an empty row or is hidden depending on the CSS. On GitHub, the empty header is visible but discreet. In Obsidian, it depends on the theme.",[11,492,493],{},"Another approach is using HTML directly:",[26,495,499],{"className":496,"code":497,"language":498,"meta":31,"style":31},"language-html shiki shiki-themes github-light github-dark","\u003Ctable>\n  \u003Ctr>\u003Ctd>A1\u003C\u002Ftd>\u003Ctd>B1\u003C\u002Ftd>\u003C\u002Ftr>\n  \u003Ctr>\u003Ctd>A2\u003C\u002Ftd>\u003Ctd>B2\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftable>\n","html",[33,500,501,514,549,579],{"__ignoreMap":31},[36,502,503,507,511],{"class":38,"line":39},[36,504,506],{"class":505},"sVt8B","\u003C",[36,508,510],{"class":509},"s9eBZ","table",[36,512,513],{"class":505},">\n",[36,515,516,519,522,525,528,531,533,535,537,540,542,545,547],{"class":38,"line":45},[36,517,518],{"class":505},"  \u003C",[36,520,521],{"class":509},"tr",[36,523,524],{"class":505},">\u003C",[36,526,527],{"class":509},"td",[36,529,530],{"class":505},">A1\u003C\u002F",[36,532,527],{"class":509},[36,534,524],{"class":505},[36,536,527],{"class":509},[36,538,539],{"class":505},">B1\u003C\u002F",[36,541,527],{"class":509},[36,543,544],{"class":505},">\u003C\u002F",[36,546,521],{"class":509},[36,548,513],{"class":505},[36,550,551,553,555,557,559,562,564,566,568,571,573,575,577],{"class":38,"line":51},[36,552,518],{"class":505},[36,554,521],{"class":509},[36,556,524],{"class":505},[36,558,527],{"class":509},[36,560,561],{"class":505},">A2\u003C\u002F",[36,563,527],{"class":509},[36,565,524],{"class":505},[36,567,527],{"class":509},[36,569,570],{"class":505},">B2\u003C\u002F",[36,572,527],{"class":509},[36,574,544],{"class":505},[36,576,521],{"class":509},[36,578,513],{"class":505},[36,580,581,584,586],{"class":38,"line":57},[36,582,583],{"class":505},"\u003C\u002F",[36,585,510],{"class":509},[36,587,513],{"class":505},[11,589,590],{},"This skips the header entirely, but you lose the simplicity of Markdown syntax.",[18,592,594],{"id":593},"can-you-merge-cells","Can you merge cells?",[11,596,597],{},"No. Markdown has no syntax for colspan or rowspan.",[11,599,600],{},"If you genuinely need merged cells, your only option is writing the table in HTML:",[26,602,604],{"className":496,"code":603,"language":498,"meta":31,"style":31},"\u003Ctable>\n  \u003Ctr>\n    \u003Cth colspan=\"2\">Full Name\u003C\u002Fth>\n    \u003Cth>Role\u003C\u002Fth>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>Alice\u003C\u002Ftd>\n    \u003Ctd>Martin\u003C\u002Ftd>\n    \u003Ctd>Dev\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n",[33,605,606,614,622,648,661,670,679,693,707,721,730],{"__ignoreMap":31},[36,607,608,610,612],{"class":38,"line":39},[36,609,506],{"class":505},[36,611,510],{"class":509},[36,613,513],{"class":505},[36,615,616,618,620],{"class":38,"line":45},[36,617,518],{"class":505},[36,619,521],{"class":509},[36,621,513],{"class":505},[36,623,624,627,630,634,637,641,644,646],{"class":38,"line":51},[36,625,626],{"class":505},"    \u003C",[36,628,629],{"class":509},"th",[36,631,633],{"class":632},"sScJk"," colspan",[36,635,636],{"class":505},"=",[36,638,640],{"class":639},"sZZnC","\"2\"",[36,642,643],{"class":505},">Full Name\u003C\u002F",[36,645,629],{"class":509},[36,647,513],{"class":505},[36,649,650,652,654,657,659],{"class":38,"line":57},[36,651,626],{"class":505},[36,653,629],{"class":509},[36,655,656],{"class":505},">Role\u003C\u002F",[36,658,629],{"class":509},[36,660,513],{"class":505},[36,662,663,666,668],{"class":38,"line":63},[36,664,665],{"class":505},"  \u003C\u002F",[36,667,521],{"class":509},[36,669,513],{"class":505},[36,671,673,675,677],{"class":38,"line":672},6,[36,674,518],{"class":505},[36,676,521],{"class":509},[36,678,513],{"class":505},[36,680,682,684,686,689,691],{"class":38,"line":681},7,[36,683,626],{"class":505},[36,685,527],{"class":509},[36,687,688],{"class":505},">Alice\u003C\u002F",[36,690,527],{"class":509},[36,692,513],{"class":505},[36,694,696,698,700,703,705],{"class":38,"line":695},8,[36,697,626],{"class":505},[36,699,527],{"class":509},[36,701,702],{"class":505},">Martin\u003C\u002F",[36,704,527],{"class":509},[36,706,513],{"class":505},[36,708,710,712,714,717,719],{"class":38,"line":709},9,[36,711,626],{"class":505},[36,713,527],{"class":509},[36,715,716],{"class":505},">Dev\u003C\u002F",[36,718,527],{"class":509},[36,720,513],{"class":505},[36,722,724,726,728],{"class":38,"line":723},10,[36,725,665],{"class":505},[36,727,521],{"class":509},[36,729,513],{"class":505},[36,731,733,735,737],{"class":38,"line":732},11,[36,734,583],{"class":505},[36,736,510],{"class":509},[36,738,513],{"class":505},[11,740,741],{},"This works in any renderer that accepts HTML tables. But it defeats the purpose of Markdown: readability in source form. I reserve HTML tables for cases where the layout truly requires merging, which is rarer than you'd think.",[18,743,745],{"id":744},"adding-a-caption","Adding a caption",[11,747,748],{},"Standard Markdown tables don't support captions. No syntax exists for it.",[11,750,751],{},"The simplest workaround is adding an italic line directly below the table:",[26,753,755],{"className":28,"code":754,"language":30,"meta":31,"style":31},"| Quarter | Revenue |\n| ------- | ------: |\n| Q1      |   $120K |\n| Q2      |   $145K |\n\n*Table 1: Revenue by quarter, 2025.*\n",[33,756,757,762,767,772,777,783],{"__ignoreMap":31},[36,758,759],{"class":38,"line":39},[36,760,761],{},"| Quarter | Revenue |\n",[36,763,764],{"class":38,"line":45},[36,765,766],{},"| ------- | ------: |\n",[36,768,769],{"class":38,"line":51},[36,770,771],{},"| Q1      |   $120K |\n",[36,773,774],{"class":38,"line":57},[36,775,776],{},"| Q2      |   $145K |\n",[36,778,779],{"class":38,"line":63},[36,780,782],{"emptyLinePlaceholder":781},true,"\n",[36,784,785],{"class":38,"line":672},[36,786,787],{},"*Table 1: Revenue by quarter, 2025.*\n",[11,789,790,791,794],{},"For HTML output, you can use the ",[33,792,793],{},"\u003Ccaption>"," tag:",[26,796,798],{"className":496,"code":797,"language":498,"meta":31,"style":31},"\u003Ctable>\n  \u003Ccaption>Revenue by quarter, 2025\u003C\u002Fcaption>\n  \u003Ctr>\u003Cth>Quarter\u003C\u002Fth>\u003Cth>Revenue\u003C\u002Fth>\u003C\u002Ftr>\n  \u003Ctr>\u003Ctd>Q1\u003C\u002Ftd>\u003Ctd>$120K\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftable>\n",[33,799,800,808,822,852,882],{"__ignoreMap":31},[36,801,802,804,806],{"class":38,"line":39},[36,803,506],{"class":505},[36,805,510],{"class":509},[36,807,513],{"class":505},[36,809,810,812,815,818,820],{"class":38,"line":45},[36,811,518],{"class":505},[36,813,814],{"class":509},"caption",[36,816,817],{"class":505},">Revenue by quarter, 2025\u003C\u002F",[36,819,814],{"class":509},[36,821,513],{"class":505},[36,823,824,826,828,830,832,835,837,839,841,844,846,848,850],{"class":38,"line":51},[36,825,518],{"class":505},[36,827,521],{"class":509},[36,829,524],{"class":505},[36,831,629],{"class":509},[36,833,834],{"class":505},">Quarter\u003C\u002F",[36,836,629],{"class":509},[36,838,524],{"class":505},[36,840,629],{"class":509},[36,842,843],{"class":505},">Revenue\u003C\u002F",[36,845,629],{"class":509},[36,847,544],{"class":505},[36,849,521],{"class":509},[36,851,513],{"class":505},[36,853,854,856,858,860,862,865,867,869,871,874,876,878,880],{"class":38,"line":57},[36,855,518],{"class":505},[36,857,521],{"class":509},[36,859,524],{"class":505},[36,861,527],{"class":509},[36,863,864],{"class":505},">Q1\u003C\u002F",[36,866,527],{"class":509},[36,868,524],{"class":505},[36,870,527],{"class":509},[36,872,873],{"class":505},">$120K\u003C\u002F",[36,875,527],{"class":509},[36,877,544],{"class":505},[36,879,521],{"class":509},[36,881,513],{"class":505},[36,883,884,886,888],{"class":38,"line":63},[36,885,583],{"class":505},[36,887,510],{"class":509},[36,889,513],{"class":505},[11,891,892],{},"If you're using a static site generator (Nuxt Content, Hugo, Astro, etc.), check if it offers a table caption extension or shortcode. Some do.",[18,894,896],{"id":895},"tables-in-github","Tables in GitHub",[11,898,899],{},"GitHub Flavored Markdown (GFM) fully supports tables. A few specifics:",[71,901,902,909,912,915,921],{},[74,903,904,905,908],{},"The pipes at the start and end of rows are ",[224,906,907],{},"optional"," in GFM, but I recommend always including them.",[74,910,911],{},"GitHub renders tables with alternating row shading (zebra stripes), which helps readability.",[74,913,914],{},"Inline formatting works: bold, italic, code, links, strikethrough.",[74,916,917,918,920],{},"HTML inside cells is partially supported. ",[33,919,378],{}," works well, but more complex HTML inside cells is less predictable and some tags get stripped.",[74,922,923],{},"GitHub auto-wraps long cell content. No horizontal scroll, the text just wraps to the next line within the cell.",[11,925,926],{},"A common pattern in GitHub issues and PRs: using tables for comparison.",[26,928,930],{"className":28,"code":929,"language":30,"meta":31,"style":31},"## Comparison\n\n| Approach   | Pros              | Cons               |\n| ---------- | ----------------- | ------------------ |\n| Option A   | Simple, fast      | Limited features   |\n| Option B   | Feature-rich      | Complex setup      |\n",[33,931,932,937,941,946,951,956],{"__ignoreMap":31},[36,933,934],{"class":38,"line":39},[36,935,936],{},"## Comparison\n",[36,938,939],{"class":38,"line":45},[36,940,782],{"emptyLinePlaceholder":781},[36,942,943],{"class":38,"line":51},[36,944,945],{},"| Approach   | Pros              | Cons               |\n",[36,947,948],{"class":38,"line":57},[36,949,950],{},"| ---------- | ----------------- | ------------------ |\n",[36,952,953],{"class":38,"line":63},[36,954,955],{},"| Option A   | Simple, fast      | Limited features   |\n",[36,957,958],{"class":38,"line":672},[36,959,960],{},"| Option B   | Feature-rich      | Complex setup      |\n",[18,962,964],{"id":963},"tables-in-fude","Tables in Fude",[11,966,967],{},"In Fude, standard Markdown tables work the way you would expect. If your table uses the usual GitHub-style syntax, it should render cleanly:",[71,969,970,973,984,987,990],{},[74,971,972],{},"a header row, a separator row, and body rows",[74,974,975,976,978,979,981,982],{},"column alignment with ",[33,977,174],{},", ",[33,980,184],{},", and ",[33,983,193],{},[74,985,986],{},"inline formatting inside cells such as bold, italic, code, and links",[74,988,989],{},"Links inside tables behave just like links elsewhere in Fude. Web links open normally, and Markdown links can still point to other notes.",[74,991,992,994],{},[33,993,378],{}," inside a cell works, it adds a line break",[11,996,997],{},"If you stay with regular Markdown table syntax, Fude will handle it well.",[71,999,1000,1007],{},[74,1001,1002,1003,1006],{},"HTML lists such as ",[33,1004,1005],{},"\u003Cul>\u003Cli>...\u003C\u002Fli>\u003C\u002Ful>"," inside cells are not supported",[74,1008,1009,1010,978,1013,978,1015,1018,1019,1022],{},"raw HTML tables with ",[33,1011,1012],{},"\u003Ctable>",[33,1014,793],{},[33,1016,1017],{},"colspan",", or ",[33,1020,1021],{},"rowspan"," are not supported either",[18,1024,1026],{"id":1025},"tables-in-obsidian","Tables in Obsidian",[11,1028,1029],{},"Obsidian supports standard Markdown table syntax. In practice:",[71,1031,1032,1035,1038,1045],{},[74,1033,1034],{},"Live preview mode renders tables in real time as you type.",[74,1036,1037],{},"Obsidian has a built-in table editor (right-click on a table) that lets you add\u002Fremove rows and columns without touching the raw syntax.",[74,1039,1040,1041,1044],{},"Alignment with ",[33,1042,1043],{},":"," works as expected.",[74,1046,1047,1049],{},[33,1048,378],{}," inside cells works in reading mode and live preview.",[11,1051,1052,1053,1056,1057,1060],{},"One thing to watch: if your table is inside a callout block (",[33,1054,1055],{},"> [!note]","), every row needs to be prefixed with ",[33,1058,1059],{},">",". This gets tedious for large tables.",[18,1062,1064],{"id":1063},"when-a-table-isnt-the-right-tool","When a table isn't the right tool",[11,1066,1067],{},"Markdown tables work well for structured, tabular data with a consistent number of columns. They don't work well when:",[71,1069,1070,1073,1076],{},[74,1071,1072],{},"Cells contain paragraphs of text. The raw Markdown becomes unreadable, and the rendered output looks cramped.",[74,1074,1075],{},"You need merged cells, nested tables, or complex layouts. Use HTML instead.",[74,1077,1078],{},"The data is a simple key-value list. A definition list or even bold text is simpler:",[26,1080,1082],{"className":28,"code":1081,"language":30,"meta":31,"style":31},"**Name:** Alice\n**Role:** Developer\n**Location:** Paris\n",[33,1083,1084,1089,1094],{"__ignoreMap":31},[36,1085,1086],{"class":38,"line":39},[36,1087,1088],{},"**Name:** Alice\n",[36,1090,1091],{"class":38,"line":45},[36,1092,1093],{},"**Role:** Developer\n",[36,1095,1096],{"class":38,"line":51},[36,1097,1098],{},"**Location:** Paris\n",[11,1100,1101],{},"This is easier to read (and write) than a two-column table for the same information.",[18,1103,1105],{"id":1104},"debugging-common-problems","Debugging common problems",[369,1107,1109],{"id":1108},"my-table-doesnt-render","\"My table doesn't render\"",[11,1111,1112],{},"The most frequent cause: no blank line before the table. Add one.",[11,1114,1115,1116,1119],{},"Second most frequent: the separator row is missing or malformed. Every table needs a ",[33,1117,1118],{},"| --- | --- |"," line between the header and data rows. If you forget it, the parser sees plain text, not a table.",[369,1121,1123],{"id":1122},"columns-are-misaligned-in-the-output","\"Columns are misaligned in the output\"",[11,1125,1126],{},"If one cell has more content than the others, some renderers will stretch that column. This is normal behavior, Markdown tables adapt to content width. You can't set fixed column widths in Markdown.",[369,1128,1130],{"id":1129},"my-pipe-character-shows-up-as-a-column-separator","\"My pipe character shows up as a column separator\"",[11,1132,1133,1134,175,1136,1138],{},"Escape it: ",[33,1135,352],{},[33,1137,356],{},". See the section above on escaping.",[369,1140,1142],{"id":1141},"line-breaks-inside-cells-dont-work","\"Line breaks inside cells don't work\"",[11,1144,1145,1146,1148,1149,1151],{},"Standard Markdown doesn't support this. Use ",[33,1147,378],{}," for line breaks inside cells. If ",[33,1150,378],{}," doesn't work, your renderer likely strips HTML tags, check its documentation.",[18,1153,1155],{"id":1154},"quick-reference","Quick reference",[26,1157,1159],{"className":28,"code":1158,"language":30,"meta":31,"style":31},"# Basic table\n| Header 1 | Header 2 |\n| -------- | -------- |\n| Cell 1   | Cell 2   |\n\n\n# Alignment\n| Left | Center | Right |\n| :--- | :----: | ----: |\n| A    |   B    |     C |\n\n\n# Formatting\n| Feature     | Status   |\n| ----------- | -------- |\n| **Bold**    | `code`   |\n| *Italic*    | [Link]() |\n\n\n# Escape pipe\n| A \\| B | C | D |\n\n\n# Line break in cell\n| Step | Do this\u003Cbr>Then that |\n",[33,1160,1161,1166,1171,1176,1181,1185,1189,1194,1199,1204,1209,1213,1218,1224,1230,1236,1242,1248,1253,1258,1264,1270,1275,1280,1286],{"__ignoreMap":31},[36,1162,1163],{"class":38,"line":39},[36,1164,1165],{},"# Basic table\n",[36,1167,1168],{"class":38,"line":45},[36,1169,1170],{},"| Header 1 | Header 2 |\n",[36,1172,1173],{"class":38,"line":51},[36,1174,1175],{},"| -------- | -------- |\n",[36,1177,1178],{"class":38,"line":57},[36,1179,1180],{},"| Cell 1   | Cell 2   |\n",[36,1182,1183],{"class":38,"line":63},[36,1184,782],{"emptyLinePlaceholder":781},[36,1186,1187],{"class":38,"line":672},[36,1188,782],{"emptyLinePlaceholder":781},[36,1190,1191],{"class":38,"line":681},[36,1192,1193],{},"# Alignment\n",[36,1195,1196],{"class":38,"line":695},[36,1197,1198],{},"| Left | Center | Right |\n",[36,1200,1201],{"class":38,"line":709},[36,1202,1203],{},"| :--- | :----: | ----: |\n",[36,1205,1206],{"class":38,"line":723},[36,1207,1208],{},"| A    |   B    |     C |\n",[36,1210,1211],{"class":38,"line":732},[36,1212,782],{"emptyLinePlaceholder":781},[36,1214,1216],{"class":38,"line":1215},12,[36,1217,782],{"emptyLinePlaceholder":781},[36,1219,1221],{"class":38,"line":1220},13,[36,1222,1223],{},"# Formatting\n",[36,1225,1227],{"class":38,"line":1226},14,[36,1228,1229],{},"| Feature     | Status   |\n",[36,1231,1233],{"class":38,"line":1232},15,[36,1234,1235],{},"| ----------- | -------- |\n",[36,1237,1239],{"class":38,"line":1238},16,[36,1240,1241],{},"| **Bold**    | `code`   |\n",[36,1243,1245],{"class":38,"line":1244},17,[36,1246,1247],{},"| *Italic*    | [Link]() |\n",[36,1249,1251],{"class":38,"line":1250},18,[36,1252,782],{"emptyLinePlaceholder":781},[36,1254,1256],{"class":38,"line":1255},19,[36,1257,782],{"emptyLinePlaceholder":781},[36,1259,1261],{"class":38,"line":1260},20,[36,1262,1263],{},"# Escape pipe\n",[36,1265,1267],{"class":38,"line":1266},21,[36,1268,1269],{},"| A \\| B | C | D |\n",[36,1271,1273],{"class":38,"line":1272},22,[36,1274,782],{"emptyLinePlaceholder":781},[36,1276,1278],{"class":38,"line":1277},23,[36,1279,782],{"emptyLinePlaceholder":781},[36,1281,1283],{"class":38,"line":1282},24,[36,1284,1285],{},"# Line break in cell\n",[36,1287,1289],{"class":38,"line":1288},25,[36,1290,1291],{},"| Step | Do this\u003Cbr>Then that |\n",[1293,1294],"hr",{},[11,1296,1297,1298,1300],{},"Markdown tables cover 90% of the structured data you'll ever need in a ",[33,1299,126],{}," file. For the other 10%, merged cells, captions, complex layouts, HTML is right there.",[11,1302,1303],{},"The key is knowing when to use which.",[11,1305,1306,1307,1311],{},"To learn how to neatly separate sections around your tables, read our article: ",[251,1308,1310],{"href":1309},"\u002Fen\u002Fblog\u002Fhow-to-add-horizontal-line-markdown","How to Add a Horizontal Line in Markdown",".",[11,1313,1314],{},"If you're looking for a Markdown viewer that renders tables cleanly across all your devices, with syntax highlighting, and a polished reading experience, have a look at Fude.",[11,1316,1317,1318],{},"📌 ",[251,1319,1321],{"href":1320},"\u002Fen#download","Download Fude",[1323,1324,1325],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":31,"searchDepth":45,"depth":45,"links":1327},[1328,1329,1330,1331,1332,1336,1337,1338,1339,1340,1341,1342,1343,1349],{"id":20,"depth":45,"text":21},{"id":130,"depth":45,"text":131},{"id":214,"depth":45,"text":215},{"id":311,"depth":45,"text":312},{"id":360,"depth":45,"text":361,"children":1333},[1334,1335],{"id":371,"depth":51,"text":372},{"id":410,"depth":51,"text":411},{"id":452,"depth":45,"text":453},{"id":593,"depth":45,"text":594},{"id":744,"depth":45,"text":745},{"id":895,"depth":45,"text":896},{"id":963,"depth":45,"text":964},{"id":1025,"depth":45,"text":1026},{"id":1063,"depth":45,"text":1064},{"id":1104,"depth":45,"text":1105,"children":1344},[1345,1346,1347,1348],{"id":1108,"depth":51,"text":1109},{"id":1122,"depth":51,"text":1123},{"id":1129,"depth":51,"text":1130},{"id":1141,"depth":51,"text":1142},{"id":1154,"depth":45,"text":1155},"markdown-guides","2026-04-13","Learn how to create, align, and format Markdown tables. Covers syntax, multiline cells, merge workarounds, and tool-specific behavior in GitHub, Obsidian, and more.","md","\u002Fimages\u002Fblog\u002Fblog2","Complete guide to create Markdown tables",{},false,"\u002Fen\u002Fblog\u002Fmarkdown-table-complete-guide-with-examples",{"title":5,"description":1352},"en\u002Fblog\u002F2.markdown-table-complete-guide-with-examples",null,"markdown-table-guide","-p_xdCnrhTk7j5WSWH2QUNbH9Hw9ePGNJUSwxdPzuX4","\u003Cp>\u003Cspan data-fude-source-start=\"1\" data-fude-source-end=\"232\">Markdown tables look intimidating in raw text. Pipes everywhere, dashes lining up (or not), content that refuses to stay in its column. But the syntax is actually simple once you understand the three parts: header, separator, rows.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"234\" data-fude-source-end=\"322\">Here's everything I've learned about Markdown tables, from the basics to the edge cases.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"327\" data-fude-source-end=\"343\">The basic syntax\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"345\" data-fude-source-end=\"441\">A Markdown table has three components: a header row, a separator row, and one or more data rows.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"455\" data-fude-code-block-end=\"624\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"455\" data-fude-code-block-end=\"624\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Name    | Role     | Location |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">-------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">--------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">--------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Alice   | Dev      | Paris    |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Bob     | Designer | Lyon     |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Charlie | PM       | Remote   |\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"630\" data-fude-source-end=\"640\">The rules:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cspan data-fude-source-start=\"644\" data-fude-source-end=\"648\">Use \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"648\" data-fude-source-end=\"651\">|\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"651\" data-fude-source-end=\"679\"> (pipe) to separate columns.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"682\" data-fude-source-end=\"686\">Use \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"686\" data-fude-source-end=\"691\">---\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"691\" data-fude-source-end=\"759\"> (three or more hyphens) in the separator row to define each column.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"762\" data-fude-source-end=\"884\">Add a pipe at the beginning and end of each row. Technically optional in some parsers, but always do it for compatibility.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"887\" data-fude-source-end=\"976\">Leave a blank line before the table. Without it, some renderers won't parse it correctly.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"978\" data-fude-source-end=\"1035\">Cell widths don't need to match. This is perfectly valid:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"1049\" data-fude-code-block-end=\"1119\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"1049\" data-fude-code-block-end=\"1119\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Name | Role |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">---\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">---\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Alice | Developer |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Bob | Designer |\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"1125\" data-fude-source-end=\"1305\">The rendered output will look identical whether you align the pipes in the source file or not. Alignment in the raw file is purely cosmetic, it helps readability when you open the \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"1305\" data-fude-source-end=\"1310\">.md\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1310\" data-fude-source-end=\"1347\"> file in a text editor, nothing more.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"1352\" data-fude-source-end=\"1368\">Column alignment\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"1370\" data-fude-source-end=\"1457\">By default, text is left-aligned. You can change this with colons in the separator row:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"1471\" data-fude-code-block-end=\"1645\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"1471\" data-fude-code-block-end=\"1645\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Product       | Stock |  Price |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">:------------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">:---:\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">-----:\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Markdown Book |  Yes  |  19.99 |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Cheat Sheet   |  No   |   4.99 |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Sticker Pack  |  Yes  |   2.49 |\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"1651\" data-fude-source-end=\"1677\">The colons work like this:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"1681\" data-fude-source-end=\"1687\">:---\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1687\" data-fude-source-end=\"1691\"> or \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"1691\" data-fude-source-end=\"1696\">:--\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1696\" data-fude-source-end=\"1720\"> left-aligned (default).\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"1723\" data-fude-source-end=\"1730\">:---:\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1730\" data-fude-source-end=\"1734\"> or \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"1734\" data-fude-source-end=\"1739\">:-:\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1739\" data-fude-source-end=\"1755\"> center-aligned.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"1758\" data-fude-source-end=\"1764\">---:\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1764\" data-fude-source-end=\"1768\"> or \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"1768\" data-fude-source-end=\"1773\">--:\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1773\" data-fude-source-end=\"1788\"> right-aligned.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"1790\" data-fude-source-end=\"1828\">The number of hyphens doesn't matter. \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"1828\" data-fude-source-end=\"1834\">:--:\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1834\" data-fude-source-end=\"1853\"> works the same as \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"1853\" data-fude-source-end=\"1865\">:--------:\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1865\" data-fude-source-end=\"1906\">. Only the position of the colons counts.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"1908\" data-fude-source-end=\"2039\">A common pattern: left-align text columns, center-align status columns, right-align numbers. This makes tables much easier to scan.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"2044\" data-fude-source-end=\"2072\">Formatting text inside cells\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"2074\" data-fude-source-end=\"2137\">You can use most inline Markdown formatting inside table cells:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>\u003Cspan data-fude-source-start=\"2143\" data-fude-source-end=\"2147\">Bold\u003C\u002Fspan>\u003C\u002Fstrong>\u003Cspan data-fude-source-start=\"2149\" data-fude-source-end=\"2151\">: \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"2151\" data-fude-source-end=\"2161\">**text**\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Cem>\u003Cspan data-fude-source-start=\"2165\" data-fude-source-end=\"2171\">Italic\u003C\u002Fspan>\u003C\u002Fem>\u003Cspan data-fude-source-start=\"2172\" data-fude-source-end=\"2174\">: \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"2174\" data-fude-source-end=\"2182\">*text*\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"2185\" data-fude-source-end=\"2191\">Code\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"2191\" data-fude-source-end=\"2193\">: \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"2193\" data-fude-source-end=\"2205\">`code`\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fexample.com\" data-fude-link-kind=\"external\" rel=\"noopener noreferrer\">\u003Cspan data-fude-source-start=\"2209\" data-fude-source-end=\"2214\">Links\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"2236\" data-fude-source-end=\"2238\">: \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"2238\" data-fude-source-end=\"2251\">[text](url)\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Cdel>\u003Cspan data-fude-source-start=\"2256\" data-fude-source-end=\"2269\">Strikethrough\u003C\u002Fspan>\u003C\u002Fdel>\u003Cspan data-fude-source-start=\"2271\" data-fude-source-end=\"2273\">: \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"2273\" data-fude-source-end=\"2283\">~~text~~\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"2285\" data-fude-source-end=\"2293\">Example:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"2307\" data-fude-code-block-end=\"2626\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"2307\" data-fude-code-block-end=\"2626\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Feature          | Status        | Notes                    |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">----------------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">-------------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">------------------------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| **Dark mode**    | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">`Done`\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">        | Shipped in v2.1          |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| *Sync*           | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">`In progress`\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">[\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">See PR #42\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">](https:\u002F\u002F…)\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">  |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| ~~Old feature~~  | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">`Removed`\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">     | Deprecated in v3.0       |\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"2632\" data-fude-source-end=\"2651\">What you generally \u003C\u002Fspan>\u003Cstrong>\u003Cspan data-fude-source-start=\"2653\" data-fude-source-end=\"2659\">cannot\u003C\u002Fspan>\u003C\u002Fstrong>\u003Cspan data-fude-source-start=\"2661\" data-fude-source-end=\"2952\"> use inside GitHub Flavored Markdown (GFM) style table cells as Markdown syntax: headings, blockquotes, horizontal rules, lists, or code blocks. Tables parse inline content, not block-level elements. Images are inline, so many renderers support them, but they can make tables harder to read.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"2957\" data-fude-source-end=\"2984\">Escaping the pipe character\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"2986\" data-fude-source-end=\"2992\">Since \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"2992\" data-fude-source-end=\"2995\">|\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"2995\" data-fude-source-end=\"3079\"> is the column delimiter, displaying a literal pipe inside a cell requires escaping.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"3081\" data-fude-source-end=\"3093\">Two methods:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"3107\" data-fude-code-block-end=\"3220\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"3107\" data-fude-code-block-end=\"3220\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Syntax    | Example      |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">---------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">------------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Backslash | A \\| B       |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| HTML code | A | B |\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"3226\" data-fude-source-end=\"3248\">The backslash method (\u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"3248\" data-fude-source-end=\"3252\">\\|\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"3252\" data-fude-source-end=\"3336\">) works in GitHub Flavored Markdown (GFM) and most modern parsers. The HTML entity (\u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"3336\" data-fude-source-end=\"3344\">|\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"3344\" data-fude-source-end=\"3393\">) is the universal fallback, it works everywhere.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"3398\" data-fude-source-end=\"3424\">Multiline content in cells\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"3426\" data-fude-source-end=\"3609\">GitHub Flavored Markdown (GFM) tables don't natively support multiline Markdown blocks inside a single cell. In practice, each cell is best treated as a single line of inline content.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"3611\" data-fude-source-end=\"3701\">But in practice, you often need more than a few words in a cell. Here are the workarounds:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan data-fude-source-start=\"3707\" data-fude-source-end=\"3723\">HTML line breaks\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"3725\" data-fude-source-end=\"3729\">The \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"3729\" data-fude-source-end=\"3735\"><br>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"3735\" data-fude-source-end=\"3764\"> tag works in most renderers:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"3778\" data-fude-code-block-end=\"4001\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"3778\" data-fude-code-block-end=\"4001\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Step | Description                                  |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">----\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">--------------------------------------------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| 1    | Clone the repo<br>Run \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">`npm install`\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">          |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| 2    | Create a \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">`.env`\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> file<br>Add your API key     |\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"4007\" data-fude-source-end=\"4191\">This is the most common workaround. It works on GitHub, Obsidian, GitLab, and many static site generators that allow inline HTML, but it is still worth testing in your target renderer.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan data-fude-source-start=\"4197\" data-fude-source-end=\"4220\">HTML lists inside cells\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"4222\" data-fude-source-end=\"4279\">If you need actual bullet points inside a cell, use HTML:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"4293\" data-fude-code-block-end=\"4560\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"4293\" data-fude-code-block-end=\"4560\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Module | Includes                                              |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">-----------------------------------------------------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Core   | <ul><li>Parser<\u002Fli><li>Renderer<\u002Fli><\u002Ful>             |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Extras | <ul><li>Syntax highlighting<\u002Fli><li>Tables<\u002Fli><\u002Ful>  |\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"4566\" data-fude-source-end=\"4626\">Not every renderer supports this. Because list tags such as \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"4626\" data-fude-source-end=\"4632\"><ul>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"4632\" data-fude-source-end=\"4704\"> are block-level HTML, support inside table cells varies more than with \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"4704\" data-fude-source-end=\"4710\"><br>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"4710\" data-fude-source-end=\"4830\">. Some renderers handle it, some strip it, and others render it inconsistently. Test before committing to this approach.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"4835\" data-fude-source-end=\"4858\">Tables without a header\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"4860\" data-fude-source-end=\"4976\">In GitHub Flavored Markdown (GFM) style tables, a header row is required. There's no way around this in that syntax.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"4978\" data-fude-source-end=\"5065\">If you don't want a visible header, the closest workaround is using empty header cells:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"5079\" data-fude-code-block-end=\"5134\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"5079\" data-fude-code-block-end=\"5134\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">|     |     |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">---\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">---\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| A1  | B1  |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| A2  | B2  |\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"5140\" data-fude-source-end=\"5191\">The header row still exists in the HTML output (as \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"5191\" data-fude-source-end=\"5200\"><thead>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"5200\" data-fude-source-end=\"5368\">), but visually it renders as an empty row or is hidden depending on the CSS. On GitHub, the empty header is visible but discreet. In Obsidian, it depends on the theme.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"5370\" data-fude-source-end=\"5410\">Another approach is using HTML directly:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"html\" data-fude-code-block-start=\"5420\" data-fude-code-block-end=\"5504\">\u003Ccode class=\"language-html\" data-language=\"html\" data-fude-code-block-start=\"5420\" data-fude-code-block-end=\"5504\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">table\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">  <\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">tr\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>A1<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>B1<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">tr\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">  <\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">tr\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>A2<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>B2<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">tr\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">table\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"5510\" data-fude-source-end=\"5589\">This skips the header entirely, but you lose the simplicity of Markdown syntax.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"5594\" data-fude-source-end=\"5614\">Can you merge cells?\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"5616\" data-fude-source-end=\"5666\">No. Markdown has no syntax for colspan or rowspan.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"5668\" data-fude-source-end=\"5750\">If you genuinely need merged cells, your only option is writing the table in HTML:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"html\" data-fude-code-block-start=\"5760\" data-fude-code-block-end=\"5915\">\u003Ccode class=\"language-html\" data-language=\"html\" data-fude-code-block-start=\"5760\" data-fude-code-block-end=\"5915\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">table\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">  <\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">tr\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">    <\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">th\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-function, color-mix(in srgb, var(--color-accent-secondary) 62%, var(--color-code-text) 38%))\"> colspan\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">=\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">\"2\"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>Full Name<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">th\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">    <\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">th\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>Role<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">th\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">tr\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">  <\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">tr\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">    <\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>Alice<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">    <\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>Martin<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">    <\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>Dev<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">tr\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">table\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"5921\" data-fude-source-end=\"6147\">This works in any renderer that accepts HTML tables. But it defeats the purpose of Markdown: readability in source form. I reserve HTML tables for cases where the layout truly requires merging, which is rarer than you'd think.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"6152\" data-fude-source-end=\"6168\">Adding a caption\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"6170\" data-fude-source-end=\"6243\">Standard Markdown tables don't support captions. No syntax exists for it.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"6245\" data-fude-source-end=\"6319\">The simplest workaround is adding an italic line directly below the table:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"6333\" data-fude-code-block-end=\"6458\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"6333\" data-fude-code-block-end=\"6458\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Quarter | Revenue |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">-------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">------:\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Q1      |   $120K |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Q2      |   $145K |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">*Table 1: Revenue by quarter, 2025.*\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"6464\" data-fude-source-end=\"6497\">For HTML output, you can use the \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"6497\" data-fude-source-end=\"6508\"><caption>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"6508\" data-fude-source-end=\"6513\"> tag:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"html\" data-fude-code-block-start=\"6523\" data-fude-code-block-end=\"6666\">\u003Ccode class=\"language-html\" data-language=\"html\" data-fude-code-block-start=\"6523\" data-fude-code-block-end=\"6666\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">table\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">  <\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">caption\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>Revenue by quarter, 2025<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">caption\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">  <\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">tr\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">th\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>Quarter<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">th\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">th\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>Revenue<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">th\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">tr\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">  <\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">tr\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>Q1<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>$120K<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">td\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">tr\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">table\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"6672\" data-fude-source-end=\"6814\">If you're using a static site generator (Nuxt Content, Hugo, Astro, etc.), check if it offers a table caption extension or shortcode. Some do.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"6819\" data-fude-source-end=\"6835\">Tables in GitHub\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"6837\" data-fude-source-end=\"6907\">GitHub Flavored Markdown (GFM) fully supports tables. A few specifics:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cspan data-fude-source-start=\"6911\" data-fude-source-end=\"6954\">The pipes at the start and end of rows are \u003C\u002Fspan>\u003Cstrong>\u003Cspan data-fude-source-start=\"6956\" data-fude-source-end=\"6964\">optional\u003C\u002Fspan>\u003C\u002Fstrong>\u003Cspan data-fude-source-start=\"6966\" data-fude-source-end=\"7013\"> in GFM, but I recommend always including them.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"7016\" data-fude-source-end=\"7108\">GitHub renders tables with alternating row shading (zebra stripes), which helps readability.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"7111\" data-fude-source-end=\"7177\">Inline formatting works: bold, italic, code, links, strikethrough.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"7180\" data-fude-source-end=\"7222\">HTML inside cells is partially supported. \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"7222\" data-fude-source-end=\"7228\"><br>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"7228\" data-fude-source-end=\"7323\"> works well, but more complex HTML inside cells is less predictable and some tags get stripped.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"7326\" data-fude-source-end=\"7438\">GitHub auto-wraps long cell content. No horizontal scroll, the text just wraps to the next line within the cell.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"7440\" data-fude-source-end=\"7511\">A common pattern in GitHub issues and PRs: using tables for comparison.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"7525\" data-fude-code-block-end=\"7763\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"7525\" data-fude-code-block-end=\"7763\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">## Comparison\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Approach   | Pros              | Cons               |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">----------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">-----------------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">------------------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Option A   | Simple, fast      | Limited features   |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Option B   | Feature-rich      | Complex setup      |\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>\u003Cspan data-fude-source-start=\"7772\" data-fude-source-end=\"7786\">Tables in Fude\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"7788\" data-fude-source-end=\"7928\">In Fude, standard Markdown tables work the way you would expect. If your table uses the usual GitHub-style syntax, it should render cleanly:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cspan data-fude-source-start=\"7932\" data-fude-source-end=\"7976\">a header row, a separator row, and body rows\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"7979\" data-fude-source-end=\"8001\">column alignment with \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8001\" data-fude-source-end=\"8007\">:---\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8007\" data-fude-source-end=\"8009\">, \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8009\" data-fude-source-end=\"8016\">:---:\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8016\" data-fude-source-end=\"8022\">, and \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8022\" data-fude-source-end=\"8028\">---:\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"8031\" data-fude-source-end=\"8099\">inline formatting inside cells such as bold, italic, code, and links\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"8102\" data-fude-source-end=\"8239\">Links inside tables behave just like links elsewhere in Fude. Web links open normally, and Markdown links can still point to other notes.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"8242\" data-fude-source-end=\"8248\"><br>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8248\" data-fude-source-end=\"8290\"> inside a cell works, it adds a line break\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"8292\" data-fude-source-end=\"8365\">If you stay with regular Markdown table syntax, Fude will handle it well.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cspan data-fude-source-start=\"8369\" data-fude-source-end=\"8388\">HTML lists such as \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8388\" data-fude-source-end=\"8411\"><ul><li>...<\u002Fli><\u002Ful>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8411\" data-fude-source-end=\"8442\"> inside cells are not supported\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"8445\" data-fude-source-end=\"8466\">raw HTML tables with \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8466\" data-fude-source-end=\"8475\"><table>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8475\" data-fude-source-end=\"8477\">, \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8477\" data-fude-source-end=\"8488\"><caption>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8488\" data-fude-source-end=\"8490\">, \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8490\" data-fude-source-end=\"8499\">colspan\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8499\" data-fude-source-end=\"8504\">, or \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8504\" data-fude-source-end=\"8513\">rowspan\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8513\" data-fude-source-end=\"8538\"> are not supported either\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>\u003Cspan data-fude-source-start=\"8543\" data-fude-source-end=\"8561\">Tables in Obsidian\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"8563\" data-fude-source-end=\"8625\">Obsidian supports standard Markdown table syntax. In practice:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cspan data-fude-source-start=\"8629\" data-fude-source-end=\"8687\">Live preview mode renders tables in real time as you type.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"8690\" data-fude-source-end=\"8826\">Obsidian has a built-in table editor (right-click on a table) that lets you add\u002Fremove rows and columns without touching the raw syntax.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"8829\" data-fude-source-end=\"8844\">Alignment with \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8844\" data-fude-source-end=\"8847\">:\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8847\" data-fude-source-end=\"8866\"> works as expected.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"8869\" data-fude-source-end=\"8875\"><br>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"8875\" data-fude-source-end=\"8928\"> inside cells works in reading mode and live preview.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"8930\" data-fude-source-end=\"8991\">One thing to watch: if your table is inside a callout block (\u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"8991\" data-fude-source-end=\"9002\">> [!note]\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9002\" data-fude-source-end=\"9041\">), every row needs to be prefixed with \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9041\" data-fude-source-end=\"9044\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9044\" data-fude-source-end=\"9081\">. This gets tedious for large tables.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"9086\" data-fude-source-end=\"9119\">When a table isn't the right tool\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"9121\" data-fude-source-end=\"9239\">Markdown tables work well for structured, tabular data with a consistent number of columns. They don't work well when:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cspan data-fude-source-start=\"9243\" data-fude-source-end=\"9352\">Cells contain paragraphs of text. The raw Markdown becomes unreadable, and the rendered output looks cramped.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"9355\" data-fude-source-end=\"9430\">You need merged cells, nested tables, or complex layouts. Use HTML instead.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"9433\" data-fude-source-end=\"9517\">The data is a simple key-value list. A definition list or even bold text is simpler:\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"9531\" data-fude-code-block-end=\"9586\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"9531\" data-fude-code-block-end=\"9586\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">**Name:** Alice\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">**Role:** Developer\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">**Location:** Paris\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"9592\" data-fude-source-end=\"9676\">This is easier to read (and write) than a two-column table for the same information.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"9681\" data-fude-source-end=\"9706\">Debugging common problems\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Ch3>\u003Cspan data-fude-source-start=\"9712\" data-fude-source-end=\"9737\">\"My table doesn't render\"\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"9739\" data-fude-source-end=\"9804\">The most frequent cause: no blank line before the table. Add one.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"9806\" data-fude-source-end=\"9891\">Second most frequent: the separator row is missing or malformed. Every table needs a \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"9891\" data-fude-source-end=\"9906\">| --- | --- |\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"9906\" data-fude-source-end=\"10004\"> line between the header and data rows. If you forget it, the parser sees plain text, not a table.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan data-fude-source-start=\"10010\" data-fude-source-end=\"10048\">\"Columns are misaligned in the output\"\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"10050\" data-fude-source-end=\"10248\">If one cell has more content than the others, some renderers will stretch that column. This is normal behavior, Markdown tables adapt to content width. You can't set fixed column widths in Markdown.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan data-fude-source-start=\"10254\" data-fude-source-end=\"10304\">\"My pipe character shows up as a column separator\"\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"10306\" data-fude-source-end=\"10317\">Escape it: \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"10317\" data-fude-source-end=\"10321\">\\|\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"10321\" data-fude-source-end=\"10325\"> or \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"10325\" data-fude-source-end=\"10333\">|\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"10333\" data-fude-source-end=\"10369\">. See the section above on escaping.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan data-fude-source-start=\"10375\" data-fude-source-end=\"10412\">\"Line breaks inside cells don't work\"\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"10414\" data-fude-source-end=\"10458\">Standard Markdown doesn't support this. Use \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"10458\" data-fude-source-end=\"10464\"><br>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"10464\" data-fude-source-end=\"10498\"> for line breaks inside cells. If \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"10498\" data-fude-source-end=\"10504\"><br>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"10504\" data-fude-source-end=\"10582\"> doesn't work, your renderer likely strips HTML tags, check its documentation.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"10587\" data-fude-source-end=\"10602\">Quick reference\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"10616\" data-fude-code-block-end=\"11011\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"10616\" data-fude-code-block-end=\"11011\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"># Basic table\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Header 1 | Header 2 |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">--------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">--------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Cell 1   | Cell 2   |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"># Alignment\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Left | Center | Right |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">:---\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">:----:\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">----:\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| A    |   B    |     C |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"># Formatting\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Feature     | Status   |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">-----------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">--------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| **Bold**    | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string, color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-code-text) 22%))\">`code`\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">   |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| *Italic*    | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">[\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">Link\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-link)\">]()\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"># Escape pipe\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| A \\| B | C | D |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"># Line break in cell\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Step | Do this<br>Then that |\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Chr>\n\u003Cp>\u003Cspan data-fude-source-start=\"11022\" data-fude-source-end=\"11093\">Markdown tables cover 90% of the structured data you'll ever need in a \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"11093\" data-fude-source-end=\"11098\">.md\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"11098\" data-fude-source-end=\"11185\"> file. For the other 10%, merged cells, captions, complex layouts, HTML is right there.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"11187\" data-fude-source-end=\"11224\">The key is knowing when to use which.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"11226\" data-fude-source-end=\"11305\">To learn how to neatly separate sections around your tables, read our article: \u003C\u002Fspan>\u003Ca href=\"\u002Fen\u002Fblog\u002Fhow-to-add-horizontal-line-markdown\" data-fude-link-kind=\"unsupported\">\u003Cspan data-fude-source-start=\"11306\" data-fude-source-end=\"11346\">How to Add a Horizontal Line in Markdown\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"11393\" data-fude-source-end=\"11394\">.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"11396\" data-fude-source-end=\"11570\">If you're looking for a Markdown viewer that renders tables cleanly across all your devices, with syntax highlighting, and a polished reading experience, have a look at Fude.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"11572\" data-fude-source-end=\"11574\">📌 \u003C\u002Fspan>\u003Ca href=\"\u002Fen#download\" data-fude-link-kind=\"unsupported\">\u003Cspan data-fude-source-start=\"11575\" data-fude-source-end=\"11588\">Download Fude\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fp>","\nMarkdown tables look intimidating in raw text. Pipes everywhere, dashes lining up (or not), content that refuses to stay in its column. But the syntax is actually simple once you understand the three parts: header, separator, rows.\n\nHere's everything I've learned about Markdown tables, from the basics to the edge cases.\n\n## The basic syntax\n\nA Markdown table has three components: a header row, a separator row, and one or more data rows.\n\n```markdown\n| Name    | Role     | Location |\n| ------- | -------- | -------- |\n| Alice   | Dev      | Paris    |\n| Bob     | Designer | Lyon     |\n| Charlie | PM       | Remote   |\n```\n\nThe rules:\n\n- Use `|` (pipe) to separate columns.\n- Use `---` (three or more hyphens) in the separator row to define each column.\n- Add a pipe at the beginning and end of each row. Technically optional in some parsers, but always do it for compatibility.\n- Leave a blank line before the table. Without it, some renderers won't parse it correctly.\n\nCell widths don't need to match. This is perfectly valid:\n\n```markdown\n| Name | Role |\n| --- | --- |\n| Alice | Developer |\n| Bob | Designer |\n```\n\nThe rendered output will look identical whether you align the pipes in the source file or not. Alignment in the raw file is purely cosmetic, it helps readability when you open the `.md` file in a text editor, nothing more.\n\n## Column alignment\n\nBy default, text is left-aligned. You can change this with colons in the separator row:\n\n```markdown\n| Product       | Stock |  Price |\n| :------------ | :---: | -----: |\n| Markdown Book |  Yes  |  19.99 |\n| Cheat Sheet   |  No   |   4.99 |\n| Sticker Pack  |  Yes  |   2.49 |\n```\n\nThe colons work like this:\n\n- `:---` or `:--` left-aligned (default).\n- `:---:` or `:-:` center-aligned.\n- `---:` or `--:` right-aligned.\n\nThe number of hyphens doesn't matter. `:--:` works the same as `:--------:`. Only the position of the colons counts.\n\nA common pattern: left-align text columns, center-align status columns, right-align numbers. This makes tables much easier to scan.\n\n## Formatting text inside cells\n\nYou can use most inline Markdown formatting inside table cells:\n\n- **Bold**: `**text**`\n- *Italic*: `*text*`\n- `Code`: `` `code` ``\n- [Links](https:\u002F\u002Fexample.com): `[text](url)`\n- ~~Strikethrough~~: `~~text~~`\n\nExample:\n\n```markdown\n| Feature          | Status        | Notes                    |\n| ---------------- | ------------- | ------------------------ |\n| **Dark mode**    | `Done`        | Shipped in v2.1          |\n| *Sync*           | `In progress` | [See PR #42](https:\u002F\u002F…)  |\n| ~~Old feature~~  | `Removed`     | Deprecated in v3.0       |\n```\n\nWhat you generally **cannot** use inside GitHub Flavored Markdown (GFM) style table cells as Markdown syntax: headings, blockquotes, horizontal rules, lists, or code blocks. Tables parse inline content, not block-level elements. Images are inline, so many renderers support them, but they can make tables harder to read.\n\n## Escaping the pipe character\n\nSince `|` is the column delimiter, displaying a literal pipe inside a cell requires escaping.\n\nTwo methods:\n\n```markdown\n| Syntax    | Example      |\n| --------- | ------------ |\n| Backslash | A \\| B       |\n| HTML code | A | B |\n```\n\nThe backslash method (`\\|`) works in GitHub Flavored Markdown (GFM) and most modern parsers. The HTML entity (`|`) is the universal fallback, it works everywhere.\n\n## Multiline content in cells\n\nGitHub Flavored Markdown (GFM) tables don't natively support multiline Markdown blocks inside a single cell. In practice, each cell is best treated as a single line of inline content.\n\nBut in practice, you often need more than a few words in a cell. Here are the workarounds:\n\n### HTML line breaks\n\nThe `\u003Cbr>` tag works in most renderers:\n\n```markdown\n| Step | Description                                  |\n| ---- | -------------------------------------------- |\n| 1    | Clone the repo\u003Cbr>Run `npm install`          |\n| 2    | Create a `.env` file\u003Cbr>Add your API key     |\n```\n\nThis is the most common workaround. It works on GitHub, Obsidian, GitLab, and many static site generators that allow inline HTML, but it is still worth testing in your target renderer.\n\n### HTML lists inside cells\n\nIf you need actual bullet points inside a cell, use HTML:\n\n```markdown\n| Module | Includes                                              |\n| ------ | ----------------------------------------------------- |\n| Core   | \u003Cul>\u003Cli>Parser\u003C\u002Fli>\u003Cli>Renderer\u003C\u002Fli>\u003C\u002Ful>             |\n| Extras | \u003Cul>\u003Cli>Syntax highlighting\u003C\u002Fli>\u003Cli>Tables\u003C\u002Fli>\u003C\u002Ful>  |\n```\n\nNot every renderer supports this. Because list tags such as `\u003Cul>` are block-level HTML, support inside table cells varies more than with `\u003Cbr>`. Some renderers handle it, some strip it, and others render it inconsistently. Test before committing to this approach.\n\n## Tables without a header\n\nIn GitHub Flavored Markdown (GFM) style tables, a header row is required. There's no way around this in that syntax.\n\nIf you don't want a visible header, the closest workaround is using empty header cells:\n\n```markdown\n|     |     |\n| --- | --- |\n| A1  | B1  |\n| A2  | B2  |\n```\n\nThe header row still exists in the HTML output (as `\u003Cthead>`), but visually it renders as an empty row or is hidden depending on the CSS. On GitHub, the empty header is visible but discreet. In Obsidian, it depends on the theme.\n\nAnother approach is using HTML directly:\n\n```html\n\u003Ctable>\n  \u003Ctr>\u003Ctd>A1\u003C\u002Ftd>\u003Ctd>B1\u003C\u002Ftd>\u003C\u002Ftr>\n  \u003Ctr>\u003Ctd>A2\u003C\u002Ftd>\u003Ctd>B2\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftable>\n```\n\nThis skips the header entirely, but you lose the simplicity of Markdown syntax.\n\n## Can you merge cells?\n\nNo. Markdown has no syntax for colspan or rowspan.\n\nIf you genuinely need merged cells, your only option is writing the table in HTML:\n\n```html\n\u003Ctable>\n  \u003Ctr>\n    \u003Cth colspan=\"2\">Full Name\u003C\u002Fth>\n    \u003Cth>Role\u003C\u002Fth>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>Alice\u003C\u002Ftd>\n    \u003Ctd>Martin\u003C\u002Ftd>\n    \u003Ctd>Dev\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n```\n\nThis works in any renderer that accepts HTML tables. But it defeats the purpose of Markdown: readability in source form. I reserve HTML tables for cases where the layout truly requires merging, which is rarer than you'd think.\n\n## Adding a caption\n\nStandard Markdown tables don't support captions. No syntax exists for it.\n\nThe simplest workaround is adding an italic line directly below the table:\n\n```markdown\n| Quarter | Revenue |\n| ------- | ------: |\n| Q1      |   $120K |\n| Q2      |   $145K |\n\n*Table 1: Revenue by quarter, 2025.*\n```\n\nFor HTML output, you can use the `\u003Ccaption>` tag:\n\n```html\n\u003Ctable>\n  \u003Ccaption>Revenue by quarter, 2025\u003C\u002Fcaption>\n  \u003Ctr>\u003Cth>Quarter\u003C\u002Fth>\u003Cth>Revenue\u003C\u002Fth>\u003C\u002Ftr>\n  \u003Ctr>\u003Ctd>Q1\u003C\u002Ftd>\u003Ctd>$120K\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftable>\n```\n\nIf you're using a static site generator (Nuxt Content, Hugo, Astro, etc.), check if it offers a table caption extension or shortcode. Some do.\n\n## Tables in GitHub\n\nGitHub Flavored Markdown (GFM) fully supports tables. A few specifics:\n\n- The pipes at the start and end of rows are **optional** in GFM, but I recommend always including them.\n- GitHub renders tables with alternating row shading (zebra stripes), which helps readability.\n- Inline formatting works: bold, italic, code, links, strikethrough.\n- HTML inside cells is partially supported. `\u003Cbr>` works well, but more complex HTML inside cells is less predictable and some tags get stripped.\n- GitHub auto-wraps long cell content. No horizontal scroll, the text just wraps to the next line within the cell.\n\nA common pattern in GitHub issues and PRs: using tables for comparison.\n\n```markdown\n## Comparison\n\n| Approach   | Pros              | Cons               |\n| ---------- | ----------------- | ------------------ |\n| Option A   | Simple, fast      | Limited features   |\n| Option B   | Feature-rich      | Complex setup      |\n```\n\n## Tables in Fude\n\nIn Fude, standard Markdown tables work the way you would expect. If your table uses the usual GitHub-style syntax, it should render cleanly:\n\n- a header row, a separator row, and body rows\n- column alignment with `:---`, `:---:`, and `---:`\n- inline formatting inside cells such as bold, italic, code, and links\n- Links inside tables behave just like links elsewhere in Fude. Web links open normally, and Markdown links can still point to other notes.\n- `\u003Cbr>` inside a cell works, it adds a line break\n\nIf you stay with regular Markdown table syntax, Fude will handle it well.\n\n- HTML lists such as `\u003Cul>\u003Cli>...\u003C\u002Fli>\u003C\u002Ful>` inside cells are not supported\n- raw HTML tables with `\u003Ctable>`, `\u003Ccaption>`, `colspan`, or `rowspan` are not supported either\n\n## Tables in Obsidian\n\nObsidian supports standard Markdown table syntax. In practice:\n\n- Live preview mode renders tables in real time as you type.\n- Obsidian has a built-in table editor (right-click on a table) that lets you add\u002Fremove rows and columns without touching the raw syntax.\n- Alignment with `:` works as expected.\n- `\u003Cbr>` inside cells works in reading mode and live preview.\n\nOne thing to watch: if your table is inside a callout block (`> [!note]`), every row needs to be prefixed with `>`. This gets tedious for large tables.\n\n## When a table isn't the right tool\n\nMarkdown tables work well for structured, tabular data with a consistent number of columns. They don't work well when:\n\n- Cells contain paragraphs of text. The raw Markdown becomes unreadable, and the rendered output looks cramped.\n- You need merged cells, nested tables, or complex layouts. Use HTML instead.\n- The data is a simple key-value list. A definition list or even bold text is simpler:\n\n```markdown\n**Name:** Alice\n**Role:** Developer\n**Location:** Paris\n```\n\nThis is easier to read (and write) than a two-column table for the same information.\n\n## Debugging common problems\n\n### \"My table doesn't render\"\n\nThe most frequent cause: no blank line before the table. Add one.\n\nSecond most frequent: the separator row is missing or malformed. Every table needs a `| --- | --- |` line between the header and data rows. If you forget it, the parser sees plain text, not a table.\n\n### \"Columns are misaligned in the output\"\n\nIf one cell has more content than the others, some renderers will stretch that column. This is normal behavior, Markdown tables adapt to content width. You can't set fixed column widths in Markdown.\n\n### \"My pipe character shows up as a column separator\"\n\nEscape it: `\\|` or `|`. See the section above on escaping.\n\n### \"Line breaks inside cells don't work\"\n\nStandard Markdown doesn't support this. Use `\u003Cbr>` for line breaks inside cells. If `\u003Cbr>` doesn't work, your renderer likely strips HTML tags, check its documentation.\n\n## Quick reference\n\n```markdown\n# Basic table\n| Header 1 | Header 2 |\n| -------- | -------- |\n| Cell 1   | Cell 2   |\n\n\n# Alignment\n| Left | Center | Right |\n| :--- | :----: | ----: |\n| A    |   B    |     C |\n\n\n# Formatting\n| Feature     | Status   |\n| ----------- | -------- |\n| **Bold**    | `code`   |\n| *Italic*    | [Link]() |\n\n\n# Escape pipe\n| A \\| B | C | D |\n\n\n# Line break in cell\n| Step | Do this\u003Cbr>Then that |\n```\n\n---\n\nMarkdown tables cover 90% of the structured data you'll ever need in a `.md` file. For the other 10%, merged cells, captions, complex layouts, HTML is right there.\n\nThe key is knowing when to use which.\n\nTo learn how to neatly separate sections around your tables, read our article: [How to Add a Horizontal Line in Markdown](\u002Fen\u002Fblog\u002Fhow-to-add-horizontal-line-markdown).\n\nIf you're looking for a Markdown viewer that renders tables cleanly across all your devices, with syntax highlighting, and a polished reading experience, have a look at Fude.\n\n📌 [Download Fude](\u002Fen#download)\n",[1367,1370],{"locale":1368,"slug":1369},"en","markdown-table-complete-guide-with-examples",{"locale":1371,"slug":1372},"fr","markdown-tableaux-guide-complet",{"title":1374,"path":1375,"stem":1376,"description":1377,"children":-1},"Fude, a Markdown reader for the AI era","\u002Fen\u002Fblog\u002Ffude-markdown-reader-ai-era","en\u002Fblog\u002F1.fude-markdown-reader-ai-era","With the advent of AI, Markdown has become essential. I am creating the ultimate Markdown reader: clean, synced, ready for AI agents, available on Mac, Windows, iOS, and Android.",{"title":1310,"path":1309,"stem":1379,"description":1380,"children":-1},"en\u002Fblog\u002F3.how-to-add-horizontal-line-markdown","Learn how to add a horizontal line in a Markdown file, avoid common pitfalls and customize its design.",1776593810066]