Home 〉 CSS Tutorials 〉 CSS Display Table Property Explained with Examples | Learn Table Layout in CSS
CSS Display Table Property Explained with Examples | Learn Table Layout in CSS !
CSS Display Table Property Explained with Examples | Learn Table Layout in CSS !
Need to create table-like layouts without using '<table>' tags? The 'display: table' and related values like 'table-row' and 'table-cell' let you structure content as if it were a table. This is great for email templates and older layout techniques. It also helps when building layouts with dynamic content.
Introduction
In a previous post, we covered the full range of CSS display types, including 'block', 'inline', 'flex', and 'grid'. If you haven't read that yet, check out our guide:
👉 CSS Display Property Explained with Examples | Block, Inline, Flex, Grid
Today, we're focusing on a specific and often overlooked value: 'display: table' and its related values like 'table-row', 'table-cell', and more. These properties allow you to create table-like layouts using CSS, without using '<table>' HTML tags.
In this Tutorial, we are going to cover the following CSS 'display : table' properties:
- 'display: table'
- 'display: table-row'
- 'display: table-cell'
- 'display: table-caption'
- 'display: table-header-group'
- 'display: table-footer-group'
- 'display: table-row-group'
- 'display: table-column-group'
- 'display: table-column'
- 'caption-side'
- 'vertical-align'
- 'border-collapse'
- 'border-spacing'
Why Use Display Table in CSS?
- Lets you structure content in rows and columns.
- Great alternative to traditional HTML '<table>'.
- Provides better flexibility with custom layouts.
Syntax
Syntax ✍
.selector {
display: table | table-row | table-cell | table-caption;
}
CSS Display Table Values and Examples
Let's explore each related value with simple examples.
'display: table'
It turns an element into a table container.
Example 📄
<div style="display: table; width: 100%;">
<!-- Rows go here -->
</div>
Think of this as the wrapper that behaves like '<table>'.
'display: table-row'
It behaves like a '<tr>' (table row).
Example 📄
<div style="display: table;">
<div style="display: table-row;">
<!-- Cells go here -->
</div>
</div>
'display: table-cell'
Acts like a '<td>' (table cell). You must place it inside a 'table-row'.
Example 📄
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell; padding: 10px; border: 1px solid #ccc;">Cell 1</div>
<div style="display: table-cell; padding: 10px; border: 1px solid #ccc;">Cell 2</div>
</div>
</div>
Output: Two side-by-side boxes behaving like table cells.
'display: table-caption'
Optional, used for adding a title above the table.
Example 📄
<div style="display: table;">
<div style="display: table-caption; caption-side: top; font-weight: bold;">
Table Caption
</div>
<div style="display: table-row;">
<div style="display: table-cell;">Cell 1</div>
<div style="display: table-cell;">Cell 2</div>
</div>
</div>
'caption-side' Property
Controls position of the caption.
Example 📄
caption-side: top | bottom;
Example of common 'HTML table'
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<table border="1">
<caption>Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
output 📌
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Example of 'display: table' property with all its properties:
Code : 2 📝
<!DOCTYPE html>
<html>
<head>
<style>
.table1 {
display: table;
border: 5px solid black;
}
.table1 .table-header {
display: table-header-group;
}
.table1 .table-footer {
display: table-footer-group;
}
.table1 .table-row {
display: table-row;
}
.table1 .table-cell {
display: table-cell;
border: 1px solid black;
padding: 5px 10px;
}
.table1 .table-caption {
display: table-caption;
}
.table-vat .table-cell {
vertical-align: top;
}
.table-vam .table-cell {
vertical-align: middle;
}
.table-vab .table-cell {
vertical-align: bottom;
}
</style>
</head>
<body>
<b>This following 'table' has following 'CSS styling' </b>
<ul class="aul">
<li>.table1 { display: table; border: 5px solid black; }</li>
<li>.table1 .table-header { display: table-header-group; }</li>
<li>.table1 .table-footer { display: table-footer-group; }</li>
<li>.table1 .table-row { display: table-row; }</li>
<li>.table1 .table-cell { display: table-cell; border: 1px solid black; padding: 5px 10px; }</li>
<li>.table1 .table-caption { display: table-caption; }</li>
</ul>
<div class="table1">
<div class="table-caption">Table Caption</div>
<div class="table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> <div class="table-cell">Header 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-footer"> <div class="table-cell">Footer 1</div> <div class="table-cell">Footer 2</div> <div class="table-cell">Footer 3</div> <div class="table-cell">Footer 4</div> </div>
</div> <br> <hr style="border: 1px solid lightcoral;"> <br>
<h3 class="ah3">border-collapse: collapse</h3>
<div class="table1" style="border-collapse: collapse;" >
<div class="table-caption">Table Caption</div>
<div class="table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> <div class="table-cell">Header 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-footer"> <div class="table-cell">Footer 1</div> <div class="table-cell">Footer 2</div> <div class="table-cell">Footer 3</div> <div class="table-cell">Footer 4</div> </div>
</div> <br> <hr style="border: 1px solid lightcoral;"> <br>
<h3 class="ah3">border-collapse: separate</h3>
<div class="table1" style="border-collapse: separate; border-spacing: 5px;" >
<div class="table-caption">Table Caption</div>
<div class="table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> <div class="table-cell">Header 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-footer"> <div class="table-cell">Footer 1</div> <div class="table-cell">Footer 2</div> <div class="table-cell">Footer 3</div> <div class="table-cell">Footer 4</div> </div>
</div> <br> <hr style="border: 1px solid lightcoral;"> <br>
<h3 class="ah3">border-spacing: 5px</h3>
<div class="table1" style="border-collapse: separate; border-spacing: 5px;" >
<div class="table-caption">Table Caption</div>
<div class="table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> <div class="table-cell">Header 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-footer"> <div class="table-cell">Footer 1</div> <div class="table-cell">Footer 2</div> <div class="table-cell">Footer 3</div> <div class="table-cell">Footer 4</div> </div>
</div> <br> <hr style="border: 1px solid lightcoral;"> <br>
<h3 class="ah3">border-spacing: 10px 5px (left right / top bottom) </h3>
<div class="table1" style="border-collapse: separate; border-spacing: 10px 5px;" >
<div class="table-caption">Table Caption</div>
<div class="table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> <div class="table-cell">Header 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-footer"> <div class="table-cell">Footer 1</div> <div class="table-cell">Footer 2</div> <div class="table-cell">Footer 3</div> <div class="table-cell">Footer 4</div> </div>
</div> <br> <hr style="border: 1px solid lightcoral;"> <br>
<h3 class="ah3">caption-side: top (default) </h3>
<div class="table1">
<div class="table-caption" style="caption-side: top;">Table Caption</div>
<div class="table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> <div class="table-cell">Header 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-footer"> <div class="table-cell">Footer 1</div> <div class="table-cell">Footer 2</div> <div class="table-cell">Footer 3</div> <div class="table-cell">Footer 4</div> </div>
</div> <br> <hr style="border: 1px solid lightcoral;"> <br>
<h3 class="ah3">caption-side: bottom</h3>
<div class="table1">
<div class="table-caption" style="caption-side: bottom;">Table Caption</div>
<div class="table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> <div class="table-cell">Header 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-footer"> <div class="table-cell">Footer 1</div> <div class="table-cell">Footer 2</div> <div class="table-cell">Footer 3</div> <div class="table-cell">Footer 4</div> </div>
</div> <br> <hr style="border: 1px solid lightcoral;"> <br>
<h3 class="ah3">vertical-align: top (default) </h3>
<ul class="aul">
<li>See the above 'internal styling' for this code.</li>
<li>We have 'styled' with class '.table-vat'.</li>
</ul>
<div class="table1 table-vat">
<div class="table-caption">Table Caption</div>
<div class="table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> <div class="table-cell">Header 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1 <br>Data 1a <br>Data 1b</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-footer"> <div class="table-cell">Footer 1</div> <div class="table-cell">Footer 2</div> <div class="table-cell">Footer 3</div> <div class="table-cell">Footer 4</div> </div>
</div> <br> <hr style="border: 1px solid lightcoral;"> <br>
<h3 class="ah3">vertical-align: middle </h3>
<ul class="aul">
<li>See the above 'internal styling' for this code.</li>
<li>We have 'styled' with class '.table-vam'.</li>
</ul>
<div class="table1 table-vam">
<div class="table-caption">Table Caption</div>
<div class="table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> <div class="table-cell">Header 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1 <br>Data 1a <br>Data 1b</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-footer"> <div class="table-cell">Footer 1</div> <div class="table-cell">Footer 2</div> <div class="table-cell">Footer 3</div> <div class="table-cell">Footer 4</div> </div>
</div> <br> <hr style="border: 1px solid lightcoral;"> <br>
<h3 class="ah3">vertical-align: bottom </h3>
<ul class="aul">
<li>See the above 'internal styling' for this code.</li>
<li>We have 'styled' with class '.table-vab'.</li>
</ul>
<div class="table1 table-vab">
<div class="table-caption">Table Caption</div>
<div class="table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> <div class="table-cell">Header 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1 <br>Data 1a <br>Data 1b</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-footer"> <div class="table-cell">Footer 1</div> <div class="table-cell">Footer 2</div> <div class="table-cell">Footer 3</div> <div class="table-cell">Footer 4</div> </div>
</div> <br> <hr style="border: 1px solid lightcoral;"> <br>
<h3 class="ah3">display: table-row-group </h3>
<div class="table1">
<div class="table-caption">Table Caption</div>
<div class="table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> <div class="table-cell">Header 4</div> </div>
<div class="table-row-header" style="display: table-row-group; background-color: lightcoral;">
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
</div>
<div class="table-footer"> <div class="table-cell">Footer 1</div> <div class="table-cell">Footer 2</div> <div class="table-cell">Footer 3</div> <div class="table-cell">Footer 4</div> </div>
</div> <br> <hr style="border: 1px solid lightcoral;"> <br>
<h3 class="ah3">display: table-column-group</h3>
<p class="ap"><b>Try style of class="table-col1" with class="table-col2" / class="table-col3" / class="table-col4" and see the output </b></p>
<div class="table1">
<div class="table-col-group" style="display: table-column-group;">
<div class="table-col1" style="display: table-column; background-color: lightcoral;">1</div>
<div class="table-col2">2</div>
<div class="table-col3">3</div>
<div class="table-col4">4</div>
</div>
<div class="table-caption">Table Caption</div>
<div class="table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> <div class="table-cell">Header 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-row"> <div class="table-cell">Data 1</div> <div class="table-cell">Data 2</div> <div class="table-cell">Data 3</div> <div class="table-cell">Data 4</div> </div>
<div class="table-footer"> <div class="table-cell">Footer 1</div> <div class="table-cell">Footer 2</div> <div class="table-cell">Footer 3</div> <div class="table-cell">Footer 4</div> </div>
</div> <br> <hr style="border: 1px solid lightcoral;"> <br>
</body>
</html>
output 📌
- .table1 { display: table; border: 5px solid black; }
- .table1 .table-header { display: table-header-group; }
- .table1 .table-footer { display: table-footer-group; }
- .table1 .table-row { display: table-row; }
- .table1 .table-cell { display: table-cell; border: 1px solid black; padding: 5px 10px; }
- .table1 .table-caption { display: table-caption; }
border-collapse: collapse
border-collapse: separate
border-spacing: 5px
border-spacing: 10px 5px (left right / top bottom)
caption-side: top (default)
caption-side: bottom
vertical-align: top (default)
- See the above 'internal styling' for this code.
- We have 'styled' with class '.table-vat'.
Data 1a
Data 1b
vertical-align: middle
- See the above 'internal styling' for this code.
- We have 'styled' with class '.table-vam'.
Data 1a
Data 1b
vertical-align: bottom
- See the above 'internal styling' for this code.
- We have 'styled' with class '.table-vab'.
Data 1a
Data 1b
display: table-row-group
display: table-column-group
Try style of class="table-col1" with class="table-col2" / class="table-col3" / class="table-col4" and see the output
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Styling of 'display: table' property with CSS
Code : 3 📝
<!DOCTYPE html>
<html>
<head>
<style>
.table2 {
display: table;
width: 100%;
border-collapse: collapse;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
background: #fff;
}
.table2 .table-caption {
display: table-caption;
caption-side: top;
font-weight: 700;
font-size: 1.5rem;
padding: 16px 24px;
background: linear-gradient(180deg, #8e048d, #722a5a);
color: #fff;
text-transform: uppercase;
text-align: center;
}
.table2 .table-row {
display: table-row;
}
.table2 .table-header {
display: table-header-group;
background-color: #caa2ed;
}
.table2 .table-footer {
display: table-footer-group;
background-color: #bba2ed;
}
.table2 .table-cell {
display: table-cell;
padding: 14px 20px;
border: 1px solid #6b49f4;
font-size: 1rem;
vertical-align: middle;
text-align: center;
}
.table2 .table-row:nth-child(even) {
background-color: #caa2ed88;
}
</style>
</head>
<body>
<div class="table2">
<div class="table-caption">Table Caption</div>
<div class="table-header">
<div class="table-cell">Header 1</div>
<div class="table-cell">Header 2</div>
<div class="table-cell">Header 3</div>
<div class="table-cell">Header 4</div>
</div>
<div class="table-row">
<div class="table-cell">Data 1</div>
<div class="table-cell">Data 2</div>
<div class="table-cell">Data 3</div>
<div class="table-cell">Data 4</div>
</div>
<div class="table-row">
<div class="table-cell">Data 1</div>
<div class="table-cell">Data 2</div>
<div class="table-cell">Data 3</div>
<div class="table-cell">Data 4</div>
</div>
<div class="table-row">
<div class="table-cell">Data 1</div>
<div class="table-cell">Data 2</div>
<div class="table-cell">Data 3</div>
<div class="table-cell">Data 4</div>
</div>
<div class="table-row">
<div class="table-cell">Data 1</div>
<div class="table-cell">Data 2</div>
<div class="table-cell">Data 3</div>
<div class="table-cell">Data 4</div>
</div>
<div class="table-row">
<div class="table-cell">Data 1</div>
<div class="table-cell">Data 2</div>
<div class="table-cell">Data 3</div>
<div class="table-cell">Data 4</div>
</div>
<div class="table-footer">
<div class="table-cell">Footer 1</div>
<div class="table-cell">Footer 2</div>
<div class="table-cell">Footer 3</div>
<div class="table-cell">Footer 4</div>
</div>
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
When to Use 'display: table'
- You want a row/column structure without HTML tables.
- For form layouts and data grids.
- When using Flexbox or Grid doesn't fit the scenario.
When Not to Use
- For complex responsive layouts, use Flexbox or Grid.
- Don't use it for accessibility-reliant data tables (use real HTML tables instead).
Conclusion
The CSS 'display: table' family allows you to build table-like layouts with just CSS and 'div' tags. While Flexbox and Grid are more modern, 'display: table' is still useful when you need a quick, simple layout with rows and columns.
Use 'table' for container, 'table-row' for rows, and 'table-cell' for columns.
Add padding, borders, and alignment just like regular blocks.
Keep practicing and experiment with combining these values for flexible layouts!
Suggested Posts:
- CSS Display Property Explained with Examples | Block, Inline, Flex, Grid
- HTML Table Tag Tutorial with Examples | HTML th, td, tr, colspan, rowspan Explained
- HTML div and span Tag Explained with Examples - Complete Guide
Frequently Asked Questions (FAQs)
What's the difference between HTML tables and CSS display: table?
HTML tables are semantic and meant for tabular data. 'display: table' gives similar visuals without using actual '<table>' tags.
Can I nest 'display: table' elements?
Yes, you can nest rows and cells inside a 'table' container.
Is 'display: table' responsive?
Not by default. You need to use CSS media queries or percentage-based widths for responsiveness.
Should I use 'display: table' or Flexbox?
Use Flexbox for flexible layouts. Use 'display: table' if you need table-style alignment but without HTML tables.
Is this method SEO-friendly?
Yes. It's just regular HTML with CSS applied, so search engines can read the content.