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
border:

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
border-collapse:

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
border-spacing:

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
border-spacing:

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
table-layout:

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.