Table in HTML
Table tag <table></table> is used when we want to display something in a table structure
-
Table is defined using <table> tag, a table contains row and column.
-
To create a row <tr> element is used, a table can have any number of rows.
-
To create a column use <td> element.
-
You need to place the TD element inside the row, this is how you write
<tr> <td>Col 1</td> <td>Col 2</td> </tr>
This is how a simple html table may look like.
<table> <tr> <td>Header 1</td> <td>Header 2</td> </tr> <tr> <td>Content 1</td> <td>Content 2</td> </tr> </table>
Now we learn few more optional elements in table tag
-
You can merge Table-cells using colspan and rowspan attributes
-
Table Header - using <thead>
-
Table Footer - using <tfoot>
-
Table Body - using <tbody>
Merge Table cells in HTML
<tr> <td colspan="2"> colspan example </td> </tr> <tr> <td></td> <td></td> </tr>
Using thead for HTML Table header
<thead> <tr> <td></td> <td></td> </tr> </thead>
Using tfoot for HTML Table footer
<tfoot> <tr> <td></td> <td></td> </tr> </tfoot>
Using tbody for HTML Table body content
<tbody> <tr> <td></td> <td></td> </tr> </tbody>
| Element | Description |
| thead | this is table header section |
| tbody | |
| tfoot | this is table footer section |
| colspan | when we need to merge two cells |
| this is an example of footer and colspan | |
Here is the code for HTML Table sample, now you can write CSS class for Table
<table class="tabTask" style="width:100%;"> <thead> <tr> <td> Element </td> <td> Description </td> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> <tfoot> <tr> <td colspan="2" style="text-align:center;"> this is an example of footer and colspan </td> </tr> </tfoot> </table>
Whatever you can view on any webpage comes under <body></body> tag
We suggest not to use table while designing a webpage if not necessary, this is not good for responsive layout design and not good for SEO , instead try to use div , span etc.
