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
#
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
#
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
#
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
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.
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
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
#
Table 7:
Table with collapsed borders
| Name |
ID |
Favorite Color |
| Jim |
00001 |
Blue |
| Sue |
00002 |
Red |
| Barb |
00003 |
Green |
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
Highlighting on Hover
#
Highlight Cell
#
Table 11:
Table where the hovered-upon cell highlights
Highlight Row
#
Table 12:
Table where the hovered-upon row highlights
Blur non-hovered Rows
#
Let’s-go-ballistic-with-CSS Edition 😄
Table 13:
Table where rows except the hovered-upon get blurred
Page (Debug)
Page Params (Debug)
| Key | Type | Value |
|---|
| categories | []string |
"upstream"
|
| draft | bool |
false
|
| iscjklanguage | bool |
false
|
| lastmod | time.Time |
2022-04-04 11:50:17 -0400 -0400
|
| tags | []string |
"table"
"attr_html"
"attr_css"
"css"
|
| title | string |
"Table Styling with ATTR_HTML and ATTR_CSS"
|
File Object (Debug)
| FileInfo Variable | Value |
|---|
| 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"
|