Hola, hoy vamos a hablar de tablas y de cómo puedes usarlas para mostrar tus datos en tu sitio web. Me gustaría decir, que acostumbrábamos a considerar que las tablas eran una mala idea. Debido a que la gente no utiliza tablas por la razón que se supone. En su lugar, usa las tablas para disponer las cosas, colocándolas bien en la pantalla. Esto comenzó a suceder durante el tiempo de HTML 2, tal vez HTML 3.1. Y la gente decía, quiero que mi página se vea bien, no tengo medios para hacerlo, así que voy a hacer que sea una enorme tabla y a ponerlo todo en varias filas o columnas. Esto descarta completamente la idea de separación de contenido y diseño. Además, lo hace muy confuso para la gente que utiliza dispositivos de ayuda, porque se preguntan, si es todo un montón de datos, o si hay contenido que debería estar formateado de manera normal. Vamos a empezar a hablar de las tablas. Y lo que quiero hacer es enfatizar la idea de que solo debes usar tablas si tienes algún tipo de datos que mostrar. Incluso antes de empezar a programar una sola cosa, necesito que esboces el diseño del aspecto que tu tabla debería tener. He dicho esto a mis estudiantes una y otra vez, y dicen sí, sí, y luego empiezan a programar. Y dicen sí, sí, y luego comienzan a programar. Y, después de la cuarta o quinta vez, se dan cuenta, que es mucho más fácil escribir código limpio la primera vez que arreglar código roto. ¿Empiezan y piensan, cuántas filas y columnas necesito para representar todos mis datos? ¿Y vas un paso más allá y dices, hay algunas filas o columnas donde realmente necesito abarcar varias celdas, o lo que llamamos las pequeñas cajas en la tabla? Porque si es así, va a ser mucho más fácil si he dibujado esto para averiguar dónde voy a necesitar algún atributo especial para que esto suceda. Porque una de las cosas más importantes a saber cuando haces tablas es que el navegador espera que haya el mismo número de celdas en cada fila. Si no lo hace, queda muy desordenado. Una vez que hayas decidido qué aspecto debe tener tu tabla, es hora de empezar a pensar en las etiquetas. Comienzas con la etiqueta table que es básicamente un elemento contenedor que va a contener todos los otros atributos y todas las otras etiquetas en su interior. Vas a tener la y luego la , tengo columnas, pero realmente pienso que sería mejor pensar en esto como celdas de la tabla, no columnas pues lo que haces es hablar de cada caja individual. Dentro de la tabla, vas a tener una o más tr. Y luego dentro de cada tr, vas a tener uno o más td, columnas o celdas. Este es el código para crear una tabla muy simple. Aunque parece muy complicado y que hay un montón de cosas aquí. La mayor parte de esta información es sólo para el navegador. Cuando miramos la página real que se genera verás que es muy limpia y sencilla. Tengo el código para mi tabla en el exterior y luego cada una de las líneas de código es una fila. Tengo mi tr inicial y mi tr final. y dentro de cada fila tengo tres elementos one, two, three que están dentro de su etiqueta td. Y te diré ahora que cuando inicialmente escribí este código parecía bien, pero lo lié porque me olvidé de poner la etiqueta de cierre. Asegúrate de que cuando programes esto, eres muy claro y conciso. Y si lo haces correctamente, creará una tabla sencilla como ya he dicho, con nueve elementos en ella. One, two, three, four, five, six, seven, eight, nine. Esto es lo más simple que puedes tener, en lo que respecta a la tabla. En algunos casos, puede que desees agregar los llamados encabezados de tabla a tu código. Los encabezados de tabla son la idea de que en la parte superior de cada columna, o incluso en el comienzo de cada fila, tienes un texto en negrita, que indica que no son datos, que en realidad es el nombre de los datos que estamos mirando. Está bien, quiero decir que no está bien, pero lo que alguna gente hace es hacer elementos td normales y ponerlos en negrita. La gente que está mirando puede decir, mira. Esto está en negrita por lo que debe ser más importante. Pero debemos evitar hacer eso. En vez de utilizar una td con negrita, debemos utilizar una etiqueta semántica , que significa encabezado de tabla. Estas tres líneas de código son exactamente las mismas que antes, pero he añadido una nueva fila, donde en lugar de td tengo th. Tengo la fila uno, la fila dos, la fila tres, etc. Lo que puedes ver es que obtenemos este bonito encabezado de tabla arriba de cada una, que visualmente permite al usuario saber que son encabezados, pero también semánticamente transmite esa misma información. Una de las cosas que he mencionado antes, cuando se está diseñando una tabla es que debes decidir si vas a abarcar varias celdas. Podría darse el caso de que la tabla que vas a crear no es una cuadrícula perfecta de tres en raya, o de nueve por nueve. Se pueden combinar varias filas y / o varias columnas usando los atributos rowspan y colspan. Dentro del elemento, incluyes rowspan = 2 si quieres abarcar dos filas, o colspan igual a cinco si quieres abarcar cinco columnas. Permíteme seguir y mostrarte un ejemplo con algo de código y de nuevo, me di cuenta que si miras esto en alguna pequeña pantalla, esto parece realmente una gran cantidad de información para digerir. Pero en realidad no es para tanto. Tengo una tabla sencilla, donde tengo títulos de la tabla con el nombre del niño y a continuación, el nombre del padre. Y sigo y empiezo colocando un niño, con cada niño, incluyo a sus padres. Aquí, tengo rowspan igual a dos para Catherine, lo que significa de hecho que quiero que la celda de Catherine ocupe dos líneas. Lo mismo pasa con la celda de Edward. A Maggie la he dejado completamente sola. Vamos a ir a ver el resultado final, y creo que eso es realmente si lo revisamos, va a ayudarte a entender lo que hace el código. De nuevo, tengo el nombre del niño y el nombre de los padres, estas son las dos celdas en las que hice el rowspan. Y se puede ver, que de hecho tomó varias filas debido a que en este caso, Catherine y Edward ambos tenían dos padres que queríamos poner con ellos. De nuevo, no es un concepto difícil, pero es el caso que si no piensas en ello, y regresamos al código y comenzamos a colocar rowspan y colspan, se complica mucho y se hace difícil de depurar. Una de las cosas que puedes haber notado, en la parte superior de la tabla, incluí un atributo border. La razón por la que lo hice es porque creo que es mucho más fácil de ver este rowspan aquí porque tengo las líneas alrededor de cada celda. Por lo tanto, se puede utilizar el atributo border y poner líneas entre medias de cada una de las celdas. Es muy común hacerlo. Pero nuevamente en tu HTML, trato de evitar dar estilo. Es algo que podemos añadir en el futuro si decides aprender más de CSS. Pero es un atributo que se utiliza con tanta frecuencia, que quería ponerlo allí, para que se pudiera ver lo que estaba pasando. A continuación, vamos a hablar de los subtítulos. ¿Cómo podemos enlazar texto a una tabla específica? Lo que la gente solía hacer es poner algún tipo de encabezado, h2 o h3 lo ponían justo encima o justo debajo de la tabla. Visualmente, si la estabas mirando, podías darte cuenta, esto va con la tabla. Pero de nuevo quiero empujarte a utilizar etiquetas semánticas. En lugar de hacer eso, puedes utilizar la etiqueta caption dentro de la tabla que ayudará a todo el mundo a saber que este subtítulo va con esta tabla especifica. Por lo tanto vamos a revisar. Número uno, las tablas solo deben usarse para datos tabulares. No las utilices para el diseño. Dos, dibuja tu tabla antes de codificar tu tabla. Te vas a ahorrar muchos dolores al final, te lo prometo. Por último, y esta es lo tercero y más importante, es necesario comprobar si hay etiquetas sin cerrar. Una cosa maravillosa de los navegadores es que cuando estás desarrollando localmente estás escribiendo tu código y estás comprobándolo y mirándolo, es que tu navegador normalmente puede averiguar lo que querías hacer, aunque estés equivocado. Bien. Y las tablas son un buen ejemplo donde te puedes olvidar de cerrar algunas etiquetas, pero tu navegador, sabe lo que querías hacer. Pero más tarde si decides hacer una tabla y vas a subirla debes asegurarte de que los datos son válidos y están bien representados. Una de las peores cosas que puedes hacer es dejar etiquetas sin cerrar. Así que asegúrate de validar tu código, cada vez que escribes una tabla o, de hecho, cada vez que escribes código. Y vas a ser capaz de estar seguro de escribir el mejor código que se puede.