Curso Básico de CSS - 12. Tablas

[@Charlipirata]

Me sumo a los agradecimientos, por primera vez entendí HTML y CSS, termino este y sigo por Bootrap y JS!! Gracias capo!

[@miriamcastro2191]

amigo, que bien explicas!, en este tiempo de cuarentena(por el coronavirus ) me han servido de mucha ayuda tus vídeos. Saludos, que estés bien ❤.

[@zatzizmuchoamorydiversion9702]

@komi banda a jugar pasa el link de tu pagina para apoyar :D

[@felipenohchan5214]

Yo igual estoy reforzando lo poco que sabia quiero hacer un proyecto integrador con una página

[@pedrogonzalezidk]

Me pareció muy consiente de tu parte que señalaras "por coronavirus" ya que se puede confundir con la siguiente :)

[@pablitodecolegiales]

Excelente curso. Termino CSS y arranco con Bootstrap

[@evelynsandoval5220]

Hola, Gracias por tus videos me han sido de mucha utilidad.. Saludos desde El Salvador

[@jhos28]

Excelentes aportes, casi listos para comenzar el de PHP, ademas me interesa mucho bootstraps

[@guturuluful]

explicas muy bien, gracias por tan valioso contenido, con ayuda de tus videos estoy poniéndome al día antes de salir como analista informático

[@germanguillermorojas8195]

un espectaculo.. que agilidad para explicar.. es tan bueno que entiendo todo lo que decis y hasta suena una pavada... pero cuando voy solo no pego una.. un capo ! like suscripto !!!

[@elbolijesus]

Falcon Master gracias por estos cursos,son muy útiles y se aprende demasiado, gracias ^.^

[@annibelr352]

he aprendido mucho con tus videos :D.. luego que termine este..empiezo el de diseño web me encantan tus videos...super recomendados..

[@navidcastro4805]

Muchas gracias!! Excelente profesor!

[@mariodaguiar]

Hola Carlos, no quedaría mas bonito la tabla si agregamos th y después td; estuve viendo en w3c y mostraba th como encabezado "titulares para algunos"; y por error puse table tr td:hover{} y esto me resalta cada una de las celdas como lo hiciste en el minuto 6:11. Todos tus cursos desde HTML y CSS esta geniales.

[@MrDiegoalg]

Buen maestro! Vamos bien, entendiendo todo ... Gracias!

[@julioomana1158]

muy buen vídeo, me has sacado de varios apuros en la escuela, felicidades y gracias :D, y me encanto eso de "y hago algo ridículo" xD jajajaja, saludos.

[@anonymoustokill6564]

Gracias!!! Aprendo mucho con tus tutoriales.

[@22herno]

muy buenos tutoriales! me sirvieron muchos! saludos!

[@Franco-ir9em]

Que genial todos tus cursos, me gusta como cantas, quisiera ser el mejor cantante igual que vos ! :D muchas gracias

[@FalconMasters]

Franco5511 \^.^/ Gracias

[@igusst]

Checa: table { border: 1px solid #ccc; border-collapse:collapse; width: 500px; } table td { border: 1px solid #ccc; padding: 8px; } table tr:hover { background: #fff; } table td:hover { background: #ccc; color: #fff; }

[@Jesus-eg5zh]

Hola!! Fantastico curso estoy aprendiendo mucho con tus tutoriales, sigue asi. pero tengo un problema con un comando ( no se si se escrive asijjj) al grano, utilozas alguna vez la orden "hover". pues bien cuand la ecrivo en el sublie text se cambia a blanco y no me hace ninguna funcion, no noto ningun cambio y si sigo el sublime text se bloquea o algo asi. Gracias de ante mano. Saludos.

[@garudavital]

Muy lindo el curso muchas gracias !!!!

[@nonoocaranza]

Otro exitoso instructivo!!! genio!!!

[@bigjoemeta747]

le metí margin para centrarla y le puse un table td:active para que cambiara de color al clickearla, quedo criminal

[@fdl9308]

Hola Carlos me Vi tu tutorial entero de HTML y ahora voy por este, quisiera practicar un poco lo que tú haces, qué programa usas para ejecutar los comandos (nose si está bien dicho así) de HTML y CSS a la par? Gracias!

[@lRemoved]

Hay alguna forma de hacer que en caso tal de que haya un párrafo tan extenso dentro de una celda que deforme la tabla, se pueda mitigar con la propiedad overflow: auto ? así simplemente tendrá las barras de scroll si son necesarias... Saludos y gracias por tus vídeos, no cambies !

[@d-landjs]

Seria fantastico que tengas cursos de css avanzado :c, pero si que muy buenos tutoriales haces!!!!

[@JULIANDRESGM]

Muchas gracias, qué buen curso!

[@sabrinallorente1158]

Gracias por los tutoriales falcon, tengo una pregunta urgente, como hago para poner comillas en el titulo de una de las filas de las tablas? tengo que poner de nombre Say "yes" y en vez de las comillas aparecen simbolos

[@naikerarteagaalejos4211]

genial amigo tus tutoriales me han ayudado mucho

[@paulpopaul]

Falcon cuándo CSS avanzado?

[@douglasmonterola8499]

excelente aporte falcon como haria para controlar el tamaño en la parte vertical??????

[@jaiirocb4795]

Para señalar la columna habría que poner el background de tr del color del fondo del documento, y poner un hover a td así: table td{ border:1px solid #000; padding:20px; color:#000; } table tr:hover{ background:#fff; } table td:hover{ background:#000; color:#fff; }

[@EdicsonRomero06]

Amigo gracias por tus videos son geniales y ayudan mucho! pero intale emmet pero no me hacer los cmbios en los atajos como puedo activarlos o que tecla tengo que darle ayudame!

[@wuendycalderon6291]

Que bien explicas. gracias ..

[@igusst]

Saludos, si cambias: table tr:hover { background: #ccc; } por: table tr:hover { background: #fff; } Obtendras lo que quieres... solo cambia de color el cuadro por donde pases el mouse.

[@7siega]

Gracias hermano, buen vídeo :)

[@pepemontalvo3932]

Todo este curso de Css que esta excelente se puede aplicar en wordpress en temas como divi???

[@wilsonsalinas3881]

me encanta!!! muchas gracias!

[@rommelportal]

Excelente, mil gracias!

[@damianm2436]

¡Muy bueno!

[@fedecortometraje3093]

Primero gracias por los tutoriales. Sólo una pregunta ¿se podría insertar una imagen en cada celda y crear así una galería de imágenes? Un saludo

[@DKMRFCBrlz]

hombre, que buen tutorial!!

[@tomyacosta3096]

deberias hacer javascript avanzado, amo tu contenido

[@DarkoLoq86]

Me ocurrió algo curioso, en 5:30 escribiste exactamente "table tr:hover{}" y lo que hizo fue contrastar las filas. Yo escribí exactamente "table tr :hover{}", o sea con una espacio entre tr y :hover, y lo que pasó fue que me resaltaba cada cuadrito individualmente. ¿Por qué pasó esto? Me pareció raro que pasara sólo por dejar un espacio, entonces CSS es sensible a espacios ¿no?

[@pologamered4216]

@DarkoLoq86 Puede ser. Yo estaba practicando con CSS y HTML y cundo le deje un espacio a una pequeña oracion en CSS se me bugeo toda la pagina jajajajajajajaj :,D

[@ProfeCarlosFisMat]

buenas, excelente los cursos... una pregunta: como podría modificar el color de la primera fila sin modificar el resto de la tabla????

[@andrescalero7860]

Creo, ojo, creo...Que agregandole una etiqueta class '' '' a la fila que quieres modificar

[@mauricioperalta1583]

Amigo una pregunta para el block de notas amigo para agregrale el borde Lo agrego despues de Y pongo solo table o me gustaria q me ayudaras si me repondes bro plis

[@vainillakola6040]

Gracias por el video

[@brunodherrera]

como les añades scroll bars para cuando es demasiado texto no deformar la tabla?

[@miguelpenaloza9235]

Muchas gracias!

[@club.reto.urbano]

amigo como estas, pero dreamwever iene una opcion en su menu de hacer tabla sin necesidad de programarlo. gracis

[@videosespecialesPRO]

MUCHAS GRACIAS.

[@davidxgil8194]

Ah c**** LOL!! Felicidades Carlos. Saludotes

[@manuefeli]

Gracias

[@angelsalazar150]

una pregunta como hago para centrar la tabla y tambien que etiqueta o atributo tengo que poner para poner una imagen dentro de una celda? es URGENTE¡¡¡¡¡¡ porfavor

[@joangonzalez7283]

Buenas noches Falcon recien ingreso en este mundo y tengo problemas con una tabla que no tiene la misma cantidad de celdas en cada fila y no puedo centrar una fila de una sola celda con los css como lo has explicado me podras ayudar? Gracias te lo agradeceria enormemente....

[@erickarrieche2694]

Cuantos años tienes? me dio curiosidad para todo lo que sabes!

[@weloveloscabos2546]

donde descargas las herramientas?

[@gabrielc4921]

excelente definitivo

[@teampoison_997]

Hola, porque los cambios que hago en css no me los muestra en mi tabla hecha en html?

[@teampoison_997]

Ya pude jajaja gracias por contestar :''v

[@calebaquino5241]

@@teampoison_997 Como lo solucionaste?

[@nellymeza4237]

disculpa para hacer una tabla donde se puede agregar algun usuario

[@planetaoffice]

muy buen tutorial explicas muy bien, pero tengo un problema, que sucede si tengo varias tablas..esto lo aplica a todas y solo quiero aplicarlo a una en especifica

[@FalconMasters]

Kenshin Himura le pones una clase a la tabla y le aplicas las propiedades a esa tabla, por ejemplo:.tabladiferente {border-collapse:collapse;}

[@planetaoffice]

FalconMasters eres un capo de la mafia...lol!

[@anime-139]

Me encanto

[@julianix882]

Estaría mal hecho poner un menú con una tabla de solo una fila ? lo digo por los bordes que con el colapse quedan más bonitos que si le pones bordes a una lista

[@jhonix039]

hola tengo serios problemas con emmet en Dw si por favor me pudiese dar un link para configurar lo le estaría muy agradecido.

[@dpre3522]

no se porque pero hago lo mismo y no me muestra el estilo que le di a la tabla y el td, yo tengo la tabla dentro de un container y no se si eso afectara en algo pero incluso le puse lo que es el > direccionando al container, la tabla y el td pero tampoco me funciona, no sabes como se podra arreglar?

[@carlosortiz3176]

Muy bien :D Gracias

[@Gonzalezandy27]

Me queda la curiosidad de como colorear los td pero en forma vertical y que se forme una + al pasara el mouse se entiende? alguien tiene la data de como se hace? gracias

[@everysingledaydayinanddayo3798]

Buenisimo

[@STEVENopticus]

por que cuando pongo "table td:hover" no lee el hover?? o sea, no lo reconoce :(

[@Kevin-nb6og]

Falcón sea que puedes hacer tutoriales de j quary ??

[@FalconMasters]

+Kevin Milan Si, despues del curso de Javascript va el curso de Jquery :)

[@Kevin-nb6og]

muhcas gracias!! pero me referia que quiero un curso de animaciones css!!

[@alejandrogarciavidal5278]

+FalconMasters gracias, enserio que tus videos ayudan mucho, hasta mejor que una clase en vivo

[@Kevin-nb6og]

siii mucho mejor tus videos ppero deberias hacer un curso de css avanzado !!

[@albertm2329]

Por fa! *-*

[@alejandrosmithjohnson6966]

Cómo hago para que una celda de la tabla quede como un link, es decir que si alguien le da clic en una celda de la tabla se les abra otra página. le agradezco su respuesta, Gracias por hacer este tutorial.

[@mariodaguiar]

Hola Ale. dentro de td ponle un ancla []

[@danielosopanda]

como hago para que algo en la tabla tenga al mismo tiempo un enlace

[@SATRYALTOR]

Todo estupendo hasta llegar al hover... no me hace nada de caso.... ni con table tr.hover { en lugar de table tr:hover { ¿que puede pasar? gracias

[@maximilianoweihmuller1809]

genial !!!

[@laconchazul]

Una pregunta: puedo guardar los colores en algun tipo de variable en css? Para no tener que estar recorriendo toda el archivo .css buscando los colores que quiero modificar.

[@FalconMasters]

Con CSS puro no. Para usar variables tienes que hacerlo mediante un preprocesador como SASS. Del cual también tengo un curso en mi canal.

[@loanyelo15]

y si queremos que en un cuadro pase un video y cuando termine desaparezca el cuadro con el video? y en otro cuadro una pagina y cada 3 segundos muestre otra?

[@ayrtonbejar2568]

a esta tabla se le podria hacer un cronograma de pagos?

[@mensajero6241]

mi pregunta es como hago para poner la tabla en el centro de la página. CENTRADO con la tabla.

[@Marcos-uc9vf]

Pensandolo desde los videos anteriores, deberías crear un DIV y luego , al DIV le pones un #id y en la carpeta .css le das un weight de 100%, luego al table, un atributo que lo centre... Es lo que se me ocurre, lo voy a probar y te digo si me funcionó así, todavía no ví este video! Espero que te sirva, y comentame como es que lo solucionaste!

[@victoralarcon6351]

Tenía la misma duda, e investigando en internet encontré la respuesta: En HTML: ... Y luego en CSS: table.center { margin-left:auto; margin-right:auto; }

[@lorenarode7860]

hola falcon fijate que a mi no me lee el atributo HOVER por que sera ... y lo estoy poniendo asi. como tu dices.

[@calabera4741]

table{ border: 1px solid #000; border-collapse: collapse; width: 500px; } table td{ border: 1px solid #000; padding: 20px; } table tr:hover { background:#ccc; } table td:hover{ background:#000; color: #fff; } Guárdalo y actualiza, me pasaba lo mismo, lo que hice fue escribirlo de nuevo y actualice la pagina y me funciono, saludos.

[@Haru-rt5hp]

en visual studio code emmet ya esta instalado automáticamente

[@danielaochoa7491]

como centro la tabla ayuda!!!

[@hydevideo]

En HTML: En CSS: table.centrar { margin-left:auto; margin-right:auto; }

[@relampagoverde5501]

Hola Bro! Me estoy viendo todos tus videos, pero tengo una duda: ¿Se podría hacer una tabla en la que todas las celdas sean iguales, pero que como ejemplo, una de esas celdas tenga dentro un texto muy largo pero que esa celda tenga las misma dimensiones que las otras y si lo quieres leer, tienes que ubicar el ratón encima de esa celda y hacer scroll para verlo (y que el texto vaya apareciendo de la "nada" o de "arriba-abajo")? Nose si me he explicado bien 0.o

[@FalconMasters]

Si que se puede, puedes poner un div dentro de la celda con un overflow-y:auto; Este div tiene que tener las medidas que tu quieras.

[@relampagoverde5501]

oh my god, i didnt expect it was posible xD

[@cristianeuceda1679]

exelente

[@cesar81611]

hola creo que la parte de las tablas tiene mucho mas contenido y aunque se que es un curso básico deberías explicarlo mas a fondo de la manera basica, aunque el curso esta demacrado bueno

[@vic_jay16]

Hola buenos días quisiera saber como puedo evitar que mi formulario al minimizar o al reducir la ventana del navegador no quede ajustado como el tamaño normal de mi ventana al estar maximizada. Este es el código en html y el css que estoy utilizando. Saludos... Farmacias la Salud Usuario: Contraseña: Accesar /********css*****/ body{ background-image:url(Image.jpg); background-size: 100% 100%; } #posicion{ position:absolute; top:550; left:850; }

[@jhansellopez302]

tu sitio web no tiene https?

[@FalconMasters]

Si tiene.

[@jhansellopez302]

@@FalconMasters sorry bro si lo tiene , te quiero mandar un saludo desde república Dominicana , tus video me a ayudado mucho cuando termine voy para el de javascript

[@leonardoruizcorrea1139]

LIke si ya andabas en PHP y tuviste que regresar a CSS o a HTML.

[@kodama1400]

Esta bien prrn el plugin de emet, agilisa la manera de escribir html

[@DiegoTorres-ed6pn]

Falcon, No aparece el borde e hice el codigo igual.

[@derekrodriguezarancibia8449]

no me enlaza :(

[@diegol7804]

Me confundí :C ¿a qué se refería con el elemento padre? Alguien podría recordarme? Por favor :c

[@electrikvocal9590]

Al que lo contiene dentro

[@diarsaba]

no olvides de suscribirte... desuscribirte... DX... XD...