Haz una tabla HTML con esquinas redondeadas usando CSS
Esta breve guía de programación trata sobre el estilo CSS para hacer una tabla de esquinas redondeadas en una página HTML.
Haz una tabla HTML con esquinas redondeadas usando CSS
La propiedad que redondea las esquinas de una imagen, tabla o segmento div es border-radius. Esta propiedad establece el radio de la esquina de cualquier elemento HTML, como una tabla.
Veamos el siguiente ejemplo:
table {
border-collapse: separate;
border-spacing: 0;
min-width: 350px;
}
table tr th,
table tr td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px;
}
table tr th:first-child,
table tr td:first-child {
border-left: 1px solid #bbb;
}
table tr th {
background: #eee;
border-top: 1px solid #bbb;
text-align: left;
}
/* 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;
}
En este estilo CSS, hemos aplicado diferentes estilos a diferentes componentes de la tabla td, th, table, etc.
El primer estilo que hemos aplicado es la propiedad border de negro sólido de 1 px, y luego hemos aplicado un radio de borde de 10 px. Esta propiedad hará que todos los bordes de la tabla tengan una forma redondeada.
Luego aplicamos el borde a todas las celdas en color negro de tamaño 1px. El código HTML será:
<body>
<table>
<thead>
<tr>
<th>Table </th>
<th>Header</th>
<th>Row</th>
</tr>
</thead>
<tr>
<td>sample</td>
<td>text</td>
<td>sample</td>
</tr>
<tr>
<td>text</td>
<td>sample</td>
<td>text</td>
</tr>
</table>
</body>
Esta tabla tiene una fila de encabezado y dos filas para datos de muestra.
El número de esquinas redondeadas depende del tamaño que hayamos proporcionado. Así, podemos ver cómo podemos hacer las esquinas redondeadas de una tabla HTML.