TR3V.Web.HtmlControls.TableBuilder

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

All code below is correct as of version 1.0.0.5 of the TR3V assembly.

Email Image
How do i use it?
// Instantiate a new TableBuilder.
using (TableBuilder tableBuilder = new TableBuilder())
{
    // Add a RightAlignNumericRowFormatter so that numeric and currency cells are right aligned.
    tableBuilder.RowFormatters.Add(new RightAlignNumericRowFormatter());

    // We can access any of the properties of the underlying table through the Table property.
    tableBuilder.Table.Width = 250;
    tableBuilder.Table.BorderColor = 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)
Custom Row Formatters

To create your own row formatter, create a class and implement TR3V.Web.HtmlControls.IRowFormatter. This interface requires one method called Format which accepts a single parameter of TableRow. You can then iterate over the cells in the row applying any styles you wish.

void Format(TableRow tableRow);

To have your formatter called, simply add a new instance to the TableBuilder.RowFormatters property when you initialize a TableBuilder.

using (TableBuilder tableBuilder = new TableBuilder())
{
    tableBuilder.RowFormatters.Add(new CustomRowFormatter());
    ...
}
Supplied IRowFormatters

There are currently 2 IRowFormatter implemetations shipped with the TableBuilder:

HyperlinkRowFormatter : IRowFormatter
RightAlignNumericRowFormatter : IRowFormatter
Licence information / Terms of use

All code supplied on this site be it within the assembly or code samples is supplied as is. I take no responsibility for any of the code provided. As always with code samples & frameworks, use it at your own risk.

All applications and tutorials where C# code is provided in either text or a class file may be freely used and modified if you so desire.

The assembly is compiled against .net 3.5. There will not be a 2.0 compatible version so if you wish to use the assebly you will need to be using Visual Studio 2008 with the .net 3.5 framework installed.

The assembly may be used within in commercial and personal software free of charge but may not be resold on its own. To clarify, you may build an application on top of any of the functionality provided by the assembly (e.g using the code contract framework inside your application).

Support, suggestions and bugs can be submitted via my contact form however it is offered on a limited basis with no guaranteed response or response time.

Any updates or bug fixes will be included in any further downloads once releases on the site but note that there is no "update" service available so you would need to manually update any code.