How do you style columns in HTML tables without resorting to styling the individual cells?
There doesn’t seem to be an easy answer to this question that will work with most browsers. The method shown here works fine for my requirements but that’s not to say there aren’t better ways of doing this out there.
The requirement I had was for a restaurant that required a table with three columns; the text of the menu item, special colour characters for vegetarian or wheat free dishes, and the price of the item. The image below shows an example of the menu.
The text column is left aligned text with a width of 85%. The second column is centre aligned with a width of 5%. The third column with the price has to be horizontally right-aligned, vertically top aligned, with bold text and a width of 10%.