Convert HTML table with colspan to Markdown

Photo by russn_fckr on Unsplash

Convert HTML table with colspan to Markdown

ยท

2 min read

An interesting issue was raised in my ReverseMarkdown GitHub library repository wherein conversion of HTML table containing colspan in cells does not convert properly to Markdown. Let me show you a representative example of the HTML table content for your reference below:

<table>
    <tr>
        <th>col1</th>
        <th colspan="2">col2</th>
        <th>col3</th>
    </tr>
    <tr>
        <td>data1</td>
        <td>data2.1</td>
        <td>data2.2</td>
        <td>data3</td>
    </tr>
</table>

When we run the conversion using ReverseMarkdown library, the resultant Markdown is as below:

| col1 | col2 | col3 |
| --- | --- | --- |
| data1 | data2.1 | data2.2 | data3 |

You would notice that the header row only has 3 columns and the data row columns have 4 columns. This is a broken/invalid markdown. Also GitHub flavored Markdown or generally Markdown table does not have any construct for handling colspan.

As I was brainstorming ideas to solve this, I came up with the idea to duplicate the header column that many number of times as the value of colspan.

With application of this idea, the converted Markdown is as below with the number of columns same in both header and data rows:

| col1 | col2 | col2 | col3 |
| --- | --- | --- | --- |
| data1 | data2.1 | data2.2 | data3 |

At times, the simplest solutions are the most elegant and powerful!

ย