Formatting the Data View

The default data view that we are presented with uses uninspiring black serif text on a white background. We can jazz up our data view using two different methods:

Direct Formatting

It is possible to apply formatting directly to a data view by highlighting the cells that we wish to format and then using the formatting tools. This can be a good option if we only want to format a single data view but is not the best approach if we would like to apply our formatting on a site-wide basis.

CSS Formatting

A more manageable way to apply formatting to our data views is to make the changes across the entire site by editing our style sheet.

When we click in the cell that has the Price heading in it, notice that a tag appears above it, telling us that this cell is referred to as th.ms-vh. That is to say that it is a table heading <th> element that is being rendered using the ms-vh class (which stands for Microsoft View Heading). Similarly, if we click in any of the cells further down the data view, we see that they are referred to as td.ms-vb (standing for Microsoft View Body). This reference is used to specify the format of the cells in our table that display the actual data.

In addition, there is an ms-alternating class that renders every other row with a different background color.

To allow us to edit our styles, we must first create a new blank style sheet, which we will call share.css:

1. Select File | New | CSS.
2. Go to File | Save.
3. Give the file the name share.
4. Save the file as CSS Files file type.
5. Click Save.

The next step is to attach our style sheet to our site so that our pages can refer the styles that we will create within the style sheet:

1. Open the Apply Styles task pane.
2. Click Attach Style Sheet.
3. Click Browse.
4. Browse to share.css and click it.
5. Click Open.
6. Under Attach to, check All HTML pages.
7. Click OK.
8. Click Close on the information dialog.

We will then make our style sheet ready to use by defining some styles. Adding the following code to the style sheet will change the ms-vh and ms-vb classes so that they are formatted in a more inspiring manner:

th.ms-vh, td.ms-vb {
font-family:gill sans, gill sans mt, arial, sans-serif;
}
th.ms-vh {
border-width:0px;
background-color:#903;
color:#FFF;
}
td.ms-vb {
color:#903;
border-top-width:0px;
border-left-width:0px;
border-right-width:0px;
border-bottom-width:1px;
border-bottom-style:dashed;
font-style:italic;
}
ourtable{
border-width:0px;
}

Notice how the first line of our style sheet refers both ms-vh and ms-vb, with a comma separating them. This allows us to specify the font face in one place rather than needing to enter it separately into each class. Grouping styles in this way not only saves time when creating our site but also makes the site more easily maintainable when we and other people make changes in the future.

If you are eagle-eyed, you will also notice that the color references (e.g. #903) only have three digits rather than six. This is possible when a color has repeating numbers (e.g. 99 or 00), allowing us to condense #990033 to #903.

If you are not familiar with using CSS, do not be put off using it because it is easy to learn. We also get a helping hand, because when we type code into the style sheet, SharePoint Designer uses IntelliSense to suggest code we may like to use.

Once we have saved our style sheet, SharePoint Designer instantly reflects changes to the style sheet in the Design view of products.aspx.

When creating our td.ms-vb style, we specified that dashed lines should appear below each cell. By default, SharePoint Designer has a default value of 0 for our borders, meaning that they will not display. In order for the dotted lines to appear, we will need to make sure that our table has a border value of 1. We can do this by highlighting the whole table and typing 1 into the border attribute in our Tag Properties task pane. Selecting ourtable as the class for the table in this task pane will remove the solid border, allowing our dashed lines to be visible in all their glory.

We can take our formatting even further and use CSS to format the delete and insert text links so they look like buttons, by giving them a border and some padding. We can also give our “buttons” a different background color whenever the cursor is positioned over them.