Search within TutorialsPark

CSS Tables

Use CSS to apply styles to tables elements to suit your requirements

CSS Tables: Styling the Table Borders

Company OS
Apple IOs
Google Android

1. You can style your tables with borders effects using CSS property of border.

2. Each Border can be styled independently with the border property, within <table> or <td>, with <td> border will be created for individual cells too.

Example: CSS Table - border

Give it a TRY! » Exercise: Remove Comment symbols from the border property for individual borders, to see addition border applications.

CSS Collapsing Table Borders: border-collapse

Company OS
Apple IOs
Google Android

1. The gap in between the table cell borders can be controlled using CSS property of border-collapse

2. The CSS property border-collapse can have two values:

seperate : Creates a gap in-between table cells.

collapse : Table borders will be collapsed into a single border.

Example: CSS Table - border-collapse

Give it a TRY! » Note: The gap in between the table cells is not removed, but thickness is reduced to just 1px.

CSS Tables with Seperate Borders

Company OS
Apple IOs
Google Android

1. The appearance of tables with border-collapse property set seperate can be enhanced using border-spacing

2. CSS property border-spacing is used to set the amount of space in-between the adjacent table elements .

3. The value can be only positive specified in pixels("px") or any length units(eg:cm)

Example:CSS Table Border border-spacing

Give it a TRY! » Note: Border are maintained for individual cells with border-collapse set as seperate .

CSS Table : empty-cells

Company OS Version
Apple 7
Google Android 4.4

1. If a table cell is empty(i.e no data) if simply left as blank box with borders.

2. But the appearance of this blank box can be controlled using empty-cells property

3. The value of empty-cells can be :

hide : The border and background of the table cells are hidden

show: Background and border are shown for empty cell. Its the default.

inherit : Property value is inherited for child element from parent element.

Example: CSS Table empty-cells

Give it a TRY! » Note: Same effect can be achieved by setting the visibility property to hidden

CSS Table layout: table-layout

Company OS Version
Apple 7
Google Android 4.4

1. The way the table is to be displayed can be set using table-layout property.

2. The property table-layout can assume two values

auto: Browser calculates the width of table cells based on content and complete width of the table.Its the default value

fixed : The width of the table is fixed,the size is set using the CSS property of width for individual columns

Example: CSS Table table-layout

Give it a TRY! » Note:Do not confuse <pre> and <nobr> with white-space property.