Pure CSS es un marco de trabajo popular y una herramienta de código abierto, desarrollado por Yahoo, para crear sitios web y aplicaciones web receptivos mediante el uso de módulos CSS receptivos, que ayudan a desarrollar una mejor experiencia de usuario con alta eficiencia. Se puede utilizar como una alternativa a Bootstrap.
Las tablas Pure CSS proporcionan las diferentes clases para diseñar la tabla HTML de varias maneras. También facilita las opciones de personalización para organizar los datos de la tabla utilizando las diversas propiedades de estilo CSS. La lista de componentes completos de la Tabla se proporciona a continuación:
- Tabla predeterminada de CSS puro
- Tabla bordeada con CSS puro
- Tabla CSS pura con bordes horizontales
- Tabla rayada de CSS puro
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Import Pure CSS -->
<link rel="stylesheet"
href="https://unpkg.com/purecss@2.0.6/build/pure-min.css"
integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
crossorigin="anonymous"
origin="anonymous"
/>
<!-- Used to optimized Website for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.container {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<h2>Bordered Table</h2>
<!-- Here pure-table and pure-table-bordered class is used -->
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Runs</th>
<th>Centuries</th>
<th>Strike Rate</th>
<th>Avg</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rohit</td>
<td>10000</td>
<td>29</td>
<td>97</td>
<td>55</td>
</tr>
<tr>
<td>2</td>
<td>Virat</td>
<td>12000</td>
<td>40</td>
<td>91</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Rahul</td>
<td>5000</td>
<td>8</td>
<td>85</td>
<td>45</td>
</tr>
<tr>
<td>4</td>
<td>Rishabh</td>
<td>4000</td>
<td>2</td>
<td>89</td>
<td>39</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Producción:
Tablas CSS puras
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA