A few boxes drawn with Unicode box drawing characters:
╔═╦═╗
╠═╬═╣
║ ║ ║
╚═╩═╝
┏━┳━┓
┣━╋━┫
┃ ┃ ┃
┗━┻━┛
┌─┬─┐
├─┼─┤
│ │ │
└─┴─┘
╭─╥─╮
╞═╬═╡
│ ║ │
╰─╨─╯
No idea WTF this is useful for, but whatever.
╳
╱ ╲
╲ ╱
╳
╱ ╲
▏ ▕
▔▔▔
─
━
│
┃
┄
┅
┆
┇
┈
┉
┊
┋
┌
┍
┎
┏
┐
┑
┒
┓
└
┕
┖
┗
┘
┙
┚
┛
├
┝
┞
┟
┠
┡
┢
┣
┤
┥
┦
┧
┨
┩
┪
┫
┬
┭
┮
┯
┰
┱
┲
┳
┴
┵
┶
┷
┸
┹
┺
┻
┼
┽
┾
┿
╀
╁
╂
╃
╄
╅
╆
╇
╈
╉
╊
╋
╌
╍
╎
╏
═
║
╒
╓
╔
╕
╖
╗
╘
╙
╚
╛
╜
╝
╞
╟
╠
╡
╢
╣
╤
╥
╦
╧
╨
╩
╪
╫
╬
╭
╮
╯
╰
╱
╲
╳
╴
╵
╶
╷
╸
╹
╺
╻
╼
╽
╾
╿
Doesn't really function for me the best, but is a monospace font on ChromeOS & Fedora Linux. I have a way to fix this; go to your browser settings and look for an option to change fonts. Then, configure it to your will. Try using a pure monospace font like "Agave" or just "Monospace" if that helps. Then, try rendering it again and I think it'll work.
just putting this here since i'll need it later
╭─╥─╮ ╞═╬═╡ │ ║ │ ╰─╨─╯
┏─┯━┳━┓╔══╗
┃ ├─╂─┨║ ║
┃ │ ┗━┛╚══╝
┖─┘
btw, what your experiencing is the browser shortening double spaces. so whenever you use more than one space in HTML the browser shortens it to just one unless you use no-break space
There actual use
I'm not sure if you're using the Noto Mono font, but I was and had the exact same problem getting these Unicode box-drawing characters to line up. Noto Mono is fabulous for rendering almost any kind of glyph, but despite the name, it's technically not a monospaced font. See notofonts/latin-greek-cyrillic#234.
Anyway, I tried other monospaced fonts (e.g. Liberation Mono) and got it to work as advertised.
game board for tic-tac-toe