Hay dos formas de aplicar un borde dentro de la tabla en HTML.
- Solo usando HTML
- Usando HTML y CSS
Solo usando HTML: en este caso, usaremos el atributo de reglas de la tabla. Las reglas son el atributo en la tabla HTML que permite al usuario mostrar solo los bordes internos de la tabla que se pueden elegir entre solo filas, columnas o todas.
Ejemplo:
HTML
<!-- Table contains border from inside only --> <!DOCTYPE html> <html> <head> <title>Table In HTML</title> </head> <body> <h2>Table having rules="rows":</h2> <table rules="rows"> <!--table containing only border of rows--> <tr> <th>Roll Number</th> <th>Name Of Geek</th> <th>Marks</th> </tr> <tr> <td>01</td> <td>Geek 01</td> <td>100</td> </tr> <tr> <td>02</td> <td>Geek 02</td> <td>95</td> </tr> <tr> <td>03</td> <td>Geek 03</td> <td>90</td> </tr> </table> <br> <hr><hr> <br> <h2>Table having rules="cols":</h2> <!--table containing only border of columns--> <table rules="cols"> <tr> <th>Roll Number</th> <th>Name Of Geek</th> <th>Marks</th> </tr> <tr> <td>01</td> <td>Geek 01</td> <td>100</td> </tr> <tr> <td>02</td> <td>Geek 02</td> <td>95</td> </tr> <tr> <td>03</td> <td>Geek 03</td> <td>90</td> </tr> </table> <br> <hr><hr> <br> <h2>Table having rules="all":</h2> <!--table containing borders of both row and column--> <table rules="all"> <tr> <th>Roll Number</th> <th>Name Of Geek</th> <th>Marks</th> </tr> <tr> <td>01</td> <td>Geek 01</td> <td>100</td> </tr> <tr> <td>02</td> <td>Geek 02</td> <td>95</td> </tr> <tr> <td>03</td> <td>Geek 03</td> <td>90</td> </tr> </table> </body> </html>
Producción:
Usando HTML y CSS:
- Ejemplo 1: el estilo de borde en CSS es otra forma de mostrar bordes dentro de la tabla. Esta propiedad ayuda al usuario a manipular los bordes exteriores de la tabla.
HTML
<!-- Using border-style in CSS -->
<!DOCTYPE html>
<html>
<head>
<title>Table In HTML</title>
<style media="screen">
table {
margin: 0 auto;
border-collapse: collapse;
border-style: hidden;
/*Remove all the outside
borders of the existing table*/
}
table td {
padding: 0.5rem;
border: 5px solid orange;
}
table th {
padding: 0.5rem;
border: 5px solid ForestGreen;
}
</style>
</head>
<body>
<table>
<tr>
<th>Roll Number</th>
<th>Name Of Geek</th>
<th>Marks</th>
</tr>
<tr>
<td>01</td>
<td>Geek 01</td>
<td>100</td>
</tr>
<tr>
<td>02</td>
<td>Geek 02</td>
<td>95</td>
</tr>
<tr>
<td>03</td>
<td>Geek 03</td>
<td>90</td>
</tr>
</table>
</body>
</html>
Producción:
- Ejemplo 2: Usar el concepto secundario en CSS es otra forma de obtener una tabla con el borde interior eliminando todos los bordes no deseados de la tabla. Se puede lograr usando first-child y last-child en CSS. Aquí, seleccionamos la primera columna y eliminamos el borde del lado izquierdo, luego seleccionamos la primera fila y eliminamos el borde superior, luego vamos a la última columna y eliminamos el borde del lado derecho y, por último, seleccionamos la última fila y eliminar su borde inferior. De esta forma, eliminamos todos los bordes exteriores de la tabla y nos queda uno interior.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Table In HTML</title>
<style media="screen">
table {
margin: 0 auto;
border-collapse: collapse;
}
table td {
padding: 0.5rem;
border: 5px solid DodgerBlue;
}
table th {
padding: 0.5rem;
border: 5px solid Tomato;
}
/* Removing all unwanted border
from left hand side by calling
all the elements in the first
column and removing their left
border*/
table tr td:first-child, th:first-child{
border-left: none;
}
/* Removing all unwanted border
from top of the table by calling
all the elements in first row and
removing their top border*/
table tr:first-child th{
border-top: none;
}
/* Removing all unwanted border
from right hand side by calling
all the elements in last row and
removing their right border*/
table tr td:last-child, th:last-child{
border-right: none;
}
/* Removing all unwanted border
from bottom of the table by
calling all the elements in
last column and removing their
bottom border*/
table tr:last-child td{
border-bottom: none;
}
</style>
</head>
<body>
<table>
<tr>
<th>Roll Number</th>
<th>Name Of Geek</th>
<th>Marks</th>
</tr>
<tr>
<td>01</td>
<td>Geek 01</td>
<td>100</td>
</tr>
<tr>
<td>02</td>
<td>Geek 02</td>
<td>95</td>
</tr>
<tr>
<td>03</td>
<td>Geek 03</td>
<td>90</td>
</tr>
</table>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA