• Post category:HTML

3 Best Designs for Rounded Corners Table in HTML

Table with Rounded Corners HTML

When we create the table it will be in rectangle shape by default. One of the popular design choices is to create tables with rounded corners, which can lend a more modern and aesthetically pleasing look to your web pages. So, In this article, we can see how to create a table with rounded corners in HTML.

3 different methods of rounded corners table

In all three methods, we are going to convert the table corners to rounded using the CSS border-radius property.

Method 1: Each Cell

In this method, you can make the borders of each cell rounded by setting the border-radius property to the <th> and <td> tags:

For example:

<html>
<head>
   <title>Rounded Table</title>
</head>
<style>
   table {
      border-collapse: separate;
      border-spacing: 0 2px;
   }
   th {
      background-color: #4287f5;
   }
   th, td{
      width: 150px;
      text-align: center;
      border: 1px solid black;
      border-radius: 8px;
   }
</style>
<body>
   <table  >
      <tr>
         <th>Name</th>
         <th>Product</th>
         <th>Price</th>
      </tr>
      <tr>
         <td>John</td>
         <td>Mobile</td>
         <td>$150</td>
      </tr>
      <tr>
         <td>Little</td>
         <td>Headphone</td>
         <td>$50</td>
      </tr>
      <tr>
         <td>Smith</td>
         <td>Glass</td>
         <td>$25</td>
      </tr>
   </table>
</body>
</html>

Output:

table with rounded corners html

Method 2: Four Sides

In this method, we can make the borders of four corners of a table rounded by setting the border-radius property to the first row first col, first-row last col, last row first col, and last row last col. We can select it in CSS using the ‘first and last child‘ pseudo-classes.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Rounded Table</title>
</head>
<style>
   table {
      border-collapse: separate;
      border-spacing: 0 0px;
   }
   th {
      background-color: #4287f5;
   }
   th, td{
      width: 150px;
      text-align: center;
      border: 1px solid black;
   }

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

/* bottom-left border-radius */
table tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

</style>
<body>
   <table  >
      <tr>
         <th>Name</th>
         <th>Product</th>
         <th>Price</th>
      </tr>
      <tr>
         <td>John</td>
         <td>Mobile</td>
         <td>$150</td>
      </tr>
      <tr>
         <td>Little</td>
         <td>Headphone</td>
         <td>$50</td>
      </tr>
      <tr>
         <td>Smith</td>
         <td>Glass</td>
         <td>$25</td>
      </tr>
   </table>
</body>
</html>

Output:

READ ALSO  2 Best Ways to Embedded a Video using HTML Code

table with rounded corners html

Method 3: Each Row

In this method, we have to make the round corners of each row by setting the ‘border-radius’ property to each row’s first and last columns.

Example:

<!DOCTYPE html>
<html>
<head>
   <title>Rounded Table</title>
</head>
<style>
   table {
      border-collapse: separate;
      border-spacing: 0 15px;
   }
   th {
      background-color: #4287f5;
   }
   th, td{
      width: 150px;
      text-align: center;
      border: 1px solid black;
      padding: 5px;
   }

/* top & bottom left border-radius */
table tr th:first-child{
  border-bottom-left-radius: 10px;  
  border-top-left-radius: 10px;

}

/* top & bottom right border-radius */
table tr th:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;

}

/* top & bottom left border-radius */
table tr td:first-child {
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;

}

/* top & bottom right border-radius */
table tr td:last-child {
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

</style>
<body>
   <table  >
      <tr>
         <th>Name</th>
         <th>Product</th>
         <th>Price</th>
      </tr>
      <tr>
         <td>John</td>
         <td>Mobile</td>
         <td>$150</td>
      </tr>
      <tr>
         <td>Little</td>
         <td>Headphone</td>
         <td>$50</td>
      </tr>
      <tr>
         <td>Smith</td>
         <td>Glass</td>
         <td>$25</td>
      </tr>
   </table>
</body>
</html>

Output:

table with rounded corners html

Conclusion

Adding rounded corners to HTML tables can enhance the visual appeal and modernize the look of your web pages. With CSS, you have multiple options for achieving this effect, from using the border-radius property. By implementing rounded corners, you can elevate the aesthetics of your tables and create a more engaging user experience.

Leave a Reply