HTML/Barra
HTML
Tablas |
Estructura de una tabla |
|
|
 |
|
Definir tablasPuedes definir tablas para presentar datos en forma de tablas o para ordenar
el texto y las imágenes en la pantalla. Por tal razón se diferencian entre
tablas con líneas visibles (para datos en formas de tablas) y tablas con
líneas invisibles ("
Tablas
invisibles" - como para un texto en varias columnas o como para la
buena coexistencia de texto e imágenes).
<table border> <!--aquí sige el contenido de una tabla con líneas visibles--> </table> |
<table> <!--aquí sige el contenido de una tabla con líneas invisibles--> </table> |
<table> introduce una tabla (table = Tabla). Si una tabla debe contener líneas visibles, tienes que indicar el borde con border como en el ejemplo número 1 (border = borde.
Para llenar una tabla con contenido tienes que definir los renglones y las columnas como se describe en adelante.
|
Definir renglones y columnasUna tabla se compone de por lo menos un, normalmente de varios renglones. Un renglón se compone de un, normalmente de varias celdas. De este modo resultan las columnas de la tabla.
<table border>
<tr>
<th>celda cabecera: primer renglón, primera columna</th>
<th>celda cabecera: primer renglón, segunda columna</th>
<th>celda cabecera: primer renglón, tercera columna</th>
</tr>
<tr>
<td>celda de datos: segundo renglón, primera columna</td>
<td>celda de datos: segundo renglón, segunda columna</td>
<td>celda de datos: segundo renglón, tercera columna</td>
</tr>
<tr>
<td>celda de datos: tercer renglón, primera columna</td>
<td>celda de datos: tercer renglón, segunda columna</td>
<td>celda de datos: tercer renglón, tercera columna</td>
</tr>
</table>
|
<tr> introduce un renglón de una tabla (tr = table row = renglón de tabla). Después son definidas las celdas (columnas) del renglón referente. Al final de un renglón hay que anotar la etiquela de cierre </tr>.
Una tabla puede contener celdas cabeceras y normales celdas de datos. El
texto en las celdas cabeceras es resaltado (más que todo en negrilla y
centrado). <th> define una celda cabecera, <td>
una celda de datos normal (th = table header = cabecera de tabla, td = table
data = datos de tabla). El contenido de una celda es puesto detrás de la
etiqueta. En una celda pueden estar toda clase de elementos, o sea que además
de texto también por ejemplo puedene estar 
Enlaces
o Imágenes
en HTML. Incluso puedes definir otra tabla dentro de una celda.
Las etiquetas <th> y <td> pueden estar solas (sin etiquetas de cierre). Sin embargo es aconsejable anotar siempre las etiquetas de cierre pertenecientes, o sea las etiquetas </th> y </td>.
La cantidad de celdas debe ser el mismo en cada uno de los renglones, para que la tabla tenga la misma cantidad de columnas. En el primer renglón debes definir mediante la cantidad de celdas definidas la cantidad de columnas de la tabla.
Para el texto dentro de las celdas son válidas las particularidades para Metafonía,
símbolos especiales y símbolos propios de HTML.
Tablas grandes pueden ser muy complejas en el texto fuente. Por tal razón
debes elegir una forma clara para la presentación de la tabla con filas y
quiebre de renglones (como en el ejemplo de arriba). La descripción en el texto
fuente no tiene ninguna influencia a la presentación en el navegador, ya que
dentro de las celdas de las tablas son válidas las Reglas
al editar HTML.
Las celdas de una tabla pueden estar también vacias. Si en un renglón no quieres añadir datos a una celda , tienes que anotar simplemente las etiquetas <td></td>. Pon atención de que muchos navegadores interpretan esa celda como "no existente". En tal caso debes añadir la combinación <td> </td> para las celdas vacias de la tabla.
|
|
Predefinir columnas La presentación de una tabla se da automáticamente a partir de los renglones y las columnas definidas. Sin embargo para un navegador no es muy fácil interpretar a tiempo la presentación. Primero tiene que leer la tabla completa, antes de poder presentar alguna cosa. En caso de tablas muy grandes eso puede conducir a que en la pantalla aparecen espacios vacios desagradables mientras que la página se carga.
HTML 4.0 ofrece una nueva sintaxis para comunicarle al navegador al principio de la tabla cuantas columnas ella tiene. De tal manera el navegador puede cargar la tabla mucho más rapido, o sea que una parte de la tabla es presentada antes de que la totalidad de la tabla haya sido leída. Sin embargo navegadores antiguos (Netscape 3.x, MS Internet Explorer 3.x) no interpretan tales datos.
<table border>
<colgroup>
<col width=80>
<col width=100>
<col width=320>
</colgroup>
<tr>
<td>primer renglón, primera columna</td>
<td>primer renglón, segunda columna</td>
<td>primer renglón, tercera columna</td>
</tr>
<!-- etc. otros renglones de la tabla -->
</table>
|
<table border>
<colgroup width=200 span=3>
</colgroup>
<tr>
<td>primer renglón, primera columna</td>
<td>primer renglón, segunda columna</td>
<td>primer renglón, tercera columna</td>
</tr>
<!-- etc. otros renglones de la tabla -->
</table>
|
<table border>
<colgroup>
<col width="4*">
<col width="2*">
<col width="1*">
</colgroup>
<tr>
<td>primer renglón, primera columna</td>
<td>primer renglón, segunda columna</td>
<td>primer renglón, tercera columna</td>
</tr>
<!-- etc. otros renglones de la tabla -->
</table>
|
Con <colgroup> introduces después de la etiqueta de entrada <table> una predefinición de las columnas de una tabla (colgroup = column group = grupos de columnas). En tal caso tienes dos posibilidades: quieres tener columnas de tablas de diferentes anchuras. Entonces tienes que seguir el ejemplo 1. O quieres tener una tabla en donde todas las columnas tengan el mismo ancho. En tal caso tienes que seguir el ejemplo 2.
En el ejemplol 1 la etiqueta <colgroup> no contiene datos adicionales. En vez de eso debes anotar debajo de esta etiqueta para cada columna de la tabla una etiqueta <col>. La primera etiqueta <col> define la primera columna, la segunda define la segunda columna etc. Si no haces datos adicionales, entonces la anchura de las columnas es determinada por medio del contenido de la tabla. Con width= [pixeles/porcentaje] puedes sin embargo determinar el ancho de las columnas individualmente para cada columna (width = ancho). Con width=100 forzas por ejemplo una columna con una anchura de 100 pixeles, y con width=33% una anchura de un tercio de la ventana de presentación.
En el ejemplo 2 no son anotados etiquetas del tipo <col>. En lugar de esto anotas en la etiqueta <colgroup> el atributo span= (span = tender). Añade después del signo de igualdad la cantidad de columnas que deseas. Con el atributo width= puedes en tal caso definir una anchura uniforme para todas las columnas.
Con width= tienes además de la posibilidad de añadir valores en
pixeles y en porcentajes una tercera: Puedes determinar la relación de anchura
relativa de las columnas entre sí, independientemente de la anchura de la tabla
en relación con la ventana de presentación. Esa posibilidad la presenta el
ejemplo 3. En tales datos de anchura puedes anotar detrás de width=
un número, seguido de una estrella. La estrella es tan sólo una señal para el
navegador, para que no interprete el número anterior como pixel. Sólo los
números son importantes. En el ejemplo 3 son definidadas tres columnas, en las
cuales los números relativos 4, 2 y 1 dan la suma de 7. Con ello defines una
tabla en donde la primera columna ocupa cuatro séptimos de la anchura, la
segunda dos séptimos y la tercera un séptimo.
Esa relación relativa de las columnas son válidas tan sólo si además has
añadido una Anchura
para la totalidad de la tabla .
Las etiquetas <col> no tienen una etiqueta de cierre. La etiqueta de cierre </colgroup> es opcional.
También la etiqueta <col> puede contener el atributo span=. De tal forma no agrupas varias columnas en una, sino que los atributos de esa columna son válidos para las próximas columnas dadas. Por ejemplo si añades <col span=3 width=100>, entonces esa y las siguientes 2 columnas obtienen una anchura de 100 pixeles.
La etiqueta <colgroup> puede contener además los atributos span= y width=, si debajo de ella etiquetas <col> son definidas. En tal caso la cantidad de etiquetas <col> definidas reemplaza los datos que han sido hechos con la etiqueta <colgroup span=> y el atributo width= dentro de una etiqueta <col> tiene primacía sobre el atributo width= en la etiqueta <colgroup>.
También es permitido anotar varias etiquetas <colgroup>. Anotando por ejemplo dos comandos como <colgroup width=100 span=3> y <colgroup width=50 span=5> uno tras del otro, puedes definir 8 columnas de una tabla, en la cual las primeras 3 columnas tienen una anchura de 100 pixeles y las siguientes 5 una anchura de 50 pixeles.
Para la anchura de las columnas de una tabla son válidas las mismas
indicaciones que en el Forzamiento
de la anchura de columnas de manera convencional.
|
|
Definir la cabecera, cuerpo y el pie de una tablaPuedes dividir una tabla logicamente en tres partes: cabecera, cuerpo y pie.
Eso es interesante por ejemplo en combinación con la posibilidad de determinar
las Reglas
para las rejillas. Los datos para diferenciar la cabecera, el cuerpo y
el pie de una tabla son interpretadas por el MS Internet Explorer a partir de la
version 4.x. Netscape no reconoce hasta la versión 4.x estas
indicaciones.
<table border rules=groups>
<thead>
<!--renglones de la tabla-->
</thead>
<tbody>
<!--renglones de la tabla-->
</tbody>
<tfoot>
<!--renglones de la tabla-->
</tfoot>
</table>
|
La etiqueta <thead> (thead = table head = cabecera de la
tabla) introduce la cabecera de la tabla. Después de la etiqueta
puedes enseguida anotar un renglón o más de la tabla pertenecientes a la
cabecera de la tabla. Con la etiqueta </thead>
cierras la cabecera de la tabla.
El cuerpo de la tabla lo introduces con la etiqueta <tbody> (tbody = table body =
cuerpo de la tabla). Después de la etiqueta puedes anotar el campo para los
daros de la tabla, o sea su cuerpo. Con </tbody> cierras el
cuerpo de la tabla.
El pie de la tabla lo introduce con la etiqueta <tfoot> (tfoot = table foot =
pie de la tabla). Después de la etiqueta puedes anotar un renglón o más
pertenecientes al pie de la tabla. Con </tfoot> cierras el pie
de la tabla.
|
|
Otras posibilidadesLas etiquetas <table>, <tr>, <th>
y <td> pueden contener Atributos
universales.
Con ayuda de las Hojas
de estilo CSS puedes manejar las tablas mucho más fácil. De tal manera
puedes Definir
formatos centrales. Al usar los Detalles
de hojas de estilo CSS centralizados para las etiquetas explicadas
aquí, tienes a tu disposición muchas más posibilidades que los atributos
explicados hasta este momento. Puedes también Definir
hojas de estilo en un archivo separado y ligarlo a una cantidad
cualquiera de archivos HTML de tu proyecto. Así es más fácil trabajar con un
"layout" que comprenda todos los archivos si utilizas muchas tablas.
Son interesantes para la materia aquí descrita los siguientes detalles de las
hojas de estilo:
Formatición
de letras
Listas y Tablas
|
| |
adelante: |
Espesor
del marco, rejillas y distancias del borde
|
atrás: |
Texto
corrido (Marquee)
|
Stefan Münz, muenz@csi.com
© 1999 Traducción: Virgilio Krumbacher
