Scribd
Cargar
17 vistas9 páginas

GUIA DE TABLAS HTML

Cargado por

munozeliezer700
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
17 vistas9 páginas

GUIA DE TABLAS HTML

Cargado por

munozeliezer700
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

GUIA DE LAS TABLAS DE HTML

¿Qué es una tabla?

Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas


(datos tabulados). Una tabla permite buscar con rapidez y facilidad valores entre
diferentes tipos de datos que indican algún tipo de conexión. Por ejemplo, una
persona y su edad, o un día de la semana o el horario de una piscina municipal.

1. El contenido de cada tabla está delimitado entre estas dos etiquetas:


<table></table>. Añádelas al cuerpo de tu código HTML.

El contenedor más pequeño dentro de una tabla es una celda, que se crea con un
elemento <td>('td' significa 'table data', datos de tabla ). Añade lo siguiente dentro
de tus etiquetas de tabla:

<html>
<head>
<title> La primera tabla </title>
</head>
<body>
<table>
<td>Hola, soy tu primera celda.</td>
</table>
</body>
</html>

Muestra una fila con 4 celdas


<html>
<head>
<title> La primera tabla </title>
</head>
<body>
<table>
<td>Hola, soy tu primera celda.</td>
<td>Soy tu segunda celda.</td>
<td>Soy tu tercera celda.</td>
<td>Soy tu cuarta celda.</td>
</table>
</body>
</html>

Unidad Curricular: Lenguaje de Programación II Prof.: José Guaipo


Para detener el crecimiento de esta fila y comenzar a colocar las celdas
posteriores en una segunda fila, necesitamos usar el elemento <tr>('tr' significa
'table raw', fila de tabla ). Vamos a verlo en detalle.

Muestra dos filas con cuatro celdas cada ina

<html>
<head>
<title> La primera tabla </title>
</head>
<body>
<table>
<tr>
<td>soy tu primera celda.</td>
<td>Soy tu segunda celda.</td>
<td>Soy tu tercera celda.</td>
<td>Soy tu cuarta celda.</td>
</tr>
<tr>
<td>soy tu quinta celda.</td>
<td>Soy tu sexta celda.</td>
<td>Soy tu séptima celda.</td>
<td>Soy tu octava celda.</td>
</tr>
</table>
</body>
</html>

Unidad Curricular: Lenguaje de Programación II Prof.: José Guaipo


Muestra una tabla
<html>
<head>
<title> La primera tabla </title>
</head>
<body>
<table>
<tr>
<td>&nbsp;</td>
<td>Knocky</td>
<td>Flor</td>
<td>Ella</td>
<td>Juan</td>
</tr>
<tr>
<td>Raza</td>
<td>Jack Russell</td>
<td>Caniche</td>
<td>Perro callejero</td>
<td>Cocker Spaniel</td>
</tr>
<tr>
<td>Edad</td>
<td>16</td>
<td>9</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Propietario</td>
<td>Suegra</td>
<td>Yo</td>
<td>Yo</td>
<td>Cuñada</td>
</tr>
<tr>
<td>Hábitos alimentarios</td>
<td>Come las sobras de todos</td>

<td>Mordisquea la comida</td>
<td>Come en abundancia</td>

<td>Come hasta que revienta</td>


</tr>
</table>
</body>
Unidad Curricular: Lenguaje de Programación II Prof.: José Guaipo
</html>

Para reconocer los encabezados de la tabla como encabezados, tanto


visual como semánticamente, puedes usar el elemento <th>('th' significa
'table header', encabezado de tabla ). Funciona exactamente igual que un
<td>, excepto que indica un encabezado, no una celda normal.

Pero la salida no nos da exactamente lo que queremos:

Se necesita una forma de hacer que «Animales», «Hipopótamo» y


«Cocodrilo» se extiendan dos columnas más allá, y «Caballo» y «Pollo» se
extiendan dos filas más abajo. Por fortuna, los encabezados de tabla y las
celdas tienen los atributos colspan y rowspan, que permiten hacer
exactamente esas cosas. Ambos aceptan un valor numérico sin unidades,
que es igual al número de filas o columnas que desea abarcar. Por ejemplo,
colspan="2" extienda una celda dos columnas más allá.

Se utilizara colspan y rowspan para mejorar esta tabla.

1. Luego, usa colspan para extender las celdas «Animales»,


«Hipopótamo» y «Cocodrilo» dos columnas más allá.
2. Por último, usa rowspan para extender las celdas de «Caballo» y
«Pollo» dos filas más abajo.

Unidad Curricular: Lenguaje de Programación II Prof.: José Guaipo


Otro ejemplo de tablas

<html>
<head>
<title> La primera tabla </title>
</head>
<body>
<table>
<tr>

<th>Hoy</th>

<th>Mañana</th>

<th>Miércoles</th>

</tr>

<tr>

<td>Soleado</td>

<td>Mayormente soleado</td>

<td>Parcialmente nublado</td>

</tr>

<tr>

<td>19°C</td>

<td>17°C</td>

<td>12°C</td>

</tr>

<tr>

<td>E 13 km/h</td>

<td>E 11 km/h</td>

<td>S 16 km/h</td>

</tr>
</table>
</body>
</html>

Unidad Curricular: Lenguaje de Programación II Prof.: José Guaipo


html>
<head>
<title> La primera tabla </title>
</head>
<body>
<table class="default">
<tr>
<th scope="row">Día</th> //se Agrego esta instruction

<th>Hoy</th>

<th>Mañana</th>

<th>Miércoles</th>

</tr>

<tr>

<td>Soleado</td>

<td>Mayormente soleado</td>

<td>Parcialmente nublado</td>

</tr>

<tr>

<td>19°C</td>

<td>17°C</td>

<td>12°C</td>

</tr>

<tr>

<td>E 13 km/h</td>

<td>E 11 km/h</td>

<td>S 16 km/h</td>

</tr>
</table>
</body>
</html>

Unidad Curricular: Lenguaje de Programación II Prof.: José Guaipo


<html>
<head>
<title> La primera tabla </title>
</head>
<body>
<table class="default">
<caption>Consumo de combustible de los autos a lo largo de las pruebas de manejo</caption> <tr>

<th scope="col">Car</th>

<th>Enero</th>

<th>Febrero</th>

<th>Marzo</th>

</tr>

<tr>

<th>Chevrolet Camaro</th>

<td>1254 lts</td>

<td>1582 lts</td>

<td>685 lts</td>

</tr>

<tr>

<th>Lamborghini Aventator</th>

<td>1854 lts</td>

<td>1978 lts</td>

<td>1502 lts</td>

</tr>
</table>
</body>
</html>

Unidad Curricular: Lenguaje de Programación II Prof.: José Guaipo


UNIFICACIÓN DE CELDAS

La unificación de celdas es un mecanismo mediante el cual un autor puede


combinar o fusionar dos o más celdas adyacentes (td y th) en una tabla. Este
efecto puede lograrse utilizando los atributos colspan, para unificación horizontal, y
rowspan, para unificación vertical. Estos atributos pueden tomar un valor entero
mayor a cero, que representa el número de celdas que participarán en la
unificación.

La idea detrás de este mecanismo se explica por sí misma: cuando el atributo


colspan es establecido en una celda, indica a los intérpretes que la misma debe
abarcar, no solamente su propio espacio, sino también el espacio de un número
de celdas contiguas hacia su derecha. Lo mismo sucede para el atributo rowspan
pero hacia abajo.

<html>
<head>
<title> La primera tabla </title>
</head>
<body>
<table class="default">
<tr>

<th></th>

<th>Día 1</th>

<th>Día 2</th>

<th>Día 3</th>

<th>Día 4</th>

</tr>

<tr>

<th>Mike (lastimado)</th>

<td colspan="3">0 km</td>

<td>4 km</td>

</tr>

<tr>

Unidad Curricular: Lenguaje de Programación II Prof.: José Guaipo


<th>Susan</th>

<td>23 km</td>

<td>18 km</td>

<td>19 km</td>

<td>15 km</td>

</tr>
</table>
</body>
</html>

Unidad Curricular: Lenguaje de Programación II Prof.: José Guaipo

También podría gustarte