Tablas W3.CSS
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
| Bo | Nilsson | 50 |
| Miguel | ross | 35 |
Clases de tabla W3.CSS
W3.CSS proporciona las siguientes clases para tablas:
| Clase | define |
|---|---|
| tabla w3 | Contenedor para una tabla HTML |
| w3-rayado | mesa rayas |
| borde w3 | tabla bordeada |
| w3 bordeado | Líneas bordeadas |
| centrado en w3 | Contenido de la tabla centrado |
| w3-flotable | Mesa flotante |
| w3-tabla-todo | Todas las propiedades establecidas |
Tabla básica
La clase w3-table se usa para mostrar una tabla básica:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Mesa Rayada
La clase w3-striped se usa para agregar rayas de cebra a una tabla:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table w3-striped">
Tabla Bordeada
La clase con borde w3 agrega un borde inferior a cada fila de la tabla:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table w3-bordered">
Mesa bordeada a rayas
Combine la clase w3-striped y la clase w3-borded para crear una tabla con borde rayado:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table w3-striped w3-bordered">
Borde alrededor de una mesa
La clase w3-border se usa para mostrar un borde alrededor de una tabla:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table w3-striped w3-border">
Sugerencia: la clase w3-border no es solo para tablas. ¡Se puede usar en cualquier elemento HTML!
Mostrándolo todo
La clase w3-table-all combina todas las clases anteriores:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table-all">
Volteando las rayas
Para voltear las franjas (comience con el color gris claro), agregue un elemento <thead> alrededor de la fila del encabezado de la tabla. También debe definir un color que se utilizará para la fila del encabezado de la tabla:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
| Bo | Nilson | 35 |
Ejemplo
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
Centrar todo el contenido
La clase centrada en w3 centra el contenido de la tabla:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table-all w3-centered">
Centrar una columna
La clase w3-center centra el contenido de una columna:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table-all">
<tr>
<th>First
Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
Alinear a la derecha una columna
La clase w3-right-align alinea a la derecha el contenido de una columna:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
Mesa flotante
La clase w3-hoverable agrega un color de fondo gris al pasar el mouse:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table-all
w3-hoverable">
Colores flotantes
Si desea un color de desplazamiento específico, agregue cualquiera de las clases w3-hover- color a cada elemento <tr>:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<tr class="w3-hover-green">
Combinar clases W3.CSS
Muchas clases W3.CSS se pueden usar en todos los elementos HTML.
Por ejemplo: clases de borde, clases de color, clases de fuente, clases de tarjeta y más.
Encabezado de tabla de colores
Use cualquiera de las clases de color w3- para mostrar una fila de color:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
Mesa de colores
Use cualquiera de las clases de color w3- para mostrar una tabla de colores:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table w3-blue">
Tabla receptiva
La clase w3-responsive crea una tabla receptiva. La tabla luego se desplazará horizontalmente en pantallas pequeñas. Cuando se ve en pantallas grandes, no hay diferencia.
Cambie el tamaño de la pantalla para ver el efecto en la siguiente tabla:
| Primer nombre | Apellido | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos | Puntos |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Herrero | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| víspera | jackson | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| Adán | Johnson | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
Ejemplo
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
Mesa como una tarjeta
Use una clase de tarjeta w3 para mostrar una tabla como una tarjeta:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table-all w3-card-4">
Mesa pequeña
Use la clase w3-tiny para mostrar una tabla pequeña:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table-all w3-tiny">
Mesa pequeña
Use la clase w3-small para mostrar una tabla pequeña:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table-all w3-small">
Mesa grande
Use la clase w3-large para mostrar una tabla grande:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table-all w3-large">
Mesa grande
Use la clase w3-xlarge para mostrar una tabla xlarge:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table-all w3-xlarge">
Mesa extragrande
Use la clase w3-xxlarge para mostrar una tabla xxlarge:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table-all w3-xxlarge">
Mesa XXXL
Utilice la clase w3-xxxlarge para mostrar una tabla xxxlarge:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
Ejemplo
<table class="w3-table-all w3-xxxlarge">
Mesa gigante
Use the w3-jumbo class to display a jumbo large table:
| First Name | Last Name |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| Adam | Johnson |
Example
<table class="w3-table-all w3-jumbo">