Temas > Programacion > Html > Tabla y combinacion de celdas en html
Julio

Tabla y combinación de celdas.
En algunas situaciones se necesita que una celda ocupe el lugar de dos o
más celdas en forma horizonzal o vertical, para estos casos el elemento td
o th dispone de dos propiedades llamadas rowspan y colspan.
A estas propiedades se les asigna un valor entero a partir de 2.
Si queremos que una celda ocupe tres columnas inicializamos la propiedad
rowspan con el valor 3:
<td colspan="3">Facturación de los últimos tres
meses</td>
Si por el contrario queremos que una celda se extienda a nivel de filas
hacemos:
<td rowspan="3">Secciones</td>
Veamos un ejemplo empleando el concepto de combinación de celdas:
<?php // esto no va
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th rowspan="4">Recursos</th><th colspan="4">Facturación
de los últimos tres meses</th>
</tr>
<tr>
<td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td>
</tr>
<tr>
<td>CPU</td><td>73000</td><td>67300</td><td>51000</td>
</tr>
<tr>
<td>Monitores</td><td>53000</td><td>72000</td><td>88000</td>
</tr>
</table>
</body>
</html>
?> //esto no va
Veamos como definimos la primera fila de la tabla:
<tr>
<th rowspan="4">Recursos</th><th colspan="4">Facturación
de los últimos tres meses</th>
</tr>
Como podemos observar la primera celda la expandimos hacia abajo 4 casillas
y la segunda celda la expandimos hacia la derecha en 4 celdas.
Cuando tenemos que disponer las celdas de la segunda fila debemos tener en
cuenta que la primera está ocupada. Luego el código es:
<?php // esto no va
<tr>
<td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td>
</tr>
?> // esto no va













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar