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 border="1">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

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

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myTable { width:400px;background-color:#eee;border-collapse:collapse; }
.myTable th { background-color:#000;color:white;width:50%; }
.myTable td, .myTable th { padding:5px;border:1px solid #000; }
</style>
<!-- End Styles -->
<table class="myTable">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

The code above uses the <table> tags to create the outer table. Then it uses the <tr> tags to define each table row. The <th> tags define the table header cells, and the <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 opening and closing <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

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myOtherTable { width:400px;background-color:#FFFFE0;border-collapse:collapse;color:#000;font-size:18px; }
.myOtherTable th { background-color:#BDB76B;color:white;width:50%;font-variant:small-caps; }
.myOtherTable td, .myOtherTable th { padding:5px;border:0; }
.myOtherTable td { font-family:Georgia, Garamond, serif; border-bottom:1px solid #BDB76B;height:180px; }
</style>
<!-- End Styles -->
<table class="myOtherTable">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

Here's more table related stuff: