Los últimos tutoriales de desarrollo web
 

W3.CSS mesa

❮ Anterior Siguiente Capítulo ❯

Visualización de una tabla

Nombre de pila Apellido Puntos
Jill Herrero 50
Víspera Jackson 94
Adán Johnson 67
Bo Nilsson 50
Micro Ross 35

Tabla básica

Nombre de pila 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>
Inténtalo tú mismo "

Tabla bordeado

Nombre de pila Apellido Puntos
Jill Herrero 50
Víspera Jackson 94
Adán Johnson 67

Ejemplo

<table class="w3-table w3-border">
Inténtalo tú mismo "

Tabla de rayas

Nombre de pila Apellido Puntos
Jill Herrero 50
Víspera Jackson 94
Adán Johnson 67

Ejemplo

<table class="w3-table w3-striped">
Inténtalo tú mismo "

Vector rayado con borde

Nombre de pila Apellido Puntos
Jill Herrero 50
Víspera Jackson 94
Adán Johnson 67

Ejemplo

<table class="w3-table w3-bordered w3-striped">
Inténtalo tú mismo "

Frontera alrededor de una mesa de rayas

Nombre de pila Apellido Puntos
Jill Herrero 50
Víspera Jackson 94
Adán Johnson 67

Ejemplo

<table class="w3-table w3-bordered w3-striped w3-border">
Inténtalo tú mismo "

Voltear las rayas

Nombre de pila Apellido Puntos
Jill Herrero 50
Víspera Jackson 94
Adán Johnson 67

Para voltear las rayas, sólo tiene que añadir <thead> alrededor de la cabecera de la tabla:

Ejemplo

<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Inténtalo tú mismo "

Mesa con una partida de color

Nombre de pila Apellido Puntos
Jill Herrero 50
Víspera Jackson 94
Adán Johnson 67

Ejemplo

<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Inténtalo tú mismo "

Tabla Colores

Nombre de pila Apellido Puntos
Jill Herrero 50
Víspera Jackson 94
Adán Johnson 67

Ejemplo

<table class="w3-table w3-blue">
Inténtalo tú mismo "

Tabla Hoverable

La clase W3-hoverable añade un color de fondo gris en el ratón por encima:

Nombre de pila Apellido Puntos
Jill Herrero 50
Víspera Jackson 94
Adán Johnson 67

Ejemplo

<table class="w3-table w3-bordered w3-striped w3-border w3-hoverable">
Inténtalo tú mismo "

Si desea un color específico vuelo estacionario, añadir cualquiera de los W3-activables-clases a cada elemento <tr>:

Nombre de pila Apellido Puntos
Jill Herrero 50
Víspera Jackson 94
Adán Johnson 67

Ejemplo

<tr class="w3-hover-green">
Inténtalo tú mismo "

Tabla como una tarjeta

Nombre de pila Apellido Puntos
Jill Herrero 50
Víspera Jackson 94
Adán Johnson 67

Ejemplo

<table class="w3-table w3-bordered w3-striped w3-card-4">
Inténtalo tú mismo "

Tabla sensible

Una tabla de respuesta se mostrará una barra de desplazamiento horizontal si la pantalla es demasiado pequeña para mostrar todo el contenido.

Trate de cambiar el tamaño de la pantalla para ver el efecto.

Nombre de pila Apellido Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos Puntos
Jill Herrero 5000 5000 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 9400 9400
Adán Johnson 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

Ejemplo

<div class="w3-responsive">

<table class="w3-table w3-bordered w3-striped">
... table content ...
</table>

</div>
Inténtalo tú mismo "

Tabla pequeña

Nombre de pila Apellido Puntos
Jill Herrero 50
Víspera Jackson 94
Adán Johnson 67

Ejemplo

<table class="w3-table w3-bordered w3-striped w3-tiny">
Inténtalo tú mismo "

Mesa pequeña

Nombre de pila Apellido Puntos
Jill Herrero 50
Víspera Jackson 94
Adán Johnson 67

Ejemplo

<table class="w3-table w3-bordered w3-striped w3-small">
Inténtalo tú mismo "

Mesa grande

Nombre de pila Apellido Puntos
Jill Herrero 50
Víspera Jackson 94
Adán Johnson 67

Ejemplo

<table class="w3-table w3-bordered w3-striped w3-large">
Inténtalo tú mismo "

Tabla XLarge

Nombre de pila Apellido Puntos
Jill Herrero 50
Víspera Jackson 94
Adán Johnson 67

Ejemplo

<table class="w3-table w3-bordered w3-striped w3-xlarge">
Inténtalo tú mismo "

Tabla XXGrande

Nombre Puntos
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Ejemplo

<table class="w3-table w3-bordered w3-striped w3-xxlarge">
Inténtalo tú mismo "

Tabla XXXLarge

Nombre Puntos
Herrero 50
Jackson 94
Johnson 67
Nilson 35

Ejemplo

<table class="w3-table w3-bordered w3-striped w3-xxxlarge">
Inténtalo tú mismo "

Tabla Jumbo

Nombre Puntos
Herrero 50
Jackson 94
Johnson 67
Nilson 35

Ejemplo

<table class="w3-table w3-bordered w3-striped w3-jumbo">
Inténtalo tú mismo "

❮ Anterior Siguiente Capítulo ❯