1. Syntax

1.1. Attributes

1.2. Colors

1. background colors
   • table header
   • row highlighting
   • subtle background colors
   • web-safe color

Highlighter Colors Color Palette

lighter highlighting color for better contrast (?)

1.3. Linebreaks

1.4. Spaces

|| cell ||
||(pattern) cell ||

1.4.1. Table Space Ignored

HTML and CSS whitespace handling explains why browsers ignore leading spaces in table cells. HTML preserves all whitespace in the source code as text nodes in the DOM, but CSS applies a default whitespace processing algorithm that collapses multiple spaces, tabs, and line breaks into a single space. This behavior is consistent across all inline content, including table cells.

When you have leading spaces in a <td> element, such as <td> Hello</td>, the browser processes the whitespace as follows:

• Leading and trailing whitespace (spaces, tabs, line breaks) before and after text is ignored in rendering.
• Consecutive whitespace characters (spaces, tabs, line feeds) are collapsed into a single space.
• Only the first space between words is preserved; extra spaces are discarded.

This is not a bug—it's by design. The goal is to ensure readable text formatting without requiring developers to worry about code indentation affecting the displayed layout. For example, the following HTML:

<td>   Hello World!</td>

is rendered as:

Hello World!	

with only a single space between “Hello” and “World!”.

1.4.2. Solutions to preserve spacing

If you need to display multiple spaces (e.g., for monospaced text or formatting), use one of these methods:

• Use white-space: pre in CSS to preserve all whitespace:

  td {
    white-space: pre;
  }

• Use non-breaking spaces ( ) to force visible spacing:

  <td>&nbsp;&nbsp;Hello</td>

• Wrap text in a <pre> tag if you want to preserve all formatting exactly as written.

This behavior applies uniformly across modern browsers and is part of the standard HTML and CSS specification.

2. Backwards Compatibility

The old colspan behavior is not compatible with the new colspan or rowspan attributes, it would add a colspan where it not belongs.

It once expanded omitted cells at the end of a table row for the last cell to fit the previous rows columns.

By removing this behavior, existing col spans will default to their original colspan which is 1. Just add the new colspan=Number attribute to the cell to restore the intended colspan.

<?php
// removed legacy colspan behavior
if (   ($i == $count)
    && ($this->cols <> 0)
    && ($count < $this->cols))
{
    $colspan = ' colspan="' . ($this->cols - $count + 1) . '"';
}

3. Documentation

1. update Table section in Text Formatting page
2. add Table Markup Guide (draft)

4. Resources

• https://developer.mozilla.org/[...]nt/HTML_table_basics
• https://developer.mozilla.org/[...]rence/Elements/table
• https://html.spec.whatwg.org/m[...]ml#the-table-element
• https://alistapart.com/article/web-typography-tables/
• https://css-tricks.com/complete-guide-table-element/

5. Examples

#| 
|| ^ Heading 1 ^ Heading 2 ||
^| Heading 3    | Row 1 Col 2          | Row 1 Col 3 ||
^| Heading 4    | no colspan | ||
^| Heading 5    | Row 3 Col 2          | Row 3 Col 3 ||
|#	

#|
?| Fruit production in the last **two** years |?
*| |(colspan=2) Apples |(colspan=2) Pears |*
*| | 2025 | 2026 | 2025 | 2026 |*
^| Mary | 300Kg | 320Kg | 400kg | 280Kg ||
^| John | 400Kg | 630Kg | 210Kg | 300Kg ||
|#	

#|
||(align=left width=50%) left |(rowspan=3 valign=top) top |(rowspan=3 valign=middle) middle |(rowspan=3 valign=bottom) bottom ||
||(align=center) center ||
||(align=right) right ||
|#	

#|
||(rowspan=2) 2 lines | line 1 ||
|| line 2 ||
||(colspan=2) line 3, 2 columns broad ||
|#	

#|
^|(colspan=2 rowspan=2) 2x2 |(colspan=2) 2x1 |(rowspan=2) 1x2 ||
||(rowspan=2) 1x2 | 1x1 ||
|| 1x1 | 1x1 |(colspan=2) 2x1 ||
|#