You can use CSS to round the corners of a table using the border-radius property. Here’s an example:
table { border-collapse: collapse; border-radius: 10px; }
In this example, the border-radius property is set to 10px, which rounds the corners of the table to a radius of 10 pixels. You can adjust the value of border-radius to make the corners more or less rounded.
Note that the border-collapse property is set to collapse, which causes the borders of adjacent cells to be combined into a single border. This makes the table look cleaner and eliminates the double lines that would otherwise appear between the cells.
Here’s a complete example that shows how to create a table with rounded corners:
<html>
<head>
<style>
table { border-collapse: collapse; border-radius: 10px; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: #dddddd; }
</style>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>50</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>60</td>
</tr>
</table>
</body>
</html>
This code creates a simple table with rounded corners and some basic styling. You can modify the CSS as needed to match your design requirements.