Drawing tables (boxes) using UTF-8 symbols

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).

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andrii Abramov

Andrii Abramov

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