Drawing tables (boxes) using UTF-8 symbols

Andrii Abramov
Nov 25, 2021

--

Did you know that you can create fancy tables using UTF-8 symbols? It might be useful, e.g. for drawing structured data in terminal output.

Example for light borders:

┌──────┬──────┐
│ col1 │ col2 │
├──────┼──────┤
│ val1 │ val2 │
└──────┴──────┘

And here is for heavy borders:

┏━━━━━━┳━━━━━━┓
┃ col1 ┃ col2 ┃
┣━━━━━━╋━━━━━━┫
┃ val1 ┃ val2 ┃
┗━━━━━━┻━━━━━━┛

Double-lined border:

╔══════╦══════╗
║ col1 ║ col2 ║
╠══════╬══════╣
║ val1 ║ val2 ║
╚══════╩══════╝

And a special one, heave borders and light separators:

┏━━━━━━┯━━━━━━┓
┃ col1 │ col2 ┃
┠──────┼──────┨
┃ val1 │ val2 ┃
┗━━━━━━┷━━━━━━┛

The proper monospace font set in Terminal application (e.g. iTerms2) renders them just fine:

UTF-8 tables (boxes) rendering in terminals
UTF-8 tables (boxes) rendering in terminals
  • You can find these examples and all UTF-8 bix symbols in this gist.
  • For geeks, UTF symbol range is 9472–9599 (decimal), 2500–257F (hex).

--

--

Andrii Abramov

Fearless engineer, crazy about FinTech, microservices, and functional programming. Currently mastering NestJS & Terraform. https://github.com/aaabramov