Table Styling

Classic ox-html allows setting table attributes directly using #+attr_html. But specifying the attributes directly in the <table> tag is admonished in HTML5 .. and so Hugo/Blackfriday do not allow any way to directly insert attributes inside the <table> tag.

So a workaround is used by ox-hugo.. it wraps the tables with <div> tags with classes, which a user can then use to style the tables using CSS.. just as recommended by HTML5 😄.

ox-hugo can style different tables in different ways on the same page, with the help of #+attr_html and #+attr_css (introduced in ox-hugo) attributes.

1. #+attr_html is used to assign one or more classes to a table.

   #+attr_html: :class sane-table
   

   • Wraps the table in <div> tags with sane-table class.
   • Sets style from #+attr_css, if present, for .sane-table table scope.

   or

   #+attr_html: :class zebra-striping sane-table
   

   • Wraps the table in <div> tags with zebra-striping and sane-table classes.
   • Sets style from #+attr_css, if present, only for the .zebra-striping table scope i.e. only for the first class listed in that attribute. Specifying multiple classes to a table is useful if you want that table to inherit the styling from CSS rules for multiple classes.

2. #+attr_css is used to assign the specified styles to the class of the table it precedes.

   Examples:

   #+attr_css: :width 80%
   

   #+attr_css: :text-align left
   

   • If #+attr_html is used to specify the table class, the style is applied to the first of the list of classes (as explained above).
   • If #+attr_html is not used to set a custom class name for the table, the class name is auto-derived..
     • If the table #+caption is present, the class name is table-N where “N” is the Nth captioned table on that page.
     • If the table is not captioned, the class name is always table-nocaption. So.. if you want to have different styling for different tables, make sure that you either set their custom class name using #+attr_html, or caption them.

• All tables exported with the <div> tags have the class ox-hugo-table. This can be useful if you want to set a common style for all those tables.

• #+attr_css applies styling only to the .CLASS table scope. So if you want more styling i.e. for other elements like td, tr, etc, you would need to do that in an #+export_begin html block.

  Example:

  #+begin_export hugo
  <style>
  .my-table th,
  .my-table td {
      padding: 20px;
      text-align: left;
  }
  </style>
  #+end_export
  #+caption: Table with verbatim CSS
  #+attr_html: :class my-table
  | h1  | h2  | h3  |
  |-----+-----+-----|
  | abc | def | ghi |
  

You can find many examples of table styling here:

Credit: Guide to styling tables in HTML5-friendly manner — css-tricks.com

Hiding table caption numbers #

The “Table <number>:” part of the table captions can be hidden by adding this to the CSS:

.table-number {
  display: none;
}