Home/ Questions/Q 8521177
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T06:44:47+00:00

Drawing very simple tables with little rectangles as icons for a simple bar chart:

  • 0

Drawing very simple tables with little rectangles as icons for a simple bar chart:

http://jsfiddle.net/AbTX9/1/

Would like to allow user to copy the table to clipboard (e.g. to a doc, spreadsheet) with both the numbers and if possible, the rectangles.

I like how the natural select-copy-paste works well for the numbers in the table, copying them intelligently to Excel, PPT, Word etc. as HTML and Notepad/TextEdit as plain text.

But might there be a way to copy the bars as well? I’m mentally imagining it pasting as an HTML table that looks kind of like this, or to Excel with a shape in the corresponding cells. I tried three ways:

  • Div: <div style="width: 100px; height: 10px; background-color:#AAA;"></div>
  • Img: <img src="http://www.moneteam.com/images/BlueRectangle.jpg" height="12px" width="100px"/>
  • SVG: <rect x=80 y=10 width=100 height=12 fill="#A44"/>

With Div and Img, the numbers copy great as tables, but not the bars. With SVG again just the numbers copy, but just as a line of numbers.

Mainly looking for a hint for a likely workable approach, not expecting someone to program it for me. If its not possible to do that, that would be good to know as well.

Unlike most of the threads I can find, ctrl+C/cmd+C is fine, it needn’t be programmatically placed on clipboard. And if it didn’t work on every last browser that could be okay too.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you can try this….

        <h1>Table with bars</h1>
<table style="width:250px; background-color: #EEE;">
<tr><td width="49">apples</td>
    <td colspan="4" bgcolor="#FF0000"></td>
    <td width="21"></td>
    <td width="41">100</td>
    </tr>
<tr><td>bananas</td>
    <td colspan="3" bgcolor="#FF0000"></td>
    <td width="31"></td>
    <td></td>
    <td>60</td></tr>
<tr><td>cherries</td>
    <td width="27" bgcolor="#FF0000">&nbsp;</td>
    <td width="24">&nbsp;</td>
    <td width="25">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>36</td>
  </tr>
<tr><td>dates</td>
    <td colspan="3" bgcolor="#FF0000">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>20</td>
  </tr>
</table>

    u can try to apply some css property to make it beautiful 🙂

    • 0