Apply Padding to a Nested Table

Tables work really well in your designs when you want to apply padding. But what if you wanted to apply padding to a nested table? Clicking in the cell and editing the CSS is one easy solution, but sometimes you have many nested tables, making the clicking virtually impossible. No worries! Informz has a solution for you – use the HTML path to edit your nested table.

Whenever you working in the HTML editor, you’ll see the HTML path along the bottom of the editor window. The content listed in that path depends on what you have added to your story, and making use of the path gives you greater accuracy when you need to apply CSS styles! For example, in the path above, you’ll see that there is a table nested within a table, and that the selected content (the rightmost element) is a table cell within the nested table.

Steps

To modify a specific element, click on the name of that element in the path (the selected content becomes highlighted). For example, in the image below, the table containing the nested columns is highlighted (indicated by the four white squares surrounding it in the editor).

Once you’ve selected the desired element, click the CSS icon in the toolbar.

The Style window opens. Click the Box tab, and you’ll have access to the padding controls. You have the option to apply the same padding to each side, or to isolate the individual sides where you’ll apply padding (this example applies 15 pixels of padding to each side).

Click Update to save your changes.

Now, the columns within the nest table have the entered padding applied to each side.

There Are Many Paths…

Now that you understand the ins and outs of accessing nested tables via the HTML path and applying styles, be sure to try it out for yourself. Also, remember that the HTML path can be extremely useful in any situation where you need to select something in your design.