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.
The above code will show a 1px black border around the all the tables in the page.
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;
}
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; }
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; }
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;
}
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.