Factores de HTML_Andrea Sofia
- 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