Basic Usage

Here's simple examples of how to create a basic table using SVG Table:

Basic Demo

Here is a simple 3x3 table with with colSpan and rowSpan

Header 1Col SpanRow 1, Cell 1Row SpanmultilinesupportRow 1, Cell 3Row 2, Cell 1Row 2, Cell 3

Basic Demo (HTML form)

You can do the same thing using HTML form.

Header 1Col SpanRow 1, Cell 1Row SpanmultilinesupportRow 1, Cell 3Header 1Col Span

Just using text array makes cells

Instead of writing all the objects, you can simply use string array to make columns. it will save a lot of time. Of course, you can add attributes more if you want.

cell1cell2line2cell3cell4contentcell7contentcell9

Rounded Table? No problem!

Rounded table is now supported! Easily add rx,ry and it will show rounded tables! (React/Solid - from 3.2.0, Vanilla - from 3.1.0)

Header 1Col SpanRow 1, Cell 1Row SpanmultilinesupportRow 1, Cell 3Row 2, Cell 1Row 2, Cell 3

Standalone SVG

To use the real SVG’s vector drawing power, try to add standalone props. Your table will be resized depends on its container in a HTML element. You also can copy & paste the svg code to create a new .svg file without issue. if you don’t use standalone prop, xmlns="http://www.w3.org/2000/svg" attribute will not be added, which causes the browser read the file as a normal XML file.

Header 1Col SpanRow 1, Cell 1Row SpanmultilinesupportRow 1, Cell 3Row 2, Cell 1Row 2, Cell 3

Gaps between columns and rows

You can easily add gaps between rows or columns.

Header 1Header 2Row1, Cell1Row 1, Cell 2Row 1, Cell 3Row 2, Cell 1Row 2, Cell 3