TeX4ht – How to Align Table Columns in HTML Output

htmltex4htxhtml

How to retain the LaTeX tabular cell alignment in the converted HTML col element?

For example:

\begin{tabular}{**lcr**}

should convert as

<col align="**left**" ..><col align="**centre**" ..><col align="**right**" ..>

Best Answer

Try this configuration file:

\Preamble{xhtml}

\Configure{halignTD}
{}{}
{^}{\HCode{style="vertical-align:top"}}
{=}{\HCode{style="vertical-align:baseline"}}
{|}{\HCode{style="vertical-align:middle"}}
{_}{\HCode{style="vertical-align:bottom"}}
{<}{\HCode{align="left"}}
{-}{\HCode{align="center"}}
{>}{\HCode{align="right"}}
{p}{\HCode{align="left"}}
{}

\catcode`\:=11
\Configure{VBorder}
   {\let\VBorder\empty \let\AllColMargins\empty
    \global\let\GROUPS\empty \HAssign\NewGroup = 0
    \gHAdvance\Next:TableNo by 1 \global\let\TableNo=\Next:TableNo }
   {\xdef\VBorder{\VBorder\ifnum \NewGroup> 0 </colgroup>\fi}
    \HAssign\NewGroup = 0 % \gdef\GROUPS{rules="groups"}}
    % put vertical border for a column
    \ifnum\ar:cnt > 0%
      % in all other cases, we should put right border
      \Css{\#TBL-\TableNo-\ar:cnt {border-right:1px solid black;}}%
    \else%
      % columns are numbered from 1. if \ar:cnt == 0 then it is the left border
      \Css{\#TBL-\TableNo-1{border-left: 1px solid black;}}%
    \fi%
   }
   {\Advance:\NewGroup by 1
    \ifnum \NewGroup=1 \xdef\VBorder{\VBorder<colgroup
        id="TBL-\TableNo-\ar:cnt g">}\fi
    \bgroup\def\HCode##1{##1} % we need to redefine \HCode locally, otherwise we would get spurious characters inside the HTML tag
    \xdef\VBorder{\VBorder<col\Hnewline id="TBL-\TableNo
       -\ar:cnt" \HColAlign \xml:empty>}
   \egroup
   \xdef\AllColMargins{\AllColMargins1}}
   {\xdef\AllColMargins{\AllColMargins 0}}
\catcode`\:=12
\begin{document}
\EndPreamble

First, it defines that instead of CSS styles, align attributes should be used for table column alignment specifications. This is done in \Configure{halignTD}. You can add all possible table specifiers here.

But this will ensure insertion of align attributes only to particular table cells, but not into the <col> elements as you want. To do that, we need to put the \HColAlign command into the code of \Configure{VBorder}.

For this MWE:

\documentclass{article}
\begin{document}
\begin{tabular}{|l|c|r|}
  hello & world & right \\
  longer & words should & show something
\end{tabular}
\end{document}

This is the result:

enter image description here

<div class='tabular'> 
<table class='tabular' id='TBL-1'>
<colgroup id='TBL-1-1g'><col align='left' id='TBL-1-1' /></colgroup>
<colgroup id='TBL-1-2g'><col align='center' id='TBL-1-2' /></colgroup>
<colgroup id='TBL-1-3g'><col align='right' id='TBL-1-3' /></colgroup>
<tr id='TBL-1-1-' style='vertical-align:baseline;'><td align='left' class='td11' id='TBL-1-1-1'>hello </td><td align='center' class='td11' id='TBL-1-1-2'>   world     </td><td align='right' class='td11' id='TBL-1-1-3'>         right</td></tr>
<tr id='TBL-1-2-' style='vertical-align:baseline;'><td align='left' class='td11' id='TBL-1-2-1'>longer</td> <td align='center' class='td11' id='TBL-1-2-2'>words should</td> <td align='right' class='td11' id='TBL-1-2-3'>show something</td> </tr>
</table>                                                
</div>
Related Question