mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-25 01:42:23 +00:00
325 lines
14 KiB
HTML
325 lines
14 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html lang="es-es">
|
|
<head>
|
|
|
|
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
|
|
<title>Tablas - Crear tablas</title>
|
|
|
|
|
|
<link rel="stylesheet" href="../nvu2005.css" type="text/css">
|
|
|
|
<!-- compliance patch for microsoft browsers --><!--[if lt IE 7]> <script src="../ie7/ie7-standard-p.js" type="text/javascript"></script> <![endif]-->
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div id="localizador">
|
|
<p>Tablas>>Crear tablas</p>
|
|
|
|
</div>
|
|
<div id="flechadcha">
|
|
<a href="tablas3.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="tablas1.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
<div id="contenido">
|
|
<h2>Crear tablas</h2>
|
|
|
|
<p>Para empezar a trabajar con tablas lo haremos considerando
|
|
unos datos que se prestan a su representación por medio de
|
|
este recurso.</p>
|
|
|
|
<p>Necesitamos publicar en la página WEB del centro
|
|
los datos de matriculación en los que vamos a incluir el
|
|
número de alumnos matriculados en cada uno de los dos grupos
|
|
de cada uno de los niveles de Educación Secundaria
|
|
Obligatoria.</p>
|
|
|
|
<p><img class="flotder" style="border: 0px solid ; width: 307px; height: 271px;" alt="Panel de insertar tabla - Modo rápido" title="Panel de insertar tabla - Modo rápido" src="img/insertartablarapido.png" hspace="10"><img class="flotder" style="width: 307px; height: 271px;" alt="Panel Insertar tabla - Modo preciso" title="Panel Insertar tabla - Modo preciso" src="img/insertartablapreciso.png">Pulsando sobre el icono <img class="imgcentr" style="width: 47px; height: 42px;" alt="Tabla" title="Tabla" src="img/icotablas.png">
|
|
de la
|
|
barra de herramientas o mediante el menú <strong class="refmenu">tabla</strong><span class="refmenu"><img class="imgcentr" style="width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"></span><strong class="refmenu">insertar</strong><span class="refmenu"><img class="imgcentr" style="width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"></span><strong><span class="refmenu">tabla</span> </strong>
|
|
se accede a la ventana de creación de tabla. Como puedes ver
|
|
hay dos
|
|
modos de creación: el rápido que nos
|
|
permite crear tablas de unas
|
|
dimensiones máximas de 6 filas x 6 columnas mediante un
|
|
simple
|
|
movimiento de ratón o el preciso que me permite especificar
|
|
un tamaño
|
|
mayor, así como la anchura y el borde de la tabla. </p>
|
|
|
|
<p>Si pulsáramos sobre el botón <img style="width: 110px; height: 24px;" alt="Edición avanzada" title="Edición avanzada" src="../imagenes/botonedicionavanzada.png">
|
|
accederíamos a
|
|
una pantalla para establecer otras propiedades que se
|
|
comentarán más adelante. Por el momento la
|
|
sugerencia es que, en un primer momento, te limites a especificar el
|
|
número de filas y columnas y el ancho que quieres
|
|
adjudicarle a la tabla</p>
|
|
|
|
<p>Una vez que hemos tomado contacto vamos a empezar a
|
|
realizar alguna práctica con las tablas.</p>
|
|
|
|
<br>
|
|
|
|
<div class="ejercicio practicas"><img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 22" title="Actividad 22" src="../imagenes/numeracion/veintidos.gif">
|
|
<ul>
|
|
|
|
<li> Creamos en el editor un documento nuevo e insertamos en
|
|
él una tabla con 3 filas y 5 columnas. </li>
|
|
|
|
<li> Como aún no tiene datos nuestra flamante tabla
|
|
presentará un aspecto bastante "esquelético". </li>
|
|
|
|
<li>Vamos ahora rellenando las celdas con la
|
|
información pertinente. En la zona superior colocaremos los
|
|
identificadores de 1º, 2º, 3º y 4º
|
|
y en la izquierda los correspondientes a los grupos A y B. Inventamos
|
|
unos datos de matrícula para cada uno de los ocho grupos.</li>
|
|
|
|
<li> Guardamos el trabajo como <strong>actividad22.html</strong>
|
|
y comprobamos los resultados en el navegador.</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<p> En el siguiente vídeo se muestra una una
|
|
descripción de los diversos elementos
|
|
que constituyen el panel de propiedades de la tabla..</p>
|
|
|
|
<!--<div style="text-align: center;"><object class="imgcentr" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="paneltablaspestaniatablas" height="414" width="488"><param name="allowScriptAccess" value="sameDomain">
|
|
<param name="movie" value="paneltablaspestaniatablas.swf"><param name="play" value="false"><param name="quality" value="high"><param name="bgcolor" value="#ffffff">
|
|
<embed src="paneltablaspestaniatablas.swf" quality="high" play="false" bgcolor="#ffffff" name="paneltablaspestaniatablas" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" height="414" width="488"></object></div>
|
|
-->
|
|
<a href=" javascript:void(0=" onclick="window.open('paneltablaspestaniatablas.swf','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=488,height=414')">Ver animación.
|
|
</a>
|
|
|
|
<p> </p>
|
|
|
|
<div id="overDiv" style="position: absolute; z-index: 1;"></div>
|
|
|
|
Si la tabla ocupa menos del 100% de la ventana y elegimos una
|
|
alineación a la izquierda o a la derecha el texto
|
|
fluirá por el espacio que haya quedado libre en el lado
|
|
opuesto.
|
|
<div class="codigo">
|
|
<p><img style="width: 28px; height: 25px; float: left;" alt="Atención" src="../imagenes/atencion.gif" hspace="5">Cuando
|
|
hagas alguna prueba de lo que se acaba de decir verás que
|
|
parece que no funciona cuando la tabla está alineada a la
|
|
izquierda. </p>
|
|
|
|
<p>El motivo es que cuando se utiliza la alineación
|
|
izquierda el programa elimina el atributo <code>align="left"></code>,
|
|
mientras que mantiene
|
|
correctamente <code>align="right"</code>
|
|
cuando se alinea a la derecha. Para corregir este pequeño
|
|
error tendrás que introducir
|
|
manualmente este atributo en la etiqueta <code><table></code></p>
|
|
|
|
</div>
|
|
|
|
<p>A partir de la tabla base que hemos creado en la actividad 21
|
|
vamos a ir haciendo añadidos para
|
|
completarla. Iremos comprobando a través de los siguientes
|
|
ejercicios que el trabajo con tablas puede resultar ciertamente
|
|
complicado debido a las características de lenguaje <acronym title="Hypertext Markup Language">HTML</acronym>.
|
|
Por ello vamos formular un consejo esencial para trabajar
|
|
rápidamente con tablas: </p>
|
|
|
|
<p class="avisos"><b><i><img src="../imagenes/atencion.gif" align="left" height="25" width="28">Si nuestro
|
|
objetivo es lograr una tabla compleja debemos partir de un esquema
|
|
realizado en papel y, una vez creada la estructura, rellenar los datos.</i></b>
|
|
</p>
|
|
|
|
<p>Antes de pasar al siguiente ejercicio vamos a dejar constancia
|
|
de cuáles son las etiquetas básicas que
|
|
intervienen en la definición de una tabla.</p>
|
|
|
|
<div class="codigo">
|
|
<p><code><table></code>
|
|
Aquí se inicia la tabla<br>
|
|
|
|
<code>
|
|
<tr>
|
|
</code>Esta etiqueta indica el inicio de una fila<br>
|
|
|
|
<code>
|
|
<td>
|
|
</code>Entre estas etiquetas irá el contenido de la
|
|
primera celda <code></td>
|
|
</code><br>
|
|
|
|
<code>
|
|
<td></code>
|
|
Y aquí el de la segunda</td> <br>
|
|
|
|
<code>
|
|
</tr></code>
|
|
Esta indica el fin de la primera fila. <br>
|
|
|
|
A continuación empezaría la siguiente fila con
|
|
una nueva etiqueta <code><tr></code> y las
|
|
correspondientes a las
|
|
celdas hasta el cierre de la nueva fila con <code></tr></code><br>
|
|
|
|
<code>
|
|
</table> </code>Sería la etiqueta de
|
|
cierre de la tabla</p>
|
|
|
|
</div>
|
|
|
|
<p class="avisos"> <img src="../imagenes/atencion.gif" align="left" height="25" width="28"> Los
|
|
cierres de las etiquetas <code></tr></code>
|
|
y <code></td> </code>son
|
|
opcionales según las especificaciones del W3C. Sin embargo,
|
|
el cierre de la etiqueta <code></table></code>
|
|
es obligatorio, por lo
|
|
que si en alguna ocasión modificas una tabla trabajando
|
|
directamente sobre el código ten en cuenta que la ausencia
|
|
de una etiqueta de cierre <code></table></code>
|
|
puede hacer que,
|
|
según el navegador con el que se visualice, el contenido de
|
|
la página no se muestre en pantalla. <br>
|
|
|
|
</p>
|
|
|
|
<p>Iremos viendo más
|
|
adelante los atributos que pueden acompañar a las etiquetas,
|
|
pero por el momento nos resultará suficiente lo que acabamos
|
|
de ver para continuar avanzando en las prácticas.
|
|
</p>
|
|
|
|
<div class="practicas"><img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 23" title="Actividad 23" src="../imagenes/numeracion/veintitres.gif">
|
|
<p>Vamos a
|
|
partir de la tabla
|
|
que creamos en la actividad 22 y le añadiremos una
|
|
fila por encima para agrupar los datos en Primer y Segundo Ciclo.</p>
|
|
|
|
<ul>
|
|
|
|
<li> Abre el archivo <strong>actividad22.html</strong>
|
|
si lo
|
|
habías cerrado.</li>
|
|
|
|
<li>Pulsa con el
|
|
botón derecho sobre cualquier celda de la primera fila y
|
|
elige <span class="refmenu">tabla </span><strong class="refmenu"></strong><span style="font-weight: normal;" class="refmenu"><img class="imgcentr" style="width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"></span><strong class="refmenu"> </strong><strong class="refmenu"></strong><span class="refmenu">insertar </span><strong class="refmenu"></strong><span style="font-weight: normal;" class="refmenu"><img class="imgcentr" style="width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"></span><strong class="refmenu"> </strong><span class="refmenu">fila
|
|
superior</span><b> </b>.</li>
|
|
|
|
<li> Comprobarás
|
|
que la fila se ha insertado por encima de la celda en la que nos
|
|
encontrábamos. </li>
|
|
|
|
<li>Sitúate ahora
|
|
en la celda que se encuentra encima de la que contiene la referencia al
|
|
curso 1º y, pulsando y arrastrando haz que queden marcadas esa
|
|
celda y la que se encuentra a su derecha.</li>
|
|
|
|
<li>Pulsa el botón
|
|
derecho y elige <span class="refmenu">unir celdas
|
|
seleccionadas</span>.</li>
|
|
|
|
<li> Repite la
|
|
operación con la celda situada encima de la referencia a
|
|
3º.</li>
|
|
|
|
<li>Rellena las celdas
|
|
superiores con el texto Primer Ciclo y Segundo Ciclo respectivamente.</li>
|
|
|
|
<li> Guarda el trabajo como <strong>actividad23.html</strong>
|
|
y comprueba los resultados en el navegador.</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<p><img style="width: 412px; height: 72px; float: right;" alt="Visualización de los límiites de las celdas de una tabla" title="Visualización de los límiites de las celdas de una tabla" src="img/tablas2.png" class="recuadroimg" hspace="5">Tal
|
|
vez te haya llamado la
|
|
atención la existencia de unos pequeños iconos
|
|
que aparecen en los bordes izquierdo y superior de la celda en la que
|
|
se encuentra el cursor y que modifican su color cuando el
|
|
ratón pasa sobre ellos. </p>
|
|
|
|
<p>Su función es la de facilitar la tarea de
|
|
añadir o eliminar filas y columnas: la pulsación
|
|
sobre <img style="width: 8px; height: 8px;" alt="Indicador para eliminar una fila o columna" title="Indicador para eliminar una fila o columna" src="img/tablaeliminarfilacol.png"> eliminará la
|
|
fila o
|
|
columna a la que pertenezca la celda, mientras que la
|
|
pulsación sobre las flechas <img style="width: 4px; height: 8px;" alt="Indicador para añadir filas o columnas" title="Indicador para añadir filas o columnas" src="img/tablaaniadirfilacol.png">
|
|
añadirá
|
|
una fila o columna en la posición que señalemos
|
|
respecto a la celda activa. <br>
|
|
|
|
</p>
|
|
|
|
<div class="avisos">
|
|
<p><img src="../imagenes/atencion.gif" align="left" height="25" width="28">Cuando
|
|
deseamos borrar alguna celda (no únicamente su contenido)
|
|
habrá que pulsar el botón derecho
|
|
yelegir <span class="refmenu">eliminar tabla <img class="imgcentr" style="width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"> celda(s).</span><span class="refmenu"></span>
|
|
</p>
|
|
|
|
<p>Por otra parte, si al crear una tabla calculamos mal el
|
|
número de filas que necesitábamos, se puede
|
|
añadir una nueva fila si nos situamos en la celda de la
|
|
esquina inferior derecha y pulsamos la tecla <img class="imgcentr" style="width: 31px; height: 23px;" alt="tabulador" title="tabulador" src="../imagenes/teclatab.png"></p>
|
|
|
|
</div>
|
|
|
|
<div class="avisos"><img src="../imagenes/atencion.gif" align="left" height="25" width="28">Si
|
|
necesitas copiar y pegar celdas notarás que N|VU pega el
|
|
contenido dependiendo de la forma en la que se haya seleccionado el
|
|
contenido original:<br>
|
|
|
|
<ul>
|
|
|
|
<li>Si ha sido mediante arrastrar para marcar un fragmento de
|
|
texto,
|
|
aunque sea todo el contenido de la celda se pegará el mismo
|
|
como
|
|
texto.</li>
|
|
|
|
<li>Si se ha pulsado la tecla <img style="width: 36px; height: 26px;" alt="Control" title="Control" src="../imagenes/teclactrl.png">
|
|
y se ha hecho clic lo que habremos copiado realmente es la celda
|
|
completa, por lo que al pegarla veremos que aparece una celda anidada
|
|
dentro de la celda de destino.</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="codigo">Veamos algunos de los atributos que
|
|
han ido apareciendo en el código al realizar uniones de
|
|
celdas.<br>
|
|
|
|
<br>
|
|
|
|
<code>Rowspan</code> sirve para indicar el
|
|
número de filas que
|
|
ocupará una celda. Por ejemplo: <code><td
|
|
rowspan=2></td></code>
|
|
nos serviría para crear una celda que visualmente
|
|
sería el resultado de unir verticalmente dos celdas de la
|
|
misma columna.<br>
|
|
|
|
<br>
|
|
|
|
<code>Colspan</code> lo utilizamos para unir celdas
|
|
horizontalmente. Así
|
|
<<code>td
|
|
colspan=3></td></code>
|
|
produciría una celda que se extendería
|
|
horizontalmente a lo largo de 3 columnas. </div>
|
|
|
|
<p><br>
|
|
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html>
|