Tables

<style> #table1 { background-color:#eee; width:100%; } #table1 thead { background-color:#fee; } #table1 tbody { background-color:#efe; } #table1 tfoot { background-color:#eef; } </style> <table id="table1"> <caption>Caption</caption> <thead><tr><th>Header1</th><th>Header2</th></tr></thead> <tbody> <tr><td>cell1</td><td>cell2</td></tr> <tr><td>cell3</td><td>cell4</td></tr> </tbody> <tfoot><tr><th>Footer1</th><th>Footer2</th></tr></tfoot> <table>

<style> #table2 { width:100%; border:1px solid red; } #table2 thead, #table2 tbody, #table2 tfoot { border:1px solid green; } #table2 th, #table2 td { border:1px solid blue; } </style> <table id="table2"> <caption>Caption</caption> <thead><tr><th>Header1</th><th>Header2</th></tr></thead> <tbody> <tr><td>cell1</td><td>cell2</td></tr> <tr><td>cell3</td><td>cell4</td></tr> </tbody> <tfoot><tr><th>Footer1</th><th>Footer2</th></tr></tfoot> <table>

<style> #table3 { width:100%; border:1px solid red; border-collapse: collapse; } #table3 thead, #table3 tbody, #table3 tfoot { border:1px solid green; } #table3 th, #table3 td { border:1px solid blue; } </style> <table id="table3"> <caption>Caption</caption> <thead><tr><th>Header1</th><th>Header2</th></tr></thead> <tbody> <tr><td>cell1</td><td>cell2</td></tr> <tr><td>cell3</td><td>cell4</td></tr> </tbody> <tfoot><tr><th>Footer1</th><th>Footer2</th></tr></tfoot> <table>

<style> #table5 { width:100%; border:1px solid red; border-collapse: collapse; } #table5 thead, #table5 tbody, #table5 tfoot { border:1px solid green; } #table5 th, #table5 td { } </style> <table id="table5"> <caption>Caption</caption> <thead><tr><th>Header1</th><th>Header2</th></tr></thead> <tbody> <tr><td>cell1</td><td>cell2</td></tr> <tr><td>cell3</td><td>cell4</td></tr> </tbody> <tfoot><tr><th>Footer1</th><th>Footer2</th></tr></tfoot> <table>

<style> #table6 { width:100%; border:1px solid red; border-collapse: collapse; } #table6 thead, #table6 tbody, #table6 tfoot { } #table6 th, #table6 td { } </style> <table id="table6"> <caption>Caption</caption> <thead><tr><th>Header1</th><th>Header2</th></tr></thead> <tbody> <tr><td>cell1</td><td>cell2</td></tr> <tr><td>cell3</td><td>cell4</td></tr> </tbody> <tfoot><tr><th>Footer1</th><th>Footer2</th></tr></tfoot> <table>

<style> #table7 { width:100%; border-collapse: collapse; cell-spacing:1em 1em; } #table7 tr { border:1px solid blue; } #table7 td { background-color:#eee; } </style> <table id="table7"> <tr><td>cell1</td><td>cell2</td></tr> <tr><td>cell3</td><td>cell4</td></tr> <tr><td>cell5</td><td>cell6</td></tr> <table>

<style> #table8 { width:100%; } #table8 tbody tr:nth-child(odd) { background-color: #fee; } #table8 tbody tr:nth-child(even) { background-color: #eef; } </style> <table id="table8"> <caption>Caption</caption> <thead><tr><th>Header1</th><th>Header2</th></tr></thead> <tbody> <tr><td>cell1</td><td>cell2</td></tr> <tr><td>cell3</td><td>cell4</td></tr> <tr><td>cell5</td><td>cell6</td></tr> <tr><td>cell7</td><td>cell8</td></tr> </tbody> <tfoot><tr><th>Footer1</th><th>Footer2</th></tr></tfoot> <table>

<style> #cellspacedTables { border:none; } #cellspacedTables table { width:100%; margin:1em; } #cellspacedTables td { background-color:#eee; } </style> <div id="cellspacedTables"> <table style="border-spacing:1em"> <caption>Table 1</caption> <tr><td>cell1</td><td>cell2</td></tr> <tr><td>cell3</td><td>cell4</td></tr> <tr><td>cell5</td><td>cell6</td></tr> <tr><td>cell7</td><td>cell8</td></tr> </table> <table style="border-spacing:0 1em"> <caption>Table 2</caption> <tr><td>cell1</td><td>cell2</td></tr> <tr><td>cell3</td><td>cell4</td></tr> <tr><td>cell5</td><td>cell6</td></tr> <tr><td>cell7</td><td>cell8</td></tr> </table> </div>