Pin Me

5 Free HTML Table Layout Templates

written by: Lin Parker•edited by: Amy Carson•updated: 5/18/2011

Tables are a great way of organizing lists and other information on a web page. They help to break up large sections of text, making the page easier to read, and drawing attention to essential details. Here are 5 free HTML table templates to get you started.

  • slide 1 of 7

    How To Use Table Templates

    Simply copy the HTML coding and paste within the <body> tags of your own website to create a table. Then type your content in the rows and columns. Table widths can be set as either as percentage or number of pixels and may be aligned to the left, right or center of the page. The content of the rows may also be aligned left, right or center of the table. When column headers are used, the header text appears in bold. The templates have been created with various widths. A table title has been added to one of the HTML table templates.

  • slide 2 of 7

    Table Template With 2 Rows and 2 Columns

    Table Template With 2 Rows and 2 Columns 

    This is a simple table template with two rows and two columns. The table width has been set to 350 pixels.

    <table border="1" width="350">

    <tr><!-- Row 1 --><td>Row 1, Column 1</td><!-- Col 1 --><td>Row 1, Column 2</td><!-- Col 2 --></tr>

    <tr><!-- Row 2 --><td>Row 2, Column 1</td><!-- Col 1 --><td>Row 2, Column 2</td><!-- Col 2 --></tr>

    </table>

  • slide 3 of 7

    Table Template with Column Headers: No Border

    Table Template with Column Headers: No Border This table has two rows and two columns. The border has been removed. Column headers have been added which display in bold text. The table width has been set to 300 pixels.

    <table border="0" width="300">

    <thead><tr align="left"><th>Column 1 Header</th><th>Column 2 Header</th></tr></thead>

    <tbody><tr><!-- Row 1 --><td>Row 1, Column 1</td><!-- Col 1 --><td>Row 1, Column 2</td><!-- Col 2 --></tr>

    <tr><!-- Row 2 --><td>Row 2, Column 1</td><!-- Col 1 --><td>Row 2, Column 2</td><!-- Col 2 --></tr></tbody></table>

  • slide 4 of 7

    Table Template With 3 Columns and 3 Rows

    Table Template With 3 Columns and 3 Rows 

    This table has three columns and three rows. The width has been set to 100%, which means that it will fit across the full width of the page. The rows have been aligned so that the contents fit in the center.

    <table border="1" width="100%">

    <tr align="center"><!-- Row 1 --><td>Row 1, Column 1</td><!-- Col 1 --><td>Row 1, Column 2</td><!-- Col 2 --><td>Row 1, Column 3</td><!-- Col 3 --></tr>

    <tr align="center"><!-- Row 2 --><td>Row 2, Column 1</td><!-- Col 1 --><td>Row 2, Column 2</td><!-- Col 2 --><td>Row 2, Column 3</td><!-- Col 3 --></tr>

    <tr align="center"><!-- Row 3 --><td>Row 3, Column 1</td><!-- Col 1 --><td>Row 3, Column 2</td><!-- Col 2 --><td>Row 3, Column 3</td><!-- Col 3 --></tr>

    </table>

  • slide 5 of 7

    Three Column Table with Title or Caption

    Three Column Table with Title or Caption 

    This table has three columns and three rows. The width has been set to 50%, which means that it will fit across half the width of the page. The table has been set to align centrally on the page, and a table title or caption has been added.

    <table border="1" width="50%" align="center">

    <caption align="left">Table Title or Caption</caption>

    <tr><!-- Row 1 --><td>Row 1, Column 1</td><!-- Col 1 --><td>Row 1, Column 2</td><!-- Col 2 --><td>Row 1, Column 3</td><!-- Col 3 --></tr>

    <tr><!-- Row 2 --><td>Row 2, Column 1</td><!-- Col 1 --><td>Row 2, Column 2</td><!-- Col 2 --><td>Row 2, Column 3</td><!-- Col 3 --></tr>

    <tr><!-- Row 3 --><td>Row 3, Column 1</td><!-- Col 1 --><td>Row 3, Column 1</td><!-- Col 2 --><td>Row 3, Column 1</td><!-- Col 3--></tr>

    </table>

  • slide 6 of 7

    Table Template With 4 Columns and 6 Rows

    Table Template With 4 Columns and 6 Rows This table has four columns and six rows. Column headers have been used and the table width has been set to 600 pixels.

    <table border="1" width="600">

    <thead><tr><th>Column 1 Header</th><th>Column 2 Header</th><th>Column 3 Header</th><th>Column 4 Header</th></tr></thead>

    <tr><!-- Row 1 --><td>Row 1, Column 1</td><!-- Col 1 --><td>Row 1, Column 2</td><!-- Col 2 --><td>Row 1, Column 3</td><!-- Col 3 --><td>Row 1, Column 4</td><!-- Col 4 --></tr>

    <tr><!-- Row 2 --><td>Row 2, Column 1</td><!-- Col 1 --><td>Row 2, Column 2</td><!-- Col 2 --><td>Row 2, Column 3</td><!-- Col 3 --><td>Row 2, Column 4</td><!-- Col 4 --></tr>

    <tr><!-- Row 3 --><td>Row 3, Column 1</td><!-- Col 1 --><td>Row 3, Column 2</td><!-- Col 2 --><td>Row 3, Column 3</td><!-- Col 3 --><td>Row 3, Column 4</td><!-- Col 4 --></tr>

    <tr><!-- Row 4 --><td>Row 4, Column 1</td><!-- Col 1 --><td>Row 4, Column 2</td><!-- Col 2 --><td>Row 4, Column 3</td><!-- Col 3 --><td>Row 4, Column 5</td><!-- Col 4 --></tr>

    <tr><!-- Row 5 --><td>Row 5, Column 1</td><!-- Col 1 --><td>Row 5, Column 2</td><!-- Col 2 --><td>Row 5, Column 3</td><!-- Col 3 --><td>Row 5, Column 4</td><!-- Col 4 --></tr>

    <tr><!-- Row 6 --><td>Row 6, Column 1</td><!-- Col 1 --><td>Row 6, Column 2</td><!-- Col 2 --><td>Row 6, Column 3</td><!-- Col 3 --><td>Row 6, Column 4</td><!-- Col 4 --></tr>

    </table>

  • slide 7 of 7

    Source

    Hip Pocket Guide to HTML 4.0 by Ed Tittel,James Michael Stuart, and Chelsea Valentine. IDG Books Worldwide, 2000.