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:

Comments

  1. says

    I simply want to tell you that I am just newbie to weblog and actually enjoyed this web-site. Likely I’m likely to bookmark your blog . You surely come with excellent articles and reviews. Thank you for sharing with us your web site.

  2. says

    It’s the best time to make a few plans for the long run and it’s time to be happy. I’ve read this put up and if I may I want to recommend you few fascinating things or suggestions. Perhaps you can write next articles relating to this article. I wish to learn more things about it!

  3. says

    I simply want to say I’m very new to blogs and seriously savored this web-site. Probably I’m going to bookmark your blog post . You really come with beneficial stories. Thanks a bunch for sharing your webpage.

  4. says

    I just want to mention I’m beginner to blogging and honestly loved this web blog. Likely I’m going to bookmark your blog post . You really have wonderful articles. Appreciate it for sharing your website.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>