Inf2 p1b exc15_celin_valenzuela

HTML
Colegio Bucerias
Celina
Valenzuela
Ing. Azucena
Cervantes
Etiquetas html
1’’B’’ 26/05/15

¿Qué es una tabla en código html?
 Una tabla HTML puede ser considerada, de manera
simple, como un grupo de filas donde cada una de
ellas contiene un grupo de celdas (y no al revés). Las
tablas, como toda estructura en los documentos HTML,
son definidas usando elementos. Entonces, una tabla
simple puede ser insertada en un
documento HTML usando tres elementos:
el elemento HTML table (estructura contenedora
principal), el elemento HTML tr (contenedor de fila) y
el elemento HTML td (celda).

Tablas
 Para insertar una tabla en una página de internet
debes incluir el código que aparece a
continuación. Este puede ser modificado para
obtener diferentes resultados y estilos de tablas.
 Código:
<table border=1><td>Aqui va el contenido de la
tabla, texto, imágenes, etc.</td></table>
El número uno se refiere al tamaño del borde de la
tabla. Si aumentas el número el borde será mas grueso
y si escribes 0 la tabla no mostrará borde alguno.

TD
 El atributo <TABLE> genera la tabla, mientras que <TD>
sirve para definir los campos presentes dentro de esta
tabla.
He aquí cómo el diseño puede ser transformado en
código y, por tanto, en una tabla propiamente dicha:

TR
 Como podemos observar, hemos
introducido una nueva marca
<TR>, que es una especie de
"salto" de fila dentro de la tabla.
He aquí cómo el diseño puede
ser transformado en código y,
por tanto, en una tabla
propiamente dicha:

Borde simple
 Las tablas tienen dos modos de presentación de
los bordes que se selecciona con la
propiedad border-collapse: separado (separate)
y colapsado (collapse). En el modo separado
existe un hueco entre los bordes de cada celda,
mientras que en el modo colapsado los bordes
se superponen. Si no se establece el modo de
presentación, los navegadores aplican el modo
separado.

Bordes y tabla invisible
 El atributo border establece el grosor del borde
de la tabla. El valor se interpreta en píxeles y no
admite unidades. Si el valor es 0 o el atributo no
está presente, los navegadores no dibujan ni el
borde exterior de la tabla ni los bordes interiores
de las celdas, haciendo el borde invisible.

Colspan y Rowspan
 Es la forma de fusionar celdas en una tabla.
 Rowspan, indica el número de filas que ocupará
la celda. Por defecto ocupa una sola fila.
 Colspan, indica el número de columnas que
ocupará la celda. Por defecto ocupa una sola
columna.
 De esta forma si ponemos <td colsan=2>, quiere
decir que la celda actual se extiende en el ancho
de dos celdas.
 Algo parecido ocurre si ponemos <td
rowspan=3>, la celda ocupará el alto de 3 celdas
normales.

Para que quede más claro, vamos a ver un ejemplo
de su uso. Por ejemplo, para insertar la siguiente tabla

 Habría que escribir el siguiente código:
<table width="575" border="2" cellspacing="2">
<tr align="center" valign="middle">
<th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>
</tr>
<th rowspan="2">DIFERENCIAS</th>
<th colspan="2">PERRO</th>
<th rowspan="2">HOMBRE</th>
</tr>
<th>PEQUEÑO</th>
<th>GRANDE</th>
</tr>
<td>Duración crecimiento</td>
<td>10 meses</td>
<td>18 a 24 meses</td>
<td>16 años</td>
</tr>
<td>Tiempo de gestación</td>
<td colspan="2">58 a 63 días</td>
<td>9 meses</td>
</tr>
<td>Duración de vida del pelo/cabello</td>
<td colspan="2">1 año</td>
<td>2 a 7 años</td>
</tr>

Cellpading y cellspacing
 Los atributos cellpading y cellspacing nos
ayudaran a dar a nuestra tabla un aspecto más
estético.
 En la siguiente imagen podemos ver
gráficamente el significado de estos atributos.
<table cellspacing="10"
cellpadding="10"
border="3">
Ejemplo:

Color de fondo
 Para ponerle color a una celda utilizamos el
atributo bgcolor=" aquí ponemos el nombre o
número del color«
 EJEMPLO
Vamos a realizar una tabla de dos filas y dos
columnas, con borde de tamaño "1" y de largo el
50% del ancho de página. Y le ponemos a una
celda fondo rojo con el atributo bgcolor="red" y a
otra fondo azul

Imagen de fondo
 Para lograr un fondo de imagen que se
repite, es decir que se hace extendible a
un espacio como un papel tapiz, que
sirva para luego colocar texto encima,
deberás utilizar el atributo background
dentro de la etiqueta de table y colocar
ahí la imagen que desees

Alinear contenido
 Para alinear el contenido se utiliza el atributo align.
 En la primera celda el texto está alineado a la
izquierda. No hay que hacer nada, es la alineación que
se establece por defecto. (Podría escribirse, de todas
formas: <td align="left">).
 En la segunda celda el texto está alineado en el
centro: <td align="center">.
 En la tercera celda el texto está alineado a la
derecha: <td align="right">.

APA
 Dale click ( ) Tablas
Recuperado el 27 de mayo de 2015
De:http://daleclick.blogspot.mx/2005/02/tablas.html
 HTML point (2006) Tablas, TD, TR, Bordes
De:http://www.htmlpoint.com/guida/html_11.htm
 Mc Libre (2015) Bordes
De:http://www.mclibre.org/consultar/amaya/css/css_tabl
as_modos_bordes.html
 Mc Libre (2015) Bordes
De:http://www.mclibre.org/consultar/htmlcss/xhtml/xhtml
_tablas_atributos.html#atributo1

 Aula clic ( ) clospan y rowspan
http://www.aulaclic.es/html/t_6_4.htm
 Desarrollo Web ( ) Cellpading y cellspacing
De: http://www.desarrolloweb.com/articulos/629.php
 Aula Fácil (2009) Color de fondo
De:http://www.aulafacil.com/cursos/l19275/informatica/c
rear-paginas-web/html/color-de-las-tablas
 Manuel Fajardo ( ) Imagen de fondo
De:http://uvsfajardo.sld.cu/diseno-de-tablas-en-html
 Ángel R. Puente ( ) Alineación
De:http://roble.pntic.mec.es/apuente/html/paginas/doce
.htm

Inf2 p1b exc15_celin_valenzuela

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (11)

Similar a Inf2 p1b exc15_celin_valenzuela

Similar a Inf2 p1b exc15_celin_valenzuela (20)

Último

Último (20)

Inf2 p1b exc15_celin_valenzuela