CSS Tables

CSS Tables
Nikhil
Published on 2021-07-08 16:30:35

Table-layout


The table-layout property changes the algorithm that is used for the layout of a table. Below an example of two tables both set to width: 150px:

table css

The table on the left has table-layout: auto while the one on the right has table-layout: fixed. The former is wider than the specified width (210px instead of 150px) but the contents fit. The latter takes the defined width of 150px, regardless if the contents overflow or not.

table Value Description

  • auto This is the default value. It defines the layout of the table to be determined by the contents of its' cells.
  • fixed This value sets the table layout to be determined by the width property provided to the table. If the content of a cell exceeds this width, the cell will not resize but instead, let the content overflow.

 

Table empty-cells


The empty-cell property determines if cells with no content should be displayed or not. This has no effect unless border-collapse is set to separate. Below an example with two tables with different values set to the empty-cells property:

table

The table on the left has empty-cells: show while the one on the right has empty-cells: hide. The former does display the empty cells whereas the latter does not.

Value Description of empty cells

  • shows This is the default value. It shows cells even if they are empty.
  • hide This value hides a cell altogether if there are no contents in the cell.

 

Table border-collapse


The border-collapse property determines if a tables' borders should be separated or merged.

Below an example of two tables with different values to the border-collapse property:

table

The table on the left has border-collapse: separate while the one on the right has border-collapse: collapse.

Value Description

  • separate This is the default value. It makes the borders of the table separate from each other.
  • collapse This value sets the borders of the table to merge together, rather than being distinct.

 

Border-spacing


The border-spacing property determines the spacing between cells. This has no effect unless border-collapse is set to separate.

Below an example of two tables with different values to the border-spacing property:

border table

The table on the left has border-spacing: 2px (default) while the one on the right has border-spacing: 8px.

Value Description

  • <length> This is the default behavior, though the exact value can vary between browsers.
  • <length> <length> This syntax allows specifying separate horizontal and vertical values respectively.

 

Caption-side


The caption-side property determines the vertical positioning of the <caption> element within a table. This has no effect if such an element does not exist.

Below an example with two tables with different values set to the caption-side property:

table

The table on the left has caption-side: top while the one on the right has caption-side: bottom.

Value Description

  • top This is the default value. It places the caption above the table.
  • bottom This value places the caption below the table.

ATutorialHub Related Guide

Comments (8)

Leave a Comment

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

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website