Tables is one of the drawbacks to using Markdown. Standard Markdown supports only basic tables. For AdobeDocs Markdown, you have the following options:
<p>
), line breaks (<br>
), and basic lists (<ul>
, <ol>
).In some cases, you’ll want to convert an HTML table to a Markdown table or to Markdown text. Perhaps you need to improve the appearance, resolve a validation error, or make it easier to edit going forward.
Unfortunately, we haven’t been able to find a single tool that converts HTML tables well. We usually use some combination of tools to cobble together a decent Markdown table.
Tool | What it does |
---|---|
Markdown Tables Generator | Good for creating Markdown tables from scratch. |
Advanced table converter | Convert tables from any format to any format. Note: Links and images are flattened when converted. |
Basic table html > markdown converter | Simple HTML converter Note: Links and images are flattened when converted. |
Non-table HTML > Markdown converter | Converts HTML tables to non-table markdown syntax. Use in combination with above tools for copying links, images, and any other flattened item. |
|--- |--- |--- |
for a 3-column table.\|
) or using the HTML entity code (|
).To facilitate migration, we’ve extended Markdown tables to support HTML paragraph breaks (<p>
), line breaks (<br>
), and basic HTML lists (<ul>
and <ol>
) within Markdown tables.
Markdown table with line breaks and lists
| Header 1 | Header 2 | Header 3 |
|--- |--- |--- |
| Normal row | row 1 column 2 | row 1 column 3 |
| Line break | first line in cell<br>second line in cell | row 1 column 3 |
| Bullet list | Bullet list:<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul> | row 2 column 3 |
| Bullet list with line break | Bullet list:<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul><br>This is a new line after the bullet list | row 2 column 3 |
Example
Header 1 | Header 2 | Header 3 |
---|---|---|
Normal row | row 1 column 2 | row 1 column 3 |
Line break | first line in cell second line in cell |
row 1 column 3 |
Bullet list | Bullet list:
|
row 2 column 3 |
Bullet list with line break | Bullet list:
This is a new line after the bullet list |
row 2 column 3 |
If you decide to use HTML in native tables, make sure that you use proper HTML syntax. Mistakes in HTML syntax results in validation errors that are difficult to understand. Double-check your work.
The migration tool tried to preserve as much formatting as possible from the original table. Most of this HTML syntax is ignored, while some of this syntax results in validation errors.
Sample migrated HTML table
<table>
<tbody>
<tr>
<th>Property</th>
<th>Type</th>
<th>Value Description</th>
</tr>
<tr>
<td>badgingPath</td>
<td>String[]</td>
<td><p><i>(Required)</i> A multi-value string of badge images up to the number of badgingLevels. The badge image paths must be ordered so the first is awarded to the highest expert. If there are less badges than indicated by badgingLevels, the last badge in the array fills out the rest of the array. Example entry:</p><p> <code>/etc/community/badging/images/expert-badge/jcr:content/expert.png</code></p></td>
</tr>
<tr>
<td>badgingLevels</td>
<td>Long</td>
<td><i><p>(Optional)</i> Specifies the levels of expertise to be awarded. For example, if there should be an <code>expert </code>and an <code>almost expert</code> (two badges), then the value should be set to 2. The badgingLevel should correspond with the number of expert-related badge images listed for the badgingPath property. Default is 1.</p></td>
</tr>
<tr>
<td>badgingType</td>
<td>String</td>
<td><p><i>(Required)</i> Identifies the scoring engine as either "basic" or "advanced". Set to "advanced" else the default is "basic".</p></td>
</tr>
</tbody>
</table>
Rendered
Property | Type | Value Description |
---|---|---|
badgingPath | String[] | (Required) A multi-value string of badge images up to the number of badgingLevels. The badge image paths must be ordered so the first is awarded to the highest expert. If there are less badges than indicated by badgingLevels, the last badge in the array fills out the rest of the array. Example entry: |
badgingLevels | Long | (Optional) Specifies the levels of expertise to be awarded. For example, if there should be an |
badgingType | String | (Required) Identifies the scoring engine as either "basic" or "advanced". Set to "advanced" else the default is "basic". |
Notes for working with HTML tables
[!NOTE]
to an HTML table, it will be rendered as is ([!NOTE]
). Instead, use HTML syntax to format a note, add an image, and tag terms for localization.class="value"
as needed. With the exception of localization classes such as “wintitle” and “uicontrol”, we ignore class. For example, <span class="codeph">term</span>
is ignored. However, if you convert these classes to simple HTML code elements, such as <code>term</code>
, the content will render properly.We can render tables in two ways:
In most cases, the tables are rendered with the same appearance. However, if your table includes overlapping text, you’ll want to apply the auto
tag. Or, if your HTML table with image cards isn’t rendering properly, you might want to apply the fixed
tag.
We’re considering changing the default from fixed
to auto
.
If you want to specify how a native markdown table is rendered, add one of these syntax lines AFTER the table, with blank lines before and after:
{style="table-layout:auto"}
{style="table-layout:fixed"}
If you want to specify how an HTML table is rendered, use one of these syntax lines in the first line of the table:
<table style="table-layout:auto">
<table style="table-layout:fixed">
<table style="table-layout:fixed">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Overlapping text
Use auto
for tables with long code blocks or text that causes overlapping text when fixed
(default) is selected.
Fixed (Default)
Insights metric | Description | ID query parameter |
---|---|---|
timeseries.data.collection.validation.category.type.count | Total number of invalid “type” messages for one dataset or for all datasets. | Dataset ID |
timeseries.data.collection.validation.category.range.count | Total number of invalid “range” messages for one dataset or for all datasets. | Dataset ID |
timeseries.data.collection.validation.category.format.count | Total number of invalid “format” messages for one dataset or for all datasets. | Dataset ID |
timeseries.data.collection.validation.category.pattern.count | Total number of invalid “pattern” messages for one dataset or for all datasets. | Dataset ID |
timeseries.data.collection.validation.category.presence.count | Total number of invalid “presence” messages for one dataset or for all datasets. | Dataset ID |
timeseries.data.collection.validation.category.enum.count | Total number of invalid “enum” messages for one dataset or for all datasets. | Dataset ID |
Auto
Insights metric | Description | ID query parameter |
---|---|---|
timeseries.data.collection.validation.category.type.count | Total number of invalid “type” messages for one dataset or for all datasets. | Dataset ID |
timeseries.data.collection.validation.category.range.count | Total number of invalid “range” messages for one dataset or for all datasets. | Dataset ID |
timeseries.data.collection.validation.category.format.count | Total number of invalid “format” messages for one dataset or for all datasets. | Dataset ID |
timeseries.data.collection.validation.category.pattern.count | Total number of invalid “pattern” messages for one dataset or for all datasets. | Dataset ID |
timeseries.data.collection.validation.category.presence.count | Total number of invalid “presence” messages for one dataset or for all datasets. | Dataset ID |
timeseries.data.collection.validation.category.enum.count | Total number of invalid “enum” messages for one dataset or for all datasets. | Dataset ID |
HTML tables with balanced images
Use fixed
for HTML tables that require balanced images that become unbalanced when auto
is selected. In this example, the images have identical sizes, but there is more text in the middle column.
Auto
Fixed (in more ways than one)