mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-26 10:22:18 +00:00
985 lines
27 KiB
HTML
985 lines
27 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
|
<html lang="es-es">
|
|
<head>
|
|
|
|
|
|
|
|
|
|
|
|
<title>Más opciones de las tablas</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
|
|
|
|
|
|
|
<meta name="Author" content="Raúl Luna">
|
|
|
|
|
|
|
|
<script type="text/javascript" language="JavaScript">
|
|
<!--
|
|
function abrirrules (){
|
|
rules=window.open("tablas3b.htm","rules","width=750,height=510,top=0,left=0");
|
|
return true;
|
|
}
|
|
function abrirframe (){
|
|
frame=window.open("tablas3a.htm","frame","width=750,height=555,top=0,left=0");
|
|
return true;
|
|
}
|
|
//-->
|
|
</script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../nvu2005.css">
|
|
|
|
|
|
|
|
<link media="all" rel="stylesheet" type="text/css" href="tablas3.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>>Más opciones de las tablas</p>
|
|
|
|
</div>
|
|
<div id="flechadcha">
|
|
<a href="../multimedia/multi1.htm" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="tablas2.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
<div id="contenido">
|
|
|
|
<p>En los ejercicios previos has ido tomando contacto con los
|
|
parámetros básicos para la creación de
|
|
tablas. Posiblemente ya hayas experimentado con algunas de las opciones
|
|
que se han ido presentando. Si aún no lo has hecho ten en
|
|
cuenta que el botón secundario del ratón te va a
|
|
permitir acceder, como siempre, a menús contextuales en los
|
|
que aparecerán operaciones relacionadas con el punto de la
|
|
tabla en el que te encuentras en ese momento.</p>
|
|
|
|
|
|
<p>Recordarás que habíamos dejado pendiente
|
|
la revisión de las opciones disponibles en la
|
|
pestaña <span class="refmenu">celda</span>
|
|
del panel de propiedades de las tablas. Puedes verlas en la
|
|
animación que hay bajo este párrafo. </p>
|
|
|
|
|
|
<!--<div class="flotizq">
|
|
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" id="Captivate1" height="414" width="486"><param name="movie" value="pestaniadeceldas.swf"><param name="pause" value="true"><param name="quality" value="high"><param name="menu" value="false"><param name="loop" value="0">
|
|
<embed src="pestaniadeceldas.swf" loop="0" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" pause="true" height="414" width="486"></embed></object></div>
|
|
--><a href=" javascript:void(0=" onclick="window.open('pestaniadeceldas.swf','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=486,height=414')">Ver animación.
|
|
</a>
|
|
|
|
<p>Recuerda que para acceder al panel de propiedades de
|
|
las tablas podemos hacerlo mediante la opción de
|
|
menú <span class="refmenu">tabla</span><span class="refmenu"><img class="imgcentr" style="width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"></span><span class="refmenu">propiedades de la tabla</span> o,
|
|
más rápidamente, haciendo doble clic sobre la
|
|
celda a la que deseamos aplicar alguna modificación.</p>
|
|
|
|
|
|
<h2 style="display: table;">Propiedades de la
|
|
celda, fila o columna</h2>
|
|
|
|
|
|
<p>Como has visto en la animación, la
|
|
opción por defecto del programa es aplicar las
|
|
modificaciones a la celda desde la que hemos invocado el panel de
|
|
propiedades, pero contamos con la posibilidad de afectar
|
|
también a las de su misma fila o columna. </p>
|
|
|
|
|
|
<p>Al editar una celda y
|
|
seleccionar una fila (o columna) como
|
|
destino de las propiedades se podrán ir aplicando cambios en
|
|
otras filas o columnas mediante los botones anterior y siguiente, de
|
|
forma que los cambios se aplicarán a cada una de ellas
|
|
según nos desplazamos de una a otra.</p>
|
|
|
|
|
|
<p style="display: table;" class="avisos">IMPORTANTE:
|
|
La mayoría de las
|
|
modificaciones,
|
|
tales como el cambio de altura o anchura o la alineación del
|
|
texto no se aplicarán correctamente cuando se
|
|
esté
|
|
trabajando con CSS activado.</p>
|
|
|
|
|
|
<p>Podemos especificar una anchura o altura para la celda, tanto
|
|
de forma absoluta (en píxeles) como relativa (respecto a la
|
|
tabla en la que se encuentra). </p>
|
|
|
|
|
|
<p>Si elegimos <span class="refmenu">no ajustar
|
|
líneas</span><strong> </strong>en
|
|
la sección de <span class="refmenu"><strong>ajuste
|
|
del texto</strong></span> podemos encontrarnos con efectos
|
|
indeseables,
|
|
ya que se extenderá la anchura de la celda para contener el
|
|
texto en el mismo renglón. </p>
|
|
|
|
|
|
<p>El comportamiento por defecto de las tablas es que se intenta
|
|
repartir el espacio correspondiente a cada columna de acuerdo al
|
|
contenido de las mismas, por lo que es muy conveniente que marquemos la
|
|
casilla de verificacion de la sección <span class="refmenu">ajuste
|
|
del texto</span>
|
|
</p>
|
|
|
|
|
|
<p>En cuanto a los colores de fondo se especificarían
|
|
igual que lo hacíamos al definir los colores de fondo de la
|
|
tabla en general o de la propia página.<br>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<div class="avisos" style="clear: both;">
|
|
<img src="atencion.gif" align="left" height="25" width="28">
|
|
<p>Para todos aquellos atributos
|
|
que puedan entrar en conflicto el orden de prioridad va siempre de lo
|
|
particular a lo general, dando preferencia según el orden:</p>
|
|
|
|
|
|
<ol>
|
|
|
|
|
|
<li>Atributo de la celda</li>
|
|
|
|
|
|
<li>Atributo de la fila</li>
|
|
|
|
|
|
<li>Atributo de la tabla</li>
|
|
|
|
|
|
</ol>
|
|
|
|
|
|
<p>Así, el color de la celda se superpondrá
|
|
al de la fila y éste, a su vez, al de la tabla. </p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>Como ves existen bastantes atributos de las etiquetas que se
|
|
utilizan para crear las tablas, pero una vez que sabemos crear la
|
|
estructura básica habrá que ir comprobando
|
|
cómo se modifica el resultado final dependiendo
|
|
de las variaciones que se hagan.</p>
|
|
|
|
|
|
<div class="practicas"><img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 24" title="Actividad 24" src="../imagenes/numeracion/veinticuatro.gif">
|
|
<ul>
|
|
|
|
|
|
<li>Crea una tabla con cuatro filas y tres columnas.</li>
|
|
|
|
|
|
<li> Experimenta libremente modificando parámetros
|
|
de uno en uno y comprobando cuales son los efectos que se producen. Si
|
|
el efecto no te agrada restaura el valor original antes de proceder a
|
|
la siguiente modificación. </li>
|
|
|
|
|
|
<li> Cuando encuentres algún resultado que te
|
|
parezca interesante escribe bajo la tabla el parámetro que
|
|
has modificado y los valores que has aplicado, de forma que al final
|
|
tengas una descripción de lo que has hecho para lograr el
|
|
resultado final. </li>
|
|
|
|
|
|
<li> Guarda el trabajo con el nombre <strong>actividad24.html</strong></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h2>Unir y dividir celdas</h2>
|
|
|
|
|
|
<p>Si acudes al menú <span class="refmenu">tabla</span><span class="refmenu"></span> es posible que te llame la
|
|
atención el comportamiento de las opciones para unir o
|
|
dividir celdas:</p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>En principio, cuando situamos el cursor en una celda de la
|
|
tabla
|
|
que no sea la última de una fila aparece activa la
|
|
opción <span class="refmenu">unir a la celda
|
|
de la derecha</span>.</li>
|
|
|
|
|
|
<li>Si hemos marcado varias celdas contiguas arrastrando con el
|
|
ratón, o pulsando la tecla<img class="imgcentr" style="width: 36px; height: 26px;" alt="Control" title="Control" src="../imagenes/teclactrl.png">al
|
|
hacer clic sobre cada una de ellas, aparecerá la
|
|
opción <span class="refmenu">unir celdas
|
|
seleccionadas</span></li>
|
|
|
|
|
|
<li>La opción para <span class="refmenu">dividir
|
|
celda</span>
|
|
no estará activa hasta que no situemos el ratón
|
|
sobre una
|
|
celda que sea el resultado de la unión previa de otras dos o
|
|
más celdas.</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<p>Como ves el trabajo con las celdas de una tabla presenta
|
|
algunas
|
|
diferencias si lo comparamos con la forma de hacer una tarea similar en
|
|
un procesador de texto, </p>
|
|
|
|
|
|
<h2>Creación de una tabla a partir de un texto</h2>
|
|
|
|
|
|
<p><img class="flotder" style="width: 220px; height: 268px;" alt="Panel de opciones para convertir texto en tabla" title="Panel de opciones para convertir texto en tabla" src="textoatabla.png">En ocasiones puedes encontrarte con un
|
|
documento que contenga
|
|
ya una serie de datos ordenados que nos conviene organizar en forma de
|
|
tabla. </p>
|
|
|
|
|
|
<p>La única condición es que exista un
|
|
separador claro que nos permita establecer las columnas de la tabla.
|
|
Cumpliéndose estas condiciones bastará
|
|
con seleccionar el texto que deseamos convertir en tabla y elegir la
|
|
opción de menú <span class="refmenu">tabla<img class="imgcentr" style="width: 14px; height: 13px;" alt="submenú" title="submenú" src="../estilos/flechamenu.png"></span><span class="refmenu">crear tabla a partir de la
|
|
selección </span>indicando en el panel
|
|
cuál es el caracter separador y si deseamos o no que se
|
|
elimine ese caracter al crear la tabla. </p>
|
|
|
|
|
|
<p>Cada salto de renglón se interpretará
|
|
como un salto de fila. La aplicación más evidente
|
|
es la de convertir la lista de clase o el listado del claustro en una
|
|
tabla.</p>
|
|
|
|
|
|
<div style="display: table;" class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 25" title="Actividad 25" src="../imagenes/numeracion/veinticinco.gif">
|
|
<p>Crear una tabla
|
|
a partir de una lista de nombres y apellidos
|
|
separados por comas. Por si no tienes a mano una lista puedes hacer la
|
|
práctica con <a href="javascript:void(0)" onclick="window.open('listanombres.html','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=250,height=280')">ésta</a></p>
|
|
|
|
|
|
<p>Prueba la diferencia entre señalar la coma o el
|
|
espacio como carácter separador.</p>
|
|
|
|
|
|
<p>Guarda el trabajo como <strong>actividad25.html</strong></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h2>Tablas anidadas</h2>
|
|
|
|
|
|
<p>En ocasiones, especialmente cuando utilizamos las tablas como
|
|
recurso de formato para distribuir la información dentro de
|
|
la página, nos interesa introducir una tabla dentro de una
|
|
celda perteneciente a una tabla creada anteriormente. Esto nos
|
|
permitirá, por ejemplo, hacer que convivan tablas con borde
|
|
junto a tablas sin borde. </p>
|
|
|
|
|
|
<p>Supongamos, por ejemplo, que estamos diseñando una
|
|
página para introducir en ella los contenidos de una revista
|
|
escolar. En la siguiente imagen podemos contemplar una posible
|
|
estructura en la que vamos anidando sucesivas tablas. </p>
|
|
|
|
|
|
<p>Cada color corresponde a una tabla que incluye en su interior
|
|
las que son de otro color diferente. </p>
|
|
|
|
|
|
<p class="centrado"><img src="plantill.png" height="270" width="360"> <br>
|
|
|
|
|
|
<strong>Posible estructura de una
|
|
página de revista electrónica</strong></p>
|
|
|
|
|
|
<p>Como ya conocemos los códigos básicos
|
|
que constituyen una tabla entenderemos rápidamente la
|
|
estructura general. Para facilitar la interpretación se han
|
|
recogido las etiquetas correspondientes a cada tabla con el mismo color
|
|
con el que se presentan en el gráfico y se han ido sangrando
|
|
las etiquetas correspondientes a cada tabla, de forma que se pueda ver
|
|
con facilidad en qué celda se encuentra insertada cada una
|
|
de ellas. </p>
|
|
|
|
|
|
<p>Introduciendo el texto correspondiente a cada zona de la
|
|
hipotética pantalla obtendríamos una
|
|
presentación coincidente con el ejemplo
|
|
gráfico. </p>
|
|
|
|
|
|
<code>
|
|
<span class="rojo"><table border=0></span>
|
|
<br>
|
|
|
|
|
|
<span class="rojo indent1a"><tr></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent1 rojo"><td>Enlaces a
|
|
secciones</td></span>
|
|
<br>
|
|
|
|
|
|
<span class="rojo indent1"><td></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent2 azul"><table border=0></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent3 azul"><tr></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent4 azul"><td>Logotipo
|
|
</td></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent3 azul"></tr></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent2 azul"></table></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent2 verde"><table border=0></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent3 verde"><tr></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent4 verde"><td>Foto
|
|
</td></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent4 verde"><td>Texto foto
|
|
</td></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent3 verde"></tr></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent2 verde"></table></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent2 gris"><table border=0></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent3 gris"><tr></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent3 gris"><td>Noticia 1
|
|
</td></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent3 gris"><td></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent4 naranja"><table
|
|
border=0></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent5 naranja"><tr></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent6 naranja"><td>Noticia en
|
|
columnas </td></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent6 naranja"><td>Columna 2
|
|
</td></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent6 naranja"><td>Columna 3
|
|
</td></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent5 naranja"></tr></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent4 naranja"></table></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent3 gris"></td></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent3 gris"></tr></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent2 gris"></table></span>
|
|
<br>
|
|
|
|
|
|
<span class="indent1 rojo"></td></span>
|
|
<br>
|
|
|
|
|
|
<span class="rojo indent1a"></tr></span><br>
|
|
|
|
|
|
<span class="rojo"></table></span>
|
|
</code>
|
|
<p></p>
|
|
|
|
|
|
<div class="practicas"><img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 26" title="Actividad 26" src="../imagenes/numeracion/veintiseis.gif"> ¿Te
|
|
atreves a intentar reproducir la estructura que se ha
|
|
puesto como ejemplo?
|
|
<ul>
|
|
|
|
|
|
<li> Prueba a crear
|
|
directamente con el editor las tablas (La
|
|
recomendación es que adjudiques a la tabla "madre" una
|
|
anchura del 70 % y al resto del 100%. Para que la estructura pueda
|
|
resultar evidente deberías mantener el borde en una anchura
|
|
de 1 píxel)</li>
|
|
|
|
|
|
<li> Guarda el trabajo con el
|
|
nombre <strong>actividad26.html</strong><strong></strong></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="avisos">
|
|
<p><img class="flotizq" src="vertical.png" align="left" height="145" hspace="5" width="48"><img src="atencion.gif" align="left" height="25" width="28">A veces
|
|
los ojos nos engañan: prima la forma y pensamos que hay que
|
|
escribir en vertical, pero si te fijas en la muestra gráfica
|
|
que aparece antes del código de la tabla que se propone como
|
|
modelo verás que lo que se muestra no es una tabla, sino una
|
|
imagen que representa un posible esquema de una tabla. Lo mismo ocurre
|
|
con lo que se lee a la izquierda de este párrafo: aunque
|
|
podamos leerlo no es un texto, sino una imagen. ¿No te
|
|
había llamado también la atención que
|
|
una parte del texto se extendiera sobre tres columnas?
|
|
</p>
|
|
|
|
|
|
<p>No se puede escribir en
|
|
vertical en HTML. Si quieres que
|
|
parezca así tendrás que crear una imagen e
|
|
insertarla en tu página.<br clear="all">
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="estilo">
|
|
<p>Las tablas pueden ser un recurso para organizar el
|
|
espacio de una página, pero tienen algun inconveniente como,
|
|
por
|
|
ejemplo, que una tabla sólo se muestra
|
|
cuando se ha
|
|
cargado completamente.</p>
|
|
|
|
|
|
<p> Debido a la
|
|
característica que acabo de comentar , si se
|
|
utilizan
|
|
tablas para posicionar elementos, es conveniente que busques la manera
|
|
de subdividir el contenido de
|
|
forma que lo puedas incluir en varias tablas independientes. Para el
|
|
visitante la sensación visual no tiene por qué
|
|
variar, pero habrás conseguido que la página se
|
|
cargue con mayor rapidez que si todo el contenido se sitúa
|
|
dentro de la misma tabla. </p>
|
|
|
|
|
|
<p>Hay, además, una
|
|
cuestión muy importante
|
|
desde el punto de vista de los contenidos: la utilización de
|
|
las tablas como elemento de diseño pervierte su verdadera
|
|
funcionalidad que tiene que ver con la estructuración de los
|
|
datos y no con la apariencia gráfica. La alternativa para
|
|
posicionar elementos en la página es la
|
|
utilización de las hojas de estilo, de forma que los datos
|
|
que forman el contenido queden separados de la apariencia con la que se
|
|
mostrarán en la pantalla. </p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>A continuación se
|
|
propone un ejercicio de
|
|
investigación sobre la aplicación de las tablas.
|
|
Es posible que no seas capaz de encontrar una solución
|
|
efectiva todavía, pero es interesante que te plantees su
|
|
búsqueda.</p>
|
|
|
|
|
|
<div class="practicas"><img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 27" title="Actividad 27" src="../imagenes/numeracion/veintisiete.gif">
|
|
<ul>
|
|
|
|
<li>Crea una página
|
|
nueva.</li>
|
|
|
|
<li> Las miniaturas que tienes
|
|
a continuación
|
|
corresponden a dos imágenes de las que se suelen utilizar
|
|
como fondo de página. Pulsa con el botón derecho
|
|
sobre alguna de ellas para guardarlas en tu carpeta del curso.<br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<img style="width: 300px; height: 10px;" title="Un lateral para simular espiral" src="../imagenes/back1200.gif" alt="Un lateral para simular espiral" hspace="40"><br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<img style="width: 300px; height: 15px;" src="img/lateralespiral.gif" alt="Otro lateral de cuaderno de espiral" hspace="40"><br>
|
|
|
|
</li>
|
|
|
|
<li>Utiliza la imagen que has
|
|
guardado como fondo de la
|
|
página.</li>
|
|
|
|
|
|
<li>Empieza a escribir un texto
|
|
que ocupe, al menos, un par de
|
|
renglones y observa lo que sucede.</li>
|
|
|
|
|
|
<li>Intenta encontrar alguna
|
|
alternativa para solucionar la
|
|
situación que se ha planteado.</li>
|
|
|
|
|
|
<li>Si has encontrado alguna
|
|
alternativa que te resulte
|
|
válida descríbela en el propio texto de la
|
|
página. Si no la encuentras deja de todas maneras constancia
|
|
de lo que has intentado y los problemas que encuentras.</li>
|
|
|
|
|
|
<li> Guarda el trabajo con el
|
|
nombre <strong>actividad27.html</strong></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<h2>Estructuración de
|
|
las
|
|
tablas</h2>
|
|
|
|
|
|
<table cellspacing="5" width="100%">
|
|
|
|
<tbody>
|
|
|
|
|
|
<tr>
|
|
|
|
<th scope="col">
|
|
|
|
<div class="centrado">Código de tabla con
|
|
estilos activados </div>
|
|
|
|
</th>
|
|
|
|
|
|
<th scope="col">
|
|
|
|
<div class="centrado">Código de tabla con
|
|
estilos CSS desactivados</div>
|
|
|
|
</th>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td>
|
|
|
|
<div class="centrado"><img style="width: 373px; height: 307px;" alt="Fragmento de código con los elementos <tbody> señalados" title="Fragmento de código con los elementos <tbody> señalados" src="tabletbodystyle.png" class="recuadroimg" hspace="5"></div>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<div class="centrado"><img style="width: 373px; height: 307px;" alt="Fragmento de código con los elementos <tbody> señalados" title="Fragmento de código con los elementos <tbody> señalados" src="tabletbody.png" class="recuadroimg" hspace="5"></div>
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<p>Como puedes ver en las
|
|
capturas de pantalla, tanto si tenemos
|
|
activada en las preferencias la utilización de estilos como
|
|
si la tenemos desactivada, cuando creamos una tabla aparece una
|
|
etiqueta que no habíamos mencionado hasta ahora:
|
|
<code><tbody></code> con su correspondiente
|
|
cierre. Esta etiqueta
|
|
forma parte de un grupo de tres con las que definimos la
|
|
cabecera, el cuerpo y el pie de una tabla, que permiten estructurar el
|
|
texto contenido en la misma y cubre varias finalidades:</p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>Posibilita que los agentes
|
|
sonoros puedan estructurar la
|
|
información para leerla correctamente organizada</li>
|
|
|
|
|
|
<li>Nos permite establecer
|
|
grupos con las filas de datos</li>
|
|
|
|
|
|
<li>En caso de tablas largas
|
|
las celdas de cabecera y pie se
|
|
repetirán en todas las páginas cuando imprimamos
|
|
la tabla </li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<p>Teniendo en cuenta lo
|
|
anteriormente dicho, el
|
|
código básico necesario para estructurar
|
|
correctamente una tabla sería algo más amplio que
|
|
lo que habíamos visto en un principio</p>
|
|
|
|
|
|
<div class="codigo">
|
|
<p><code><table></code>
|
|
Aquí se inicia la tabla<br>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p><code><thead></code>
|
|
Indica que se inician las filas de
|
|
cabecera con
|
|
sus correspondientes contenidos en cada celda. (No siempre tiene que
|
|
haber cabecera por lo que podría no existir) <br>
|
|
|
|
|
|
<code>
|
|
<tr></code> <br>
|
|
|
|
|
|
<code>
|
|
<th></code>Aunque
|
|
se podría utilizar la etiqueta <td> es
|
|
preferible que las celdas pertenecientes a la cabecera se denominen con
|
|
esta etiqueta ya que aplica automáticamente un formato
|
|
enfatizado que las diferencia visualmente de las celdas de contenido
|
|
normal.<code></th></code><br>
|
|
|
|
|
|
<code>
|
|
<th></code>...<code></th></code><br>
|
|
|
|
|
|
<code>
|
|
</tr></code><br>
|
|
|
|
|
|
<code>
|
|
</thead>
|
|
</code>Indica el fin de la cabecera </p>
|
|
|
|
|
|
<p><code>
|
|
<tbody></code>
|
|
Indica que se inician las filas que
|
|
contienen el
|
|
cuerpo de la tabla con sus correspondientes contenidos en cada celda.
|
|
(Este grupo sí que debería existir siempre aunque
|
|
no hubiera cabeceras o pies)<br>
|
|
|
|
|
|
<code>
|
|
<tr></code> <br>
|
|
|
|
|
|
<code>
|
|
<td></code>...<code></td> </code><br>
|
|
|
|
|
|
<code>
|
|
<td></code>...<code></td></code> <br>
|
|
|
|
|
|
<code></tr></code><br>
|
|
|
|
|
|
<code>
|
|
</tbody></code>
|
|
Indica el fin del cuerpo de la tabla</p>
|
|
|
|
|
|
<p><code><tfoot></code>
|
|
Indica que se inician las filas de pie
|
|
con sus
|
|
correspondientes contenidos en cada celda. (Dependiendo de la
|
|
estructura de los datos es posible que no sea necesario que haya pie
|
|
por lo que podría no existir esta sección) <br>
|
|
|
|
|
|
<code>
|
|
<tr></code> <br>
|
|
|
|
|
|
<code>
|
|
<td></code>...<code></td> </code><br>
|
|
|
|
|
|
<code>
|
|
<td></code>...<code></td></code> <br>
|
|
|
|
|
|
<code></tr></code> <br>
|
|
|
|
|
|
<code></tfoot></code>
|
|
Indica el fin de la zona
|
|
de pie.</p>
|
|
|
|
|
|
<p><br>
|
|
|
|
|
|
<code>
|
|
</table></code>
|
|
Fin de la tabla</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h2>Atributos
|
|
en las opciones de
|
|
edición avanzada</h2>
|
|
|
|
|
|
<p><img style="width: 209px; height: 163px; float: left;" alt="fragmento del panel del editor avanzado" title="fragmento del panel del editor avanzado" src="img/tablaatributos.png" class="recuadroimg flotizq" hspace="10">Cuando
|
|
hacemos un doble clic
|
|
sobre una tabla o cuando elegimos la opción de
|
|
menú <strong class="refmenu">tabla <img src="flechamenu.png" height="13" width="14"> propiedades de la tabla</strong>
|
|
obtenemos una ventana en la que se nos muestran los códigos
|
|
correspondientes a los atributos que se han establecido por defecto. No
|
|
es más que un modo gráfico de mostrarnos los
|
|
códigos que veríamos en la pestaña <img style="width: 99px; height: 21px;" alt="código fuente" title="código fuente" src="../imagenes/pestanacodigofuente.png"> pero tiene la ventaja de que
|
|
nos permite tener una visión bastante ordenada sin tener que
|
|
localizarlos entre todos los componentes de la página.</p>
|
|
|
|
|
|
<p align="center"><img style="width: 412px; height: 46px;" alt="cajas de entrada para atributos y valores" title="cajas de entrada para atributos y valores" src="img/tablaatributos2.png" class="recuadroimg"></p>
|
|
|
|
|
|
<p>En la zona inferior disponemos
|
|
de un desplegable que nos va a
|
|
permitir seleccionar algunos atributos complementarios,
|
|
ofreciéndonos en algunos caso los valores posibles cuando
|
|
estos se hayan establecidos en las recomendaciones del W3C. Vamos a ver
|
|
el significado de algunos de ellos porque pueden resultar muy
|
|
interesantes de cara al diseño. </p>
|
|
|
|
|
|
<div class="codigo">
|
|
<p><code>summary</code>
|
|
(resumen) Es un atributo relacionado con la accesibilidad que permite
|
|
incluir un pequeño texto que resuma el contenido de la
|
|
tabla. Cuando un visitante llegue a la página y la lea con
|
|
un sistema acústico este interpretará el texto
|
|
como una introducción
|
|
a la tabla y lo leerá antes de proceder a la lectura del
|
|
contenido.</p>
|
|
|
|
|
|
<p><code>frame</code> (marco)
|
|
permite especificar en qué lados de la tabla deben
|
|
ser añadidos bordes . Puede adoptar los siguientes valores:</p>
|
|
|
|
|
|
<ul>
|
|
|
|
<li><code> frame="void"</code> ( <em>void
|
|
= nada </em>) no es
|
|
visualizado ningún borde exterior. Si se especifica un valor
|
|
border se ven las líneas de la cuadrícula,
|
|
apareciendo la tabla como una reja abierta por todos lados. </li>
|
|
|
|
<li><code> frame="above"</code> ( <em>above
|
|
= superior </em>)
|
|
solo se muestra la línea superior del borde. </li>
|
|
|
|
<li><code> frame="below"</code> ( <em>below
|
|
= inferior </em>)
|
|
solo se muestra la línea inferior del borde.</li>
|
|
|
|
<li><code> frame="hsides"</code> ( <em>horizontal
|
|
sides = lados
|
|
horizontales </em>) son visualizadas tan sólo las
|
|
líneas superior e inferior. </li>
|
|
|
|
<li><code> frame="vsides"</code> (<em>vertical
|
|
sides = lados verticales </em>)
|
|
son visualizadas tan sólo las líneas laterales
|
|
del borde. </li>
|
|
|
|
<li><code> frame="lhs"</code> (<em>left
|
|
hand side = lado izquierdo </em>)
|
|
se muestra sólo la línea izquierda del borde. </li>
|
|
|
|
<li><code> frame="rhs"</code> ( <em>right
|
|
hand side = lado derecho </em>)
|
|
se muestra sólo la línea izquierda del borde. </li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<p align="right"><a href="javascript:void(0)" onclick="abrirframe()">ver
|
|
ejemplos del atributo frame</a>
|
|
</p>
|
|
|
|
|
|
<p><code>rules</code> permite
|
|
especificar en la etiqueta de apertura <code><table></code>
|
|
las
|
|
líneas horizontales o reglas para las líneas de
|
|
la cuadrícula
|
|
( <em>rules
|
|
= reglas </em>). Puede adoptar los siguientes valores: </p>
|
|
|
|
|
|
<ul>
|
|
|
|
<li><code> rules="none"</code> ( <em>none
|
|
= ningún </em>)
|
|
no son visualizadas las líneas de la cuadrícula,
|
|
el borde exterior de la tabla es sin embargo visualizado.</li>
|
|
|
|
<li><code> rules="rows"</code> ( <em>rows
|
|
= filas </em>) son
|
|
visualizadas las líneas entre todos las filas de la tabla,
|
|
pero no las líneas entre las columnas de la tabla. </li>
|
|
|
|
<li><code> rules="cols"</code> ( <em>cols
|
|
= columns = columnas </em>)
|
|
son visualizadas todas las líneas entre todas las columnas
|
|
de la tabla, sin embargo no las líneas entre las filas. </li>
|
|
|
|
<li><code> rules="groups"</code> ( <em>groups
|
|
= grupos </em>)
|
|
son visualizadas todas las líneas entre la cabeza, cuerpo y
|
|
pie de una tabla </li>
|
|
|
|
<li><code> rules="all"</code> ( <em>all
|
|
= todo </em>) son
|
|
visualizadas todas las líneas entre todas las celdas de la
|
|
tabla. Es el valor preajustado por lo que equivale a no utilizar este
|
|
atributo.</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<p align="right"><a href="javascript:void(0)" onclick="abrirrules()">ver
|
|
ejemplos del atributo rules</a></p>
|
|
|
|
|
|
<p><code>hspace</code>
|
|
(espacio horizontal) Permite especificar el espacio que
|
|
separará horizontalmente el texto exterior de los
|
|
límites de la tabla cuando ésta ocupe menos del
|
|
100% y se encuentre alineada a la izquierda o derecha de la
|
|
página. Es un atributo que ya está desaconsejado
|
|
aunque puede seguir utilizándose, (Internet Explorer no lo
|
|
considera)</p>
|
|
|
|
|
|
<p><code>vspace</code>
|
|
(espacio vertical) Cumple la misma función que <code>hspace</code>
|
|
pero
|
|
aplicado a la distancia vertical.</p>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|