|
Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing |
HTML Tags
HTML5
Table in HTML
Learn how to write TABLE in HTML
Table tag <table></table> is used when we want to display something in a table structure
This is how a simple html table may look like.
Now we learn few more optional elements in table tag
Here is the code for HTML Table sample, now you can write CSS class for 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.
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>
<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>
<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>
<tr>
<td></td>
<td></td>
</tr>
</thead>
Using tfoot for HTML Table footer
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
Using tbody for HTML Table body content
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</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>
<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.
Comment
HTML Table Tag, Online HTML Tutorial
