This article explains how to make the HTML `table` tag rounded.
For engineers and web designers who care about design details, rounded corners make a page softer and more visually friendly. However, due to `border-spacing` and `border-collapse` settings, the rounded corner effect may not be applied correctly.
In this article, we will explain in detail the CSS settings to solve this issue.
CSS Settings to Make Table Tags Rounded
To apply rounded corners to a `table` tag, use the following CSS.
This code sets `border-spacing: 0;` and `border-collapse: separate;` to ensure that `border-radius` works properly. Additionally, `overflow: hidden;` is specified to hide the overflowing parts.
<style type="text/css">
body{
font-family: 'Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
padding: 0;
margin: 0;
font-size: 24px;
text-align: center;
}
h1{
line-height:1.6em;
text-align:center;
font-weight:normal;
padding:10px 0 0 0;
font-size: 24px;
}
table{
width: 600px;
border-spacing: 0;
border-collapse: separate;
border: solid 1px #989898;
border-radius: 14px;
overflow: hidden;
background-color: #DADADA;
margin: 0 auto;
}
table th{
width: 30%;
color: #555555;
font-size: 16px;
font-weight: bold;
text-align: left;
line-height: 1.8em;
padding: 12px 20px;
border-bottom: solid 1px #989898;
vertical-align: top;
}
table td{
width: 70%;
color: #555555;
font-size: 14px;
text-align: left;
background-color: #ffffff;
line-height: 1.8em;
padding: 12px 20px;
border-left: solid 1px #989898;
border-bottom: solid 1px #989898;
}
table tr:last-child th,
table tr:last-child td{
border-bottom: none;
overflow: hidden;
}
</style>
Example of a Rounded Table in HTML
To create a table with rounded corners, use the following HTML code. This code provides a basic structure that you can modify as needed.
<h1>Rounded HTML Table Display</h1>
<table cellpadding="0" cellspacing="0">
<tr>
<th>th Tag 1</th>
<td>td tag text 1 td tag text 1 td tag text 1 td tag text 1 td tag text 1 td tag text 1</td>
</tr>
<tr>
<th>th Tag 2</th>
<td>td tag text 2 td tag text 2 td tag text 2 td tag text 2 td tag text 2 td tag text 2</td>
</tr>
<tr>
<th>th Tag 3</th>
<td>td tag text 3 td tag text 3 td tag text 3 td tag text 3 td tag text 3 td tag text 3</td>
</tr>
<tr>
<th>th Tag 4</th>
<td>td tag text 4 td tag text 4 td tag text 4 td tag text 4 td tag text 4 td tag text 4</td>
</tr>
<tr>
<th>th Tag 5</th>
<td>td tag text 5 td tag text 5 td tag text 5 td tag text 5 td tag text 5 td tag text 5</td>
</tr>
</table>
Demo Page for Rounded HTML Tables
Click the link below to see a demo of a `table` tag with rounded corners. Check how the CSS works and try it in your own project.
Summary
By adjusting `border-spacing` and `border-collapse` when applying rounded corners to an HTML `table` tag, you can create a cleaner and more visually appealing table design.
With a few simple CSS tweaks, you can achieve this effect easily, so give it a try!
*If you reuse this code, do so at your own risk.
Please do not reuse the Google Analytics tag from the demo page’s `head` section.*
