The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

    Mastodon

  • Twitter Updates

  • My Flickr Stream

    20140508-Delphi-2007--Project-Options--Cannot-Edit-Application-Title-HelpFile-Icon-Theming20140430-Fiddler-Filter-Actions-Button-Run-Filterset-now20140424-VMware-Fusion-6.0.3.-no-reclaimable
    More Photos

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,839 other subscribers
«

Generating ASCII-tables with spanning cells: manual labour still needed

Posted by jpluimers on 2026/05/28

Every now and then, documentation in source code requires an ASCII table. Sometimes table cells are spanning multiple rows or/and column.

TL;DR: The tools I tried did not support that, so manual labour is still needed.

Queste

I started with the trusty [Wayback/Archive] HTML Tables generator – TablesGenerator.com to generate this HTML table:

<table>
<tbody>
  <tr>
    <td rowspan="2"></td>
    <td colspan="3"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</tbody>
</table>

Then I tried generating ASCII tables using these sites:

Cells spanning multiple rows and columns?

Yup, next to spreadsheets, HTML too allows for a cell to span multiple rows and columns.

Figuring that out was not easy, as [Wayback/Archive] html cell span “both” row and column – Google Search returned many irrelevant results. Luckily it returned [Wayback/Archive] Web Review: Spanning Columns and Rows with HTML Tables

Spanning rows and columns

Our example table has four empty cells in the upper left corner, corresponding to the two header rows and header columns. We specified all four cells explicitly, but could have used just one cell, spanning both rows and columns.
If the first cell in the first row were defined as:
<th rowspan="2" colspan="2"></th>
the cell would span the first two cells of the first two rows. The resulting HTML is somewhat smaller:
<table border="1">
<tr>
  <th rowspan="2" colspan="2"></th>
  <th colspan="2">Fruit</th>
</tr>
<tr>
  <th>Oranges</th>
  <th>Grapefruit</th>
</tr>
<tr>
  <th rowspan="2">Feature</th>
  <th>Flavor</th>
  <td>Sweet</td>
  <td>Tart</td>
</tr>
<tr>
  <th>Size</th>
  <td>Small</td>
  <td>Large</td>
</tr>
</table>
Since this cell is the equivalent of two cells wide, it replaces the first two cells in the second row.
Spanning cells are not limited to the edges of a table. Here is a 4×4 table with the center spanning both rows and columns:
A B C D
E F G
H I
J K L M
See if you can write HTML to produce this table, before you peek at this document’s source to get the answer.

Queries

I did the below queries:

–jeroen

This entry was posted on 2026/05/28 at 12:00 and is filed under ASCII, ASCII art / AsciiArt, Development, Documentation Development, Encoding, Excel, Fun, HTML, Office, Power User, Software Development, Web Development. Tagged: . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

«