- View Offline
- Navigating and selecting tables
- Positioning tables
- Inserting and deleting rows and columns
- Adding header and footer rows, fills, strokes, and borders
- Dealing with overset text
- Applying cell and table styles
- Using tables to streamline graphic design work
- Creating infographics with tables
- Creating pull quotes and design objects using tables
- Exporting tables to EPUB and HTML
Skill Level Intermediate
When you export your InDesign table to HTML or EPUB the table structure will be maintained, but not a whole a lot of the formatting will come over. You have to fix that in the CSS code, if you know CSS that is. Another way to export a table is to convert it to an image. Then it'll look exactly as it does in your InDesign layout, complete with the formatting. How well that will work though partly depends on the size of your table, because especially if you're exporting to EPUB the size of the table is going to be determined by the screen size of the Reader and if the table resizes for smaller screen or smaller browser window the type can be scaled so much that you actually can't read anymore.
And of course if you export your table as an image it means it's not searchable in any case. But for some situations this is a viable solution, especially if you're working with smaller tables. I'm going to show you two ways to do this. The first method can be done in CS4, CS5, or CS5.5. The second way I'll show is CS5.5 only. The first step to converting your table to an image is to select it and remove it from the main text flow. You'll see my blinking cursors to the right of the table here. So I'm going to hold down the Shift key and press the left-arrow key and that selects the table.
Now I'm going to cut it out of the text flow, Command+X or Ctrl+X, and then I'll just scroll over a little bit and make a text frame to paste the table into. The next step is an important one. I want to make sure that the text frame is really snug against the table. That's because the entire text frame is going to be exported as an image so I don't I want any extra white space around it. Next with the table still selected I'm going to go to my File > Export Options, and the best format for export is really JPEG. I'll save this to the desktop.
The thing we have in JPEG Export is that we can export just the selection here. We can also change other image settings such as the resolution and so forth. I'm just going to export this and now we'll bring it back into our InDesign table. I'm going to place that file and we will just double-click and bring it out on the pasteboard. I do have to anchor this back into my text flow so that it'll be in the right order, especially in CS4 and CS5. So let's cut it to the clipboard, Command+X or Ctrl+X and then I'll click back in that paragraph where the table was before and paste.
So now my layout looks exactly as it did before it's just that the table is an image. When you're using this method by the way it's really important to keep your original table so you have to do any edits, you have the original table, and then you can just re-export it as a JPEG with your edits in it. Now we're ready to export. I'm going to use the keyboard shortcut Comman+E or Ctrl+E, and this time we're going to export as HTML. I could export it as an EPUB, but HTML is a little easier to see, and an EPUB after all is really just a flavor of an HTML file and the CSS in a zip rapper.
So let's click Save. I want to export the document and let's check the image settings. One very important thing we want to look at here is the image size. We have a choice of the image being exported in a Fixed size or Relative to the Page, and Relative to the Page is usually what we want. When the pages resized or when it's viewed in a different Reader we want the table to scale with it. Let's export this and see what we have. There we go! There is our table. Formatting is all there, but it is an image and you can see that it's the browser window changes size the table does as well, and if this window gets really small you can see that the table might become unreadable altogether.
If you're going to use this technique, it might be a good idea to actually make some of the type in your table bigger than when you export it and if the table scaled down it might be a little bit easier to read. The next method I want to show you for converting your images is CS5.5 only. I'm going to click and delete this JPEG image we just put in here, and we still need our original table as a separate object. We need to take it out of the main text flow. So it's already on the pasteboard here, I'm going to select it. And in CS5.5 we have this great Object Export Options dialog, and under the tab for EPUB and HTML we can choose Custom Rasterization, which basically takes whatever object we have selected and converts it to an image.
In this case for us a JPEG. Now when I close the dialog box the last step is that I need to anchor this table in the text flow. In CS5.5 of course we need only grab this little blue icon and drag it right into position here. Let's export this again. I'm going to just right over the file that was already there. We'll check our Image Settings, make sure we have relative to page and here we go, and we have the exact same result.
So you can see in CS5.5 especially it's pretty easy to convert your tables to images for export. If you're going to go this route instead of tweaking the CSS code it's just one more reason to upgrade.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.