TABLAS EN HTML
Las tablas nos permiten organizar la información en filas y columnas. Cada fila se divide
en celdas. La información se introduce en las celdas. Una columna está formada por las
celdas agrupadas verticalmente, en HTML no existe una etiqueta para definir columnas.
Las tablas se definen en base a las filas y a las celdas, como veremos a continuación.
Etiquetas de tabla <table> <tr> y <td>
La etiqueta <table> y su correspondiente etiqueta de cierre </table> definen la
tabla. Entre ambas etiquetas se escriben las etiquetas de fila <tr> y </tr> y dentro de las
filas las etiquetas de celda <td> y </td>, entre estas se escribe el contenido de la celda
que puede ser cualquier etiqueta de HTML o directamente un texto. Por lo tanto la tabla
más sencilla con una sola celda sería esta:
<table>
<tr>
<td>Celda 1.1.</td>
</tr>
</table>
Que produce este resultado:
Celda 1.1.
Como decíamos antes, no existe una etiqueta para definir las columnas, en su lugar, el
número de celdas define el número de columnas. Todas las filas deben tener el mismo
número de celdas, aunque ya veremos que es posible unir celdas. Por ejemplo, una tabla
con tres filas y cuatro columnas se escribe así:
<table>
<tr>
<td>Marcas</td>
<td>Seat</td>
<td>Ford</td>
<td>BMW</td>
</tr>
<tr>
<td>2016</td>
<td>23900</td>
<td>21500</td>
<td>11500</td>
</tr>
<tr>
<td>2017</td>
<td>24600</td>
<td>23500</td>
<td>13400</td>
</tr>
</table>
Marcas Seat Ford BMW
2016 23900 21500 11500
2017 24600 23500 13400
Dentro de una celda se pueden incluir la mayoría de las etiquetas de HTML, texto,
imágenes, listas, etc. Incluso de pueden anidar tablas, para ello basta incluir otra tabla
dentro de una celda.
Etiqueta <th>
Dado que es muy común que las tablas tengan una primera fila de cabecera se creó la
etiqueta <th>. Esta etiqueta se aplica a las celdas de cabecera en lugar de la etiqueta td y
el efecto fundamental es que tiene un formato diferente, normalmente letra negrita y
alineación centrada. Como ya sabemos, este formato se puede cambiar con las hojas de
estilo. La etiqueta <th> se puede colocar tanto en las filas como en las columnas, por
ejemplo:
<table>
<tr>
<th>Marcas</th>
<th>Seat</th>
<th>Ford</th>
<th>BMW</th>
</tr>
<tr>
<th>2016</th>
<td>23900</td>
<td>21500</td>
<td>11500</td>
</tr>
<tr>
<th>2017</th>
<td>24600</td>
<td>23500</td>
<td>13400</td>
</tr>
</table>
Produce este resultado:
Marcas Seat Ford BMW
2016 23900 21500 11500
2017 24600 23500 13400
Nombres y apellidos:……………………………………………….……………………………….
Grado y sección: ……………………… Prof. Cristhian Leonel Cuya Yaya
PRÁCTICA CALIFICADA: TABLAS
1. Escribe los códigos para mostrar la siguiente tabla en HTML
NOMBRES ENERO FEBRERO MARZO
1 2 3 4
5 6 7 8
9 10 11 12
2. Escribe los códigos para mostrar la siguiente tabla en HTML
NOMBRES ENERO FEBRERO MARZO
Uno Dos Tres Cuatro
Cinco Seis
Siete Ocho Nueve
1° 2° 3° 4° 5° 6° 7° 8°
Unir celdas con colspan y rowspan
Con los atributos colspan y rowspan podemos unir o fusionar celdas adyacentes, así
obtendremos celdas de mayor tamaño, el resultado siempre será un rectángulo. Es decir,
no podríamos unir las celdas formando una "L" o una "U".
El atributo colspan extiende la celda tantas celdas a la derecha como le indiquemos,
contando la celda actual. Por ejemplo colspan="2" ocupa su celda y una más a la
derecha. Veamos este código aplicado a una tabla:
<table border="1">
<tr>
<td>Celda</td>
<td>Celda</td>
<td>Celda</td>
<td>Celda</td>
</tr>
<tr>
<td colspan="2">Celda cs2</td>
<td>Celda</td>
<td>Celda</td>
</tr>
<tr>
<td colspan="3">Celda cs3</td>
<td>Celda</td>
</tr>
<tr>
<td colspan="4">Celda cs4</td>
</tr>
</table>
Produce este resultado:
Celda Celda Celda Celda
Celda cs2 Celda Celda
Celda cs3 Celda
Celda cs4
Observa que al expandir la celda, en la fila ponemos menos etiquetas <td>.
El atributo rowspan expande la celda tantas celdas hacia abajo como le indiquemos,
contando la celda actual.
<table border="1">
<tr>
<td>Celda</td>
<td rowspan="2">Celda rs2</td>
<td rowspan="3">Celda rs3</td>
<td rowspan="4">Celda rs3</td>
</tr>
<tr>
<td>Celda</td>
</tr>
<tr>
<td>Celda</td>
<td>Celda</td>
</tr>
<tr>
<td>Celda</td>
<td>Celda</td>
<td>Celda</td>
</tr>
</table>
Celda Celda rs3 Celda rs3
Celda rs2
Celda
Celda Celda
Celda Celda Celda
Observa que al aplicar rowspan a una celda, "cogemos" una celda de la siguiente fila,
por lo que la siguiente celda tendrá una celda menos.
Y en cualquier caso podemos combinar estos dos atributos en la misma celda:
<table border="1">
<tr>
<td colspan="2" rowspan="2">Celda cs2 rs2</td>
<td>Celda</td>
</tr>
<tr>
<td>Celda</td>
</tr>
<tr>
<td>Celda</td>
<td>Celda</td>
<td>Celda</td>
</tr>
</table>
Produce este resultado
Celda
Celda cs2 rs2
Celda
Celda Celda Celda
Ejemplos de tablas
Tabla básica de 3x2
ABC
DEF
<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Dos ejemplos de línea expandida <ROWSPAN>
Item 1 Item 3
Item 2
Item 4 Item 5
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Item 2 Item 3 Item 4
Item 1
Item 5 Item 6 Item 7
<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
</TR>
</TABLE>
Ejemplo de columna expandida <COLSPAN>
Item 1 Item 2
Item 3 Item 4 Item 5
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Tabla con cabeceras <TH>
Head1 Head2 Head3
A B C
D E F
<TABLE BORDER>
<TR>
<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Combinación de columna expandida y cabecera
Head1 Head2
A B C D
E F G H
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
Combinación de cabeceras múltiples y columnas expandidas
Head1 Head2
Head 3 Head 4 Head 5 Head 6
A B C D
E F G H
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
Cabeceras laterales
Head1 Item 1 Item 2 Item 3
Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item 8 Item 9
<TABLE BORDER>
<TR><TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
<TR><TH>Head2</TH>
<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR>
<TR><TH>Head3</TH>
<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR>
</TABLE>
Combinación de cabeceras laterales y líneas expandidas
Item 1 Item 2 Item 3 Item 4
Head1
Item 5 Item 6 Item 7 Item 8
Head2 Item 9 Item 10 Item 3 Item 11
<TABLE BORDER>
<TR><TH ROWSPAN=2>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item 8</TD>
</TR>
<TR><TH>Head2</TH>
<TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD>
</TR>
</TABLE>
Combinación de cabeceras superiores y laterales. Tabla centrada. Contenidos centrados.
Título al pie.
TABLE TR TD TH CAPTION
BORDER X - - - -
ROWSPAN - - X X -
COLSPAN - - X X -
ALIGN - X X X X
VALIGN - - X - -
WIDTH X - X - -
HEIGTH X - X - -
CELLPADDING X - - - -
CELLSPACING X - - - -
Resumen de tablas
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=bottom>Resumen de tablas</CAPTION>
<TR>
<TD><TH>TABLE</TH><TH>TR</TH><TH>TD</TH><TH>TH</TH><TH>CAPTION</TH></TD>
</TR>
<TR ALIGN=CENTER>
<TH>BORDER</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>ROWSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>COLSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>ALIGN</TH><TD>-</TD><TD>X</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR ALIGN=CENTER>
<TH>VALIGN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>WIDTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>HEIGTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>CELLPADDING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>CELLSPACING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
</TABLE>
</CENTER>
Ejemplo con todos los elementos y parámetros
Media
Altura Peso
Hombres 1.9 85
Sexo
Mujeres 1.7 60
<TABLE BORDER>
<TR> <TD><TH ROWSPAN=2></TH>
<TH COLSPAN=2>Media</TH></TD>
</TR>
<TR> <TD><TH>Altura</TH><TH>Peso</TH></TD>
</TR>
<TR> <TH ROWSPAN=2>Sexo</TH>
<TH>Hombres</TH><TD>1.9</TD><TD>85</TD>
</TR>
<TR> <TH>Mujeres</TH><TD>1.7</TD><TD>60</TD>
</TR>
</TABLE>
Otro ejemplo de línea y columna expandidos
12
A
34
C D
<TABLE BORDER>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
</TR>
<TR>
</TR>
</TABLE>
Ajustando márgenes y bordes
Tabla sin bordes
Item 1 Item 3
Item 2
Item 4 Item 5
<TABLE>
<TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD>
</TR>
<TR> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Aquí no es visible el borde de las celdas debido a que se ha omitido el
atributo BORDER del elemento <TABLE>. La omisión o no es equivalente a
parametrizarlo; se consigue lo mismo así: BORDER=0, y como ya habrás deducido, el
valor de BORDER puede ser variable. Mira el siguiente ejemplo:
Tabla con borde de 10 puntos
Item 1 Item 2
Item 3 Item 4
<TABLE BORDER=10>
<TR> <TD>Item 1</TD> <TD> Item 2</TD>
</TR>
<TR> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
</TABLE>
Dimensionado de celdas
A B C
D E F
<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
A B C
D E F
<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
A B C
D E F
<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
A B C
D E F
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Alineación, títulos y subtablas
Líneas múltiples en un tabla
Enero Febrero Marzo
Otra celda
Celda 1 Celda 2
Celda 3
y esta
Celda 4 Celda 6
es la celda 5
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Otra celda<br> Celda 3</TD>
</TR>
<TR>
<TD>Celda 4</TD>
<TD>y esta<br>es la celda 5</TD>
<TD>Celda 6</TD>
</TR>
</TABLE>
Alineado horizontal del contenido de las celdas. ALIGN=LEFT | RIGHT | CENTER
Se puede aplicar individualmente a una celda o a toda la línea
Enero Febrero Marzo
Otra celda
Todas alineadas al centro Celda 2
Celda 3
Por defecto
Alineado a la derecha Alineado al centro
Alineado a la izquierda
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR ALIGN=center>
<TD>Todas alineadas al centro</TD>
<TD>Celda 2</TD>
<TD>Otra celda<br> Celda 3</TD>
</TR>
<TR>
<TD ALIGN=right>Alineado a la derecha</TD>
<TD ALIGN=center>Alineado al centro</TD>
<TD>Por defecto<br>Alineado a la izquierdat</TD>
</TR>
</TABLE>
Alineado vertical del contenido de las celdas. VALIGN=TOP | BOTTOM | MIDDLE
Se puede aplicar individualmente a una celda o a toda la columna
Enero Febrero Marzo
Todas alineadas arriba Esta es la Celda 3
Celda 2
Alineado arriba Por defecto
Alineado abajo Alineado al centro
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR VALIGN=top>
<TD>Todas alineadas arriba</TD>
<TD>Esta es la<br>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
<TR>
<TD VALIGN=top>Alineado arriba</TD>
<TD VALIGN=bottom>Alineado abajo</TD>
<TD>Por defecto<br>Alineado al centro</TD>
</TR>
</TABLE>
Titulando las tablas. CAPTION=TOP | BOTTOM
Título arriba
Enero Febrero Marzo
Celda 1 Celda 2 Celda 3
<TABLE BORDER>
<CAPTION ALIGN=top>Titulo arriba</CAPTION>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
</TABLE>
Enero Febrero Marzo
Celda 1 Celda 2 Celda 3
Título abajo
<TABLE BORDER>
<CAPTION ALIGN=bottom>Titulo abajo</CAPTION>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
</TABLE>
Anidando tablas. La tabla ABCD dentro de la tabla 12345
3
12AB
C D
456
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 1 -->
<TD>1</TD>
<TD>2</TD>
<TD>3
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 2 -->
<TD>A</TD>
<TD>B</TD>
</TR>
<TR> <!-- ROW 2, TABLE 2 -->
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR> <!-- ROW 2, TABLE 1 -->
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
Longitud horizontal de las tablas
Tabla que ocupa el 50 % de la pantalla, y cuyas celdas están dimensionadas al 50 % cada
una respecto a la longitud total de la tabla
Width=50% Width=50%
Celda 3 Celda 4
<TABLE BORDER WIDTH="50%">
<TR><TD>Width=50%</TD><TD>Width=50%</TD>
</TR>
<TR><TD>Celda 3</TD><TD>Celda 4</TD>
</TR>
</TABLE>
Tabla dimensionada al 50 % de la pantalla, celdas sin dimensionar. Obsévese que se
alargan más de lo que lo harían sin forzar la longitud de la tabla
Celda 1 2
Celda 3 4
<TABLE BORDER WIDTH="50%">
<TR><TD>Celda 1</TD><TD>2</TD>
</TR>
<TR><TD>Celda 3</TD><TD>4</TD>
</TR>
</TABLE>
El mismo efecto anterior, pero con la tabla dimensionada al 100 %
WIDTH=100% Celda 2
3 Celda 4
<TABLE BORDER WIDTH="100%">
<TR><TD>WIDTH=100%</TD><TD>Celda 2</TD>
</TR>
<TR><TD>3</TD><TD>Celda 4</TD>
</TR>
</TABLE>
Centrado de una tabla en la página
A B C
D E F
<CENTER>
<TABLE BORDER WIDTH="50%">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
</CENTER>
Tabla forzada al 50 % de la página, conteniendo otra tabla anidada en una de sus celdas.
La segunda tabla está forzada a ocupar el 100 % de la celda receptora.
Item 1 Item 2
Item A Item B Item 4
<TABLE BORDER WIDTH="50%">
<TR><TD>Item 1</TD><TD>Item 2</TD>
</TR>
<TR><TD>
<TABLE BORDER WIDTH=100%>
<TR><TD>Item A</TD><TD>Item B</TD>
</TR>
</TABLE>
</TD>
<TD>Item 4</TD>
</TR>
</TABLE>
Longitud vertical de las tablas
Tabla que ocupa el 50 % horizontal de la pantalla, y el 25 % vertical. HEIGHT=25%
HEIGHT=25% Item 2
3 4
<TABLE BORDER WIDTH="50%" HEIGHT="25%">
<TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
Fondos de colores o gráficos en las tablas
Una tabla de cuatro celdas. Cada una de un color.
Texto ROJO Texto VERDE
Texto AZUL Texto AMARILLO
<TABLE BORDER>
<TR><TD BGCOLOR="RED">Texto ROJO</TD>
<TD BGCOLOR="green">Texto VERDE</TD>
</TR>
<TR><TD BGCOLOR="blue">Texto AZUL</TD>
<TD BGCOLOR="YELLOW">Texto AMARILLO</TD>
</TR>
</TABLE>
En este ejemplo se ha dado color individualmente a cada celda. El
atributo BGCOLOR="color" puede utilizarse en cada elemento de la tabla para efectos
globales. Por ejemplo, para hacer toda la tabla en rojo, sólo sería necesario escribir:
<TABLE BORDER BGCOLOR="red">
....
....
</TABLE>
Para toda la línea:
<TABLE BORDER>
<TR BGCOLOR="red"><TD> texto </TD></TR>
....
</TABLE>
También se puede usar una imagen como fondo de toda la tabla:
<TABLE BORDER BACKGROUND="yellow_r.gif">
....
....
</TABLE>
De sólo una celda:
<TABLE BORDER>
<TR><TD BACKGROUND="yellow_r.gif"> texto </TD></TR>
....
</TABLE>
O de toda la fila:
<TABLE BORDER >
<TR BACKGROUND="yellow_r.gif"><TD> texto </TD></TR>
....
</TABLE>
Bordes de colores en las tablas
Se puede cambiar el color de los bordes de una tabla, aunque este atributo no funciona
igual en todos los navegadores, ya que en el IE el color afecta a todas las líneas de la
tabla, y en Mozilla solamente a los bordes exteriores. Por ejemplo:
Ejemplo de bordes de color rojo
Ejemplo de bordes de color rojo
<TABLE BORDER=2 bordercolor="red" >
<TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR>
<TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR>
</TABLE>
