← render gallery

gridwell HTML vs SVG

64 tables (the corpus and the gt references) · default writer options

Left: gridwell's HTML (whose look is within ~1% of gt; see the gt page). Middle: gridwell's SVG for the same table. Both are opened as bare pages in the same browser (the SVG inline), with no harness styling. Right: differing pixels in red; the score is the share of differing pixels (lower is closer). Report only: nothing here fails CI.

Mean differing pixels: 18.1%

casehtmlsvgdiff
minimal-1x1
Smallest valid table: one header, one body cell
17.4% differ
html 122×172 · svg 123×161
plain-3x3
Baseline 3x3 table with a header row
13.4% differ
html 142×326 · svg 146×304
single-column
One column, several body rows
16.3% differ
html 150×326 · svg 150×304
single-row
One body row across several columns
14.9% differ
html 186×172 · svg 192×161
no-header
Body only — no title, subtitle, or column-label row
11.2% differ
html 98×180 · svg 96×169
header-only-empty-body
Column labels but zero body rows
19.2% differ
html 160×168 · svg 157×154
wide-50-cols
50 columns to stress horizontal layout
19.9% differ
html 3766×326 · svg 3718×304
tall-100-rows
100 body rows to stress vertical layout / paging
13.9% differ
html 310×3171 · svg 304×7306
colspan-basic
A spanner over two of three columns
18.3% differ
html 256×316 · svg 253×294
colspan-full-width
A spanner across every column
16.8% differ
html 300×239 · svg 287×223
rowspan-basic
A stub cell merged across two body rows
17.1% differ
html 262×326 · svg 261×304
nested-spanners
Two-level header: spanners over sub-spanners
17.0% differ
html 284×316 · svg 276×294
mixed-spans
A body cell spanning two rows and two columns
13.5% differ
html 342×326 · svg 327×304
single-stub
A single stub column of row labels
17.9% differ
html 374×249 · svg 374×233
multi-col-stub
Two stub columns
18.6% differ
html 460×249 · svg 466×233
two-row-groups
Two labeled row groups
20.8% differ
html 284×563 · svg 280×525
many-row-groups
Five labeled row groups
17.9% differ
html 200×1268 · svg 202×1180
group-summary
Per-group summary rows
16.2% differ
html 308×721 · svg 300×672
grand-summary
A trailing grand-summary group
18.4% differ
html 302×413 · svg 294×386
footnote-single
One footnote mark and definition
17.2% differ
html 366×308 · svg 358×286
footnote-multiple
Several marks referencing several definitions
19.3% differ
html 296×363 · svg 295×336
source-notes
Two source notes in the footer
20.1% differ
html 386×286 · svg 378×265
footnote-in-stub
A footnote mark inside a stub cell
19.6% differ
html 400×308 · svg 394×286
footnote-and-source
Footnotes and source notes together
17.8% differ
html 304×363 · svg 302×336
borders-solid
Solid borders on all cells
19.4% differ
html 138×211 · svg 142×195
borders-dashed
Dashed borders
19.7% differ
html 138×211 · svg 142×194
borders-double
Double borders
19.2% differ
html 138×211 · svg 142×195
striping-basic
Zebra row striping
12.7% differ
html 190×403 · svg 188×376
cell-colors
Foreground and background cell colors
21.3% differ
html 224×249 · svg 223×233
style-composition
A composition extending a base style
22.5% differ
html 252×249 · svg 251×233
conditional-striping
Row-parity conditional style
22.3% differ
html 228×403 · svg 221×376
column-widths-mixed
px, %, fr, and auto widths mixed
16.8% differ
html 650×172 · svg 620×161
min-max-width
min-width / max-width constraints
16.9% differ
html 722×172 · svg 618×199
fixed-table-width
A fixed overall table width
10.3% differ
html 820×172 · svg 820×161
hidden-columns
A hidden column between visible ones
12.6% differ
html 308×249 · svg 308×233
narrow-wide-mix
A very narrow column beside a wide one
18.1% differ
html 652×249 · svg 626×233
styled-text
Inline styled_text runs
18.1% differ
html 434×172 · svg 443×161
text-format
Underline, strike-through and font sizes, in cells and inline runs
15.1% differ
html 772×492 · svg 734×456
line-breaks
Hard line breaks within cells
18.5% differ
html 326×258 · svg 322×236
inline-image
An inline image in a cell
21.4% differ
html 216×187 · svg 208×161
raw-html
Raw HTML markup content
18.4% differ
html 360×172 · svg 350×161
typed-values
Cells carrying typed_value + sort_key
16.9% differ
html 344×249 · svg 342×233
mixed-markup
Text, styled_text, break, and mark in one cell
21.7% differ
html 364×274 · svg 365×252
align-left-center-right
Three columns, one per alignment
15.5% differ
html 318×249 · svg 312×233
decimal-char-align
Decimal (char) alignment on a numeric column
15.9% differ
html 252×326 · svg 239×304
per-column-align
Distinct alignment per column
17.0% differ
html 580×172 · svg 555×161
numeric-right-align
Right-aligned numeric columns
19.8% differ
html 332×249 · svg 326×233
unicode-cjk
CJK characters in title and cells
24.0% differ
html 206×339 · svg 207×299
unicode-rtl
Right-to-left (Arabic/Hebrew) text
14.3% differ
html 216×249 · svg 306×233
unicode-emoji
Emoji in cells
18.1% differ
html 232×326 · svg 309×304
combining-chars
Combining diacritical marks
18.5% differ
html 316×326 · svg 311×304
long-word-wrap
A very long unbreakable token
8.7% differ
html 1246×215 · svg 460×349
regional-sales
Groups, spanners, rowspan, summary, footnote, source note
19.7% differ
html 650×949 · svg 640×876
financial-report
Formatted currency report with striping and totals
22.4% differ
html 482×539 · svg 460×498
scientific-table
Measurements with units, footnotes, and right alignment
19.8% differ
html 694×515 · svg 671×474
gt-demographics
gt reference: Clinical demographics (t14_1_1): row groups, stub, a spanner, a footnote and a source note
16.3% differ
html 1054×1261 · svg 1037×1166
gt-exibble_basic
gt reference: gt(exibble) with no options: gt's default look for every column type
19.7% differ
html 1438×711 · svg 1412×662
gt-groups_and_stub
gt reference: Row groups and a stub (exibble with rowname_col and groupname_col)
16.6% differ
html 702×871 · svg 691×811
gt-nested_spanners
gt reference: Two levels of spanners over formatted numbers
16.2% differ
html 938×691 · svg 921×642
gt-adjacent_spanners
gt reference: Two spanners side by side: their rules have a gap between them and run to the table's edges
16.9% differ
html 284×316 · svg 276×294
gt-summary_rows
gt reference: Group summary rows and a grand summary
17.5% differ
html 582×1116 · svg 570×1039
gt-tab_style
gt reference: tab_style(): fills, bold, colored text, and a styled column label
24.5% differ
html 485×480 · svg 491×447
gt-striped_theme
gt reference: opt_stylize() theme with row striping
43.1% differ
html 622×622 · svg 609×585
gt-notes_and_marks
gt reference: Title, subtitle, footnotes on several locations, and source notes
17.2% differ
html 510×810 · svg 505×743