This is a simple and quick post on how you can add a table to a widget on your Jazz dashboard. It is not rocket science (in fact it is just simple HTML), but it does allow you to show data that might not normally be available in your Jazz dashboard. If you want to learn more, and do more, with HTML widgets in your dashboards, then I strongly suggest that you visit any one of the various different websites that provide HTML for Beginners types of courses (like w3 schools, HTML.net, HTML dog, Code Academy, or any one of hundreds of other sites).
How do we do this? First go out and create an HTML widget. Now open the HTML widget, and type in a nice heading for your table, something like “My Cool Data in a Table”. Now click on the icon in the upper left of the widget, this will toggle your display from visual to HTML, and you will now see you widget contents in raw HTML format. They will look something like this:
Add the code below to your widget, and get rid of the <div><br><div> elements:
<table style="text-align: left; width: 200px;" border="1"
cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td style="vertical-align: top;">1 </td>
<td style="vertical-align: top;">2 </td>
<td style="vertical-align: top;">3 </td>
</tr>
<tr>
<td style="vertical-align: top;">4 </td>
<td style="vertical-align: top;">5 </td>
<td style="vertical-align: top;">6 </td>
</tr>
<tr>
<td style="vertical-align: top;">7 </td>
<td style="vertical-align: top;">8 </td>
<td style="vertical-align: top;">9 </td>
</tr>
<tr>
<td style="vertical-align: top;">10 </td>
<td style="vertical-align: top;">11 </td>
<td style="vertical-align: top;">12 </td>
</tr>
</tbody>
</table>
Now click on that HTML icon again and you will be toggled back to a visual mode. You will now see your nice pretty table within your widget!
You can now go in and enter data and change the data in each of the individual cells.
What’s Next?
Here are some helpful tips when working with tables in Jazz HTML widgets:
- This is not some Jazz specific capability, it is just simple HTML. If you want to learn more and do more, learn HTML using some of the resources that I linked to at the top of this post.
- To add another row of data, just add a block of HTML at the end of your table, between the last </tr> and the </tbody>.
<tr>
<td style=”vertical-align: top;”>7 </td>
<td style=”vertical-align: top;”>8 </td>
<td style=”vertical-align: top;”>9 </td>
</tr>
- To change the width of your table (the columns will automatically resize based on the contents), just edit the WIDTH parameter in your <table> tag. I used 200px in this example (for 200 pixels). Play around with different table widths, but keep in mind that your audience will use different browsers, and may have different widths for their browsers.
- Each block of data between <td> and </td> represents a single CELL in your table. Each block of data between <tr> and </tr> represents a single ROW in your table. Now you can see how the data is organized in HTML format.
- It is easiest for me to just put in a blank table using HTML, and then go back to the visual editor to fill in the data in the table. Do what is easiest for you, but keep in mind that you can edit the contents of the widget in either mode (visual or HTML).
Dan Toczala's Blog 