Click here to Skip to main content
12,819,402 members (29,562 online)
Click here to Skip to main content
Add your own
alternative version


34 bookmarked
Posted 28 Feb 2004

Layout Table Control like HTML table, tr and td tags

, 28 Feb 2004
Rate this:
Please Sign up or sign in to vote.
Table Control to polish your forms layout.


Have you ever worked on ASP.NET and than moved back to Windows programming using Windows forms? Did you miss something?

Well I did! Why are there no controls like the HTML <table>, <tr> and <td> tags (and controls) to polish your layout?

Microsoft will introduce them with the next version of Windows forms. If you do not want to wait, you might try this control.

Using the code

I have created three controls that will help you layout your Windows Forms applications using a HTML <table> like control without writing one line of code.

All you have to do is compile the TableControl project, add the TableControl.dll to your solution and add the TableControl Component to your Visual Studio Toolbox using Add/Remove Items... in the context menu.

After that you can use the TableControl just like any other Windows Forms control and drag it onto your form.

Add a couple of rows to the table and columns to the rows using the Collection Editor and you are all set. Drag any Windows Forms control to the columns and they will move just like HTML items added to a table.

To make your table useful, you have to specify how you want your rows and columns scaled. You have three choices: auto, percent, or pixel.

  • Auto will split the space available equally between the rows or columns - this is useful if you want to divide your form into a couple of sections.
  • Percent will give your row or column a defined percentage of the controls size - it allows to have smaller and wider rows or columns, that scale when resizing the form.
  • Pixel will give your row or column a fixed amount of pixels - which is useful for a row of buttons or a header that you want not to scale.

You can add rows, columns, set the type, width and height of the items added to the table.

The TableControl does not allow to add anything but a row to the table using the designer. And a row does not allow anything to be added but a column.

Points of Interest

I found it very easy to build a control and implement Visual Studio Designer support for custom collections.

All you have to do is implement the IList interface as I did for ColumnCollection and RowCollection. These Collections are used to keep references for all the rows (RowControl) and columns (ColumnControl) in my TableControl.

Since there is already a collection that keeps all the controls in a list, I implemented something like a "virtual" IList collection.

// A RowCollection is a proxy to the Controls collection inside
public class RowCollection : IList
    private TableControl parentTable;

    public RowCollection(TableControl parent)
        this.parentTable = parent;
    public bool IsReadOnly
            return parentTable.Controls.IsReadOnly;

    object IList.this[int index]
            return this.parentTable.Controls[index];
            throw new NotSupportedException("IList.this");

The RowCollection IList implementation always uses its parent's Controls collection to retrieve a row.

To use this collection with the Visual Studio Designer, you have to implement a public Indexer which allows you to access typed objects that are in the collection.

// This is the Indexer the designer is looking will
// offer a collection editor for items of type RowControl
public RowControl this[int index]
        return parentTable.Controls[index] as RowControl;

In my TableControl, the types TableControl, RowControl and ColumnControl are all derived from System.Windows.Forms.Panel. This adds support for borders and background colors - getting closer to an HTML table.

To make the TableControl easier to use in Visual Studio, I added public properties to the rows collection not only to the TableControl but also to the RowControl and the ColumnControl. This is really no trick since the collections are "virtual" anyway:

// This is the Indexer the designer is looking
// will offer a collection editor for items of type RowControl
public RowCollection Rows
        if (this.Parent is TableControl)
            return (this.Parent as TableControl).Rows;
        throw new ArgumentException("Row Control is not placed in a table.");

This is really all you have to do to bring up the collection editor for the rows and columns from a table, row or column and have your own types inserted into your application's code:

To stop the designer from allowing other controls to be dragged directly into my table or my row, I added an override to my RowControl and TableControl implementation:

// Only allow a ColumnControl to be added 
protected override void OnControlAdded(ControlEventArgs e)
    if (e.Control is ColumnControl)
        base.OnControlAdded (e);
        throw new ArgumentException("You cannot add a " + 
          "Control directly to a row. Please insert a Column.");

Finally, I do not want to allow anybody to drag a row or column to a form:

// Do not add RowControl and ColumnControl to the Toolbox,
// only TableControl can be added
public class RowControl : System.Windows.Forms.Panel

public class TableControl : System.Windows.Forms.Panel

That's all.


First release.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
Austria Austria
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionWhat is the license for this software? Pin
HC7225-Apr-12 17:12
memberHC7225-Apr-12 17:12 
QuestionCan't add the control to the toolbox uner VS2008 Pin
srjacob30-Mar-09 16:42
membersrjacob30-Mar-09 16:42 
Generaladd text in column of table Pin
EEmaan30-May-07 1:19
memberEEmaan30-May-07 1:19 
GeneralAnchor Bug Pin
Gianni Gardini 25-Sep-06 8:18
memberGianni Gardini 25-Sep-06 8:18 
GeneralBug Pin
_iTcHy_21-Jun-05 2:36
member_iTcHy_21-Jun-05 2:36 
GeneralCouldn't build Pin
LiamD9-Jun-05 5:24
memberLiamD9-Jun-05 5:24 
GeneralRe: Couldn't build Pin
Bryan Baker20-Jun-05 13:15
sussBryan Baker20-Jun-05 13:15 
Generalyeah, that's good Pin
_iTcHy_19-May-05 2:44
member_iTcHy_19-May-05 2:44 
QuestionDoes it support something like &quot;border-color&quot;, &quot;border-width&quot;, etc.? Pin
percyboy7-Apr-05 20:32
memberpercyboy7-Apr-05 20:32 
GeneralDesigner Serialization Pin
andrebrogli1-Mar-04 12:37
memberandrebrogli1-Mar-04 12:37 
GeneralGreat stuff... Pin
pikipoki1-Mar-04 11:37
memberpikipoki1-Mar-04 11:37 
GeneralAny URL of the information... Pin
Uwe Keim29-Feb-04 18:16
sitebuilderUwe Keim29-Feb-04 18:16 
GeneralRe: Any URL of the information... Pin
pikipoki1-Mar-04 11:39
memberpikipoki1-Mar-04 11:39 
GeneralRe: Any URL of the information... Pin
john_coleman5-Apr-04 8:21
memberjohn_coleman5-Apr-04 8:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170308.1 | Last Updated 29 Feb 2004
Article Copyright 2004 by markusfi
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid