HTML Tables

This page demonstrates how to create HTML tables. You can copy and paste the code into your own webpage or HTML document.

HTML tables are created using the HTML table tag. You combine this tag with other tags that define each row and column within your table.

Basic HTML Table

Here's an example of a basic HTML table:

Source Code
Result Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

Adding Styles

You can use Cascading Style Sheets (CSS) to style your table so that it changes the look.

Source Code	Result
	Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

The code above uses the <table></table> tags to create the outer table. Then it uses the <tr></tr> tags to define each table row. The <th></th> tags define the table header cells, and the <td></td> tags define each table data cell.

Note that the table header cells display the text slightly differently to the table data cells. This is because, the table headers are supposed to stand out.

This example uses Cascading Style Sheets (CSS) to determine how the table looks. This is everything between the<style></style> tags. You can actually remove this code and the table will be a normal looking HTML table. Nothing wrong with that. Of course, you can also modify the CSS code to give your HTML tables a unique look and feel.

Same Table, Different Style

Below is an example of the same HTML table, but with a different set of styles. In other words, the HTML table has been coded using the exactly the same HTML code as the one in the above example. The only difference is that it references a different stylesheet (i.e. it uses class="myOtherTable" instead of class="myTable").

This demonstrates how changing the CSS part of the code can have a huge impact on how the HTML table is displayed in the browser.

Source Code	Result
	Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4