WebTricks
Home
Home
Tutorials
Q&A Forum
Blog
Videos
Sign up / Register
HTML Tables - Playground
Back to Lesson
HTML Code
<!DOCTYPE html> <html> <head> <title>HTML Tables</title> <meta charset="UTF-8"> </head> <body> <h1>HTML Table</h1> <table class="basic"> <tr> <th width="33.33%">Name</th> <th width="33.33%">Age</th> <th width="33.33%">gender</th> </tr> <tr> <td>James</td> <td>32</td> <td>Male</td> </tr> <tr> <td>Siara</td> <td>24</td> <td>Female</td> </tr> </table> <style> table, tr, th, td{border:1px solid #333;} .basic{width:50%;border-collapse: unset;border-spacing: 1px;} </style> <h2>HTML Table - colspan</h2> <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Contact</th> </tr> <tr> <td>James Mathews</td> <td>6357957412</td> <td>2147597536</td> </tr> </table> <h2>HTML Table - rowspan</h2> <table style="width:100%"> <tr> <th>Name:</th> <td>James Mathews</td> </tr> <tr> <th rowspan="2">Contacts:</th> <td>6357957412</td> </tr> <tr> <td>2147597536</td> </tr> </table> <h2>HTML Table - Caption</h2> <table style="width:100%"> <caption>Monthly Expenditure</caption> <tr> <th>Month</th> <th>Expenses</th> </tr> <tr> <td>January</td> <td>$600</td> </tr> <tr> <td>February</td> <td>$550</td> </tr> </table> <h2>Adding style to a table</h2> <table id="uniqueTable"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Amy</td> <td>Jackson</td> <td>37</td> </tr> </tbody> </table> <style> #uniqueTable { width: 100%; background: lightcyan; margin-bottom: 10px; } #uniqueTable th{ background: darkgrey; color:white; } #uniqueTable th, #uniqueTable td{ padding: 5px 10px; } table{ margin-bottom: 20px; } </style> <h2>Nested Table</h2> <table width="100%" border="1"> <tr> <td>This is a normal cell inside a table.</td> <td>This is a normal cell inside a table.</td> </tr> <tr> <td>This is a normal cell inside a table.</td> <td> <table width="100%"> <tr> <td>Nested table row 1 column 1</td> <td>Nested table row 1 column 2</td> </tr> <tr> <td>Nested table row 2 column 1</td> <td>Nested table row 2 column 2</td> </tr> </table> </td> </tr> </table> </body> </html>
CSS Code
/* Write your CSS here */
Run Code