CSS describe la forma en que se deben mostrar los elementos HTML. Hay varias propiedades CSS que pueden agregar magia al documento HTML básico.
Este artículo se centra en establecer el modelo de bordes colapsados para el elemento de tabla de HTML.
Las tablas HTML nos permiten organizar nuestros datos usando filas y columnas. La etiqueta <table> define una tabla HTML. Cada fila de la tabla se define con una etiqueta <tr> . Cada encabezado de tabla se define con una etiqueta <th> . Cada dato/celda de la tabla se define con una etiqueta <td> . Veamos cómo podemos construir una tabla que pueda representar las calificaciones de cuatro estudiantes en las materias respectivas y establecer los bordes colapsados como se muestra a continuación.
Ejemplo 1: Este ejemplo describe el ejemplo básico de una tabla HTML.
HTML
<!DOCTYPE html> <html> <head> <title>css collapse borders</title> </head> <body> <table> <tr> <th>Id</th> <th>Name</th> <th>Physics</th> <th>Chemistry</th> <th>Maths</th> </tr> <tr> <td>100</td> <td>Tanmay</td> <td>98</td> <td>96</td> <td>93</td> </tr> <tr> <td>101</td> <td>Sunaina</td> <td>90</td> <td>92</td> <td>91</td> </tr> <tr> <td>102</td> <td>Tanisha</td> <td>89</td> <td>86</td> <td>83</td> </tr> <tr> <td>103</td> <td>David</td> <td>97</td> <td>95</td> <td>94</td> </tr> </table> </body> </html>
Producción:
Tabla HTML
Ejemplo 2: en este ejemplo, le agregaremos algunos bordes usando la propiedad de borde CSS como se muestra en el siguiente ejemplo.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS border collapse</title>
<style>
table,
tr,
th,
td {
border: 2px solid black;
border-spacing: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Physics</th>
<th>Chemistry</th>
<th>Maths</th>
</tr>
<tr>
<td>100</td>
<td>Tanmay</td>
<td>98</td>
<td>96</td>
<td>93</td>
</tr>
<tr>
<td>101</td>
<td>Sunaina</td>
<td>90</td>
<td>92</td>
<td>91</td>
</tr>
<tr>
<td>102</td>
<td>Tanisha</td>
<td>89</td>
<td>86</td>
<td>83</td>
</tr>
<tr>
<td>103</td>
<td>David</td>
<td>97</td>
<td>95</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Producción:
tabla HTML con bordes
Al agregar los bordes a nuestra tabla, obtenemos el resultado como se muestra arriba. Pero este puede no ser el resultado requerido, así que intentemos colapsar estos bordes para obtener un resultado más unificado usando la propiedad border-collapse y configurando su valor para colapsar como se muestra en el siguiente ejemplo.
Ejemplo 3:
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS border collapse</title>
<style>
table,
tr,
th,
td {
border: 2px solid black;
border-collapse: collapse;
border-spacing: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Physics</th>
<th>Chemistry</th>
<th>Maths</th>
</tr>
<tr>
<td>100</td>
<td>Tanmay</td>
<td>98</td>
<td>96</td>
<td>93</td>
</tr>
<tr>
<td>101</td>
<td>Sunaina</td>
<td>90</td>
<td>92</td>
<td>91</td>
</tr>
<tr>
<td>102</td>
<td>Tanisha</td>
<td>89</td>
<td>86</td>
<td>83</td>
</tr>
<tr>
<td>103</td>
<td>David</td>
<td>97</td>
<td>95</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Producción:
Tabla con bordes colapsados
Este es nuestro resultado requerido, por lo que finalmente hemos aprendido cómo configurar los bordes contraídos de una tabla. El punto a recordar es que la propiedad border-spacing no tendrá efecto en la propiedad border-collapse cuando se establece en valor de colapso.
Publicación traducida automáticamente
Artículo escrito por tanyagarg3434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA