CSS: display:block; vs display:table;
Comparing the two (block and table), I don't know of any core differences (there may be minor ones) you would see within a vacuum. I believe the major differences are specifically to children. Tables and their children have very different attributes/relationships than a div and its children.
As far as inline-block and inline-table see: What is the difference between inline-block and inline-table?
This article (http://css-tricks.com/almanac/properties/d/display/) has some interesting information, specifically regarding all the different display properties related to a table.
Both will be block-level, in that they won't display next to anything else, by default.
There is a significant difference in the actual display of the element. display: block;
will extend to 100% of the available space, while display: table;
will only be as wide as its contents.
Also, as others have mentioned, display: table;
is required to get display: table-cell;
or other table-
stuff to work in the descendents.
I only know this because I just ran into the problem of trying to get the display: table;
to fill the width of the container. I haven't been able to see if there is a difference in the display of display: inline;
and display: inline-table;
.
https://jsfiddle.net/nnbonhc6/
I was researching this today, and I found this section of the CSS spec to be helpful: http://www.w3.org/TR/CSS21/tables.html#model
Notably,
the table generates a principal block box called the table wrapper box that contains the table box itself and any caption boxes (in document order). The table box is a block-level box that contains the table's internal table boxes.
As I understand it, this essentially means the browser generates an invisible container block for anything with display: table
!