Hi @samuelbras,
So I assume this table is surrounded by other shapes, and is part of a big drawing? Does it contain a lot rows? Because I am not sure how it will behave/look like when you have a larger table, that doesn't fit on the screen (and scrollbars are needed).
I don't think there is anything automatic available in SVG to accomplish this. Some ideas:
-
The most automatic pure SVG way of working, seems to me that you apply a fill pattern on a shape. Like a grid, but with larger cells. Then you have your lines already out of the box, but of course you still need to position your texts at the correct coordinates. But absolutely not sure whether this is a good way to go...
-
As @Steve-Mcl already explained, you can embed a standard html table inside an SVG drawing. The values of that foreign table element can be filled via an input msg (see here). And here you can find some of my experiments with foreign objects in the SVG node, although I have never used a table as foreign object myself ...
-
And if you want to do it in pure SVG, you can also write some Javascript to calculate all the shapes to draw a table. But seems a lot of work to me. If you want to go that way, you might find some examples on the web to get you started (e.g. here).
So I think you first need to decide which way you want to go. Personally I think the html table inside the foreign object might be most automatic way of working. Because the html table component will do a lot of the work for you.
We don't know how the entire SVG drawing will look like, or how the table will be part of it (e.g. scrollbar when the table grows). So I'm afraid you are the only that can determine which will be the best way to go...
Bart
