CSS

CSS Table :(CSS Tutorials:part-13)

Written by Taj12

Tables are used to mark up tabular data in the web pages. Sometimes the layout of HTML is designed by the tables. But you should avoid the using of tables for layout design and try to represent data only. It has some properties for designing purpose and they are:

  •   caption-side
  •   table-layout
  •   border-collapse
  •   border-spacing

The caption-side property:

Every table has a caption to identify itself. The caption-side property is used to specify the placement of the caption. This property receives top or bottom as the value. The top value specifies top position and the bottom specifies the bottom position of the caption.

Example:

Output:

CSS Table :(CSS Tutorials:part-13)

The table-layout property:

The table width may vary in the length of data and you need to control the length sometimes. You have already noticed that the width automatically expand to place itself. You can handle expanding with the table-layout property. This property receives auto or fixed as the value. The fixed valued table is not expandable.

Example:

 

The border-collapse property:

The tables include a space between two cells. To remove that space you can use the border-collapse property. This property receives collapse as a value and then removes the space. The separate value is the primary value.

Example:

 

The border-spacing property:

The border-spacing property is the more suitable property for controlling the space between two cells than the border-collapse property. This property is most effective and gives full service to control spacing. It receives a length and gives a space according to the length.

 

Example:

Output:

The border-spacing property:

 

 

 

About the author

Taj12

1 Comment

Leave a Comment