.Kind (page): .Type (posts) / .Layout ()
Bundle: n/a (regular page)
[ categories | tags | search ]
ox-hugo Test Site

This is the test site for the ox-hugo package for Emacs/Org-mode.

It is updated automatically after each commit to the ox-hugo repo. It was last updated on Jan 10, 2019 18:59 UTC.


This page was created/modified in commit c211999 "Make the table anchors more readable" on 2018-09-07.
Markdown source of this page

Table Styling with ATTR_HTML and ATTR_CSS

categories: upstream

tags: table attr_html attr_css css


Description/Summary

This table styling feature overcomes a known limitation in Hugo/Blackfriday (Blackfriday Issue #404) that doesn’t allow wrapping Markdown elements with <div> tags (so that a user can assign classes, etc. to those div blocks). So this feature had to be implemented at the expense of a nasty hack demonstrated here. HTML5 does not allow align, width, etc. attributes within the table tag [Ref]. So instead ox-hugo simply wraps the table with a div with a class.


Content

This table styling feature overcomes a known limitation in Hugo/Blackfriday (Blackfriday Issue #404) that doesn’t allow wrapping Markdown elements with <div> tags (so that a user can assign classes, etc. to those div blocks).

So this feature had to be implemented at the expense of a nasty hack demonstrated here.


HTML5 does not allow align, width, etc. attributes within the table tag [Ref]. So instead ox-hugo simply wraps the table with a div with a class. The table can then be customized using CSS, either via the #+attr_css attribute above the tables, or by putting verbatim CSS in #+begin_export html blocks. See below examples.

Table with only the class specified

h1 h2 h3
abc def ghi

Above table is wrapped in a my-table class. Just doing that won’t bring any presentation changes to the table.. you’d need to add some CSS that customizes .my-table table.

Table with only a CSS attribute specified

h1 h2 h3
abc def ghi

Above table get wrapped in the auto-generated class table-nocaption. The specified CSS attribute is auto-set for .table-nocaption table.

Table with both class and CSS attribute specified

h1 h2 h3
abc def ghi

Above table get wrapped in the specified class my-table-2. The specified CSS attribute is auto-set for .my-table-2 table.

Table with caption, and CSS attributes specified

Table 1: Table with caption, with left-aligned text
h1 h2 h3
abcdefgh ijklmnop qrstuvwx

Above table get wrapped in the auto-generated class table-1 (“1”, because this is the first table with a caption on this page.). The specified CSS attribute is auto-set for .table-1 table.

Table 2: Table with caption, with right-aligned text
h1 h2 h3
abcdefgh ijklmnop qrstuvwx

Table 3: Table with caption, with center-aligned text
h1 h2 h3
abcdefgh ijklmnop qrstuvwx

Table with caption, and both class and CSS attributes specified

Table 4: Table with caption, class and CSS attributes specified
h1 h2 h3
abc def ghi

Above table get wrapped in the specified class my-red-bordered-table. The specified CSS attribute is auto-set for .my-red-bordered-table table.

Here’s another table with the exact same class as that of the above table. So the CSS properties do not need to be specified again.

Below table will also show up with a red border.

h1 h2 h3
jkl kmo pqr

Table with verbatim CSS

There could be times when the CSS couldn’t be simply specified using the #+attr_css attribute. In those cases, simply set the table class using #+attr_html, and put the CSS in the #+begin_export html block.

Table 5: Table with verbatim CSS
h1 h2 h3
abc def ghi

More table styling examples

Source: css-tricks.com

Basic styling

Uncollapsed borders

Table 6: Table with uncollapsed borders
Name ID Favorite Color
Jim 00001 Blue
Sue 00002 Red
Barb 00003 Green

Collapsed borders

Two Axis Tables

Table 8: Table with 1st row and 1st column highlighted
1 2 3 4 5
2 4 6 8 10
3 6 9 12 15
4 8 12 16 20
5 10 15 20 25

Sane Table

Ref

Table 9: Sane Table — with minimal styling
Name ID Favorite Color
Jim 00001 Blue
Sue 00002 Red
Barb 00003 Green

Zebra Striping

Table 10: Table with zebra striping
Last Name First Name Email Due Web Site
Smith John jsmith@gmail.com $50.00 http://www.jsmith.com
Bach Frank fbach@yahoo.com $50.00 http://www.frank.com
Doe Jason jdoe@hotmail.com $100.00 http://www.jdoe.com
Conway Tim tconway@earthlink.net $50.00 http://www.timconway.com

Highlighting on Hover

Highlight Cell

Table 11: Table where the hovered-upon cell highlights
Last Name First Name Email Due Web Site
Smith John jsmith@gmail.com $50.00 http://www.jsmith.com
Bach Frank fbach@yahoo.com $50.00 http://www.frank.com
Doe Jason jdoe@hotmail.com $100.00 http://www.jdoe.com
Conway Tim tconway@earthlink.net $50.00 http://www.timconway.com

Highlight Row

Table 12: Table where the hovered-upon row highlights
Last Name First Name Email Due Web Site
Smith John jsmith@gmail.com $50.00 http://www.jsmith.com
Bach Frank fbach@yahoo.com $50.00 http://www.frank.com
Doe Jason jdoe@hotmail.com $100.00 http://www.jdoe.com
Conway Tim tconway@earthlink.net $50.00 http://www.timconway.com

Blur non-hovered Rows

Let’s-go-ballistic-with-CSS Edition 😄

Table 13: Table where rows except the hovered-upon get blurred
Last Name First Name Email Due Web Site
Smith John jsmith@gmail.com $50.00 http://www.jsmith.com
Bach Frank fbach@yahoo.com $50.00 http://www.frank.com
Doe Jason jdoe@hotmail.com $100.00 http://www.jdoe.com
Conway Tim tconway@earthlink.net $50.00 http://www.timconway.com


Page (Debug)

Page VariableValue
Name "Table Styling with ATTR_HTML and ATTR_CSS"
Title "Table Styling with ATTR_HTML and ATTR_CSS"
ResourceType "page"
Kind "page"
Section "posts"
Draft false
Type "posts"
Layout ""
Permalink "https://ox-hugo.scripter.co/test/posts/table-styling/"
RelPermalink "/posts/table-styling/"
RSSLink ""
Data
KeyTypeValue
Pageshugolib.Pages
NextPageTOC with headings (unnumbered) only till level 2
PrevPageTable caption
NextInSectionTOC with headings (unnumbered) only till level 2
PrevInSectionTable caption

Page Params (Debug)

KeyTypeValue
categories[]string "upstream"
draftbool false
iscjklanguagebool false
lastmodtime.Time 2018-09-07 11:18:22 -0400 -0400
tags[]string "table" "attr_html" "attr_css" "css"
titlestring "Table Styling with ATTR_HTML and ATTR_CSS"

File Object (Debug)

FileInfo VariableValue
UniqueID "7d033d4282481ed7321f27aec499f2f8"
BaseFileName "table-styling"
TranslationBaseName "table-styling"
Lang "en"
Section "posts"
LogicalName "table-styling.md"
Dir "posts/"
Ext "md"
Path "posts/table-styling.md"

This site is generated using the ox-hugo package for Emacs/Org-mode + hugo-bare-min-theme + Hugo 0.54-DEV (commit dff8c199, using Chroma commit d5ca12b) .
[Test Site home | ox-hugo home]