If you find this helpful, please click the Google |
![PDF](/images/pdf-format.png)
![mobile](/images/mobile-format.png)
Creating HTML Tables - A Tutorial
How To Create A Table in HTML
(Some links on this page take you to details in the HTML Tag Reference. Bookmark this page in your Favorites so you can come back to it later.)
HTML table code from the top down
Most tutorials on HTML tables build from the bottom up, starting with minimal HTML table code and adding features a step at a time in subsequent examples. Many developers prefer a quick top-down view, since it's easy to remove the elements that are not needed for a particular table layout, so this table tutorial takes that approach.
The top element of an HTML table layout is, of course, the table
element. Inside the table
element are the following child elements:
- an optional
caption
element - optional column definitions, using an optional
colgroup
element and one or more <col/> elements - an optional table head section, using a
thead
element with table rows and table heading cells, similar to the table body, except that the table headings use the <th> tag rather than the <td> tag - an optional table footer section, using a
tfoot
element with table rows and table cells, similar to the table body - the body section, using an optional
tbody
element along withtr
table row elements that containtd
elements for the table cells
The tfoot
element for the HTML table footer comes before the tbody
element for the body of the HTML table, near the table header. This is because when the table is displayed on multiple pages, such as when printing web pages, the table header and footer will appear at the bottom of those rows of a table that fit on a page, before the rest of the body of the table, which might be considerably long in some cases, has been rendered.
The following HTML code is an example of all of the elements which can be used for HTML tables:
<table class="border"> <caption>Table Caption</caption> <colgroup> <col style="width: 20%"/> <col style="width: 30%"/> <col style="width: 50%"/> </colgroup> <thead> <tr> <th rowspan="2"></th> <th colspan="2">Multiple Column Heading</th> </tr> <tr style="vertical-align: bottom"> <th>First Column Heading</th> <th>Second Column Heading</th> </tr> </thead> <tfoot> <tr><td colspan="3">This is an example of an HTML table footer.</td></tr> </tfoot> <tbody> <tr> <th>Row 1</th> <td>Row 1 Column 1</td> <td>Row 1 Column 2</td> </tr> <tr> <th>Row 2</th> <td>Row 2 Column 1</td> <td>Row 2 Column 2</td> </tr> </tbody> </table>
The class
attribute on the <table> tag is used to add borders in the table examples in the next section.
HTML table with border between cells
Although a style
attribute could easily be coded on the <table> tag to add a border style to an HTML table (<table style="border: 4px inset gray">
), this will only create a border around the whole table:
First Column Heading | Second Column Heading | |
---|---|---|
This is an example of an HTML table footer. | ||
Row 1 | Row 1 Column 1 | Row 1 Column 2 |
Row 2 | Row 2 Column 1 | Row 2 Column 2 |
For an HTML table with borders between cells, each cell needs the border style. Since coding a style attribute on every cell would be extremely rendundant, the easiest and simplest way to add the border style attribute is using CSS. Code a class
attribute on the <table> tag as shown in the HTML table example above. Then add the border styles using a link tag for a style sheet containing the following CSS code:
table.border { border-collapse: collapse; } table tr { vertical-align: top; } table.border th, table.border td { border: 4px inset gray; }
The value of "collapse"
for the CSS border-collapse
style displays a single border between cells rather than the default which gives each cell its own separate border. The CSS vertical-align
attribute shown aligns the text in each table row at the top of the cells in that row, unless overridden as shown for the table headings in the table example code above. Note that the CSS border
style is applied to the <th> tag and <td> tag on tables with borders in order to display a border around each table cell.
Multiple Column Heading | ||
---|---|---|
First Column Heading | Second Column Heading | |
This is an example of an HTML table footer. | ||
Row 1 | Row 1 Column 1 | Row 1 Column 2 |
Row 2 | Row 2 Column 1 | Row 2 Column 2 |