How to Use CSS Tables

If you are not satisfied with the way that the usual HTML tables appear, then you can use CSS tables in order to customize them. These properties would greatly improve the appearance of the tables that you can place on your page.

Styling Borders in CSS

If you want to change the border of the table that you are using then you can use the border property in CSS. Here is a code example for changing the border of a table in CSS:

table, th, td

{

border: 1px solid blue;

}

 

In this example, a blue border would be used for td, th and table elements. In this example the elements would have double borders. If you want the elements to have a single border then you should utilize the border collapse property.

The Table Width and Height

If you are not satisfied with the height and the width of the table that you are using then you can change that using CSS. You can use the width and height properties in order to change that. Here is a sample code where the width and the height of a table is being set:

table

{

width:80%;

}

th

{

height:40px;

}

 

In that example the width of table is being set at 80% and its height is being defined at 40 pixels. Using this property, you would be able to change the size of the table with ease. You could even keep on adjusting it until you have the right proportions.

Table Text Alignment

If you are not satisfied with the way that the text or the figures in your table are aligned then you can change and play around with it. You can use two properties for changing this, the text-align and the vertical-align. When you use the text-align property, you can change the horizontal alignment of the text on the table. When you use the vertical alignment you can change the placement of the text on the table from top, bottom and center. Here is a sample code for this:

td

{

text-align:right;

}

 

In this example the text is being aligned to the right.

Table Padding

If you want to change the space set between the content within a table and its borders, you can use a CSS property. This property is the padding property. Here is an example code that you can follow as a guide:

td

{

padding:20px;

}

 

In this case the padding is being set at 20 pixels. You can make further changes with that and increase or decrease the padding as you see fit.

Table Color

One of the more common things that a user might want to change when it comes to a table being placed on a page is the color. By changing the color you can change the general appearance of a table and emphasize some points about it. Here is a sample code that you can use:

table, td, th
{
border:1px solid green;
}
th
{
background-color:blue;
color:white;
}

 

In this example you can change the color of the different parts of the table.