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.

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

  • Thanks. I like this answer, since it gave me multiple choices and ideas to think about. – user1351585 Apr 10 '14 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

  • Unfortunately the trademarks dont come with icons. Or else I'll need to create icons and trademark them as well. – user1351585 Apr 10 '14 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.

  • 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. – user1351585 Apr 10 '14 at 13:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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