Learn how to write 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
<tr>
<td colspan="2"> colspan example </td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<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.