Your prescription for increased productivity and profitability
In the HTML5/CSS3 world, tables are for displaying data that needs to be viewed in columns and rows, not for laying out a page.
The two main considerations for this are:
On the other hand, tables have some capabilities that apply specifically to data displayed in rows and columns. So when columnar data is required in your ePub, you need to know how to set it up for export.
The support for table styling and ePub export in InDesign has improved in later versions and is fairly extensive.
You just need to know what the limitations are and how to get the final output to look as close as possible to what you see on screen. Notice that I said “as close as possible.” As well you know, the ePub format is meant to be flexible, not “what you see is what you get.”
First, ePub text flows to accommodate different sizes of output devices. To add to this are the differences between browsers and what they support. Then, to make matters worse (at least for you the designer), your carefully crafted layouts change to accommodate user preferences; most notably, type size.
When working with tables for export from InDesign, setting up text styling is of primary importance. Text in table cells, like other text, is styled using paragraph and character styles exclusively. For adding this styling to the individual cells in the table you should consider using Adobe’s table regions. For most purposes this is all you need for styling text for your table style.
Adobe divides a table into five logical regions: head, left column, body, right column, and footer. A cell style can define a paragraph style to be applied to all cells within that region. Start by creating paragraph styles to describe the styling for each region. Next, create a cell style for each region using the paragraph style. (I name the cell style the same as the paragraph style to keep things straight.) Then, when you establish your table style, you assign the cell style to each region of your table. Of course you also need to define borders, backgrounds, and alternating rows and columns. Once completed, the style is saved to a style sheet. When the style is needed, the style is imported from the stylesheet and applied to your table contents.
Besides defining the paragraph style to be used for its cells, a cell style can define cell insets, vertical justification, diagonal lines, strokes, and fills. Any properties set for a cell style overrides styles set for the table.
For example, consider a style named “Sample.” We will give the table alternating rows. The first row will have a 30% background color. The alternating row will have no fill. Suppose we then override these settings with a yellow background for the right column region’s cell style. The cells in the right column will alternate from a 30% yellow background to a solid yellow. The reason is that the alternating row values for the table are inherited by the right column cells. Realize that the right column cell style does not specify a tint value. Consequently the table’s alternating tint is applied to the first row. Similarly, the second alternating table row has no fill color or tint value, allowing the fill for these cells to be 100% yellow.
Setting cell insets for cell styles is an important consideration when it comes to designing tables for ePub. By default, the width of cells in the exported table collapse to the width of the widest text within the column. Setting left and right insets prevents the text from butting up against the column rules.
A good rule of thumb is to set Left and Right insets to the minimum amount of spacing you would allow for your columns. In fact, in most instances it may be best to design a table at its minimum size. This works well whether you allow your table to resize or not. You may also want to set top and bottom insets to visually center the text vertically in the row rather than choosing Align Center for Vertical Justification.
As noted above, the width of each table column assumes that of its widest text plus insets. The width of the table is that of the accumulated column widths. If you want to set your table to a consistent width its width to a fixed value. This will need to be done in the CSS file. Crack open the .epub package and open the file in your favorite plain text editor. If you have Dreamweaver, all the better: open the .html document and the CSS comes with it. Look for an entry for your table’s style. It will define the margins and border values as shown below:
table.TestStyle {
border-color:#231f20;
border-style:soid;
border-width:1px;
margin-bottom:18px;
margin-top:18px;
}To this you will want to add a width property to define the width for your static table:
width: 12em;
Using an em value will allow the table width to expand in the event the user changes the size of the text. Otherwise the text will split to accommodate the fixed cell width. An em represents the size of the font. If the font is 12 pts (pixels), the cell width in this example would be 144 pixels.
If you use the same style for a number of tables having different widths, consider the fact that InDesign export creates a unique html tag for each table, as in:
<table id="table-1" class="UTestStyle">
Once you discover the id given to the table(s) in question (they should be tagged in numerical order), you can set the CSS up for each table using code similar to the following. This will be in addition to that which is created as part of the ePub export.
#table-2.TestStyle {
width:400px;
margin:auto;
}The margin:auto designation centers the table horizontally within the measure.
For a responsive table (one that resizes with the width of the device), use a percentage for the width:
#table-1.TestStyle {
width: 96%;
margin-left:2%;
margin-right:2%;
}Notice that an id specifier is preceded by a hash mark (#).
When you allow a table to resize dynamically (responsive design), spacing allotments for column widths will be distributed proportionally based on text and inset values. This means that a column with several words of text will proportionally get more spacing than a column having a few numbers.
Setting a tab for decimal alignment for a paragraph style works great as far as what you see in InDesign is concerned. If you have set your alignment to left, paragraphs automatically align on a decimal character unless the paragraph contains additional formatting, such as center alignment. But export the table to ePub and this wonderful little trick for aligning to decimals goes out the window.
My first thought when I ran into this problem was to add a figure space to those entries that had less than the required digits in front of the decimal. Didn’t work; apparently the figure space gets dropped.
I seemed to remember that CSS had an align decimal parameter to solve the problem, so I went to the web. My search came up empty. It looks as if that has been deprecated, probably because it did not work consistently. So what does one do to align decimals? I did find two hacks, one that involved splitting numbers up into two html tags, and the other to use a JavaScript to shift the offending text. Neither one looked promising. I thought about this problem again when I decided to write this blog. So I did a little experimenting. Sure enough, you can override paragraph styles within a region style. The overriding style would provide a left indent set to accommodate the missing digit(s). And it worked. Now to find out how consistent this will be. Hmmm, therein reason for a good script. The script is still in the preliminary stages (had hoped to have it done in time for this post). So keep tuned, once I get the script working to give consistent results no matter what the font size, I will post it.
Until then, take some time to create some table styles and put them, along with the paragraph and cell styles used, in a style sheet. Use these styles the next time you need a style whether for print or for ePub.