HTML Tables Examples

This page contains examples of HTML tables - examples of table-specific code that you can use for your own website.

To use the code, copy it straight from the text box and paste it into your own website. Feel free to modify it as required.

<style type="text/css">
table.example1 {background-color:transparent;border-collapse:collapse;}
table.example1 td {border:1px solid black;padding:5px;width:50%;}
</style>
<table class="example1">
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

More info: <table>, HTML Tables, Table Generator.

<style type="text/css">
table.example2 {background-color:transparent;border-collapse:collapse;width:100%;}
table.example2 th, table.example2 td {text-align:center;border:1px solid black;padding:5px;}
table.example2 th {background-color:AntiqueWhite;}
table.example2 td:first-child {width:20%;}
</style>
<table class="example2">
<tr>
<th>Table header</th><th>Table header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

More info: <th>, HTML Table Tutorial, Table Generator.

<style type="text/css">
table.example3 {background-color:transparent;border-collapse:collapse;width:100%;}
table.example3 th, table.example3 td {text-align:center;border:1px solid black;padding:5px;}
table.example3 th {background-color:AntiqueWhite;}
table.example3 td:first-child {width:20%;}
</style>
<table class="example3">
<tr>
<th colspan="2">Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

More info: HTML Tables, Table Borders, Table Color.

<style type="text/css">
table.example4 {background-color:transparent;border-collapse:collapse;width:100%;}
table.example4 th, table.example4 td {text-align:center;border:1px solid black;padding:5px;}
table.example4 th {background-color:AntiqueWhite;}
table.example4 th:first-child {width:20%;}
</style>
<table class="example4">
<tr>
<th rowspan="2">Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>

More info: HTML Table Tutorial, Table Generator.

<style type="text/css">
table.example5 {background-color:GreenYellow;border:1px dotted black;width:100%;}
table.example5 th, table.example5 td {text-align:center;border:0;padding:5px;background-color:transparent;}
table.example5 th {background-color:LimeGreen;color:white;}
table.example5 th:first-child {width:20%;}
</style>
<table class="example5">
<tr>
<th rowspan="2">Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>

More info: Table Backgrounds, Table Background Color.

Qhmit.com

HTML Tables Examples

Related