html table

Table : Css html Table

Learn how Can we make different different style table for our web pages data by use html css; see some example below with explain


table, td, th and tr tag uses for create an table in css html td means table data th mean table horizontal line and tr means table table row.

so now we create some table below see example with explain 



Table 1




Table 1 is the simple basic table we not add something extra in this table Learn how can make css table 

In Css set color,border and align 

table,td,th{
    border:2px solid black;
 text-align:center; 

}


Create first horizontal line in html


<table style="width: 50%;">
<tr> <th>first Name</th> <th>Middle Name</th> <th>Last Name</th> </tr>
</table>




Create Table data see example



<table style="width: 50%;">

<tr> <th>first Name</th> <th>Middle Name</th> <th>Last Name</th> </tr>

<tr> <td>Manish</td><td>singh</td><td>Rawat</td> </tr>
<tr> <td>neck</td><td>jol</td><td>pre</td> </tr>
</table>



Collapse your table in css See an example below









use collapse properties 

table,td,th{
    border:2px solid black;
 text-align:center; 
border-collapse:collapse;


}


change td and th border color see example below









th{
    border: 2px solid red; 
 text-align:center;
    border-collapse:collapse;
}

td {
    border: 2px solid blue;
text-align:center;
    border-collapse:collapse; 
}



create specific table use css properties and give an look to them
see an example below


Css Properties Uses for specific change on table nth-child()


tr:nth-child(even){
 background-color:#ddd;
 }

tr:nth-child(odd){
 background-color:#eee;

 }



Remove border line from table use css properties see example below...












table,td,th{
    border:none;
 text-align:center;
}

th{
 border-bottom:1px solid red;
}

td{
 border-bottom:1px solid red;

}



Learn html css table creation and try it yourself; Learn how can we use css html properties for table.....


Visit More