Styling tables using CSS3

Everyone know about simple tables and how they look. We use the tables to display the data on our web pages. When we talk about the website design, everything on the website must be in a proper design pattern, so it look attractive.
This is a simplest example of how the table looks:

May be its the best one for some of the sites, but its not so good looking at all.
According to our themes, most of the time, we gotta design everything present on a single page. 
Like other things we can design tables too using CSS3. 

Table Borders

By default, when we use <table> tags, the border of the table is set to none. Means there is no border by default. We can make some border around the table using HTML and CSS3 too:

table, th, td { border: 1px solid black; }
The above code will show a 1px black border around the all the tables in the page.
e.g., http://css3wdesign.net16.net/border.html
In the above mentioned example the table has double border on its sides. This is because the th/td elements have separate borders mentioned.
To show a single border on it we use:

border-collapse property

The border-collapse property indicates that whether the border of the table are collapsed or separated

table { border-collapse: collapse; }
table, th, td { 1px solid black; }
It gives a very good looking effect on table. Have a look yourself: http://tinyurl.com/q8plg6k

Table Width and Height

We can also change the table width and height with CSS3. We can change the table's cell height separately too. 

table { width: 100%; }
th { height: 50px; }
e.g., http://tinyurl.com/myzmc3c

Table Text Alignment

Horizontal Alignment

We can change the text alignment in the table cell too. 
The text-align property sets the text's horizontal place, like left, center or right.

th { text-align: left; }

Vertical Alignment

We can also change the vertical place of the text in a cell, like top, bottom or middle.

th { height: 50px;
      vertical-align: bottom; }

Table Padding

By default the table don't have any space between the border and text. To control the space between the table cell and content in the cell we use pading property. We can set its value in pixels.

td { padding: 15px; }

Background Color

We can change the table's background color too. It allows us to make the table look like our theme.
We can design interactive tables using this property.
The below code snippet specifies the table's border colors and text color and th element's background color:

table, td, th { border: 1px solid green; }
th { background-color: green; color: white; }
Have a look on the fully designed and customized table here: http://tinyurl.com/lt5mecj
Download the code given in the following article: http://tinyurl.com/oarhaoa

Muhammad Arslan Aslam

I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.

Get Free Email Updates to your Inbox!

Post a Comment

Suggestions will be greeted.


Copyright © CSS3 (Web Designing) | Designed By Code Nirvana