How (and why) to use CSS "display: table-cell"?

It's even easier to use parent > child selector relationship so the inner div do not need to have their css classes to be defined explicitly:

.display-table {
    display: table; 
}
.display-table > div { 
    display: table-row; 
}
.display-table > div > div { 
    display: table-cell;
    padding: 5px;
}

<div class="display-table">
    <div>
        <div>0, 0</div>
        <div>0, 1</div>
    </div>
    <div>
        <div>1, 0</div>
        <div>1, 1</div>
    </div>
</div>

The display:table family of CSS properties is mostly there so that HTML tables can be defined in terms of them. Because they're so intimately linked to a specific tag structure, they don't see much use beyond that.

If you were going to use these properties in your page, you would need a tag structure that closely mimicked that of tables, even though you weren't actually using the <table> family of tags. A minimal version would be a single container element (display:table), with direct children that can all be represented as rows (display:table-row), which themselves have direct children that can all be represented as cells (display:table-cell). There are other properties that let you mimic other tags in the table family, but they require analogous structures in the HTML. Without this, it's going to be very hard (if not impossible) to make good use of these properties.

How (and why) to use display: table-cell (CSS)

I just wanted to mention, since I don't think any of the other answers did directly, that the answer to "why" is: there is no good reason, and you should probably never do this.

In my over a decade of experience in web development, I can't think of a single time I would have been better served to have a bunch of <div>s with display styles than to just have table elements.

The only hypothetical I could come up with is if you have tabular data stored in some sort of non-HTML-table format (eg. a CSV file). In a very specific version of this case it might be easier to just add <div> tags around everything and then add descendent-based styles, instead of adding actual table tags.

But that's an extremely contrived example, and in all real cases I know of simply using table tags would be better.

How to use display: table?

You use display: table the same way as any other CSS display property. You apply it to a specific HTML element (e.g., div) using CSS, then apply display: table-row / display: table-cell to its respective children. It has been well described in another answer. I'll also include snippets in the example below.

Why (and when) to use display: table?

Other answer either don't respond to this part, or state that you actually shouldn't use display: table. I don't share this perspective.

The display: table style is an extremely useful tool for expressing simple tabular layout (as opposed to presenting actual tables, understood as a way for organizing information). It's underused and has some bad reputation only because the table element used to be extremely abused for doing layout in the old days of the Web.

In my opinion, display: table should (or at very least can) be used whenever one intends to build a simple tabular layout in HTML/CSS (as opposed to presenting a semantic table), because it's the simplest tool that achieves this goal.

Example of a good use of display: table

Imagine you want to build a web application featuring a quiz game. Your intended layout is supposed to look like this:

Let's assume that this is a mockup shown by a UI/UX designer.

These are just four tiles with answers to a quiz question that are organized in a 2 x 2 tabular layout for fun, and similarly their coloring doesn't have any meaning.

It looks like a tabular layout to me. It's a good use case for display: table. It's not the only way to realize this layout, but it's a very reasonable one.

The crucial part of the HTML:

<div class="quiz-button-section">
    <div class="quiz-button-row">
        <button class="quiz-button">New York</button>
        <button class="quiz-button">Paris</button>
    </div>
    <div class="quiz-button-row">
        <button class="quiz-button">London</button>
        <button class="quiz-button">Berlin</button>
    </div>
</div>

Respectively, CSS:

.quiz-button-section {
    display: table;
}

.quiz-button-row {
    display: table-row;
}

.quiz-button {
    display: table-cell;
}

You can also model this tabular layout both with display: flex and display: grid. I'd argue that it's simpler with display: table. flex / grid offer great power, none of which we need in this case.

This quiz example absolutely shouldn't be modeled using the table / tr / td tags, unles you mainly target Internet Explorer 6 (or earlier) and literally have no other choice.

Example of a bad use of display: table

Imagine you were asked to present this information on a website:

Let's assume that this is a mockup shown by a UI/UX designer.

It's a true table. The most recommended and semantically correct way is to use the most old-school table tag. It shouldn't be modelled by explicitly setting display: table on, let's say, a div element.