NibCSS

Tables & SVG

Table layout and borders — and how to style SVG icons.

1 min readv1
HTML
PlanPrice
Starter$0
Team$19
<table nib="bdcps=collapse; fts=13px; w=280px">
  <tr><th nib="txa=left; p=6px 10px; bdb=2px solid #cbd5e1">Plan</th><th nib="txa=right; p=6px 10px; bdb=2px solid #cbd5e1">Price</th></tr>
  <tr><td nib="p=6px 10px; bdb=1px solid #e2e8f0">Starter</td><td nib="p=6px 10px; bdb=1px solid #e2e8f0; txa=right">$0</td></tr>
  <tr><td nib="p=6px 10px">Team</td><td nib="p=6px 10px; txa=right">$19</td></tr>
</table>

Table shorthands#

Shorthand

CSS property

tbl

table-layout

bdcps

border-collapse

bdspc

border-spacing

cap

caption-side

ecr

empty-cells

SVG#

fill and stroke are not recognised by the engine yet. Icons that use currentColor — almost every icon set — follow the text colour, so style them with cl:

HTML
<button nib="d=inline-flex; ali=center; g=6px; p=8px 12px; bdrd=8px; bd=none; bgc=#EEEFFE; cl=#3A3DBF; cur=pointer; hover:cl=#16a34a">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5"/></svg>
  Hover me
</button>

Next steps#