In a recent project, I was working on an MVC View that displayed a list of records with Edit and Delete buttons on them.  This project was using the Blueprint CSS framework as well as Jquery-UI.  Having both of my Edit and Delete buttons in the same cell was forcing one of them onto the next line, like so:

Here is the Html.Grid code I was using:

The problem here is evident, who wants buttons stacked like that?  Now a simple fix may have been to just apply some new CSS properties to better control default width, margin, or padding of these elements.  But that solution doesn't look as pretty in code and adds unneeded weight to the page.  The Blueprint span classes do not go smaller than "span-1", so controlling the content through Blueprint was also out of the question.  I wanted to give my 'Options' table header cell the attribute colspan a value of 2.  At first I wasn't sure of the best way to do this and after a few searches through Google and Stackoverflow I still didn't know the best route.  A coworker pointed out that I should probably start with the Attributes method, and a solution was born:

The solution was to set the HeaderAttribute with a colspan of 2 and then on the next column, override the Header() method with an empty string.  Usually you would place a <th> tag in the Header string, leaving it empty keeps it from rendering that column header.  Voila!  You'll notice I did still have to add width attributes to the content cells, that was unfortunate however I still feel good about the solution.