ben tedder

Create Custom SharePoint 2010 Table Styles

Let's take a look at the default (OOTB) table styles that come with SharePoint 2010, and then we’ll create a brand new table style of our own using CSS. If you want a broader look, check out how to integrate custom header and styles.

By default, SharePoint 2010 comes with 3 different table styles that you can select in the ribbon:

Clear (no borders)

Light Banded (Headers and footers have a white background, and alternating blue/white rows)

Medium Two Tones (Headers and Footers in strong blue, and alternating grey/white rows)

These styles are…ok. But we want much better looking tables than the ones Microsoft gives us. So we are going to declare a new style (so it shows up in the drop-down), and style it like we want.

Creating a new Table Style

When the RichHTMLField loads, it looks for the default SharePoint table styles. In order to create a new style, we have to declare a new table class and style name in our CSS so SharePoint knows what to look for.

In order to declare a new table style, you must declare a class that starts with "table.ms-rteTable-" and ends with the name of your table. Within the class you must set a CSS property that SharePoint will see called "-ms-name". This will set the human-readable name of the table style. See the following example:

table.ms-rteTable-mytable {
-ms-name: "My Custom SharePoint Table Style";
}

Once you have put this in your CSS, refresh your page and click 'Edit' and go to the 'Design' tab for your table. Now you should see your custom table style (it'll have no styling attached yet).

Style your new table!

Now that you have this created, it would be good to check all 4 checkboxes for the style (header row, footer row, first column, and last column). Then you should populate your table with at least 5 columns and around 7 or 8 rows. This will allow you to test all of the possible styles on your table.

Here's what we'll wind up with. A table that has no border, has a grey header and a lighter grey footer; a light grey border on the bottom of each row; and when you hover over a row it turns light blue.

Full Code

Here's the CSS. Feel free to copy and make your own. You'll notice at the bottom a giant commented block at the bottom that has all of the table styles. Keep in mind you might need to add "td", "th", and "tr" where you see fit in order to get target the rows and cells correctly.

table.ms-rteTable-mytable {-ms-name:"My Custom SharePoint Table Style";} /* sets the name of the table style */

.ms-rteTable-mytable td,
th.ms-rteTableFirstCol-mytable,
th.ms-rteTableFooterFirstCol-mytable {
    padding:10px;
    text-align:center;
    border-bottom:1px solid #ccc;
}
.ms-rteTableHeaderRow-mytable th {
    background:#ccc;
    color:#333;
    padding:10px;
    text-align:center;
}

.ms-rteTableOddRow-mytable:hover,
.ms-rteTableEvenRow-mytable:hover {
    background:#b5e2ff;
}

.ms-rteTableFooterRow-mytable td,
th.ms-rteTableFooterFirstCol-mytable{
    padding:10px;
    border-top:1px solid #ccc;
    background:#efefef;
}

/*
.ms-rteTable-XXXXX
.ms-rteTableHeaderRow-XXXXX
.ms-rteTableHeaderFirstCol-XXXXX
.ms-rteTableHeaderLastCol-XXXXX
.ms-rteTableHeaderOddCol-XXXXX
.ms-rteTableHeaderEvenCol-XXXXX
.ms-rteTableOddRow-XXXXX
.ms-rteTableEvenRow-XXXXX
.ms-rteTableFirstCol-XXXXX
.ms-rteTableLastCol-XXXXX
.ms-rteTableOddCol-XXXXX
.ms-rteTableEvenCol-XXXXX
.ms-rteTableFooterRow-XXXXX
.ms-rteTableFooterFirstCol-XXXXX
.ms-rteTableFooterLastCol-XXXXX
.ms-rteTableFooterOddCol-XXXXX
.ms-rteTableFooterEvenCol-XXXXX
*/