3, 2, 1... Tabla con filtro!! (Crear una tabla con búsqueda en web)

3, 2, 1... Tabla con filtro!! (Crear una tabla con búsqueda en web)

¡Hola a [email protected] (Hello World!)!

En este artículo vamos a aprender a crear una tabla con datos para web ¡y con un filtro de búsqueda incluido!

Primeramente vamos a definir en rasgos generales que es un 'html'.

HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (). [by Wikipedia]

Los ficheros que vamos a utilizar con el html serán los *.css ('Hojas de estilo') y los *.js ('Ficheros JavaScript', JavaScript es un lenguaje embebido que es interpretado en el navegador del cliente'), en nuestro artículo utilizaremos ficheros javascript y una serie de etiquetas que dejo como práctica para que los lectores investiguen (no es necesario incidir sobre el código javascript). También quiero hacer mensión a una librería que vamos a usar de javascript y que es muy utilizada en la actualidad como es JQuery. Esta librería la llamamos desde la etiqueta head.

En una página html nos vamos a encontrar primeramente con la etiqueta html que representa el documento y dos etiquetas fundamentales que van dentro: head y body. ¡Comenzamos...!

Empezamos por la 'cabecera del html' o head:

El 'cuerpo del html' o body:

  
 Filtro de Búsqueda:   
  
  
 
 
Rank.
 
Nombre Jugador
 
Foto
 
Elo
 
 
 
1.
 
[MI] J. Carlos Ibarra
 
 
2515
 
 
 
2
 
[MF] David Antón
 
 
2466
 
 
 
3
 
[MF] Paco Albarracín
 
 
2375
 
 
 
4
 
[MF] Josue Cano
 
 
2369
 
 
 
5
 
Borja Navarro
 
 
2335
 
 
 

Puedes descargar los ficheros del ejemplo: Pulsando Aquí
Finalmente el artículo genera:

Filtro de Búsqueda:

---

Rank.	Nombre Jugador	Foto	Elo
1.	[MI] J. Carlos Ibarra		2515
2	[MF] David Antón		2466
3	[MF] Paco Albarracín		2375
4	[MF] Josue Cano		2369
5	Borja Navarro		2335

laboratorio-web

RELACCIONADO CON 3, 2, 1... Tabla con filtro!! (Crear una tabla con búsqueda en web)