The world of the web designing, web development and other web design tutorials.

Slider (DO NOT EDIT HERE!)

Tuesday, 8 July 2014

Best Guide Of CSS Tables

css tables

Html tables are headache people don't like tables mostly newbie. Styling tables is not difficult as people think but the table need more concentration. Today we going to explore how to style tables with css? Tables are used for tabular data. Today we only discuss basic styling of html table. To learn css tables you must know about the html tables.If you have good knowledge of html and css you don't need to worry.

CSS Tables With Border Property

For adding the border you use border property.
Example;
table, td, th {
border:1px solid green;
}
css tables

CSS Tables With Collapsed Property

 We used collapse property to collapse the border of table and table cell.
Example;

table{
  border-collapse:collapse;
}
css tables

CSS Tables Width And Height Property

you can add the width and height  to the table it is important for styling css tables because with these properties you look more beautiful.
Example;

table{
width:100%;
}
td,th{
height: 60px;
}
css tables

CSS Tables With Padding Property;


You know that the padding property you control space between the element and border. In tables you can use this property to control the table cell.
Example; 
td,{
padding: 20px; }
css tables

CSS Tables With Text Alignment Property


I think you already know why we use this property but i repeat it again. We use the alignment property to move a text right, center and left.
Example;
table {
width:100%;
}
table,td,th{
border: 1px solid black;
}
td {
padding:20px;
    text-align: center;}
css tables

Conclusion:
Now friend you can style simple tables easily. In the future we will design some tables practically.
Please don't forget to share our post with you friends. THANKS FOR READING

0 comments:

Post a Comment