practica HTML Andrea Sofia P INFORMATICA 2

1. Factores de HTML
COLEGIO BUCERIAS
Alumna Andrea Sofía Pérez Sámano
Maestra Ing. Azucena Cervantes
Informática 2
26 de mayo 2015
Prepa 1 A

2. Tabla en código
HTML
Las tablas son un poderosa herramienta a la
hora de mostrar y relacionar cierto tipo de
información. Aún cuando muchos sitios son
construidos (por su naturaleza) sin usar una
simple tabla, existen algunas ocasiones en
que el valor de las tablas se vuelve
escencial.
En las próximas líneas intentaremos cubrir
todas las características de las tablas para
estar listos para utilizarlas cuando se
necesite.
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 alrevé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
e l e m e n t o H T M L t a b l e ( e s t r u c t u r a
contenedora principal), el elemento HTML tr
(contenedor de fila) y el elemento HTML td
(celda).

3. TR y TD
<tr> Es la marca de comienzo de una fila. Esta marca
debe estar dentro del elemento table. Este elemento
requiere la marca de cierre.
<tr> viene de table row que significa fila de la tabla.
<td> Es la marca de comienzo de una celda. Esta
marca debe estar dentro del elemento tr. Este
elemento requiere la marca de cierre.
<td> viene de table data que significa dato de la
tabla.

4. • Ejemplo
• Código
• <table border="3px">
• <tr>
• <td>Borde</td>
• <td>3 pixels</td>
• </tr>
• </table>
Insertar un simple borde en tu
tabla
Para que se visualicen los bordes de una
tabla, debemos agregar el atributo border
junto con el valor expresado en pixels, de lo
contrario no se verán los bordes que dividen
las celdas de la tabla.

5. Código para colocar un tabla invisible
Código para colocar una tabla invisible
En el head el estilo: #miTabla {visibility: hidden;}
Y la tabla: <table id="miTabla" ><tbody><tr><td>....

6. Colspan y Rowspand
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

7. Código utilizando ambas etiquetas
• <table width="80%" border="1"
cellspacing="0" cellpadding="0">
• <tr>
• <td rowspan="3"><p>Países
Europeos</p></td>
• <td><p>España</p></td>
• <td><p>Madrid</p></td>
• </tr>
• <tr>
• <td><p>Francia</p></td>
• <td><p>Paris</p></td>
• </tr>
• <tr>
• <td><p>Reino Unido</p></td>
• <td><p>Londres</p></td>
• <tr>
• </tr>
• <tr>
• <td rowspan="3"><p>Países
Americanos</p></td>
• <td><p>EEUU</p></td>
• <td><p>Washington</p></td>
• </tr>
• <tr>
• <td><p>Canada</p></td>
• <td><p>Toronto</p></td>
• </tr>
• <tr>
• <td><p>Mexico</p></td>
• <td><p>Mexico</p></td>
• </tr>
• </table>

8. Cellpadding y Cellspacing
cellpadding Define, en pixels, el espacio entre los bordes de la celda y
el contenido de la misma.
cellspacing Define el espacio entre los bordes (en pixels).
Los atributos cellpading y cellspacing nos ayudaran a dar a nuestra tabla un
aspecto más estético. En un principio puede parecernos un poco confuso su
uso pero un poco de practica será suficiente para hacerse con ellos.
En la siguiente imagen podemos ver gráficamente el significado de estos atributos.

9. Como insertar color de fondo en una
celda de un tabla
Para darle color a toda la tabla es suficiente con poner el
atributo bgcolor"" dentro de la instrucción de tabla. Para poner
fondo amarillo bgcolor=“yellow"
<table border="1" cellpadding="0" cellspacing="0" width="50%"
bgcolor="yellow">

10. Como insertas una imagen de fondo en
una tabla
Para ello debemos utilizar el atributo BACKGROUND="imagen.gif" o
BACKGROUND="imagen.jpg", visto en dicho capítulo.
Si se utiliza dentro de la etiqueta <TABLE> la imagen en cuestión se multiplicará detrás de
todas las celdas.
Por ejemplo, si ponemos:
<TABLE BORDER BACKGROUND="nubes.jpg">
(Se omite el resto de las etiquetas de la tabla)
(Con el Netscape no se verá ninguna imagen de fondo, sólo con el Explorer)
Si, por el contrario, sólo se pone este atributo dentro de la etiqueta de una celda concreta
(<TD>), entonces la imagen de fondo se verá sólo en esa celda, como por ejemplo.

11. Como alineas el contenido de una
tabla? (dentro,izquierda y centrado)
Para que se visualicen los bordes de una tabla, debemos agregar el
atributo border junto con el valor expresado en pixels, de lo contrario
no se verán los bordes que dividen las celdas de la tabla.
Ejemplo de tabla
alineada a la derecha
Ejemplo de tabla centrada
Este sería un texto cualquiera colocado al lado de una tabla
centrada
Ejemplo de tabla
alineada a la izquierda
Esta tabla está centrada
(aling="center"). Solo tiene una celda.
Para que se vea el efecto de alineado a
la tabla debemos colocar un texto al
lado y el texto rodeará la tabla, igual
que ocurría con las imágenes alineadas a
un lado.
Esta tabla está alineada a la
izquierda (aling="left"). Solo tiene
una celda.
E s t a t a b l a e s t á
alineada a la derecha
(aling="right"). Solo
tiene una celda.
Para que se vea el efecto de
alineado a la tabla debemos
colocar un texto al lado y el
texto rodeará la tabla, igual
que ocurría con las
imágenes alineadas a un
lado.

12. FORMATO APA
HTMLQUICK.Tablas en HTML
RECUPERADO:27 de mayo del 2015
http://www.htmlquick.com/es/tutorials/tables.html
HTMLYA.HTML
RECUPERADO:27 de mayo del 2015
http://www.htmlya.com.ar/temarios/descripcion.php?cod=83&punto=19
VIRTUAL.html tablas
RECUPERADO:27 de mayo del 2015
http://www.virtualnauta.com/html-tablas
USABILIDAD.colspan y rowspan
RECUPERADO:27 de mayo del 2015
http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
DESARROLLOWEB.Html
RECUPERADO:27 de mayo del 2015
http://www.desarrolloweb.com/articulos/629.php
AULAFACIL.color de tablas
RECUPERADO:27 de mayo del 2015
http://www.aulafacil.com/cursos/l19275/informatica/crear-paginas-web/html/color-de-las-tablas