Home 〉 CSS Tutorials 〉 CSS Table Properties: border-collapse, table-layout, and More with Examples
CSS Table Properties: border-collapse, table-layout, and More with Examples !
CSS Table Properties: border-collapse, table-layout, and More with Examples !
Need to style HTML tables cleanly? CSS table properties like `border-collapse`, `table-layout`, `empty-cells`, and `caption-side` help improve the appearance and usability of tables. Learn how to make tables responsive and neat with these styling tools.
Introduction
Tables are useful for displaying data, but raw HTML tables often look dull. With CSS table properties, you can style and control the layout, spacing, and appearance of tables easily.
This guide covers key CSS properties like 'border-collapse', 'border-spacing', 'table-layout', 'caption-side', 'empty-cells', and more, with clear examples and simple explanations.
In this Tutorial, we are going to cover the following CSS 'table' properties:
- 'border-collapse'
- 'border-spacing'
- 'caption-side'
- 'empty-cells'
- 'table-layout'
HTML Table Basics
Here's a simple HTML table to work with:
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<table border="5" >
<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>
</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 |
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.
CSS Table Properties Explained with Examples
1. 'border-collapse'
This property defines whether table borders should collapse into a single border or be separated.
Example 📄
table {
border-collapse: collapse;
}
- collapse: Merges adjacent borders into one.
- separate: Keeps borders separate (default).
2. 'border-spacing'
Controls the space between table cells. Only works if 'border-collapse: separate'.
Example 📄
table {
border-collapse: separate;
border-spacing: 10px 5px; /* horizontal vertical */
}
Useful for adding space between cells when using separate borders.
3. 'caption-side'
Changes the position of the '<caption>' element.
Example 📄
table {
caption-side: bottom;
}
Values: 'top' (default) or 'bottom'.
4. 'empty-cells'
Controls whether to show borders and background for empty cells.
Example 📄
table {
empty-cells: hide;
}
Values: 'show' (default), 'hide'.
5. 'table-layout'
Defines how table columns are sized.
Example 📄
table {
table-layout: fixed;
width: 100%;
}
- 'auto': Default. Columns are sized based on content.
- 'fixed': Sets fixed column widths. Faster rendering.
Full Example with All Properties
Code : 2 📝
<!DOCTYPE html>
<html>
<head>
<style>
.table1 { border: 1px solid black; width: 600px; }
.table1 td, .table1 th { border: 1px solid black; }
</style>
</head>
<body>
<h3 class="ah3">HTML 'table'</h3>
<ul class="aul">
<li><b>This HTML 'table' has following styling:</b></li>
<li>.table1 { border: 1px solid black; width: 600px; }</li>
<li>.table1 td, .table1 th { border: 1px solid black; }</li>
</ul>
<table class="table1" >
<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>
</table> <br> <hr style="border: 1.5px solid lightcoral;"> <br>
<h3 class="ah3">caption-side: top</h3>
<table class="table1">
<caption style="caption-side: top;">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>
</table> <br> <hr style="border: 1.5px solid lightcoral;"> <br>
<h3 class="ah3">caption-side: bottom</h3>
<table class="table1">
<caption style="caption-side: bottom;">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>
</table> <br> <hr style="border: 1.5px solid lightcoral;"> <br>
<h3 class="ah3">border-collapse: separate</h3>
<table class="table1" style="border-collapse: separate;">
<caption style="caption-side: top;">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>
</table> <br> <hr style="border: 1.5px solid lightcoral;"> <br>
<h3 class="ah3">border-collapse: collapse</h3>
<table class="table1" style="border-collapse: collapse;">
<caption style="caption-side: top;">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>
</table> <br> <hr style="border: 1.5px solid lightcoral;"> <br>
<h3 class="ah3">border-spacing: 10px</h3>
<table class="table1" style="border-spacing: 10px; ">
<caption style="caption-side: top;">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>
</table> <br> <hr style="border: 1.5px solid lightcoral;"> <br>
<h3 class="ah3">border-spacing: 20px 5px (left right / top bottom) </h3>
<table class="table1" style="border-spacing: 20px 5px; ">
<caption style="caption-side: top;">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>
</table> <br> <hr style="border: 1.5px solid lightcoral;"> <br>
<h3 class="ah3">empty-cells: show</h3>
<table class="table1" style="empty-cells: show;">
<caption style="caption-side: top;">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></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> <br> <hr style="border: 1.5px solid lightcoral;"> <br>
<h3 class="ah3">empty-cells: hide</h3>
<table class="table1" style="empty-cells: hide;">
<caption style="caption-side: top;">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></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> <br> <hr style="border: 1.5px solid lightcoral;"> <br>
<h3 class="ah3">table-layout: auto</h3>
<table class="table1" style="table-layout: auto; ">
<caption style="caption-side: top;">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>fsodiuoifduosudusfdufufsuodfufsudfuusdfuofsdusod</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> <br> <hr style="border: 1.5px solid lightcoral;"> <br>
<h3 class="ah3">table-layout: fixed;</h3>
<table class="table1" style="table-layout: fixed; ">
<caption style="caption-side: top;">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>fsodiuoifduosudusfdufufsuodfufsudfuusdfuofsdusod</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 📌
HTML 'table'
- This HTML 'table' has following styling:
- .table1 { border: 1px solid black; width: 600px; }
- .table1 td, .table1 th { border: 1px solid black; }
| 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 |
caption-side: top
| 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 |
caption-side: bottom
| 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 |
border-collapse: separate
| 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 |
border-collapse: collapse
| 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 |
border-spacing: 10px
| 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 |
border-spacing: 20px 5px (left right / top bottom)
| 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 |
empty-cells: show
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| Data 1 | Data 2 | Data 3 | |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
empty-cells: hide
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| Data 1 | Data 2 | Data 3 | |
| Data 1 | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
table-layout: auto
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| Data 1 | Data 2 | Data 3 | Data 4 |
| fsodiuoifduosudusfdufufsuodfufsudfuusdfuofsdusod | Data 2 | Data 3 | Data 4 |
| Data 1 | Data 2 | Data 3 | Data 4 |
table-layout: fixed;
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| Data 1 | Data 2 | Data 3 | Data 4 |
| fsodiuoifduosudusfdufufsuodfufsudfuusdfuofsdusod | 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.
This example uses all the table styling properties discussed, so you can see how they work together.
Styling of Table with CSS
Code : 3 📝
<!DOCTYPE html>
<html>
<head>
<style>
.table2 {
border-collapse: collapse;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #fff;
width: 100%;
}
.table2 td, .table2 th {
padding: 14px 20px;
border: 1px solid #98a6f2;
color: #333;
font-size: 1rem;
vertical-align: middle;
text-align: center;
}
.table2 caption { caption-side: top; text-align: center; font-weight: 700;
font-size: 1.5rem;
padding: 16px 24px;
background: linear-gradient(90deg, #4b6cb7, #182848);
color: #fff;
letter-spacing: 0.05em;
text-transform: uppercase;
box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}
.table2 tr:nth-child(odd) {
background-color: #e6ecff;
}
.table2 th {
background-color: #d0d8ff;
}
</style>
</head>
<body>
<table class="table2" >
<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.
Additional Table Styling Tips
- Use ':nth-child()' to style rows or columns.
- Use 'background-color' and 'hover' effects for better UX.
- Responsive design? Use 'overflow-x: auto' on a wrapper.
Conclusion
CSS table properties help you make HTML tables look clean, professional, and user-friendly. Whether you're collapsing borders, aligning captions, or controlling layout, these properties give you the flexibility to design data tables with ease.
Practice with different values to see how they impact your table, and keep your layout consistent across all screen sizes.
Suggested Posts:
- CSS Width and Height Property Tutorial with Examples for Beginners
- CSS Border Property Explained with Easy Examples for Beginners
- CSS Padding Explained with Examples | CSS Box Model Guide
- CSS Text Formatting Properties Explained with Examples | Master Text Styles in CSS
Related Topics:
- CSS Display Table Property Explained with Examples | Learn Table Layout in CSS
- HTML Table Tag Tutorial with Examples | HTML th, td, tr, colspan, rowspan Explained
Frequently Asked Questions (FAQs)
What is the default value of 'border-collapse'?
The default is 'separate'.
When should I use 'table-layout: fixed'?
When you want faster rendering or consistent column widths regardless of content.
Why is 'border-spacing' not working?
It only works if 'border-collapse: separate' is set.
Can I hide empty table cells?
Yes, using 'empty-cells: hide'.
Is CSS table styling supported in all browsers?
Yes, all modern browsers support these properties.