texinfo-commits
[Top][All Lists]
Advanced
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

branch master updated: Format HTML About directions explanations table w

From: Patrice Dumas
Subject: branch master updated: Format HTML About directions explanations table with CSS
Date: Sun, 15 Sep 2024 14:35:52 -0400 
This is an automated email from the git hooks/post-receive script.

pertusus pushed a commit to branch master
in repository texinfo.

The following commit(s) were added to refs/heads/master by this push:
     new c65296c58e Format HTML About directions explanations table with CSS
c65296c58e is described below

commit c65296c58e86bfadb15e363c6774d6e3241ec836
Author: Patrice Dumas <pertusus@free.fr>
AuthorDate: Sun Sep 15 20:35:53 2024 +0200

    Format HTML About directions explanations table with CSS
    
    * TODO, tp/Texinfo/Convert/HTML.pm (%css_element_class_styles)
    (_default_format_special_body_about),
    tp/Texinfo/XS/convert/convert_html.c  (open_element_with_class)
    (default_format_special_body_about): add classes for all the <th> and
    <td> in About directions explanations table and for the table itself.
    Set borders with CSS using those classes.
---
 ChangeLog                                          |  11 +
 TODO                                               |   3 +-
 tp/Texinfo/Convert/HTML.pm                         |  40 ++-
 tp/Texinfo/XS/convert/convert_html.c               |  71 +++--
 .../res_html/sectioning_abt.html                   |  57 ++--
 .../directions_string_undef_texi2html.html         |  57 ++--
 .../res_html/documentation_examples_texi2html.html |  57 ++--
 .../res_html/multiple_lang_chapters.html           |  57 ++--
 .../layout/navigation/res_html/navigation.html     |  57 ++--
 .../res_html/navigation_abt.html                   |  57 ++--
 .../res_html/navigation_abt.html                   |  57 ++--
 .../res_html/navigation_abt.html                   |  57 ++--
 .../res_html/navigation_abt.html                   |  57 ++--
 .../navigation_node/res_html/navigation_abt.html   |  57 ++--
 .../res_html/navigation_abt.html                   |  57 ++--
 .../res_html/navigation_abt.html                   |  57 ++--
 .../res_html/navigation_abt.html                   |  57 ++--
 .../res_html/navigation_abt.html                   |  57 ++--
 .../res_html/navigation_abt.html                   |  57 ++--
 .../res_html/navigation_abt.html                   |  57 ++--
 .../res_html/navigation_abt.html                   |  57 ++--
 .../res_html/navigation_abt.html                   |  57 ++--
 .../res_html/navigation.html                       |  57 ++--
 .../res_html/navigation.html                       |  57 ++--
 .../navigation_vertical/res_html/navigation.html   |  57 ++--
 .../no_monolithic/res_html/no_monolithic_abt.html  |  57 ++--
 .../res_html/no_monolithic.html                    |  57 ++--
 .../more_sections_than_nodes_texi2html.html        |  57 ++--
 ...ioning_part_appendix_texi2html_chapter_abt.html |  57 ++--
 .../sectioning/chapter_between_nodes_texi2html.pl  |  57 ++--
 ...re_chapter_texi2html_use_nodes_chapter_abt.html |  57 ++--
 ...ter_top_before_section_texi2html_use_nodes.html |  57 ++--
 ...re_section_texi2html_use_nodes_chapter_abt.html |  57 ++--
 .../top_without_node_texi2html_no_use_nodes.html   |  57 ++--
 .../res_html/two_nodes_at_the_end_texi2html.html   |  57 ++--
 .../two_nodes_between_chapters_texi2html.html      |  57 ++--
 .../res_parser/formatting_html32/formatting.html   |   2 +-
 .../res_parser/formatting_xhtml/formatting.html    |  45 +--
 .../sectioning_directions/sectioning.html          | 177 +++++------
 .../sectioning_abt.html                            | 333 +++++++++++----------
 .../os\303\251_utf8_abt.html"                      |  45 +--
 .../documentlanguage_cmdline/documentlanguage.html |  57 ++--
 .../formatting_enable_encoding/formatting.html     |  45 +--
 .../formatting_exotic/formatting_abt.html          |  57 ++--
 .../res_parser/formatting_fr/formatting.html       |  57 ++--
 .../res_parser/formatting_fr_icons/formatting.html |  57 ++--
 .../formatting_inline_css/formatting.html          |  58 ++--
 .../formatting_numerical_entities/formatting.html  |  45 +--
 .../formatting_texi2html/formatting.html           |  57 ++--
 .../formatting_texi2html_nodes/formatting_abt.html |  57 ++--
 .../formatting_weird_quotes/formatting.html        |  45 +--
 .../res_parser/formatting_singular/sing_abt.htm    |  57 ++--
 52 files changed, 1767 insertions(+), 1376 deletions(-)

diff --git a/ChangeLog b/ChangeLog
index e4b291dc41..1993d1027a 100644
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,14 @@
+2024-09-15  Patrice Dumas  <pertusus@free.fr>
+
+       Format HTML About directions explanations table with CSS
+
+       * TODO, tp/Texinfo/Convert/HTML.pm (%css_element_class_styles)
+       (_default_format_special_body_about),
+       tp/Texinfo/XS/convert/convert_html.c  (open_element_with_class)
+       (default_format_special_body_about): add classes for all the <th> and
+       <td> in About directions explanations table and for the table itself.
+       Set borders with CSS using those classes.
+
 2024-09-15  Patrice Dumas  <pertusus@free.fr>
 
        * tp/Texinfo/XS/convert/convert_html.c (file_header_information): use
diff --git a/TODO b/TODO
index 2f900ee072..3572a29fd2 100644
--- a/TODO
+++ b/TODO
@@ -53,8 +53,7 @@ If you are interested in working on any of these, email 
bug-texinfo@gnu.org.
   - HTML: support thumbnails.
   - HTML: have a library of different CSS styles.
     http://mail.gnu.org/archive/html/bug-texinfo/2004-01/msg00025.html
-  - HTML: use CSS for <table> border.  Also for cellpadding and similar
-    if someone knows what should be done as now it seems to be
+  - HTML: use CSS for <table> cellpadding and similar.  Now it seems to be
     properties of the cells.
   - HTML: for printindex, not using <table> could be better.
     remove the letter column?
diff --git a/tp/Texinfo/Convert/HTML.pm b/tp/Texinfo/Convert/HTML.pm
index f754615c8b..c8201f7147 100644
--- a/tp/Texinfo/Convert/HTML.pm
+++ b/tp/Texinfo/Convert/HTML.pm
@@ -2996,8 +2996,15 @@ my %css_element_class_styles = (
      'th.menu-comment'               => 'text-align:left',
      'td.category-def'               => 'text-align:right',
      'td.call-def'                   => 'text-align:left',
-     'td.button-direction-about'     => 'text-align:center',
-     'td.name-direction-about'       => 'text-align:center',
+     'table.direction-about'         => 'border-collapse: collapse',
+     'th.button-direction-about'     => 'border-width: thin; 
border-bottom-style: solid; border-right-style: solid',
+     'th.name-direction-about'       => 'border-width: thin; 
border-bottom-style: solid; border-right-style: solid; border-left-style: 
solid',
+     'th.description-direction-about' => 'border-width: thin; 
border-bottom-style: solid; border-right-style: solid; border-left-style: 
solid',
+     'th.example-direction-about'    => 'border-width: thin; 
border-bottom-style: solid; border-left-style: solid',
+     'td.button-direction-about'     => 'text-align: center; border-width: 
thin; border-right-style: solid',
+     'td.name-direction-about'       => 'text-align: center; border-width: 
thin; border-right-style: solid; border-left-style: solid',
+     'td.description-direction-about' => 'border-width: thin; 
border-right-style: solid; border-left-style: solid',
+     'td.example-direction-about'    => 'border-width: thin; 
border-left-style: solid',
 
      # The anchor element is wrapped in a <span> rather than a block level
      # element to avoid it appearing unless the mouse pointer is directly
@@ -11688,22 +11695,33 @@ sub _default_format_special_body_about($$$)
     $self->cdt('  The buttons in the navigation panels have the following 
meaning:'),
                                'ABOUT')
             . "\n";
+  my $table = $self->html_attribute_class('table', ['direction-about']).'>';
   $about .= <<EOT;
 </p>
-<table border="1">
+$table
   <tr>
 EOT
+  my $button_th = $self->html_attribute_class('th',
+                                              ['button-direction-about']).'>';
+  my $name_th = $self->html_attribute_class('th',
+                                               ['name-direction-about']).'>';
+  my $description_th = $self->html_attribute_class('th',
+                                           
['description-direction-about']).'>';
+  my $example_th = $self->html_attribute_class('th',
+                                           ['example-direction-about']).'>';
    # TRANSLATORS: direction column header in the navigation help
-  $about .= '    <th> '. $self->convert_tree($self->cdt('Button'), 'ABOUT')
+  $about .= "    $button_th "
+                . $self->convert_tree($self->cdt('Button'), 'ABOUT')
    ." </th>\n".
    # TRANSLATORS: button label column header in the navigation help
-   '    <th> ' . $self->convert_tree($self->cdt('Name'), 'ABOUT')
+   "    $name_th " . $self->convert_tree($self->cdt('Name'), 'ABOUT')
    . " </th>\n" .
    # TRANSLATORS: direction description column header in the navigation help
-   '    <th> ' . $self->convert_tree($self->cdt('Go to'), 'ABOUT')
+   "    $description_th " . $self->convert_tree($self->cdt('Go to'), 'ABOUT')
    . " </th>\n" .
    # TRANSLATORS: section reached column header in the navigation help
-   '    <th> ' . $self->convert_tree($self->cdt('From 1.2.3 go to'), 'ABOUT')
+   "    $example_th "
+       . $self->convert_tree($self->cdt('From 1.2.3 go to'), 'ABOUT')
    ."</th>\n". "  </tr>\n";
 
   my $active_icons;
@@ -11748,11 +11766,15 @@ EOT
     $direction_description = '' if (!defined($direction_description));
     my $direction_example = $self->direction_string($direction, 'example');
     $direction_example = '' if (!defined($direction_example));
+    my $description_td = $self->html_attribute_class('td',
+                                        ['description-direction-about']).'>';
+    my $example_td = $self->html_attribute_class('td',
+                                            ['example-direction-about']).'>';
     $about .=
 '    '.$self->html_attribute_class('td', ['name-direction-about']).'>'
     ."$button_name</td>
-    <td>$direction_description</td>
-    <td>$direction_example</td>
+    ${description_td}$direction_description</td>
+    ${example_td}$direction_example</td>
   </tr>
 ";
   }
diff --git a/tp/Texinfo/XS/convert/convert_html.c 
b/tp/Texinfo/XS/convert/convert_html.c
index 0e277352d4..4ba90e44f5 100644
--- a/tp/Texinfo/XS/convert/convert_html.c
+++ b/tp/Texinfo/XS/convert/convert_html.c
@@ -15783,6 +15783,10 @@ default_format_special_body_footnotes (CONVERTER *self,
   format_footnotes_sequence (self, result);
 }
 
+static char *direction_about_array[] = {"direction-about"};
+static const STRING_LIST direction_about_classes
+    = {direction_about_array, 1, 1};
+
 static char *button_direction_about_array[] = {"button-direction-about"};
 static const STRING_LIST button_direction_about_classes
     = {button_direction_about_array, 1, 1};
@@ -15791,6 +15795,26 @@ static char *name_direction_about_array[] = 
{"name-direction-about"};
 static const STRING_LIST name_direction_about_classes
     = {name_direction_about_array, 1, 1};
 
+static char *description_direction_about_array[]
+    = {"description-direction-about"};
+static const STRING_LIST description_direction_about_classes
+    = {description_direction_about_array, 1, 1};
+
+static char *example_direction_about_array[] = {"example-direction-about"};
+static const STRING_LIST example_direction_about_classes
+    = {example_direction_about_array, 1, 1};
+
+static void
+open_element_with_class (CONVERTER *self, const char *element_name,
+                         const STRING_LIST *classes, TEXT *result)
+{
+  char *attribute_class = html_attribute_class (self, element_name,
+                                                classes);
+  text_append (result, attribute_class);
+  free (attribute_class);
+  text_append_n (result, ">", 1);
+}
+
 void
 default_format_special_body_about (CONVERTER *self,
                                const size_t special_unit_number,
@@ -15823,13 +15847,28 @@ default_format_special_body_about (CONVERTER *self,
   translate_convert_to_html_internal (
    "  The buttons in the navigation panels have the following meaning:",
                                       self, 0, 0, result, "ABOUT");
-  text_append (result, "\n</p>\n<table border=\"1\">\n  <tr>\n    <th> ");
+
+  text_append_n (result, "\n</p>\n", 6);
+  open_element_with_class (self, "table", &direction_about_classes, result);
+  text_append (result, "\n  <tr>\n    ");
+  open_element_with_class (self, "th", &button_direction_about_classes,
+                           result);
+  text_append_n (result, " ", 1);
   translate_convert_to_html_internal ("Button", self, 0, 0, result, "ABOUT");
-  text_append (result, " </th>\n    <th> ");
+  text_append_n (result, " </th>\n    ", 11);
+  open_element_with_class (self, "th", &name_direction_about_classes,
+                           result);
+  text_append_n (result, " ", 1);
   translate_convert_to_html_internal ("Name", self, 0, 0, result, "ABOUT");
-  text_append (result, " </th>\n    <th> ");
+  text_append_n (result, " </th>\n    ", 11);
+  open_element_with_class (self, "th", &description_direction_about_classes,
+                           result);
+  text_append_n (result, " ", 1);
   translate_convert_to_html_internal ("Go to", self, 0, 0, result, "ABOUT");
-  text_append (result, " </th>\n    <th> ");
+  text_append_n (result, " </th>\n    ", 11);
+  open_element_with_class (self, "th", &example_direction_about_classes,
+                           result);
+  text_append_n (result, " ", 1);
   translate_convert_to_html_internal ("From 1.2.3 go to", self, 0, 0,
                                       result, "ABOUT");
   text_append (result, "</th>\n  </tr>\n");
@@ -15837,7 +15876,6 @@ default_format_special_body_about (CONVERTER *self,
   for (i = 0; i < buttons->number; i++)
     {
       const BUTTON_SPECIFICATION *button = &buttons->list[i];
-      char * attribute_class;
       int direction = -1;
       const char *button_name;
       const char *button_description;
@@ -15852,11 +15890,8 @@ default_format_special_body_about (CONVERTER *self,
         continue;
 
       text_append_n (result, "  <tr>\n    ", 11);
-      attribute_class = html_attribute_class (self, "td",
-                                              &button_direction_about_classes);
-      text_append (result, attribute_class);
-      free (attribute_class);
-      text_append_n (result, ">", 1);
+      open_element_with_class (self, "td", &button_direction_about_classes,
+                               result);
 
    /* if the button spec is an array we do not know what the button
       looks like, so we do not show the button but still show explanations. */
@@ -15887,21 +15922,23 @@ default_format_special_body_about (CONVERTER *self,
             }
         }
       text_append_n (result, "</td>\n    ", 10);
-      attribute_class = html_attribute_class (self, "td",
-                                              &name_direction_about_classes);
-      text_append (result, attribute_class);
-      free (attribute_class);
-      text_append_n (result, ">", 1);
+      open_element_with_class (self, "td", &name_direction_about_classes,
+                               result);
 
       button_name = direction_string (self, direction, TDS_type_button, 0);
       if (button_name)
         text_append (result, button_name);
-      text_append_n (result, "</td>\n    <td>", 14);
+      text_append_n (result, "</td>\n    ", 10);
+      open_element_with_class (self, "td",
+                               &description_direction_about_classes,
+                               result);
       button_description = direction_string (self, direction,
                                              TDS_type_description, 0);
       if (button_description)
         text_append (result, button_description);
-      text_append_n (result, "</td>\n    <td>", 14);
+      text_append_n (result, "</td>\n    ", 10);
+      open_element_with_class (self, "td", &example_direction_about_classes,
+                               result);
       button_example = direction_string (self, direction, TDS_type_example, 0);
       if (button_example)
         text_append (result, button_example);
diff --git 
a/tp/t/results/html_tests/sectioning_check_menu_structure/res_html/sectioning_abt.html
 
b/tp/t/results/html_tests/sectioning_check_menu_structure/res_html/sectioning_abt.html
index 4de66f2073..1bf6266134 100644
--- 
a/tp/t/results/html_tests/sectioning_check_menu_structure/res_html/sectioning_abt.html
+++ 
b/tp/t/results/html_tests/sectioning_check_menu_structure/res_html/sectioning_abt.html
@@ -14,8 +14,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -38,66 +45,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/init_files_tests/directions_string_undef_texi2html/res_html/directions_string_undef_texi2html.html
 
b/tp/t/results/init_files_tests/directions_string_undef_texi2html/res_html/directions_string_undef_texi2html.html
index c719a7d623..afeb6c4d7e 100644
--- 
a/tp/t/results/init_files_tests/directions_string_undef_texi2html/res_html/directions_string_undef_texi2html.html
+++ 
b/tp/t/results/init_files_tests/directions_string_undef_texi2html/res_html/directions_string_undef_texi2html.html
@@ -17,11 +17,18 @@ a.copiable-link {visibility: hidden; text-decoration: none; 
line-height: 0em}
 pre.menu-comment-preformatted {font-family: serif}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
 th.menu-comment {text-align:left}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -182,66 +189,66 @@ Chap 2
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [] </td>
     <td class="name-direction-about"></td>
-    <td></td>
-    <td></td>
+    <td class="description-direction-about"></td>
+    <td class="example-direction-about"></td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/init_files_tests/documentation_examples_texi2html/res_html/documentation_examples_texi2html.html
 
b/tp/t/results/init_files_tests/documentation_examples_texi2html/res_html/documentation_examples_texi2html.html
index a64c5a2266..b4b582cdb9 100644
--- 
a/tp/t/results/init_files_tests/documentation_examples_texi2html/res_html/documentation_examples_texi2html.html
+++ 
b/tp/t/results/init_files_tests/documentation_examples_texi2html/res_html/documentation_examples_texi2html.html
@@ -23,14 +23,21 @@ pre.display-preformatted {font-family: inherit}
 pre.menu-comment-preformatted {font-family: serif}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
 td.printindex-index-entry {vertical-align: top}
 td.printindex-index-section {vertical-align: top; padding-left: 1em}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
 th.entries-header-printindex {text-align:left}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
 th.menu-comment {text-align:left}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 th.sections-header-printindex {text-align:left; padding-left: 1em}
 ul.toc-numbered-mark {list-style: none}
 -->
@@ -246,66 +253,66 @@ Appendices
 <p>
   Przyciski w panelach nawigacyjnych mają następujące znaczenie:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Przycisk </th>
-    <th> Nazwa </th>
-    <th> Przechodzi do </th>
-    <th> Z 1.2.3 przechodzi do</th>
+    <th class="button-direction-about"> Przycisk </th>
+    <th class="name-direction-about"> Nazwa </th>
+    <th class="description-direction-about"> Przechodzi do </th>
+    <th class="example-direction-about"> Z 1.2.3 przechodzi do</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">SzybkoWstecz</td>
-    <td>Początek tego rozdziału lub rozdział poprzedni</td>
-    <td>1</td>
+    <td class="description-direction-about">Początek tego rozdziału lub 
rozdział poprzedni</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Wstecz</td>
-    <td>Sekcja poprzednia w kolejności czytania</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Sekcja poprzednia w kolejności 
czytania</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ W górę ] </td>
     <td class="name-direction-about">Wyższy</td>
-    <td>Sekcja w górę</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Sekcja w górę</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Forward] </td>
     <td class="name-direction-about">WPrzód</td>
-    <td>Sekcja następna w kolejności czytania</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Sekcja następna w kolejności 
czytania</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">SzybkoWPrzód</td>
-    <td>Następny rozdział</td>
-    <td>2</td>
+    <td class="description-direction-about">Następny rozdział</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Wierzchni] </td>
     <td class="name-direction-about">Wierzchni</td>
-    <td>Okładka (wierzch) dokumentu</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Okładka (wierzch) dokumentu</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Treść] </td>
     <td class="name-direction-about">Treść</td>
-    <td>Spis treści</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Spis treści</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Indeks] </td>
     <td class="name-direction-about">Indeks</td>
-    <td>Indeks</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Indeks</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">O</td>
-    <td>O dokumencie (pomoc)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">O dokumencie (pomoc)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/languages/multiple_lang_chapters_texi2html/res_html/multiple_lang_chapters.html
 
b/tp/t/results/languages/multiple_lang_chapters_texi2html/res_html/multiple_lang_chapters.html
index 677c2c17d5..77394cdaa7 100644
--- 
a/tp/t/results/languages/multiple_lang_chapters_texi2html/res_html/multiple_lang_chapters.html
+++ 
b/tp/t/results/languages/multiple_lang_chapters_texi2html/res_html/multiple_lang_chapters.html
@@ -17,10 +17,17 @@ a.copiable-link {visibility: hidden; text-decoration: none; 
line-height: 0em}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
 strong.def-name {font-family: monospace; font-weight: bold; font-size: larger}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -186,66 +193,66 @@ td.name-direction-about {text-align:center}
 <p>
   Os bot&otilde;es nos pain&eacute;is de navega&ccedil;&atilde;o possuem os 
seguintes significados:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Bot&atilde;o </th>
-    <th> Nome </th>
-    <th> V&aacute; para </th>
-    <th> De 1.2.3 v&aacute; para</th>
+    <th class="button-direction-about"> Bot&atilde;o </th>
+    <th class="name-direction-about"> Nome </th>
+    <th class="description-direction-about"> V&aacute; para </th>
+    <th class="example-direction-about"> De 1.2.3 v&aacute; para</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">Voltar R&aacute;pido</td>
-    <td>Come&ccedil;o desse cap&iacute;tulo ou cap&iacute;tulo anterior</td>
-    <td>1</td>
+    <td class="description-direction-about">Come&ccedil;o desse 
cap&iacute;tulo ou cap&iacute;tulo anterior</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Volta</td>
-    <td>Se&ccedil;&atilde;o anterior na ordem de leitura</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Se&ccedil;&atilde;o anterior na 
ordem de leitura</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Acima ] </td>
     <td class="name-direction-about">Acima</td>
-    <td>Se&ccedil;&atilde;o acima</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Se&ccedil;&atilde;o acima</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Avan&ccedil;ar</td>
-    <td>Pr&oacute;xima se&ccedil;&atilde;o na ordem de leitura</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Pr&oacute;xima se&ccedil;&atilde;o 
na ordem de leitura</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">Avan&ccedil;ar R&aacute;pido</td>
-    <td>Pr&oacute;ximo cap&iacute;tulo</td>
-    <td>2</td>
+    <td class="description-direction-about">Pr&oacute;ximo cap&iacute;tulo</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Topo] </td>
     <td class="name-direction-about">Topo</td>
-    <td>In&iacute;cio (topo) do documento</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">In&iacute;cio (topo) do 
documento</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Conte&uacute;do] </td>
     <td class="name-direction-about">Conte&uacute;do</td>
-    <td>Sum&aacute;rio</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Sum&aacute;rio</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [&Iacute;ndice] </td>
     <td class="name-direction-about">&Iacute;ndice</td>
-    <td>&Iacute;ndice</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">&Iacute;ndice</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">Sobre</td>
-    <td>Sobre (ajuda)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Sobre (ajuda)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git a/tp/t/results/layout/navigation/res_html/navigation.html 
b/tp/t/results/layout/navigation/res_html/navigation.html
index ac227b5806..b2ca331554 100644
--- a/tp/t/results/layout/navigation/res_html/navigation.html
+++ b/tp/t/results/layout/navigation/res_html/navigation.html
@@ -17,10 +17,17 @@
 a.copiable-link {visibility: hidden; text-decoration: none; line-height: 0em}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 ul.toc-numbered-mark {list-style: none}
 -->
 </style>
@@ -182,66 +189,66 @@ b b b b b b b b b b b b b b b b  b b b b b bb b b b b b b 
 bb  b bb.
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/layout/navigation_chapter/res_html/navigation_abt.html 
b/tp/t/results/layout/navigation_chapter/res_html/navigation_abt.html
index b6ef24b131..af7270fc28 100644
--- a/tp/t/results/layout/navigation_chapter/res_html/navigation_abt.html
+++ b/tp/t/results/layout/navigation_chapter/res_html/navigation_abt.html
@@ -15,8 +15,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -39,66 +46,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/layout/navigation_chapter_no_header/res_html/navigation_abt.html 
b/tp/t/results/layout/navigation_chapter_no_header/res_html/navigation_abt.html
index b6ef24b131..af7270fc28 100644
--- 
a/tp/t/results/layout/navigation_chapter_no_header/res_html/navigation_abt.html
+++ 
b/tp/t/results/layout/navigation_chapter_no_header/res_html/navigation_abt.html
@@ -15,8 +15,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -39,66 +46,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/layout/navigation_chapter_no_header_vertical/res_html/navigation_abt.html
 
b/tp/t/results/layout/navigation_chapter_no_header_vertical/res_html/navigation_abt.html
index 942e7c7841..dc46f4623b 100644
--- 
a/tp/t/results/layout/navigation_chapter_no_header_vertical/res_html/navigation_abt.html
+++ 
b/tp/t/results/layout/navigation_chapter_no_header_vertical/res_html/navigation_abt.html
@@ -15,8 +15,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -52,66 +59,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/layout/navigation_chapter_vertical/res_html/navigation_abt.html 
b/tp/t/results/layout/navigation_chapter_vertical/res_html/navigation_abt.html
index 942e7c7841..dc46f4623b 100644
--- 
a/tp/t/results/layout/navigation_chapter_vertical/res_html/navigation_abt.html
+++ 
b/tp/t/results/layout/navigation_chapter_vertical/res_html/navigation_abt.html
@@ -15,8 +15,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -52,66 +59,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git a/tp/t/results/layout/navigation_node/res_html/navigation_abt.html 
b/tp/t/results/layout/navigation_node/res_html/navigation_abt.html
index 618fdc7afc..bb28817d76 100644
--- a/tp/t/results/layout/navigation_node/res_html/navigation_abt.html
+++ b/tp/t/results/layout/navigation_node/res_html/navigation_abt.html
@@ -15,8 +15,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -40,66 +47,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/layout/navigation_node_no_header/res_html/navigation_abt.html 
b/tp/t/results/layout/navigation_node_no_header/res_html/navigation_abt.html
index 8d7436a9e0..3a7cc9a9b2 100644
--- a/tp/t/results/layout/navigation_node_no_header/res_html/navigation_abt.html
+++ b/tp/t/results/layout/navigation_node_no_header/res_html/navigation_abt.html
@@ -15,8 +15,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -40,66 +47,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/layout/navigation_node_no_header_vertical/res_html/navigation_abt.html
 
b/tp/t/results/layout/navigation_node_no_header_vertical/res_html/navigation_abt.html
index 549ed8bc6a..9f79202861 100644
--- 
a/tp/t/results/layout/navigation_node_no_header_vertical/res_html/navigation_abt.html
+++ 
b/tp/t/results/layout/navigation_node_no_header_vertical/res_html/navigation_abt.html
@@ -15,8 +15,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -52,66 +59,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/layout/navigation_node_vertical/res_html/navigation_abt.html 
b/tp/t/results/layout/navigation_node_vertical/res_html/navigation_abt.html
index 942e7c7841..dc46f4623b 100644
--- a/tp/t/results/layout/navigation_node_vertical/res_html/navigation_abt.html
+++ b/tp/t/results/layout/navigation_node_vertical/res_html/navigation_abt.html
@@ -15,8 +15,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -52,66 +59,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/layout/navigation_section/res_html/navigation_abt.html 
b/tp/t/results/layout/navigation_section/res_html/navigation_abt.html
index b6ef24b131..af7270fc28 100644
--- a/tp/t/results/layout/navigation_section/res_html/navigation_abt.html
+++ b/tp/t/results/layout/navigation_section/res_html/navigation_abt.html
@@ -15,8 +15,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -39,66 +46,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/layout/navigation_section_no_header/res_html/navigation_abt.html 
b/tp/t/results/layout/navigation_section_no_header/res_html/navigation_abt.html
index b6ef24b131..af7270fc28 100644
--- 
a/tp/t/results/layout/navigation_section_no_header/res_html/navigation_abt.html
+++ 
b/tp/t/results/layout/navigation_section_no_header/res_html/navigation_abt.html
@@ -15,8 +15,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -39,66 +46,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/layout/navigation_section_no_header_vertical/res_html/navigation_abt.html
 
b/tp/t/results/layout/navigation_section_no_header_vertical/res_html/navigation_abt.html
index 942e7c7841..dc46f4623b 100644
--- 
a/tp/t/results/layout/navigation_section_no_header_vertical/res_html/navigation_abt.html
+++ 
b/tp/t/results/layout/navigation_section_no_header_vertical/res_html/navigation_abt.html
@@ -15,8 +15,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -52,66 +59,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/layout/navigation_section_vertical/res_html/navigation_abt.html 
b/tp/t/results/layout/navigation_section_vertical/res_html/navigation_abt.html
index 942e7c7841..dc46f4623b 100644
--- 
a/tp/t/results/layout/navigation_section_vertical/res_html/navigation_abt.html
+++ 
b/tp/t/results/layout/navigation_section_vertical/res_html/navigation_abt.html
@@ -15,8 +15,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -52,66 +59,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/layout/navigation_test_misc_file_collision/res_html/navigation_abt.html
 
b/tp/t/results/layout/navigation_test_misc_file_collision/res_html/navigation_abt.html
index d935b60273..7464a27738 100644
--- 
a/tp/t/results/layout/navigation_test_misc_file_collision/res_html/navigation_abt.html
+++ 
b/tp/t/results/layout/navigation_test_misc_file_collision/res_html/navigation_abt.html
@@ -17,10 +17,17 @@
 a.copiable-link {visibility: hidden; text-decoration: none; line-height: 0em}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -115,66 +122,66 @@ b b b b b b b b b b b b b b b b  b b b b b bb b b b b b b 
 bb  b bb.
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/layout/navigation_test_undef_top_buttons/res_html/navigation.html
 
b/tp/t/results/layout/navigation_test_undef_top_buttons/res_html/navigation.html
index 1191c7af60..7f52ae7387 100644
--- 
a/tp/t/results/layout/navigation_test_undef_top_buttons/res_html/navigation.html
+++ 
b/tp/t/results/layout/navigation_test_undef_top_buttons/res_html/navigation.html
@@ -17,10 +17,17 @@
 a.copiable-link {visibility: hidden; text-decoration: none; line-height: 0em}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 ul.toc-numbered-mark {list-style: none}
 -->
 </style>
@@ -174,66 +181,66 @@ b b b b b b b b b b b b b b b b  b b b b b bb b b b b b b 
 bb  b bb.
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/layout/navigation_test_zero_top_buttons/res_html/navigation.html 
b/tp/t/results/layout/navigation_test_zero_top_buttons/res_html/navigation.html
index 1191c7af60..7f52ae7387 100644
--- 
a/tp/t/results/layout/navigation_test_zero_top_buttons/res_html/navigation.html
+++ 
b/tp/t/results/layout/navigation_test_zero_top_buttons/res_html/navigation.html
@@ -17,10 +17,17 @@
 a.copiable-link {visibility: hidden; text-decoration: none; line-height: 0em}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 ul.toc-numbered-mark {list-style: none}
 -->
 </style>
@@ -174,66 +181,66 @@ b b b b b b b b b b b b b b b b  b b b b b bb b b b b b b 
 bb  b bb.
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git a/tp/t/results/layout/navigation_vertical/res_html/navigation.html 
b/tp/t/results/layout/navigation_vertical/res_html/navigation.html
index 4f79c55bc9..5c9364d6e5 100644
--- a/tp/t/results/layout/navigation_vertical/res_html/navigation.html
+++ b/tp/t/results/layout/navigation_vertical/res_html/navigation.html
@@ -17,10 +17,17 @@
 a.copiable-link {visibility: hidden; text-decoration: none; line-height: 0em}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 ul.toc-numbered-mark {list-style: none}
 -->
 </style>
@@ -265,66 +272,66 @@ b b b b b b b b b b b b b b b b  b b b b b bb b b b b b b 
 bb  b bb.
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git a/tp/t/results/layout/no_monolithic/res_html/no_monolithic_abt.html 
b/tp/t/results/layout/no_monolithic/res_html/no_monolithic_abt.html
index fad9ffb98b..e5b81be60e 100644
--- a/tp/t/results/layout/no_monolithic/res_html/no_monolithic_abt.html
+++ b/tp/t/results/layout/no_monolithic/res_html/no_monolithic_abt.html
@@ -15,8 +15,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -39,66 +46,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/layout/no_monolithic_only_toc_out/res_html/no_monolithic.html 
b/tp/t/results/layout/no_monolithic_only_toc_out/res_html/no_monolithic.html
index 44f5f0067e..76e9089c70 100644
--- a/tp/t/results/layout/no_monolithic_only_toc_out/res_html/no_monolithic.html
+++ b/tp/t/results/layout/no_monolithic_only_toc_out/res_html/no_monolithic.html
@@ -18,13 +18,20 @@ a.copiable-link {visibility: hidden; text-decoration: none; 
line-height: 0em}
 a.summary-letter-printindex {text-decoration: none}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
 td.printindex-index-entry {vertical-align: top}
 td.printindex-index-section {vertical-align: top; padding-left: 1em}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
 th.entries-header-printindex {text-align:left}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 th.sections-header-printindex {text-align:left; padding-left: 1em}
 ul.toc-numbered-mark {list-style: none}
 -->
@@ -130,66 +137,66 @@ ul.toc-numbered-mark {list-style: none}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/moresectioning/more_sections_than_nodes_texi2html/res_html/more_sections_than_nodes_texi2html.html
 
b/tp/t/results/moresectioning/more_sections_than_nodes_texi2html/res_html/more_sections_than_nodes_texi2html.html
index bfdccee660..fc05cc47f3 100644
--- 
a/tp/t/results/moresectioning/more_sections_than_nodes_texi2html/res_html/more_sections_than_nodes_texi2html.html
+++ 
b/tp/t/results/moresectioning/more_sections_than_nodes_texi2html/res_html/more_sections_than_nodes_texi2html.html
@@ -16,10 +16,17 @@
 a.copiable-link {visibility: hidden; text-decoration: none; line-height: 0em}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -308,66 +315,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/moresectioning/sectioning_part_appendix_texi2html_chapter/res_html/sectioning_part_appendix_texi2html_chapter_abt.html
 
b/tp/t/results/moresectioning/sectioning_part_appendix_texi2html_chapter/res_html/sectioning_part_appendix_texi2html_chapter_abt.html
index 9d584b2204..6d8e8bd783 100644
--- 
a/tp/t/results/moresectioning/sectioning_part_appendix_texi2html_chapter/res_html/sectioning_part_appendix_texi2html_chapter_abt.html
+++ 
b/tp/t/results/moresectioning/sectioning_part_appendix_texi2html_chapter/res_html/sectioning_part_appendix_texi2html_chapter_abt.html
@@ -14,8 +14,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -38,66 +45,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git a/tp/t/results/sectioning/chapter_between_nodes_texi2html.pl 
b/tp/t/results/sectioning/chapter_between_nodes_texi2html.pl
index eca7adf600..6249ddf1b6 100644
--- a/tp/t/results/sectioning/chapter_between_nodes_texi2html.pl
+++ b/tp/t/results/sectioning/chapter_between_nodes_texi2html.pl
@@ -581,10 +581,17 @@ 
$result_converted{'html'}->{'chapter_between_nodes_texi2html'} = '<!DOCTYPE html
 a.copiable-link {visibility: hidden; text-decoration: none; line-height: 0em}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 ul.toc-numbered-mark {list-style: none}
 -->
 </style>
@@ -684,66 +691,66 @@ ul.toc-numbered-mark {list-style: none}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/sectioning/nodes_after_top_before_chapter_texi2html_use_nodes_chapter/res_html/nodes_after_top_before_chapter_texi2html_use_nodes_chapter_abt.html
 
b/tp/t/results/sectioning/nodes_after_top_before_chapter_texi2html_use_nodes_chapter/res_html/nodes_after_top_before_chapter_texi2html_use_nodes_chapter_abt.html
index 758478c531..1022539bc5 100644
--- 
a/tp/t/results/sectioning/nodes_after_top_before_chapter_texi2html_use_nodes_chapter/res_html/nodes_after_top_before_chapter_texi2html_use_nodes_chapter_abt.html
+++ 
b/tp/t/results/sectioning/nodes_after_top_before_chapter_texi2html_use_nodes_chapter/res_html/nodes_after_top_before_chapter_texi2html_use_nodes_chapter_abt.html
@@ -14,8 +14,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -38,66 +45,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/sectioning/nodes_after_top_before_section_texi2html_use_nodes/res_html/nodes_after_top_before_section_texi2html_use_nodes.html
 
b/tp/t/results/sectioning/nodes_after_top_before_section_texi2html_use_nodes/res_html/nodes_after_top_before_section_texi2html_use_nodes.html
index 089fedf282..86ff2eca1c 100644
--- 
a/tp/t/results/sectioning/nodes_after_top_before_section_texi2html_use_nodes/res_html/nodes_after_top_before_section_texi2html_use_nodes.html
+++ 
b/tp/t/results/sectioning/nodes_after_top_before_section_texi2html_use_nodes/res_html/nodes_after_top_before_section_texi2html_use_nodes.html
@@ -16,10 +16,17 @@
 a.copiable-link {visibility: hidden; text-decoration: none; line-height: 0em}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -99,66 +106,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/sectioning/nodes_after_top_before_section_texi2html_use_nodes_chapter/res_html/nodes_after_top_before_section_texi2html_use_nodes_chapter_abt.html
 
b/tp/t/results/sectioning/nodes_after_top_before_section_texi2html_use_nodes_chapter/res_html/nodes_after_top_before_section_texi2html_use_nodes_chapter_abt.html
index 758478c531..1022539bc5 100644
--- 
a/tp/t/results/sectioning/nodes_after_top_before_section_texi2html_use_nodes_chapter/res_html/nodes_after_top_before_section_texi2html_use_nodes_chapter_abt.html
+++ 
b/tp/t/results/sectioning/nodes_after_top_before_section_texi2html_use_nodes_chapter/res_html/nodes_after_top_before_section_texi2html_use_nodes_chapter_abt.html
@@ -14,8 +14,15 @@
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -38,66 +45,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/sectioning/top_without_node_texi2html_no_use_nodes/res_html/top_without_node_texi2html_no_use_nodes.html
 
b/tp/t/results/sectioning/top_without_node_texi2html_no_use_nodes/res_html/top_without_node_texi2html_no_use_nodes.html
index 0de32522ea..d552f2e873 100644
--- 
a/tp/t/results/sectioning/top_without_node_texi2html_no_use_nodes/res_html/top_without_node_texi2html_no_use_nodes.html
+++ 
b/tp/t/results/sectioning/top_without_node_texi2html_no_use_nodes/res_html/top_without_node_texi2html_no_use_nodes.html
@@ -16,8 +16,15 @@
 a.copiable-link {visibility: hidden; text-decoration: none; line-height: 0em}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -75,66 +82,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/sectioning/two_nodes_at_the_end_texi2html/res_html/two_nodes_at_the_end_texi2html.html
 
b/tp/t/results/sectioning/two_nodes_at_the_end_texi2html/res_html/two_nodes_at_the_end_texi2html.html
index 2a0a1babc2..d16b42dcd4 100644
--- 
a/tp/t/results/sectioning/two_nodes_at_the_end_texi2html/res_html/two_nodes_at_the_end_texi2html.html
+++ 
b/tp/t/results/sectioning/two_nodes_at_the_end_texi2html/res_html/two_nodes_at_the_end_texi2html.html
@@ -16,10 +16,17 @@
 a.copiable-link {visibility: hidden; text-decoration: none; line-height: 0em}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -87,66 +94,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/t/results/sectioning/two_nodes_between_chapters_texi2html/res_html/two_nodes_between_chapters_texi2html.html
 
b/tp/t/results/sectioning/two_nodes_between_chapters_texi2html/res_html/two_nodes_between_chapters_texi2html.html
index df7f17e9d1..e2a115a8b4 100644
--- 
a/tp/t/results/sectioning/two_nodes_between_chapters_texi2html/res_html/two_nodes_between_chapters_texi2html.html
+++ 
b/tp/t/results/sectioning/two_nodes_between_chapters_texi2html/res_html/two_nodes_between_chapters_texi2html.html
@@ -16,10 +16,17 @@
 a.copiable-link {visibility: hidden; text-decoration: none; line-height: 0em}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -104,66 +111,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git a/tp/tests/coverage/res_parser/formatting_html32/formatting.html 
b/tp/tests/coverage/res_parser/formatting_html32/formatting.html
index 3e997d966a..82ad26d120 100644
--- a/tp/tests/coverage/res_parser/formatting_html32/formatting.html
+++ b/tp/tests/coverage/res_parser/formatting_html32/formatting.html
@@ -7785,7 +7785,7 @@ Previous: <a href="#chapter" rel="prev">chapter</a>, Up: 
<a href="#Top" rel="up"
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table>
   <tr>
     <th> Button </th>
     <th> Name </th>
diff --git a/tp/tests/coverage/res_parser/formatting_xhtml/formatting.html 
b/tp/tests/coverage/res_parser/formatting_xhtml/formatting.html
index 0c5ab2b8b8..557986cd2b 100644
--- a/tp/tests/coverage/res_parser/formatting_xhtml/formatting.html
+++ b/tp/tests/coverage/res_parser/formatting_xhtml/formatting.html
@@ -896,14 +896,21 @@ span.sansserif {font-family: sans-serif; font-weight: 
normal}
 span:hover a.copiable-link {visibility: visible}
 strong.def-name {font-family: monospace; font-weight: bold; font-size: larger}
 table.cartouche {border-style: solid; border-radius: 10%}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.index-entry-level-1 {padding-left: 1.5em}
 td.index-entry-level-2 {padding-left: 3.0em}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
 td.printindex-index-entry {vertical-align: top}
 td.printindex-index-section {vertical-align: top; padding-left: 1em}
 td.printindex-index-see-also {vertical-align: top; padding-left: 1em}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
 th.entries-header-printindex {text-align:left}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 th.sections-header-printindex {text-align:left; padding-left: 1em}
 ul.mark-bullet {list-style-type: disc}
 ul.mark-minus {list-style-type: "\2212"}
@@ -7925,48 +7932,48 @@ Previous: <a href="#chapter" accesskey="p" 
rel="prev">chapter</a>, Up: <a href="
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Next</td>
-    <td>Next section on same level</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section on same level</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Prev</td>
-    <td>Previous section on same level</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section on same level</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/tests/customization/res_parser/sectioning_directions/sectioning.html 
b/tp/tests/customization/res_parser/sectioning_directions/sectioning.html
index ac2a8ca8e3..9ff82c5b57 100644
--- a/tp/tests/customization/res_parser/sectioning_directions/sectioning.html
+++ b/tp/tests/customization/res_parser/sectioning_directions/sectioning.html
@@ -22,11 +22,18 @@
 a.copiable-link {visibility: hidden; text-decoration: none; line-height: 0em}
 pre.menu-comment-preformatted {font-family: serif}
 span:hover a.copiable-link {visibility: visible}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
 th.menu-comment {text-align:left}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 ul.toc-numbered-mark {list-style: none}
 -->
 </style>
@@ -1683,246 +1690,246 @@ description here
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Next</td>
-    <td>Next section on same level</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section on same level</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Next</td>
-    <td>Next section on same level</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section on same level</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Next</td>
-    <td>Next section on same level</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section on same level</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Prev</td>
-    <td>Previous section on same level</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section on same level</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Prev</td>
-    <td>Previous section on same level</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section on same level</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Prev</td>
-    <td>Previous section on same level</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section on same level</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">This</td>
-    <td>Current section</td>
-    <td>1.2.3</td>
+    <td class="description-direction-about">Current section</td>
+    <td class="example-direction-about">1.2.3</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">This</td>
-    <td>Current section</td>
-    <td>1.2.3</td>
+    <td class="description-direction-about">Current section</td>
+    <td class="example-direction-about">1.2.3</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">This</td>
-    <td>Current section</td>
-    <td>1.2.3</td>
+    <td class="description-direction-about">Current section</td>
+    <td class="example-direction-about">1.2.3</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeUp</td>
-    <td>Up node</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up node</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeUp</td>
-    <td>Up node</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up node</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeUp</td>
-    <td>Up node</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up node</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodePrev</td>
-    <td>Previous node</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodePrev</td>
-    <td>Previous node</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodePrev</td>
-    <td>Previous node</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeNext</td>
-    <td>Next node</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeNext</td>
-    <td>Next node</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeNext</td>
-    <td>Next node</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeForward</td>
-    <td>Next node in node reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node in node reading 
order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeForward</td>
-    <td>Next node in node reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node in node reading 
order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeForward</td>
-    <td>Next node in node reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node in node reading 
order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeBack</td>
-    <td>Previous node in node reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node in node reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeBack</td>
-    <td>Previous node in node reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node in node reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeBack</td>
-    <td>Previous node in node reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node in node reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
 </table>
 
diff --git 
a/tp/tests/customization/res_parser/sectioning_directions_split_chapter/sectioning_abt.html
 
b/tp/tests/customization/res_parser/sectioning_directions_split_chapter/sectioning_abt.html
index 281e09f797..997123dbf5 100644
--- 
a/tp/tests/customization/res_parser/sectioning_directions_split_chapter/sectioning_abt.html
+++ 
b/tp/tests/customization/res_parser/sectioning_directions_split_chapter/sectioning_abt.html
@@ -17,8 +17,15 @@
 <link href="#SEC_About" rel="help" title="About This Document">
 <style type="text/css">
 <!--
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -242,480 +249,480 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Next</td>
-    <td>Next section on same level</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section on same level</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Next</td>
-    <td>Next section on same level</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section on same level</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Next</td>
-    <td>Next section on same level</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section on same level</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Prev</td>
-    <td>Previous section on same level</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section on same level</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Prev</td>
-    <td>Previous section on same level</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section on same level</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Prev</td>
-    <td>Previous section on same level</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section on same level</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">This</td>
-    <td>Current section</td>
-    <td>1.2.3</td>
+    <td class="description-direction-about">Current section</td>
+    <td class="example-direction-about">1.2.3</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">This</td>
-    <td>Current section</td>
-    <td>1.2.3</td>
+    <td class="description-direction-about">Current section</td>
+    <td class="example-direction-about">1.2.3</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">This</td>
-    <td>Current section</td>
-    <td>1.2.3</td>
+    <td class="description-direction-about">Current section</td>
+    <td class="example-direction-about">1.2.3</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeUp</td>
-    <td>Up node</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up node</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeUp</td>
-    <td>Up node</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up node</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeUp</td>
-    <td>Up node</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up node</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodePrev</td>
-    <td>Previous node</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodePrev</td>
-    <td>Previous node</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodePrev</td>
-    <td>Previous node</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeNext</td>
-    <td>Next node</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeNext</td>
-    <td>Next node</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeNext</td>
-    <td>Next node</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeForward</td>
-    <td>Next node in node reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node in node reading 
order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeForward</td>
-    <td>Next node in node reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node in node reading 
order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeForward</td>
-    <td>Next node in node reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node in node reading 
order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeBack</td>
-    <td>Previous node in node reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node in node reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeBack</td>
-    <td>Previous node in node reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node in node reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeBack</td>
-    <td>Previous node in node reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node in node reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Next</td>
-    <td>Next section on same level</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section on same level</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Next</td>
-    <td>Next section on same level</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section on same level</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Next</td>
-    <td>Next section on same level</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section on same level</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Prev</td>
-    <td>Previous section on same level</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section on same level</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Prev</td>
-    <td>Previous section on same level</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section on same level</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Prev</td>
-    <td>Previous section on same level</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section on same level</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">This</td>
-    <td>Current section</td>
-    <td>1.2.3</td>
+    <td class="description-direction-about">Current section</td>
+    <td class="example-direction-about">1.2.3</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">This</td>
-    <td>Current section</td>
-    <td>1.2.3</td>
+    <td class="description-direction-about">Current section</td>
+    <td class="example-direction-about">1.2.3</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">This</td>
-    <td>Current section</td>
-    <td>1.2.3</td>
+    <td class="description-direction-about">Current section</td>
+    <td class="example-direction-about">1.2.3</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeUp</td>
-    <td>Up node</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up node</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeUp</td>
-    <td>Up node</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up node</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeUp</td>
-    <td>Up node</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up node</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodePrev</td>
-    <td>Previous node</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodePrev</td>
-    <td>Previous node</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodePrev</td>
-    <td>Previous node</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeNext</td>
-    <td>Next node</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeNext</td>
-    <td>Next node</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeNext</td>
-    <td>Next node</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeForward</td>
-    <td>Next node in node reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node in node reading 
order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeForward</td>
-    <td>Next node in node reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node in node reading 
order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeForward</td>
-    <td>Next node in node reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next node in node reading 
order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeBack</td>
-    <td>Previous node in node reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node in node reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeBack</td>
-    <td>Previous node in node reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node in node reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">NodeBack</td>
-    <td>Previous node in node reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous node in node reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
 </table>
 
diff --git 
"a/tp/tests/encoded/res_parser/non_ascii_command_line/os\303\251_utf8_abt.html" 
"b/tp/tests/encoded/res_parser/non_ascii_command_line/os\303\251_utf8_abt.html"
index 78e5ebe25d..3f21f011db 100644
--- 
"a/tp/tests/encoded/res_parser/non_ascii_command_line/os\303\251_utf8_abt.html"
+++ 
"b/tp/tests/encoded/res_parser/non_ascii_command_line/os\303\251_utf8_abt.html"
@@ -27,8 +27,15 @@
 @import ("strânge\" ;file") ;
 
 
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 @media tv { h3 {text-align: left} }
 ul.mark-euro {list-style-type: "€"}
 ul.mark-néni {list-style-type: "vàça"}
@@ -53,48 +60,48 @@ ul.mark-néni {list-style-type: "vàça"}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Next</td>
-    <td>Next section on same level</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section on same level</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Prev</td>
-    <td>Previous section on same level</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section on same level</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/tests/formatting/res_parser/documentlanguage_cmdline/documentlanguage.html 
b/tp/tests/formatting/res_parser/documentlanguage_cmdline/documentlanguage.html
index e6ac7d3d14..6eaa09d208 100644
--- 
a/tp/tests/formatting/res_parser/documentlanguage_cmdline/documentlanguage.html
+++ 
b/tp/tests/formatting/res_parser/documentlanguage_cmdline/documentlanguage.html
@@ -19,13 +19,20 @@ a.summary-letter-printindex {text-decoration: none}
 span.program-in-footer {font-size: smaller}
 span:hover a.copiable-link {visibility: visible}
 strong.def-name {font-family: monospace; font-weight: bold; font-size: larger}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
 td.printindex-index-entry {vertical-align: top}
 td.printindex-index-section {vertical-align: top; padding-left: 1em}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
 th.entries-header-printindex {text-align:left}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 th.sections-header-printindex {text-align:left; padding-left: 1em}
 -->
 </style>
@@ -105,66 +112,66 @@ th.sections-header-printindex {text-align:left; 
padding-left: 1em}
 <p>
   Les boutons du panneau de navigation ont la signification suivante&nbsp;:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Bouton </th>
-    <th> Nom </th>
-    <th> Aller &agrave; </th>
-    <th> Depuis 1.2.3 aller &agrave;</th>
+    <th class="button-direction-about"> Bouton </th>
+    <th class="name-direction-about"> Nom </th>
+    <th class="description-direction-about"> Aller &agrave; </th>
+    <th class="example-direction-about"> Depuis 1.2.3 aller &agrave;</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">RetourRapide</td>
-    <td>D&eacute;but de ce chapitre ou chapitre pr&eacute;c&eacute;dent</td>
-    <td>1</td>
+    <td class="description-direction-about">D&eacute;but de ce chapitre ou 
chapitre pr&eacute;c&eacute;dent</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Arri&egrave;re</td>
-    <td>Section pr&eacute;c&eacute;dente dans l&rsquo;ordre de lecture</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Section pr&eacute;c&eacute;dente 
dans l&rsquo;ordre de lecture</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Plus haut] </td>
     <td class="name-direction-about">Monter</td>
-    <td>Section sup&eacute;rieure</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Section sup&eacute;rieure</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Avant</td>
-    <td>Section suivante dans l&rsquo;ordre de lecture</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Section suivante dans 
l&rsquo;ordre de lecture</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">AvanceRapide</td>
-    <td>Chapitre suivant</td>
-    <td>2</td>
+    <td class="description-direction-about">Chapitre suivant</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Racine] </td>
     <td class="name-direction-about">Racine</td>
-    <td>Couverture (top) du document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Couverture (top) du document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contenu] </td>
     <td class="name-direction-about">Contenu</td>
-    <td>Table des mati&egrave;res</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table des mati&egrave;res</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">A propos</td>
-    <td>A propos (page d&rsquo;aide)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">A propos (page d&rsquo;aide)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/tests/layout/res_parser/formatting_enable_encoding/formatting.html 
b/tp/tests/layout/res_parser/formatting_enable_encoding/formatting.html
index 173423d7fc..bd64ca7f4c 100644
--- a/tp/tests/layout/res_parser/formatting_enable_encoding/formatting.html
+++ b/tp/tests/layout/res_parser/formatting_enable_encoding/formatting.html
@@ -899,17 +899,24 @@ span.sansserif {font-family: sans-serif; font-weight: 
normal}
 span:hover a.copiable-link {visibility: visible}
 strong.def-name {font-family: monospace; font-weight: bold; font-size: larger}
 table.cartouche {border-style: solid; border-radius: 10%}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.index-entry-level-1 {padding-left: 1.5em}
 td.index-entry-level-2 {padding-left: 3.0em}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
 td.printindex-index-entry {vertical-align: top}
 td.printindex-index-section {vertical-align: top; padding-left: 1em}
 td.printindex-index-see-also {vertical-align: top; padding-left: 1em}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
 th.entries-header-printindex {text-align:left}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
 th.menu-comment {text-align:left}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 th.sections-header-printindex {text-align:left; padding-left: 1em}
 ul.mark-bullet {list-style-type: disc}
 ul.mark-minus {list-style-type: "\2212"}
@@ -7964,48 +7971,48 @@ Previous: <a href="#chapter" accesskey="p" 
rel="prev">chapter</a>, Up: <a href="
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Next</td>
-    <td>Next section on same level</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section on same level</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Prev</td>
-    <td>Previous section on same level</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section on same level</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td>   </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about">   </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td>   </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about">   </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td>   </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about">   </td>
   </tr>
 </table>
 
diff --git a/tp/tests/layout/res_parser/formatting_exotic/formatting_abt.html 
b/tp/tests/layout/res_parser/formatting_exotic/formatting_abt.html
index 097c803600..800ef66507 100644
--- a/tp/tests/layout/res_parser/formatting_exotic/formatting_abt.html
+++ b/tp/tests/layout/res_parser/formatting_exotic/formatting_abt.html
@@ -873,8 +873,15 @@ g-roupe
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 <link rel="stylesheet" type="text/css" 
href="http://www.environnement.ens.fr/perso/dumas/background-color.css";>
@@ -898,66 +905,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git a/tp/tests/layout/res_parser/formatting_fr/formatting.html 
b/tp/tests/layout/res_parser/formatting_fr/formatting.html
index 1cd5307e05..bc251d5a8e 100644
--- a/tp/tests/layout/res_parser/formatting_fr/formatting.html
+++ b/tp/tests/layout/res_parser/formatting_fr/formatting.html
@@ -895,17 +895,24 @@ span.sansserif {font-family: sans-serif; font-weight: 
normal}
 span:hover a.copiable-link {visibility: visible}
 strong.def-name {font-family: monospace; font-weight: bold; font-size: larger}
 table.cartouche {border-style: solid; border-radius: 10%}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.index-entry-level-1 {padding-left: 1.5em}
 td.index-entry-level-2 {padding-left: 3.0em}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
 td.printindex-index-entry {vertical-align: top}
 td.printindex-index-section {vertical-align: top; padding-left: 1em}
 td.printindex-index-see-also {vertical-align: top; padding-left: 1em}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
 th.entries-header-printindex {text-align:left}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
 th.menu-comment {text-align:left}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 th.sections-header-printindex {text-align:left; padding-left: 1em}
 ul.mark-bullet {list-style-type: disc}
 ul.mark-minus {list-style-type: "\2212"}
@@ -8088,66 +8095,66 @@ Menu comment
 <p>
   Les boutons du panneau de navigation ont la signification suivante&nbsp;:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Bouton </th>
-    <th> Nom </th>
-    <th> Aller &agrave; </th>
-    <th> Depuis 1.2.3 aller &agrave;</th>
+    <th class="button-direction-about"> Bouton </th>
+    <th class="name-direction-about"> Nom </th>
+    <th class="description-direction-about"> Aller &agrave; </th>
+    <th class="example-direction-about"> Depuis 1.2.3 aller &agrave;</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">RetourRapide</td>
-    <td>D&eacute;but de ce chapitre ou chapitre pr&eacute;c&eacute;dent</td>
-    <td>1</td>
+    <td class="description-direction-about">D&eacute;but de ce chapitre ou 
chapitre pr&eacute;c&eacute;dent</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Arri&egrave;re</td>
-    <td>Section pr&eacute;c&eacute;dente dans l&rsquo;ordre de lecture</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Section pr&eacute;c&eacute;dente 
dans l&rsquo;ordre de lecture</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Plus haut] </td>
     <td class="name-direction-about">Monter</td>
-    <td>Section sup&eacute;rieure</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Section sup&eacute;rieure</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Avant</td>
-    <td>Section suivante dans l&rsquo;ordre de lecture</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Section suivante dans 
l&rsquo;ordre de lecture</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">AvanceRapide</td>
-    <td>Chapitre suivant</td>
-    <td>2</td>
+    <td class="description-direction-about">Chapitre suivant</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Racine] </td>
     <td class="name-direction-about">Racine</td>
-    <td>Couverture (top) du document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Couverture (top) du document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contenu] </td>
     <td class="name-direction-about">Contenu</td>
-    <td>Table des mati&egrave;res</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table des mati&egrave;res</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">A propos</td>
-    <td>A propos (page d&rsquo;aide)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">A propos (page d&rsquo;aide)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git a/tp/tests/layout/res_parser/formatting_fr_icons/formatting.html 
b/tp/tests/layout/res_parser/formatting_fr_icons/formatting.html
index d4d8cfb723..0afc737ba4 100644
--- a/tp/tests/layout/res_parser/formatting_fr_icons/formatting.html
+++ b/tp/tests/layout/res_parser/formatting_fr_icons/formatting.html
@@ -895,17 +895,24 @@ span.sansserif {font-family: sans-serif; font-weight: 
normal}
 span:hover a.copiable-link {visibility: visible}
 strong.def-name {font-family: monospace; font-weight: bold; font-size: larger}
 table.cartouche {border-style: solid; border-radius: 10%}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.index-entry-level-1 {padding-left: 1.5em}
 td.index-entry-level-2 {padding-left: 3.0em}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
 td.printindex-index-entry {vertical-align: top}
 td.printindex-index-section {vertical-align: top; padding-left: 1em}
 td.printindex-index-see-also {vertical-align: top; padding-left: 1em}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
 th.entries-header-printindex {text-align:left}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
 th.menu-comment {text-align:left}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 th.sections-header-printindex {text-align:left; padding-left: 1em}
 ul.mark-bullet {list-style-type: disc}
 ul.mark-minus {list-style-type: "\2212"}
@@ -8088,66 +8095,66 @@ Menu comment
 <p>
   Les boutons du panneau de navigation ont la signification suivante&nbsp;:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Bouton </th>
-    <th> Nom </th>
-    <th> Aller &agrave; </th>
-    <th> Depuis 1.2.3 aller &agrave;</th>
+    <th class="button-direction-about"> Bouton </th>
+    <th class="name-direction-about"> Nom </th>
+    <th class="description-direction-about"> Aller &agrave; </th>
+    <th class="example-direction-about"> Depuis 1.2.3 aller &agrave;</th>
   </tr>
   <tr>
     <td class="button-direction-about"><img src="a_leftdouble.png" 
alt="RetourRapide" align="middle"></td>
     <td class="name-direction-about">RetourRapide</td>
-    <td>D&eacute;but de ce chapitre ou chapitre pr&eacute;c&eacute;dent</td>
-    <td>1</td>
+    <td class="description-direction-about">D&eacute;but de ce chapitre ou 
chapitre pr&eacute;c&eacute;dent</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"><img src="a_left.png" 
alt="Arri&egrave;re" align="middle"></td>
     <td class="name-direction-about">Arri&egrave;re</td>
-    <td>Section pr&eacute;c&eacute;dente dans l&rsquo;ordre de lecture</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Section pr&eacute;c&eacute;dente 
dans l&rsquo;ordre de lecture</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"><img src="a_up.png" alt="Monter" 
align="middle"></td>
     <td class="name-direction-about">Monter</td>
-    <td>Section sup&eacute;rieure</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Section sup&eacute;rieure</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"><img src="a_right.png" alt="Avant" 
align="middle"></td>
     <td class="name-direction-about">Avant</td>
-    <td>Section suivante dans l&rsquo;ordre de lecture</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Section suivante dans 
l&rsquo;ordre de lecture</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"><img src="a_rightdouble.png" 
alt="AvanceRapide" align="middle"></td>
     <td class="name-direction-about">AvanceRapide</td>
-    <td>Chapitre suivant</td>
-    <td>2</td>
+    <td class="description-direction-about">Chapitre suivant</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"><img src="a_top.png" alt="Racine" 
align="middle"></td>
     <td class="name-direction-about">Racine</td>
-    <td>Couverture (top) du document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Couverture (top) du document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"><img src="a_tableofcon.png" 
alt="Contenu" align="middle"></td>
     <td class="name-direction-about">Contenu</td>
-    <td>Table des mati&egrave;res</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table des mati&egrave;res</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"><img src="a_index.png" alt="Index" 
align="middle"></td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"><img src="a_help.png" alt="A propos" 
align="middle"></td>
     <td class="name-direction-about">A propos</td>
-    <td>A propos (page d&rsquo;aide)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">A propos (page d&rsquo;aide)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git a/tp/tests/layout/res_parser/formatting_inline_css/formatting.html 
b/tp/tests/layout/res_parser/formatting_inline_css/formatting.html
index a33bc73fb9..f694de6da8 100644
--- a/tp/tests/layout/res_parser/formatting_inline_css/formatting.html
+++ b/tp/tests/layout/res_parser/formatting_inline_css/formatting.html
@@ -7930,48 +7930,48 @@ Previous: <a href="#chapter" accesskey="p" 
rel="prev">chapter</a>, Up: <a href="
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about" style="border-collapse: collapse">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about" style="border-width: thin; 
border-bottom-style: solid; border-right-style: solid"> Button </th>
+    <th class="name-direction-about" style="border-width: thin; 
border-bottom-style: solid; border-right-style: solid; border-left-style: 
solid"> Name </th>
+    <th class="description-direction-about" style="border-width: thin; 
border-bottom-style: solid; border-right-style: solid; border-left-style: 
solid"> Go to </th>
+    <th class="example-direction-about" style="border-width: thin; 
border-bottom-style: solid; border-left-style: solid"> From 1.2.3 go to</th>
   </tr>
   <tr>
-    <td class="button-direction-about" style="text-align:center"></td>
-    <td class="name-direction-about" style="text-align:center">Next</td>
-    <td>Next section on same level</td>
-    <td>1.2.4</td>
+    <td class="button-direction-about" style="text-align: center; 
border-width: thin; border-right-style: solid"></td>
+    <td class="name-direction-about" style="text-align: center; border-width: 
thin; border-right-style: solid; border-left-style: solid">Next</td>
+    <td class="description-direction-about" style="border-width: thin; 
border-right-style: solid; border-left-style: solid">Next section on same 
level</td>
+    <td class="example-direction-about" style="border-width: thin; 
border-left-style: solid">1.2.4</td>
   </tr>
   <tr>
-    <td class="button-direction-about" style="text-align:center"></td>
-    <td class="name-direction-about" style="text-align:center">Prev</td>
-    <td>Previous section on same level</td>
-    <td>1.2.2</td>
+    <td class="button-direction-about" style="text-align: center; 
border-width: thin; border-right-style: solid"></td>
+    <td class="name-direction-about" style="text-align: center; border-width: 
thin; border-right-style: solid; border-left-style: solid">Prev</td>
+    <td class="description-direction-about" style="border-width: thin; 
border-right-style: solid; border-left-style: solid">Previous section on same 
level</td>
+    <td class="example-direction-about" style="border-width: thin; 
border-left-style: solid">1.2.2</td>
   </tr>
   <tr>
-    <td class="button-direction-about" style="text-align:center"></td>
-    <td class="name-direction-about" style="text-align:center">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="button-direction-about" style="text-align: center; 
border-width: thin; border-right-style: solid"></td>
+    <td class="name-direction-about" style="text-align: center; border-width: 
thin; border-right-style: solid; border-left-style: solid">Up</td>
+    <td class="description-direction-about" style="border-width: thin; 
border-right-style: solid; border-left-style: solid">Up section</td>
+    <td class="example-direction-about" style="border-width: thin; 
border-left-style: solid">1.2</td>
   </tr>
   <tr>
-    <td class="button-direction-about" style="text-align:center"> [Contents] 
</td>
-    <td class="name-direction-about" style="text-align:center">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="button-direction-about" style="text-align: center; 
border-width: thin; border-right-style: solid"> [Contents] </td>
+    <td class="name-direction-about" style="text-align: center; border-width: 
thin; border-right-style: solid; border-left-style: solid">Contents</td>
+    <td class="description-direction-about" style="border-width: thin; 
border-right-style: solid; border-left-style: solid">Table of contents</td>
+    <td class="example-direction-about" style="border-width: thin; 
border-left-style: solid"> &nbsp; </td>
   </tr>
   <tr>
-    <td class="button-direction-about" style="text-align:center"> [Index] </td>
-    <td class="name-direction-about" style="text-align:center">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="button-direction-about" style="text-align: center; 
border-width: thin; border-right-style: solid"> [Index] </td>
+    <td class="name-direction-about" style="text-align: center; border-width: 
thin; border-right-style: solid; border-left-style: solid">Index</td>
+    <td class="description-direction-about" style="border-width: thin; 
border-right-style: solid; border-left-style: solid">Index</td>
+    <td class="example-direction-about" style="border-width: thin; 
border-left-style: solid"> &nbsp; </td>
   </tr>
   <tr>
-    <td class="button-direction-about" style="text-align:center"> [ ? ] </td>
-    <td class="name-direction-about" style="text-align:center">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="button-direction-about" style="text-align: center; 
border-width: thin; border-right-style: solid"> [ ? ] </td>
+    <td class="name-direction-about" style="text-align: center; border-width: 
thin; border-right-style: solid; border-left-style: solid">About</td>
+    <td class="description-direction-about" style="border-width: thin; 
border-right-style: solid; border-left-style: solid">About (help)</td>
+    <td class="example-direction-about" style="border-width: thin; 
border-left-style: solid"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/tests/layout/res_parser/formatting_numerical_entities/formatting.html 
b/tp/tests/layout/res_parser/formatting_numerical_entities/formatting.html
index c5d5ce0c13..6388954899 100644
--- a/tp/tests/layout/res_parser/formatting_numerical_entities/formatting.html
+++ b/tp/tests/layout/res_parser/formatting_numerical_entities/formatting.html
@@ -899,17 +899,24 @@ span.sansserif {font-family: sans-serif; font-weight: 
normal}
 span:hover a.copiable-link {visibility: visible}
 strong.def-name {font-family: monospace; font-weight: bold; font-size: larger}
 table.cartouche {border-style: solid; border-radius: 10%}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.index-entry-level-1 {padding-left: 1.5em}
 td.index-entry-level-2 {padding-left: 3.0em}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
 td.printindex-index-entry {vertical-align: top}
 td.printindex-index-section {vertical-align: top; padding-left: 1em}
 td.printindex-index-see-also {vertical-align: top; padding-left: 1em}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
 th.entries-header-printindex {text-align:left}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
 th.menu-comment {text-align:left}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 th.sections-header-printindex {text-align:left; padding-left: 1em}
 ul.mark-bullet {list-style-type: disc}
 ul.mark-minus {list-style-type: "\2212"}
@@ -7964,48 +7971,48 @@ Previous: <a href="#chapter" accesskey="p" 
rel="prev">chapter</a>, Up: <a href="
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Next</td>
-    <td>Next section on same level</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section on same level</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Prev</td>
-    <td>Previous section on same level</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section on same level</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &#160; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &#160; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &#160; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &#160; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &#160; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &#160; </td>
   </tr>
 </table>
 
diff --git a/tp/tests/layout/res_parser/formatting_texi2html/formatting.html 
b/tp/tests/layout/res_parser/formatting_texi2html/formatting.html
index 000081d840..8e2f4d909b 100644
--- a/tp/tests/layout/res_parser/formatting_texi2html/formatting.html
+++ b/tp/tests/layout/res_parser/formatting_texi2html/formatting.html
@@ -895,17 +895,24 @@ span.sansserif {font-family: sans-serif; font-weight: 
normal}
 span:hover a.copiable-link {visibility: visible}
 strong.def-name {font-family: monospace; font-weight: bold; font-size: larger}
 table.cartouche {border-style: solid; border-radius: 10%}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.index-entry-level-1 {padding-left: 1.5em}
 td.index-entry-level-2 {padding-left: 3.0em}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
 td.printindex-index-entry {vertical-align: top}
 td.printindex-index-section {vertical-align: top; padding-left: 1em}
 td.printindex-index-see-also {vertical-align: top; padding-left: 1em}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
 th.entries-header-printindex {text-align:left}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
 th.menu-comment {text-align:left}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 th.sections-header-printindex {text-align:left; padding-left: 1em}
 ul.mark-bullet {list-style-type: disc}
 ul.mark-minus {list-style-type: "\2212"}
@@ -8088,66 +8095,66 @@ Menu comment
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git 
a/tp/tests/layout/res_parser/formatting_texi2html_nodes/formatting_abt.html 
b/tp/tests/layout/res_parser/formatting_texi2html_nodes/formatting_abt.html
index b8965e6256..dcef6d6462 100644
--- a/tp/tests/layout/res_parser/formatting_texi2html_nodes/formatting_abt.html
+++ b/tp/tests/layout/res_parser/formatting_texi2html_nodes/formatting_abt.html
@@ -873,8 +873,15 @@ g-roupe
 <style type="text/css">
 <!--
 span.program-in-footer {font-size: smaller}
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -898,66 +905,66 @@ td.name-direction-about {text-align:center}
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt;&lt; ] </td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &lt; ] </td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ Up ] </td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt; ] </td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ &gt;&gt; ] </td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Top] </td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git a/tp/tests/layout/res_parser/formatting_weird_quotes/formatting.html 
b/tp/tests/layout/res_parser/formatting_weird_quotes/formatting.html
index e08953b498..322df227cb 100644
--- a/tp/tests/layout/res_parser/formatting_weird_quotes/formatting.html
+++ b/tp/tests/layout/res_parser/formatting_weird_quotes/formatting.html
@@ -899,17 +899,24 @@ span.sansserif {font-family: sans-serif; font-weight: 
normal}
 span:hover a.copiable-link {visibility: visible}
 strong.def-name {font-family: monospace; font-weight: bold; font-size: larger}
 table.cartouche {border-style: solid; border-radius: 10%}
-td.button-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
 td.index-entry-level-1 {padding-left: 1.5em}
 td.index-entry-level-2 {padding-left: 3.0em}
 td.menu-entry-description {vertical-align: top}
 td.menu-entry-destination {vertical-align: top}
-td.name-direction-about {text-align:center}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
 td.printindex-index-entry {vertical-align: top}
 td.printindex-index-section {vertical-align: top; padding-left: 1em}
 td.printindex-index-see-also {vertical-align: top; padding-left: 1em}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
 th.entries-header-printindex {text-align:left}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
 th.menu-comment {text-align:left}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 th.sections-header-printindex {text-align:left; padding-left: 1em}
 ul.mark-bullet {list-style-type: disc}
 ul.mark-minus {list-style-type: "\2212"}
@@ -7964,48 +7971,48 @@ Previous: <a href="#chapter" accesskey="p" 
rel="prev">chapter</a>, Up: <a href="
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Next</td>
-    <td>Next section on same level</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section on same level</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Prev</td>
-    <td>Previous section on same level</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section on same level</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"></td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Contents] </td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [Index] </td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"> [ ? ] </td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
 
diff --git a/tp/tests/tex_html/res_parser/formatting_singular/sing_abt.htm 
b/tp/tests/tex_html/res_parser/formatting_singular/sing_abt.htm
index 3715219ca0..cd2039bcd1 100644
--- a/tp/tests/tex_html/res_parser/formatting_singular/sing_abt.htm
+++ b/tp/tests/tex_html/res_parser/formatting_singular/sing_abt.htm
@@ -873,8 +873,15 @@ g-roupe
 
 <style type="text/css">
 <!--
-td.button-direction-about {text-align:center}
-td.name-direction-about {text-align:center}
+table.direction-about {border-collapse: collapse}
+td.button-direction-about {text-align: center; border-width: thin; 
border-right-style: solid}
+td.description-direction-about {border-width: thin; border-right-style: solid; 
border-left-style: solid}
+td.example-direction-about {border-width: thin; border-left-style: solid}
+td.name-direction-about {text-align: center; border-width: thin; 
border-right-style: solid; border-left-style: solid}
+th.button-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid}
+th.description-direction-about {border-width: thin; border-bottom-style: 
solid; border-right-style: solid; border-left-style: solid}
+th.example-direction-about {border-width: thin; border-bottom-style: solid; 
border-left-style: solid}
+th.name-direction-about {border-width: thin; border-bottom-style: solid; 
border-right-style: solid; border-left-style: solid}
 -->
 </style>
 
@@ -926,66 +933,66 @@ and is best  viewed with a 16 or 18 point screen font.
 <p>
   The buttons in the navigation panels have the following meaning:
 </p>
-<table border="1">
+<table class="direction-about">
   <tr>
-    <th> Button </th>
-    <th> Name </th>
-    <th> Go to </th>
-    <th> From 1.2.3 go to</th>
+    <th class="button-direction-about"> Button </th>
+    <th class="name-direction-about"> Name </th>
+    <th class="description-direction-about"> Go to </th>
+    <th class="example-direction-about"> From 1.2.3 go to</th>
   </tr>
   <tr>
     <td class="button-direction-about"><img 
src="../singular_images/a_left.png" alt="Back" align="middle"></td>
     <td class="name-direction-about">Back</td>
-    <td>Previous section in reading order</td>
-    <td>1.2.2</td>
+    <td class="description-direction-about">Previous section in reading 
order</td>
+    <td class="example-direction-about">1.2.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"><img 
src="../singular_images/a_right.png" alt="Forward" align="middle"></td>
     <td class="name-direction-about">Forward</td>
-    <td>Next section in reading order</td>
-    <td>1.2.4</td>
+    <td class="description-direction-about">Next section in reading order</td>
+    <td class="example-direction-about">1.2.4</td>
   </tr>
   <tr>
     <td class="button-direction-about"><img 
src="../singular_images/a_leftdouble.png" alt="FastBack" align="middle"></td>
     <td class="name-direction-about">FastBack</td>
-    <td>Beginning of this chapter or previous chapter</td>
-    <td>1</td>
+    <td class="description-direction-about">Beginning of this chapter or 
previous chapter</td>
+    <td class="example-direction-about">1</td>
   </tr>
   <tr>
     <td class="button-direction-about"><img 
src="../singular_images/a_rightdouble.png" alt="FastForward" 
align="middle"></td>
     <td class="name-direction-about">FastForward</td>
-    <td>Next chapter</td>
-    <td>2</td>
+    <td class="description-direction-about">Next chapter</td>
+    <td class="example-direction-about">2</td>
   </tr>
   <tr>
     <td class="button-direction-about"><img src="../singular_images/a_up.png" 
alt="Up" align="middle"></td>
     <td class="name-direction-about">Up</td>
-    <td>Up section</td>
-    <td>1.2</td>
+    <td class="description-direction-about">Up section</td>
+    <td class="example-direction-about">1.2</td>
   </tr>
   <tr>
     <td class="button-direction-about"><img src="../singular_images/a_top.png" 
alt="Top" align="middle"></td>
     <td class="name-direction-about">Top</td>
-    <td>Cover (top) of document</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Cover (top) of document</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"><img 
src="../singular_images/a_tableofcon.png" alt="Contents" align="middle"></td>
     <td class="name-direction-about">Contents</td>
-    <td>Table of contents</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Table of contents</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"><img 
src="../singular_images/a_index.png" alt="Index" align="middle"></td>
     <td class="name-direction-about">Index</td>
-    <td>Index</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">Index</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
   <tr>
     <td class="button-direction-about"><img 
src="../singular_images/a_help.png" alt="About" align="middle"></td>
     <td class="name-direction-about">About</td>
-    <td>About (help)</td>
-    <td> &nbsp; </td>
+    <td class="description-direction-about">About (help)</td>
+    <td class="example-direction-about"> &nbsp; </td>
   </tr>
 </table>
reply via email to
[Prev in Thread] Current Thread [Next in Thread]