{"id":2349,"date":"2021-05-14T08:22:02","date_gmt":"2021-05-14T07:22:02","guid":{"rendered":"https:\/\/www.sachaheck.net\/blog\/?p=2349"},"modified":"2021-05-14T08:30:53","modified_gmt":"2021-05-14T07:30:53","slug":"html-css-tip-creating-tables-with-indent-to-right","status":"publish","type":"post","link":"https:\/\/www.sachaheck.net\/blog\/digital-media\/html-css-tip-creating-tables-with-indent-to-right","title":{"rendered":"HTML \/ CSS tip: Creating tables with indent to right"},"content":{"rendered":"\n\n\n

This week I was looking to find an answer to pimp up tables I have been creating on a website for a restaurant. The tables show the menu, here is a simple example:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

In the browser this table code looks like this:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Now, what I wanted to achieve was, that the price shall always align to the right. Like in InDesign you just put in an indent to right. However with just the HTML code the position of the price is always different depending on the largest row of the whole table.<\/p>\n\n\n\n

The solution is to format the table with a little CSS. I contacted a webdeveloper I know, Misch Strotz<\/a> from Neon Marketing Technology<\/a> and he quickly told me his way of solving this issue and it worked perfectly, Thank you very much :-) To not forget the little trick, I just share it here for everybody and also for me to find it in the future ;-)<\/p>\n\n\n\n

So first we define CSS classes for the first column and the second column, like this:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

You can choose any name for the class you like. I took „meal“ for the first column and „price“ for the second column. You do that for every data in your column. Afterwards we can use these classes to tell the browser what it should do with these 2 columns. Here is the CSS:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

So for the meal column we defined a width of 100% minus the second column, here we defined 130 px. Then for the price column we defined those 130px and told it to align to the right with the command text-align<\/code>.<\/p>\n\n\n\n

That’s it. With this little code, the table now displays beautifully. Here is the actual styled example from the website:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n