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:
You can use Cascading Style Sheets (CSS) to style your table so that it changes the look.
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
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.