¡Hola creadores! ¿Qué tal están? Hoy les dejaré la tabla que hice hace un tiempo. No estoy muy conforme con el resultado pero por ahora es lo que puedo brindar. Para más adelante podré hacer algo mucho más bonito, lo prometo. Antes de continuar quiero aclarar que no es un tutorial en si, no tengo otro lugar para ponerlo y por eso lo coloqué como un Tutorial HTML (cambiado a Recurso HTML :)). En realidad les daré el código de la tabla que es personalizable. Si quieren editarla y no les sale pueden preguntarme. También si quieren armar algo y no les sale, puedo pegarles una mano :)
¿Qué se puede personalizar?
- Tamaño de cada porción. Pueden hacerlo más grande o más chico, dependiendo de cuanto texto quieren ingresar. También pueden colocar la barra de desplazamiento si quieren que quede un tamaño más chico en la parte de la descripción y no se alargue tanto
- El título, el cuerpo y el cuadro
- Colores. Pueden cambiar todos los colores si lo desean. Iba a hacer diferentes opciones de colores pero no pude
- Fuentes.
- Fuentes.
- Imagen
- Muchas más cosas
- Muchas más cosas
Si quieren saber como pueden editar este tipo de tabla pueden visitar mis tutoriales HTML anteriores, en los que explico lo básico que conozco, por lo menos. Aquí pueden encontrarlos → click
NOTA: Yo les paso una imagen del cuadro porque con la plantilla que tengo me marca una línea que realmente no existe. Así que si tienen plantillas tengan en cuenta que puede cambiar el diseño de la tabla, el resultado.
Tabla personalizable
NOTA2: La fuente usada es Vibur y su código es el siguiente:
<link href="https://fonts.googleapis.com/css?family=Vibur" rel="stylesheet">
Código con fuente
<link href="https://fonts.googleapis.com/css?family=Vibur" rel="stylesheet"><table style="background-color: black; border-bottom: 10px solid #bc3541; border-left: 5px solid #ee5b6c; border-right: 10px solid #bc3541; border-top: 5px solid #ee5b6c; height: 600px; padding: 10px; width: 600px;"><tbody><tr><td><center><div style="background-color: #f99d71; border: 2px double white; color: white; font-family: "vibur" , cursive; font-size: 40px; padding: 5px; text-align: center; text-shadow: 2px 2px 2px black; width: 400px;"><div class="separator" style="clear: both; text-align: center;">Título</div></div></center></td><td><div style="background-image: url(IMAGEN); border-radius: 100%; border: solid 3px; height: 200px; margin-left: 20px; width: 200px;"></div></td></tr><tr><td><div style="color: white; height: 400px; padding: 10px; width: auto;"><div style="text-align: justify;">Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</div></div></td><td><div style="background-color: white; height: 300px; padding: 12px; text-align: center; width: auto;"><u>xxx</u>: -<br /><u>xxx</u>: -<br /><u>xxx</u>: -<br /><u>xxx</u>: -</div></td></tr></tbody></table>
Ejemplo
