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:
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.
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:
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.
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:
The table on the left has border-collapse: separate while the one on the right has border-collapse: collapse.
- 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.
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:
The table on the left has border-spacing: 2px (default) while the one on the right has border-spacing: 8px.
- <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.
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:
The table on the left has caption-side: top while the one on the right has caption-side: bottom.
- 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
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2
Sea battle game only using HTML and CSS
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website