CSS Table Setting

css tableTable which can be made by HTML Table code  but with the help of css table styling property it can be more attractive, more colorful to it’s user.

By using some css properties we can design table header,table border,table data,table row & cell etc.

Table border Styling:

Table border table header border(thtable data(td) border & color can be

 

defined in the following way:

<html>
<head>
<style> /* internal css */ 
table,th,td
{
border:2px solid green ;
}
</style>
</head>

<body>
<table>
<tr>
<th>First_Name</th>
<th>Last_Name</th>
</tr>
<tr>
<td>Sakil</td>
<td>Arefin</td>
</tr>
<tr>
<td>Humayun</td>
<td>kabir </td>
</tr>
</table>
</body>
</html>

The output of the code look like below:

css table styling

Table Collapse borders:

We will use the  borders collapse property when we need only a single border or separate border.

For Example:

<html>
<head>
<style>/* Internal css*/
table
{
border-collapse:collapse;
}

table,th,td
{
border:2px solid green ;
}
</style>
</head>

<body>
<table>
<tr>
<th>First_Name</th>
<th>Last_Name</th>
</tr>
<tr>
<td>Sakil</td>
<td>Arefin</td>
</tr>
<tr>
<td>Humayun</td>
<td>kabir </td>
</tr>
</table>
</body>
</html>

The output of the code look like below:

border-collapase

Table Height,width,Header background color,text alignment,padding:

By using css table styling properies we can change table height,width,text alignment,size,header background color & padding of the table data.

For Example:

<html>
<head>
<style>/* internal css start here */
table
{
border-collapse:collapse;
width:80%;
}

table,th,td
{
border:2px solid green ;

}
th /* table header property */
{height:45px;
background:green;
}

td /* table data property */
{ font-size:16px;
color:#FF00FF;
text-align:center;
padding:10px; /* table data padding*/
}

</style>
</head>

<body>
<table>
<tr>
<th>First_Name</th>
<th>Last_Name</th>
<th>Earning</th>
</tr>
<tr>
<td>Sakil</td>
<td>Arefin</td>
<td>$5000</td>

</tr>

<td>Humayun</td>
<td>kabir </td>
<td>$3000</td>

</tr>

</table>
</body>
</html>

The output of the code look like below:

table width-height

Related Post or you may interest on the following post:

Like Our Facebook Page To Get Update