Tr3v.TableBuilder

The purpose of this class is to simplify the generation of basic HTML tables from an asp.net page.

Application reference »
Email Image
How do i use it?
// NOTE: I'm using C# 3.0 syntax.

// Instantiate a new TableBuilder.
TableBuilder tableBuilder = new TableBuilder { RightAlignNumericColumns = true };

/* NOTE: We can access any of the properties of the System.Web.UI.WebControls.Table through the TableBuilder.Table property. */
tableBuilder.Table.Width = 250;
tableBuilder.Table.BorderColor = System.Drawing.Color.Black;
tableBuilder.Table.BorderStyle = BorderStyle.Solid;
tableBuilder.Table.BorderWidth = 1;

// Add a header row to the table.
tableBuilder.AddHeaderRow("Product", "Type", "Price");

// Add some content rows to the table.
tableBuilder.AddRow("Apple", "Fruit", "£0.22");
tableBuilder.AddRow("Orange", "Fruit", "£0.14");
tableBuilder.AddRow("Chair", "Furnature", "£34.99");
tableBuilder.AddRow("Discount", "-", "-£0.95");
tableBuilder.AddRow("£34.40");

// Add the table to the page.
Page.Controls.Add(tableBuilder.Table);

The AddRow and AddHeaderRow methods both return the TableBuilder instance so you can also write the code like this:

tableBuilder.AddHeaderRow("Product", "Type", "Price")
.AddRow("Apple", "Fruit", "£0.22")
.AddRow("Orange", "Fruit", "£0.14")
.AddRow("Chair", "Furnature", "£34.99")
.AddRow("Discount", "-", "-£0.95")
.AddRow("£34.40");

What does the output look like?
TableBuilder Output
As you can see, the table is output with the numeric columns aligned to the right, also notice that the "total" column spans the 3 columns.

What does the html look like?
<table border="0" style="border-color:Black;border-width:1px;border-style:Solid;width:250px;">
    <tr>
        <th>Product</th><th>Type</th><th>Price</th>
    </tr>
    <tr>
        <td>Apple</td><td>Fruit</td><td style="text-align: right;">£0.22</td>
    </tr>
    <tr>
        <td>Orange</td><td>Fruit</td><td style="text-align: right;">£0.14</td>
    </tr>
    <tr>
        <td>Chair</td><td>Furnature</td><td style="text-align: right;">£34.99</td>
    </tr>
    <tr>
        <td>Discount</td><td>-</td><td style="text-align: right;">-£0.95</td>
    </tr>
    <tr>
        <td colspan="3" style="text-align: right;">£34.40</td>
    </tr>
</table>
The html output is standard, using <th> tags for the header cells and <td> tags for the standard cells. This allows you to apply css styles to the table.

Styling using CSS
I recently received a query regarding styling the html table using css, so here's a quick sample:
<style type="text/css">
/* Add outer border, overall table width and remove border spacing (cell padding). */
table { border: solid 1px black; border-spacing: 0px; width: 350px; }

/* Add padding to headers and cells so that the text is spaced away from the borders. */
th, td { padding: 4px; }

/* Thicker border below header row. */
table tr th { border-bottom: solid 2px black; }

/* Add border to cells. */
table tr td { border-left: solid 1px black; border-top: solid 1px black; }

/* Remove the border from the top row. */
table tr:first-child td { border-top: none; }

/* Remove the border from the left column. */
table tr td:first-child { border-left: none; }
</style>
What does the output look like?
TableBuilder Bordered Output

Aditional Point, if you are styling using CSS and have rows with different numbers of cells in, make sure that all rows with less than the highest number of cells have empty cells otherwise borders and background colours will not be set.

So for example in the following sample:
.AddRow("Column1", "Column2", "Column3")
.AddRow("Column1", "Column2")
.AddRow("Column1", "Column2", "Column3")
In this scenario, replace the code in line 2 with
.AddRow("Column1", "Column2", String.Empty)

DateVersionNotes
22/08/20081.0.0.3Updates

Added TableBuilder.Id property which gets or sets the html id of the table (TableBuilder.Id = "products"; outputs <table id="products">)

Added TableBuilder.CssClass property which gets or sets the css class for the table (TableBuilder.CssClass = "productTable"; outputs <table class="productTable">)

Right align columns now right aligns columns that:
+ Only contains numeric text (e.g. "2344" would be right aligned, but "T2344" would not).
+ Contains a currency identifier (e.g "£5.99" or "$5.99") £ and $ are the 2 currently supported, however to add others, just extend the if statement in the RightAlignRowCells method.
+ Codebase has been internally refactored and now passes all default Microsoft StyleCop tests. (Method signatures have not changed so if you update to the latest version of the source code, existing code that uses TableBuilder should not break).
30/05/20081.0.0.2Updated - enhancement: AddRow and AddHeaderRow both return the instance of the TableBuilder.
10/04/20081.0.0.1Updated - fixed bug: columns with numerics and characters are right aligned.
29/02/20081.0.0.0Initial Build