Improving Text Area Aesthetics with HTML Tables

  • Have you started to get comfortable with HTML and want to branch out a bit more?
  • Would you like another way to improve the appearance of text areas?
  • Do you have content that would look better organized as a table?

I recently built a text area with 16 different property controls used to generate a custom type curve.  My first attempt to organize the content turned out UGLY.  Anyone who has worked with Spotfire text areas for more than 10 minutes can tell you basic text area functionality doesn’t get the job done.  Instead, learn a little bit of HTML and CSS to beautify the space.  I had to think a bit before figuring out exactly what would add the necessary aesthetic.  In this case, an HTML table fits the bill quite nicely, and they are very easy to build.  If you are still new to HTML, try starting with part 1 of my HTML series here.

This post will showcase what I built for my use case.  Then, I’ll use a simpler example to explain HMTL table coding before circling back to the code used to build my table.

My HTML Table

On one hand, I wish I had taken before and after photos to compare and contrast, but as previously mentioned, my first attempt was hideous.  In any event, here is the final result.  Gray isn’t particularly exciting, but it fit my theme and color scheme.  You may customize the color with the style attribute and be as flashy as your users will tolerate.

Coding a HTML Table

HTML tables require 3 tags, and a fourth is optional.

  1. <table> — creates the table
  2. <tr> — starts each row
  3. <th> — defines the table header (optional)
  4. <td> — defines each cell in the table

Walk thru each line of the code with the guide below to explain.

  1. The <table> tag creates the table.
  2. The <tr> opening tag denotes the start of the first row.
  3. The <th> opening and </th> closing tags denote each cell of the first row because the first row of the table is a header.
  4. The </tr> end tag completes the header column row.
  5. The <tr> tag denotes the start of the second row.
  6. The <td> opening and </td> closing tags define each cell of the second row, rather than the <th> tag since it’s not a header row.
  7. The row is closed with the </tr> end tag.
  8. I should have closed with the </table> end tag, but because this was a simple example, I got away with it.

HTML Table Attributes

Now, let’s go back to the code that generated my “gray” table.  It contains all the tags mentioned above, as well as the <tbody> tag.  I learned this code from a coworker, and the <tbody> tag is not actually required.  It’s generally used in conjunction with other tags to group content, but in my example, removing it has no impact.  I also make use of the style attribute, as well as tag attributes to format the following….

  • Border
  • Padding
  • Cell Spacing
  • Amount of space the table should take up in the text area
  • Background color
  • Text alignment

Now, there are other discrepancies as well.

  1. The <th> tag is not used to define a table header.  Instead, I forgo a header and just format the first cell with the <h2> tag.
  2. I only define one cell of each row and use the <p> tag instead.  I do this because I want each property control to be on its own line, and this was an easy way to accomplish that.  I created three sections with the <tr> tag and then formatted the section, but it’s still a table.
  3. All three sections or rows utilize the same code.

And now you have a good idea of how to create HTML tables in Spotfire text areas!

Spotfire Version

Spotfire 7.12

Feeback

I would really like to improve the content delivered to users and readers.  If you have any feedback on how easy or difficult my posts are to follow, please use the comments section.  Thanks!  (Julie)

Guest Spotfire blogger residing in Whitefish, MT.  Working for SM Energy’s Advanced Analytics and Emerging Technology team!

Leave a Comment

Your email address will not be published. Required fields are marked *