BLOGS BY TOPIC
BLOGS BY AUTHOR
BLOGS BY YEAR
Sometimes online training in style sheets isn't enough: you need a tutorial which takes you through the thought processes involved in creating styles for a web page, step by step. This blog gives a full worked example (you may find it helpful first to look at the two previous parts of this CSS tutorial, on the >principles of CSS and applying styles to HTML tags).
- A Full Worked Example of CSS for a Website
- Two Guiding Principles in Using CSS for a Website
- Creating the Page Template
- Setting Styles for HTML Tags
- Specific Class Styles
- Formatting Tables and Gridviews using CSS (this blog)
Posted by Andy Brown on 16 May 2012
You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.
Formatting Tables and Gridviews using CSS
In our simple system you can display a list of things to do:
When you click on the top of a column, you can sort by it (here someone is about to sort the tasks into alphabetical order).
Here's how to create styles to get this to work.
First, Remember a Gridview is Just a Table
The layout for the table above comes from an ASP.NET web page, and initially looks nothing like HTML:
The HTML for the gridview shown at the top of the page.
However, when you look at the source for the web page rendered by the gridview above, it's obvious that it's just a table:
The underlying source makes it clear this is just a table.
The trick is to set the CssClass attribute of the gridview (in our case we'll use the style name gv), then apply table styles as if you were using normal HTML.
In particular, there are good reasons to avoid server-side themes and skins in ASP.NET.
Setting a General Style for the Table
Let's start with a style for the whole table:
/* gridview: general style */
border: solid 0px #000;
This shows that the table will appear with no margins, padding or borders.
Setting a Style for the Table Heading Row
The table cells appear in white on a dark blue background, and the clickable links appear in yellow when you hover over them:
/* gridview table headings */
padding: 5px 10px;
/* click-to-sort hyperlinks */
.gv th a
.gv th a:hover
This gives us the table headings:
The hover effect gives a colour of #FFFF77 (or yellowish).
Setting a Style for the Table Cells
Links within the table cells should appear in red, and underlined:
/* table cells have padding */
padding: 5px 10px;
border: 1px solid #000;
/* links within cells (edit/delete) */
.gv td a
.gv td a:hover
Colouring Different Lines
The final part of our styling is to apply different colours according to the status of each task (Not started, Ongoing or Complete). We'll do this using 3 different styles:
/* different types of task have different colours */
/* not begun: light */
/* ongoing tasks: darkish */
/* complete tasks - darker */
See my separate blog about using gridviews in ASP.NET to show how to apply these different styles to different rows in server-side code (this also contains a repeat of the content above, presented in a slightly different way).