© ClickStart 2014 1
Advanced Table Styles
In this session, I will describe advanced techniques for formatting tables.
Creating a table
Select Insert > Table.
Select the table options.
Click OK.
Removing inline formatting in a table
Click inside the table.
Select Table > Reset Local Cell Formatting.
Creating rounded corners
Open your stylesheet in the Advanced View.
Select the table style.
Set the border-radius style property.
Setting table widths
Open your stylesheet in the Advanced View.
Select the table style.
Set the width or max-width property.
Aligning tables
Open your stylesheet in the Advanced View.
Select the table style.
Set the margin-left and margin-right properties:
□ left align: margin-left: 0 and margin-right: auto
□ center-align: margin-left: auto and margin-right: auto
□ right-align: margin-left auto and margin-right: 0
Aligning table content
Open your stylesheet in the Advanced View.
Select the th (for the header) or td (for content) tag.
Set the text-align property.
Highlighting rows or cells on hover
Open your stylesheet in the Internal Text Editor.
Add the following style definitions:
tr:hover { background-color: #ffff00; }
–OR–
td:hover { background-color: #ffff00; }
© ClickStart 2014 2
Formatting a cell in a table
Open your stylesheet in the Advanced View.
Select the td style.
Click Add Class.
Type a class name and click OK.
Print: repeating table headers across pages
Open your stylesheet in the Advanced View.
Select the thead style.
Set the display property to table-header-group.
Print: repeating table captions across pages
Open your stylesheet in the Advanced View.
Select the caption style.
Set the caption-side property to top or bottom.
Set the mc-caption-repeat property to true.
If you want to append text to the caption, select mc-caption-continuation and type the text.
Print: preventing page breaks inside tables or rows
Open a table style.
Select the General tab.
Click Advanced.
Set the Page Break Inside property to Avoid.
–OR–
Open a stylesheet.
Select the table or tr tag.
Set the Page Break Inside property to Avoid.
Print: showing/hiding bottom border when table spans multiple pages
Open your stylesheet in the Advanced View.
Select the table tag.
Set the mc-hide-bottom-ruling property.
Creating a table style
Select File > New.
For File Type, select Table Style.
Select a Template.
Type a Name.
Click OK.
Formatting header rows
All tables
Open your stylesheet in the Advanced View.
Select the th tag.
© ClickStart 2014 3
Table styles
Open a table style.
Select the Header tab.
Formatting without a “header” row
Open a table style.
Select the Row tab.
Add a new row style.
Set the Row1 style properties.
Set the Row2 style to repeat 99 times.
Formatting sub-header rows
Open a table style.
Select the Row tab.
Add a new row style.
Set the Type to Custom.
Setting width of first column
Open a table style.
Select the Columns tab.
Add a new column style.
Set the Column1 style’s Width.
Set the Column2 style to repeat 99 times.
Highlighting the first column in a table
Create a table style.
On the Columns tab, set the first column’s background color.
Add a 2
nd
column style and set it to repeat 99 times.
Format the 2
nd
column style.
“Zebra stripping” rows or columns
Open a table style.
Select the Rows or Columns tab.
Add a new row/column style.
Set each row/column style’s Background Color.
Different borders in table header row
th:nth-last-of-type(1n+2) { border-right: 1px white solid !important; }
Note: you won’t see the formatting in the XML Editor, and this trick is only for modern browsers (not print
targets).
Formatting captions
All tables
caption tag
© ClickStart 2014 4
Table styles
table.TableStyle-yourtablestyle caption { … }
Numbering captions
Open your stylesheet in the Advanced View.
Select the caption tag.
Set the mc-auto-number-format property.
Responsive design
You can use JQuery to automatically adjust your tables for differrent displays and to add intertactive
features such as content sorting by columns. I recommend the following free scripts:
http://goo.gl/hFegY0
http://goo.gl/7uCbPW
http://goo.gl/RmgAOK
http://goo.gl/c0Y2MW
Keyboard shortcuts
Insert table Alt B, T
Open table properties Alt, B, O
Insert table caption Alt, B, C, P
Show/hide gridlines Alt B, S, G
Add new row Tab (if the cursor is inside the last table cell)
Select next cell Tab
Select previous cell Shift+Tab
Select all cells Alt, B, S, T
Move selected rows up Alt+Shift+Down arrow
Move selected rows down Alt+Shift+Up arrow
Insert row above Alt, B, A
Insert row below Alt, B, B
Insert column to the left Alt, B, L
Insert column to the left Alt, B, R
Merge selected cells Alt, B, M
Split cell Alt, B, S, C
Sort table content Alt, B, S, R
Clear cell content Alt, B, C, C
Remove cell style Alt, B, C, Y
Clear cell inline formatting Alt, B, S, F
Apply table style Alt, B, P
Convert table to text Alt, B, V
Delete Table Alt, B, D, D
© ClickStart 2014 5
About the presenter
Scott DeLoach is the Founder of ClickStart, where he provides training and consulting
for MadCap Flare, Adobe Captivate, embedded user assistance (UA), CSS, HTML5,
and Microsoft Word. He has been developing browser-based UA since 1997, and he
has received four STC “Best in Show” awards for his work.
Scott is a certified Flare instructor, and he manages the MAD for Flare certification
program. Scott is the author of MadCap software’s training guides, MadCap Flare
Developer's Guide, CSS to the Point, HTML5 to the Point, and Word 2013 to the Point.
You can reach Scott at www.clickstart.net or by email at [email protected].
