Adding rounded corners to an HTML table can enhance its design, making it look more polished and modern. While HTML doesn’t natively support rounded corners for tables, you can easily achieve this effect using CSS. Here’s a step-by-step guide on how to do it.
Step 1: Create a Basic HTML Table
First, you need a basic HTML table structure. Here’s a simple table with a header and a few rows for demonstration:
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners Table</title>
</head>
<body>
<table class="rounded-table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
</body>
</html>Step 2: Add CSS for Rounded Corners
To apply rounded corners to the table, you’ll use the border-radius property in CSS. You can apply the rounding to the entire table or just specific parts like the header or individual cells.
Here’s how you can apply it to the entire table:
.rounded-table {
border-collapse: collapse;
width: 100%;
border-radius: 10px;
overflow: hidden; /* Ensures proper display of corners in all browsers */
border: 1px solid #ccc;
}
.rounded-table th, .rounded-table td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
.rounded-table th {
background-color: #f2f2f2;
}Step 3: Breakdown of the CSS
border-radius: 10px;: This adds the rounded corners to the table. You can adjust the value (e.g., 5px, 15px) depending on how rounded you want the corners to be.overflow: hidden;: This ensures that the table contents do not spill over the rounded corners, which can sometimes happen in certain browsers.border-collapse: collapse;: This makes sure that the borders between the cells don’t have gaps. It creates a more unified look.border: 1px solid #ccc;: Adds a border around the table to make the rounded corners more visible.padding: 8px;: Adds some space inside the table cells, improving readability.
Step 4: Adding Rounded Corners to Specific Parts
You can also target specific elements of the table, such as rounding only the table header or specific cells. For example, if you want to apply rounded corners just to the top-left and top-right corners of the table, you can do something like this:
/* Rounded corners for table header */
.rounded-table th:first-child {
border-top-left-radius: 10px;
}
.rounded-table th:last-child {
border-top-right-radius: 10px;
}This will give only the top corners of the table header a rounded effect.
If you want to apply rounded corners to all four corners to all four corners of the table, you can add this to the CSS code above:
/* Rounded corners for last table row */
.rounded-table tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
.rounded-table tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}Step 5: Example with Rounded Corners
Here’s how your final code will look:
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners Table</title>
<style>
.rounded-table {
border-collapse: collapse;
width: 100%;
border-radius: 10px;
overflow: hidden;
border: 1px solid #ccc;
}
.rounded-table th, .rounded-table td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
.rounded-table th {
background-color: #f2f2f2;
}
/* Rounded corners for table header */
.rounded-table th:first-child {
border-top-left-radius: 10px;
}
.rounded-table th:last-child {
border-top-right-radius: 10px;
}
/* Rounded corners for last table row */
.rounded-table tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
.rounded-table tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<table class="rounded-table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
</body>
</html>Conclusion
By using the border-radius property in CSS, you can easily add rounded corners to your HTML tables, giving them a more modern and visually appealing design. This technique works well across modern browsers and the overflow: hidden property ensures that the contents stay neatly within the rounded corners.
Having trouble getting this code to work?
If you are struggling to get this code to function as expected, feel free to call or contact me at Swamp Rabbit Media. We are always happy to help!
