HTML Table Generator

In HTML, tables are created by nesting sets of <td></td> elements between <tr></tr> tags to create a row of cells, and then nesting sets of <tr></tr> elements between <table></table> tags to create several rows.

The number of <td></td> in each row determines the number of columns, and the number of <tr></tr> elements determines the number of rows. While it is easy to code HTML tables by hand using these basic principles, it is more convenient to use a template generator, such as the one below. To use it, simply enter the number of rows and columns you want, and whether you want a header or footer. Click the "Generate" button to output the code and a preview of your table.

HTML Table Code Generator

To add borders to your table, you can use inline CSS within the <table> and <td> tags, or set the style class in an external style sheet. For example, to make a table with a 1 pixel black border, replace the <table> tag with

<table style="border:1px solid #000000;">

Table headers and footers are optional. You can create them by mergint the top/bottom row of cells with the colspan="" attribute. For example, if the table has 3 columns and you want to add a header cell, insert these lines of HTML after the first <table> tag:

<tr><td colspan="3"> Header Text </td></tr>

© Had2Know 2010