This time we will look at the table style portion of PresentationML in the Office Open XML Format and we will go through many of the finer details of how to make one. To get PowerPoint to generate the XML for a built-in table style, you simply insert a Table and Save as PPTX. Rename your PPTX file to .ZIP, and look under ppt\tableStyles.xml. You will see something resembling the following:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><a:tblStyleLst xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" def="{5C22544A-7EE6-4342-B048-85BDC9FD1C3A}"> <a:tblStyle styleId="{5C22544A-7EE6-4342-B048-85BDC9FD1C3A}" styleName="Medium Style 2 - Accent 1">…
Colors and formatting here are from Visual Studio, but you can use any old text editor such as notepad to edit these XML files. The default table style here is specified with the GUID {5C22544A-7EE6-4342-85BDC9FD1C3A}. It is the only style listed in the list above. Let’s start by removing it from the list and making a new custom style. Create a new GUID (either using a GUID Generating tool or an online GUID Generator). For example, I used the online GUID Generator and got: {90651C3A-4460-11DB-9652-00E08161165F}. You do not need to capitalize all the hexadecimal letters (but I do so because earlier beta versions required that your GUIDs be in capital hexadecimal). Let’s start with a minimal style. Here it is:
<a:tblStyle styleId="{90651C3A-4460-11DB-9652-00E08161165F}" styleName="Empty Custom Style" />
It doesn’t do much, but it gets the point across. Save your modified tableStyles.xml, copy your ZIP file to a new PPTX, apply your custom style to the table, and PowerPoint will show you the fruits of your labor:
What is the point of customizing a style if you don’t do anything with it? Well, it lets you see what the default values are. Generate a new GUID and we can start a real example:
<a:tblStyle styleId="{put your GUID here}" styleName="Example Custom Style 1">
We will start out by setting the background:
<a:tblBg> <a:fillRef idx="3"> <a:schemeClr val="accent1"> <a:tint val="50000"/> </a:schemeClr> </a:fillRef> <a:effectRef idx="2"> <a:schemeClr val="accent2"/> </a:effectRef> </a:tblBg>
Note that we are setting the fill to refer to the style matrix with index = 3 (intense fill) and the effect to refer to the style matrix with index = 2 (moderate effect). This means that our custom style will appear different when the user changes themes. See Howard’s post on the topic for more info. These indices refer to the columns in “Style Matrix” from Howard’s post (0 = no line/fill/effect, 1 = Subtle, 2 = Moderate, 3 = Intense):
Note: If you wanted to give a specific appearance to your tables, you do not have to use themed elements (fonts, fills, lines, and effects) and instead can specify your own fonts, fills, lines, and effects. You are not limited to the colors from the color scheme. Scheme colors are one of 6 ways to specify colors.
Now that we have set the background fill/effect for the whole table, we will set properties which apply to all cells in the table (whole table part style). This part defines the default appearance for all of the cells in the table in their default state. The first thing we set is the table cell text style (tcTxStyle):
<a:wholeTbl> <a:tcTxStyle> <a:fontRef idx="minor"/> <a:schemeClr val="dk1"/> </a:tcTxStyle>
We pick the minor font (used for text – the major font would be used for headings – this is discussed a few times in Howard’s posts). We use the dk1 (Dark 1) color for our text. Notice that we tinted our table background color by 50% above. Tint makes the color lighter. Shade makes the color darker. By tinting the background color by 50%, we make it contrast more with our dark 1 colored text. There are other good choices here, and I wanted to highlight that tx1 (Text 1) maps to either dk1 (Dark 1) or lt1 (Light 1), and bg1 (Background 1) maps to the contrasting color (same for tx2, bg2, dk2, and lt2). You set which light/dark pair are used with the background style gallery in the design tab. If your table style has no fill, then using tx1 or tx2 will make your text more likely to contrast against the slide background (but this is not a guarantee – the slide background may have images, there may be shapes on the master, or you can have other shapes under your table). If you wanted to always ensure that your text will contrast and still show design elements under it, you can use a semi-transparent fill (see below) of bg1 or bg2 to mute the background or other slide content under your table. I recommend using an un-themed solid fill in this case.
Next we will set the line styles for the outer edges of the table with accent 3 and the “subtle” line style from the theme. Note that these lines are the lines around and inside the “whole table” part. Top here is a continuous single line from the top left to the top right (in Left-to-Right language tables). We empty out the inner line styles (the diagonals are empty by default, but the inner horizontal/vertical lines are set by default). I have collapsed these XML elements on individual lines to save space.
<a:tcStyle> <a:tcBdr> <a:left><a:lnRef idx="1"><a:schemeClr val="accent3"/></a:lnRef></a:left> <a:right><a:lnRef idx="1"><a:schemeClr val="accent3"/></a:lnRef></a:right> <a:top><a:lnRef idx="1"><a:schemeClr val="accent3"/></a:lnRef></a:top> <a:bottom><a:lnRef idx="1"><a:schemeClr val="accent3"/></a:lnRef></a:bottom> <a:insideH><a:ln><a:noFill/></a:ln></a:insideH> <a:insideV><a:ln><a:noFill/></a:ln></a:insideV> </a:tcBdr>
After specifying the border line styles, we define a fill for all the cells in the table. Note that cells are drawn on top of the table background. Since we already have a contrasting set of colors for the table background and the default text color, we really don’t need to tweak this part. The default is “no fill”, but I’m going to set it explicitly just to indicate how it is done:
<a:fill> <a:noFill/> </a:fill> </a:tcStyle>
And that’s it for the whole table part. Let’s close the table style tags now.
</a:wholeTbl></a:tblStyle>
Save the XML file, copy the ZIP to a new PPTX file, and load it into PowerPoint. After applying the new table style, we see should see something like this:
Notice that there are grid lines showing in the table in the document, but no gridlines showing in the thumbnail. The default setting in the Table Tools/Layout tab is to show gridlines when editing the table. This setting is not table or document specific.
We haven’t specified the top row, bottom row, or any other part. Users of our table style will want to be able to express subtle or not-so-subtle structure in the data that they enter into their tables. Our design is not yet done. We don’t need to change every part, but at the moment we have a very uninteresting style.
The next set of parts defined in the table are the horizontal and vertical bands. “band1H” applies to every “odd” row starting after the first (also called header) row and before the last (also called total) row (if the header or total row parts are applied) and “band2H” applies to the “even” rows. Similarly, “band1V” applies to every “odd” column after the first column (left column in left-to-right languages) and before the last column (right column in left-to-right languages) and “band2V” applies to the “even” columns.
For this example table style, remember that the background fill is using dark 1 for the text color and accent 1 tinted to be 50% brighter as color for the intense theme filled background. Let’s change the background fill and text color for odd rows and lets make the text italic for odd columns. Insert the following before the close tag for our table style:
<a:band1H> <a:tcTxStyle> <a:schemeClr val="lt1"/> </a:tcTxStyle> <a:tcStyle> <a:tcBdr/> <a:fill> <a:solidFill> <a:schemeClr val="dk1"> <a:alpha val="33333"/> </a:schemeClr> </a:solidFill> </a:fill> </a:tcStyle> </a:band1H> <a:band2H/> <a:band1V> <a:tcTxStyle i="on"/> </a:band1V> <a:band2V/>
Rather than make the background a solid fill using an opaque color, I set the “alpha transparency” on the color to 33.333% here (the alpha value is the opacity – the opposite of transparency. The 33.333% value here means it is 2/3rds transparent). Note that this is not a themed fill. By choosing a solid color fill with a mostly transparent color, we are effectively darkening the whole table background fill underneath the cells affected by this part. This means that if the “intense” fill effect used by our table background has a picture in it (or some cool gradient fill, pattern fill, etc) then we don’t completely cover it up, but we still make sure that the text color will contrast with it. Here is what the effect now looks like with a theme with a picture fill (from the built-in paper theme):
For the last column, lets give our style a gradient filled line from Red to Blue on the left. This isn’t going to look good with all styles or color schemes. The point is to demonstrate that it can be done and how you would do it.
<a:lastCol> <a:tcStyle> <a:tcBdr> <a:left> <a:ln w="127000"> <a:gradFill> <a:gsLst> <a:gs pos="0"> <a:prstClr val="red"/> </a:gs> <a:gs pos="100000"> <a:prstClr val="blue"/> </a:gs> </a:gsLst> <a:lin ang="5400000"/> </a:gradFill> </a:ln> </a:left> </a:tcBdr> </a:tcStyle> </a:lastCol>
We express the thickness of the line in EMUs (English Metric Units). Note that 914,400 EMUs make up an inch. 360,000 EMUs make up a centimeter, and 12,700 EMUs make up a “point” (1/72nd of an inch). Note that the gradient fill is a linear gradient fill, and the angle is at 90 degrees. The angle is expressed in units where 60,000 = 1 degree. The stops of the gradient fill are at 0% and 100.000%, and we are using preset colors this time. You can have as many stops as you want. I set the thickness to 10 “points” here.
If you merge cells horizontally in your table so that the last column runs through your merged cell, you will notice something interesting: the line which we have styled will move around your merged cells. There is a complicated bit of logic in the table styling engine which handles these special cases, and I just thought I would point it out because it is cool. A gradient fill is useful to demonstrate this edge case as it shows how the line is broken down into segments. I chose this example to demonstrate some features of table styles.
That’s a lot of material to cover for one post. Feel free to play with this and leave comments and questions. Let us know what you think. The XML format is very powerful, but there are no fine-grained error messages to tell you what you broke when hand-editing the XML. Most Office users are not expected to do this, and PowerPoint will recover your data even in the case that your table styles are invalid. Be careful not to do too much work on an XML file without saving and making sure that PowerPoint loads it and your table appears to be styled correctly. Don’t forget that the Table Styles XML elements are in the “DrawingML / Office Art” (a:) namespace. Other elements in the XML file in a PowerPoint presentation are in the “PresentationML / PPT” (p:) namespace. I want to thank Jason Schneekloth (the Tables/Table Styles PM) for his help editing this post and for his post on the topic as well as the rest of the team that implemented this feature.
This posting is provided “AS IS” with no warranties and confers no rights.