| | | |
jueves, 3 de noviembre de 2016
jueves, 27 de octubre de 2016
Creando una tabla desde código HTML
Sabemos que crear una tabla en blogger es una tarea para la que debemos recurrir a recursos externos al propio editor de texto de blogger. La única solución posible es conocer el lenguaje básico HTML para crear la tabla a partir de la escritura de sus diferentes etiquetas.
Ejemplo: El código siguiente es para crear una sencilla tabla de 2 filas y 2 columnas:
<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">
<tbody>
<tr><td>Texto o imagen 1</td><td>Texto o imagen 2</td></tr>
<tr><td>Texto o imagen 3</td><td>Texto o imagen 4</td></tr>
</tbody>
</table>
Explicación de las etiquetas:
Si quisiéramos que la primera fila abarcara más de una columna, por ejemplo tres, sólo debemos añadir el atributo colspan="3" dentro de la etiqueta td de la única celda de la primera fila; y la segunda fila tiene tres celdas. El código es éste:
Ejemplo: El código siguiente es para crear una sencilla tabla de 2 filas y 2 columnas:
<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">
<tbody>
<tr><td>Texto o imagen 1</td><td>Texto o imagen 2</td></tr>
<tr><td>Texto o imagen 3</td><td>Texto o imagen 4</td></tr>
</tbody>
</table>
Explicación de las etiquetas:
- bgcolor: es el color de fondo de la tabla. Puedes consultar el código hexadecimal del color que quieres en esta web
- border: el tamaño del borde en píxeles, que se puede poner en cero si no queremos borde.
- cellpadding: el relleno dentro de la celda entre los bordes y el texto o las imágenes. Para ver cómo funciona esto, lo mejor es cambiar el número, que representa los píxeles.
- width: es la anchura de la tabla; en este caso, el 100% para que ocupe todo lo ancho del documento, pero también podemos ponerle un número de píxeles de ancho. Para esta anchura se utiliza la etiqueta style con código de hojas de estilo CSS; no es HTML.
- tbody: indica el cuerpo de la tabla.
- tr: crea una fila.
- td: crea una celda dentro de una fila.
Si quisiéramos que la primera fila abarcara más de una columna, por ejemplo tres, sólo debemos añadir el atributo colspan="3" dentro de la etiqueta td de la única celda de la primera fila; y la segunda fila tiene tres celdas. El código es éste:
<table style="width: 100%;" border="1">
<tbody>
<tr>
<td colspan="3" align="center">Fila grande</td>
</tr>
<tr>
<td style="width: 33%;">Celda</td>
<td style="width: 33%;">Celda</td>
<td style="width: 34%;">Celda</td>
</tr>
</tbody>
</table>
viernes, 21 de octubre de 2016
Personalizando una tabla
texto antes de la tabla
texto después de la tabla
| Aquí podemos escribir una línea |
jueves, 20 de octubre de 2016
Suscribirse a:
Comentarios (Atom)
