Best table layout to compare definitions and examples (text)

Question

I want to present a table that compares correct and incorrect definitions of words, with examples. What is the best table layout for this?

Eg Too Correct: More than expected; also. Example: I, too, had too much. Incorrect: The number 2. Example: There were too people.

I think two columns are appropriate (not a column for the word) so it will be easier to read on small screens. However, is it best to put the examples in a separate row, should they go on the second column; should the correct definition and example all be in one column cell or is it better to put it across a single row - maybe not even use a table? What about colours of the table and/or text? What is easiest for reading?

What is best?

Answer 1

I wouldn't overcomplicate things. Many language dictionaries use a convention that people will generally recognize:

or alternatively

If you wanted to center the word "Too" as it's own row above instead of making it a column on the left, that could work too. But most mobile devices should be able to display the example above just fine (three columns with Twitter Bootstrap).

Answer 2

If you're very concerned about narrow devices, then stack each set in 3 rows: word, correct def, incorrect def. And if you're concerned with people getting it right (ESL perhaps?), you should supply several correct and incorrect usages so that people can extract the invariance, something that's usually hard to do from one example each way.

For wider screens, put the word in a row that spans both columns, and again preferably supply several examples, contrasting them from side to side if possible.

Color can be anything you like, but be sure not to use color as the only way to tell which are the correct ones, since many people have imperfect color perception.

Answer 3

Side-by-side comparison is best (2 columns). Two columns are easy to read on mobile devices. Put the examples in a separate row so they can easily be read side-by-side also, and in italics. I'd colour the columns differently but also use "Correct:", "Incorrect:", and "Eg:" as bold introductions to each definition.

So it will look something like:

**TOO**
**Correct**: More than expected; also. | **Incorrect**: The number 2.
---------------------------------------|--------------------------------
***Eg**: I, too, had too much.*        | ***Eg**: There were too people.*