mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-27 10:52:16 +00:00
308 lines
7.4 KiB
HTML
308 lines
7.4 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 - Consideraciones previas</title>
|
|
<link rel="stylesheet" type="text/css" href="../nvu2005.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>>Introducción</p>
|
|
|
|
</div>
|
|
<div id="flechadcha">
|
|
<a href="tablas2.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="../introduccion/pag3.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
|
|
<div id="contenido">
|
|
|
|
<h2>Cuestiones previas sobre el uso de tablas</h2>
|
|
<p>Cuando nos enfrentamos a la creación de nuestra
|
|
primera página WEB es inevitable que pretendamos reproducir
|
|
aquello a lo que estamos acostumbrados al trabajar con un procesador de
|
|
textos. Sin embargo, las cosas no son tan sencillas en <acronym title="Hypertext Markup Language">HTML</acronym>. </p>
|
|
|
|
|
|
<p>Si utilizamos HTML básico, y ese es el contenido
|
|
central de este curso en su modalidad de iniciación, la
|
|
situación de los elementos de la página es una
|
|
tarea que tiene un cierto grado de complicación. Es posible
|
|
que a estas alturas te hayas dado cuenta de que no resulta
|
|
fácil fijar tabulaciones o encolumnar el texto de una
|
|
página. El motivo es que, el lenguaje <acronym title="Hypertext Markup Language">HTML</acronym>
|
|
no nació con vocación de servir para dar formato
|
|
a la
|
|
presentación, sino para apoyar la estructuración
|
|
del
|
|
contenido. Por ello, una primera aproximación al formato
|
|
pasa
|
|
por la utilización de las tablas para una función
|
|
que no
|
|
es la que originalmente tenían adjudicada. </p>
|
|
|
|
|
|
<p>Antes de continuar es importante señalar una
|
|
cuestión:
|
|
el posicionamiento utilizando tablas está desaconsejado por
|
|
las
|
|
recomendaciones del organismo internacional encargado de dictar las
|
|
especificaciones de estandarización de los lenguajes para la
|
|
web, el <acronym title="World Wide Web Consortium">W3C</acronym>.
|
|
A pesar de ello trataremos esta técnica como primera
|
|
aproximación al posicionamiento por una cuestión
|
|
muy
|
|
evidente: una gran mayoría de los sitios web publicados
|
|
siguen
|
|
utilizando, en contra de las especificaciones mencionadas, el
|
|
posicionamiento mediante tablas por lo que es muy probable que cuando
|
|
intentes aprender mirando el código de otras
|
|
páginas
|
|
encuentres esta técnica.</p>
|
|
|
|
|
|
La alternativa estaría en la utilización del
|
|
posicionamiento mediante la utilización de hojas de
|
|
estilo en cascada (<acronym title="Cascading Style Sheet">CSS</acronym>)
|
|
e incluso la combinación con lenguaje JavaScript. Aunque el
|
|
lenguaje Javascript sería materia para un curso
|
|
específico, si que se tratará en el nivel de
|
|
profundización del trabajo con hojas de estilo que
|
|
permitirá separar el contenido de las páginas de
|
|
su diseño visual.
|
|
<p>Una vez hechas las consideraciones previas vamos a hacernos
|
|
una idea del método utilizaremos para situar los
|
|
elementos de una página mediante tablas. Para
|
|
ello podemos pensar en la tarea que realizaban los cajistas de
|
|
las imprentas cuando trabajaban con tipos de plomo. Su primera tarea
|
|
consistía en recoger el diseño de la
|
|
página y repartir la plancha utilizando tablillas que
|
|
delimitaban las diferentes zonas. Una vez hecha esta primera
|
|
distribución de "masas" iban introduciendo los tipos en cada
|
|
una de las zonas que se habían creado para componer el texto
|
|
de las noticias.</p>
|
|
|
|
|
|
<p>Pues bien, la forma en la que vamos a repartir los diferentes
|
|
contenidos dentro de nuestra página va a ser la misma que si
|
|
trabajáramos en una de estas viejas imprentas. En lugar de
|
|
utilizar pequeños listones de madera vamos a crear tablas
|
|
cuyos límites entre celdas harán la
|
|
función de separación entre las zonas.</p>
|
|
|
|
|
|
<p>Como idea general puede servirnos de orientación
|
|
para
|
|
establecer un paralelismo, aunque hay un detalle que hace inconsistente
|
|
la comparación: la hoja del periódico tiene un
|
|
tamaño fijo, igual que los tipos de plomo que se utilizan
|
|
para
|
|
rellenar cada una de las zonas, mientras que una página web
|
|
tiene un tamaño variable, igual que los tipos que solemos
|
|
utilizar para escribir en ella, por lo que no podemos garantizar la
|
|
estabilidad con la que contaban nuestros tipógrafos de
|
|
referencia. Queda pues apuntada esta cuestión para que
|
|
tengamos
|
|
en cuenta que el paralelismo no es perfecto.</p>
|
|
|
|
|
|
<p>Por otra parte no podemos olvidar que, independientemente de
|
|
su
|
|
inestimable colaboración para diseñar una
|
|
página,
|
|
las tablas tienen una función consustancial a su propia
|
|
estructura: presentar información susceptible de organizarse
|
|
en
|
|
unos ejes cartesianos en los que encontremos un dato como
|
|
combinación única de otros dos definidos en los
|
|
ejes
|
|
horizontal y vertical. Será esta función la que
|
|
tendrán que adoptar finalmente cuando tengamos suficiente
|
|
dominio de los mecanismos de posicionamiento del <acronym title="Hypertext Markup Language">HTML</acronym>. </p>
|
|
|
|
|
|
Empezcemos pues a acercarnos a las tablas como elemento de
|
|
posicionamiento considerando su evolución desde el menor
|
|
grado posible de complejidad:<br>
|
|
|
|
|
|
<center>
|
|
<table border="1" cellpadding="5">
|
|
|
|
|
|
<tbody>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td>
|
|
|
|
<p>Partiendo de la forma más simple, la de una
|
|
tabla con <b>una fila</b> y <b>una columna</b>,
|
|
a la que podríamos considerar como un marco alrededor del
|
|
texto, podemos ir complicando la forma...</p>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
</center>
|
|
|
|
|
|
<p> <br>
|
|
|
|
|
|
...mediante la adición de filas y columnas... </p>
|
|
|
|
|
|
<center>
|
|
<table border="1">
|
|
|
|
|
|
<tbody>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td> </td>
|
|
|
|
|
|
<td> </td>
|
|
|
|
|
|
<td> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td> </td>
|
|
|
|
|
|
<td> </td>
|
|
|
|
|
|
<td> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<p> <br>
|
|
|
|
|
|
...o la fusión de las celdas que la constituyen
|
|
según lo requiera la información presentada. </p>
|
|
|
|
|
|
</center>
|
|
|
|
|
|
<p> </p>
|
|
|
|
|
|
<center>
|
|
<table border="1">
|
|
|
|
|
|
<tbody>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td colspan="2"> </td>
|
|
|
|
|
|
<td> </td>
|
|
|
|
|
|
<td> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td> </td>
|
|
|
|
|
|
<td> </td>
|
|
|
|
|
|
<td rowspan="2"> </td>
|
|
|
|
|
|
<td> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td> </td>
|
|
|
|
|
|
<td> </td>
|
|
|
|
|
|
<td> </td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
</center>
|
|
|
|
|
|
<p> </p>
|
|
|
|
|
|
</body>
|
|
|
|
</div>
|
|
</html>
|