HTML Table tag CSS style

Html Table can have header, footer, column and rows.

In this tutorial, you will learn how to create html table using CSS style sheet class, we can write dynamic css class for HTML table header footer row etc.

Learn Html TABLE Tag

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>

How to use HTML Table tag in web page

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

Merging cells like when you want to have a section header or footer, you can merge horizontal cells using colspan attribute.

<tr>           
<td colspan="2"> colspan example  </td>
</tr>
<tr>
<td></td>
<td></td>
</tr>

Thead in Table header

Thead tag used for table header we can directly write css for tHead element.

<thead> <tr>
<td></td>
<td></td>
</tr>
</thead>

TFoot for HTML Table footer

TFoot tag used for table footer we can directly write css for TFoot element.

<tfoot>            
<tr>
<td></td>
<td></td>
</tr>
</tfoot>

Table tbody element

tbody tag contain the body part of the table element, we can apply css class on tbody element.

<tbody>
<tr>            
<td></td>            
<td></td>            
</tr>            
</tbody>

Html Table Elements

Here is the output, you can see this table has all css style, header color, footer color, row has different color and font style.

this is table header section

tbody	the main page content goes here
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.

HTML Tutorial | Web Designing Course | CSS Course

Learn HTML coding online, create your own webpage, build business online free of cost.

Web Designing Tutorials

HTML5 Introduction

Learn CSS Stylesheet

Learn Bootstrap CSS

JavaScript Coding Tutorial

HTML Tutorial

HTML Table Tag Style: Create Html table using CSS- Table Header Footer

Digital marketing Tools

HTML Tutorial | Web Designing Course | HTML5 Introduction