beautiful-web-ascii-tables
Drop data-ascii on any <table>. The library renders ASCII-art over it, resizing live as the layout changes via ResizeObserver. Select-all + copy gives plain-text ASCII you can paste anywhere. Github/Docs
Resize Demo
The ASCII art re-renders on every pixel of size change. Drag the corner of the box below.
[Show Source Table: Off]↔ drag the bottom-right corner to resize
| Expression | ns/call | Speedup | MAE |
|---|---|---|---|
| s + (abs((5.72-m)+x) * ... greater(x+1.00,m) ...) | 4.59 | 5.3x | 1.04e-3 |
| s + abs(((5.72-m)+x) * ... greater(x+0.88,m) ...) | 4.86 | 5.0x | 1.04e-3 |
| (... abs((5.5-m)+x) ... greater(x+1.0,m) ...) + s | 5.45 | 4.5x | 9.49e-4 |
| Baseline (2x std::exp) | 24.40 | 1x | -- |
Style Gallery
All 12 built-in border styles — same data, different characters. Click *copy* on any card to grab the data-ascii attribute.
Try It Yourself
Enter comma-separated rows, pick a border style, and see your table render live.
Border style
Live preview
Your table will appear here.
Quick Start
<!-- 1. Load jQuery + plugin -->
<script src="https://cdn.jsdelivr.net/gh/dleiferives/beautiful-web-ascii-tables@trunk/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dleiferives/beautiful-web-ascii-tables@trunk/ascii-table.css">
<script src="https://cdn.jsdelivr.net/gh/dleiferives/beautiful-web-ascii-tables@trunk/ascii-table.js"></script>
<!-- 2. Add data-ascii to any table -->
<table data-ascii="classic">
<thead><tr><th>Name</th><th>Role</th><th>Score</th></tr></thead>
<tbody>
<tr><td>Alice</td><td>Engineer</td><td>98</td></tr>
<tr><td>Bob</td><td>Designer</td><td>87</td></tr>
</tbody>
</table>
Docs
Styles
All 12 built-in border styles with ASCII previews Custom Styles
Define your own border spec with
For dynamic tables created after page load Global Defaults
Override style and header flag for all tables on the page Layout Algorithm
How font size and column widths are computed Style Spec Reference
Flex/grid layouts, themes, copy-paste, dynamic tables CSS Classes
Style the overlay with your own CSS rules
All 12 built-in border styles with ASCII previews Custom Styles
Define your own border spec with
$.fn.asciiTable.styles
Manual InitFor dynamic tables created after page load Global Defaults
Override style and header flag for all tables on the page Layout Algorithm
How font size and column widths are computed Style Spec Reference
lineSpec and cellSpec field definitions
Tips & TricksFlex/grid layouts, themes, copy-paste, dynamic tables CSS Classes
Style the overlay with your own CSS rules