2.2.1 Introducción de datos

j. Tablas

Primero sitúa el cursor en el lugar donde quieres insertar la tabla HTML. Nosotros lo vamos a hacer en la pregunta 1 de un ejercicio de respuestas múltiples.

Después selecciona Insertar/Taba HTML:

Una vez establecidos los parámetros:

y seleccionado OK, el programa insertará el código HTML automáticamente; en este caso el resultado sería:

<table border="1" cellpadding="2" cellspacing="2" width="100%"><tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody></table>

En donde:

  • <table> quiere decir "tabla" y </table> "fin de tabla"

  • <tr> quiere decir "fila" y </tr> "fin de fila"

  • <td> quiere decir "celda" y </td> "fin de celda"

Aunque si miramos en el ejercicio sólo vemos esto:

Para verlo entero, y también para modificarlo después, tendrás que subir o bajar por las flechas de la derecha.

En esta tabla de 2x2 no hay datos: las celdas están vacías. Por eso no se verá nada cuando se exporte a web: ejercicio c27.

Actividad formativa 16

Viendo dichos códigos html anteriores:

<table border="1" cellpadding="2" cellspacing="2" width="100%"><tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody></table>

podemos deducir que:

- hay una tabla: marcados sus límites en color naranja

- hay dos filas: marcados sus límites en color rojo

- hay cuatro celdas en cada fila: marcados sus límites en color morado

Ahora, abre cualquiera de las patatas y crea dos ejercicios con JCloze. El primero con estos parámetros:

  • 3 filas y 4 celdas (es decir, 4 columnas) cada una
  • borde de tabla: 5
  • anchura de tabla: 25%

El otro con los siguientes parámetros:

  • 3 filas y 4 celdas (es decir, 4 columnas) cada una
  • borde de tabla: 20
  • anchura de tabla: 25%

Ahora dos preguntas:

Te damos una pista: la respuesta a la segunda pregunta tiene que ver con códigos html pero no de tablas.

 

¿Cómo se introducen los datos? A mano. En esta tabla, por ejemplo, los datos en marrón son los que hemos añadido nosotros en nuestro ejercicio:

<table border="1" cellpadding="2" cellspacing="2" width="100%"><tbody>
<tr>
<td>celda 1</td>
<td>celda 2</td>
</tr>
<tr>
<td>celda 3</td>
<td>celda 4</td>
</tr>
</tbody></table>

Mira el resultado.

Para poder introducir más datos en tu tabla, como por ejemplo color de fondo de las celdas, tipos de letra, etc., es necesario que sepas código HTML.

Actividad formativa 17

Busca, en la Ayuda de las patatas, cualquier información de utilidad para mejorar tus tablas: por ejemplo, consulta HTML tags (Tag quiere decir etiqueta).

Incluye alguna de estas etiquetas en la tabla que hayas creado.