Tables in CSS:

In HTML you have learn how to create a table. To create a table you have to use the table tag. If you don’t know how to create a table than first of all go to our web site (http://www.techieweb.in/category/tutorial/html/) and learn how to create a table.

Now you are able to create a table in HTML. But this is a very simple table. CSS gives you that ability to create an attractive table. In this topic we will learn which styling properties we can apply on a table.

Here is a list of some styling that we can apply on table:

  • border property
  • border-collapse property
  • border-spacing property
  • text alignment property
  • width and height property
  • caption-side property
  • empty-cell property
  • padding property
  • color property

 Border Property in Table:

When you create a simple table than it will not show any border on browser. If you want to show table with border than you have to use “border” property in styling.

Example:

In following example we are applying border to the table

 Border Collapse Property in CSS:

In CSS we have border-collapse property to do some styling on border. We can pass two values in border-collapse property:

  • separate: this is a default value means if you not assign border-collapse property than it will take this value. This value separate the borders form each other.
  • collapse: this value deletes the gap between the row and columns.

Example:

Following example is with border separate property.

Example:

Following example is with border collapse property.

 Border Spacing Property in CSS:

The border-spacing property in CSS is use to specify the distance between cells and borders. This property can take two values one for horizontal space and another is for vertical space.

Example:

 Width and Height Property in CSS:

If we don’t assign the width and height of a table than it will take the height and width of the content, but if you want to specify the width and height of table than you can do it with the help of CSS.

Example:

 Text Alignment Property in CSS:

We can also set the alignment of text with the text-alignment property of table in CSS. We can align text in two ways:

  • text align property
  • vertical align property

text-align:We can align text horizontally such as left, right, center by text-align property.

Example:

vertical-align: We can align text vertically such as top, bottom, middle by vertical-align property.

Example:

 Padding Property in CSS:

To specify the space between cell content and cell border we use padding property in CSS.

Example:

 Color Property in CSS:

We can assign color to the table content, table border and also we can apply color to the background of table.

Example:

 Caption Side Property in CSS:

You already know what is caption but if you don’t know than I will give you brief about it.

Caption is use to give heading to the table. It will display in the centre of table but you can also set the side of caption with the help of CSS.

Example:

In following example we are setting all sides of caption

 Empty Cell Property in CSS:

If there are empty cells in a Table than we can set that the border to display or not to display with the empty-cell property. For this property we have three values show, hide or inherit.

If we use show than it will display the border and if we use hide than it will not display the border and if we use inherit so it will take the value which is assigned in parent table.

Example:

In following example we are setting the HIDE property for empty cell

 Example:

In following example we are setting the SHOW property for empty cell

 

Leave a Reply

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