1

In my website, i'm presenting a basic table that has some action items for each row.

enter image description here

X and Y must be replaced by two words that are trademarked and the words are actually long.

Say X is "YourHoroscope" and Y is "YearForecast".

What are the best ways I can elegantly put these column headers without causing the table to look weird with elongated columns for the small icons.

1

3 Answers 3

3

Well, I think you have a few choices:

  1. If you have an icon to accompany the trademarks, you could attempt in place of the labels and have the text appear as a tooltip when the user hovers over the icon-headers.

  2. Depending on the width, you could put the text in there as is, but with a ellipsis, again with a tooltip if the text is cutoff

  3. You could put vertical labels, which may prove difficult to read

  4. As with the days of old, you could put slanted headers, which are the same idea as vertical headers, but provide better readability:

    enter image description here

1
  • Thanks. I like this answer, since it gave me multiple choices and ideas to think about. Apr 10, 2014 at 13:34
2

I would do an icon that represents X and Y that on hover would show a tooltip with the name. That way you could keep your thin column style.

It could look something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1
  • Unfortunately the trademarks dont come with icons. Or else I'll need to create icons and trademark them as well. Apr 10, 2014 at 13:33
0

Is a table the best way to present this data? Can you give an example of what would be in the first two columns? You may be able to present the X and Y choices below each data entry instead of in their own columns.

You could use icons for the X and Y and put the trademarked names in the HTML "title" attribute so that the names are visible on mouseover and read by a screen reader. Or you could use the trademarked words and use a slightly smaller font size. Arial/Helvetica is a narrower font than Verdana and takes up less space, so keep the font you use in consideration. You can ask about fonts on the Graphic Design Stack Exchange.

1
  • Thanks about info on the font and screen reader stuff. I would have voted up your answer, but i'm new here and dont have the reputation I need. Apr 10, 2014 at 13:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.