Clases tablas html

50 %
50 %
Information about Clases tablas html
Education

Published on March 6, 2014

Author: cpaz65

Source: slideshare.net

Description

EXPLICAR QUE HAC EL PROYECTO

TABLAS DE DATOS EN HTML Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna. Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla. Fila <tr> Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiquetas <table> y </table>. Por ejemplo, para crear una tabla con cinco filas escribiríamos: <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table>

Columna o celda <td> Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas. Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila. Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>. Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas

Ejemplo : Diseñar en HTML la siguiente tabla : MATERIA CURSO INGLES SEGUNDO FISICA TERCERO <table border="1"> <tr> <td>MATERIA</td> <td>CURSO</td> </tr> <tr> <td>INGLES</td> <td>SEGUNDO</td> </tr> <tr> <td>FISICA<td> <td>TERCERO</td> </tr> </table>

ATRIBUTOS DE UNA TABLA Atributo Significado width ancho de la tabla height altura de la tabla cellpadding espacio entre el contenido de las celdas y el borde un número espacio entre celdas un número grosor del borde un número alineación de la tabla dentro de la página left (izquierda) right (derecha) center (centro) color de fondo número hexadecimal imagen de fondo número hexadecimal color del borde número hexadecimal cellspacing border align bgcolor background bordercolor Posibles valores un número, acompañado de % cuando se desee que sea en porcentaje un número, acompañado de % cuando se desee que sea en porcentaje

Por ejemplo, para modificar la tabla anterior para que quedase como la siguiente: MATERIA CURSO INGLES SEGUNDO FISICA TERCERO Habría que escribir: <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> ... …… </table> Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana , que el borde (border) tiene un grosor de dos píxeles (es más ancho que las separaciones internas de la tabla que tienen grosor 1), que la tabla está alineada al centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99).

Encabezado de columna <th> Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos poner en su lugar las etiquetas<th> y </th>. Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o títulos de las columnas. Por ejemplo, si escribiéramos el siguiente código: <table width="50%" border="1" align="center"> <tr> <th>MATERIA</td> <th>CURSO </td> </tr> <tr> <td>INGLES</td> <td>SEGUNDO</td> </tr> <tr> <td>FISICA<td> <td>TERCERO</td> </tr> </table>

LA TABLA QUEDARÍA : MATERIA CURSO INGLES SEGUNDO FISICA TERCERO

<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> <tr align="center" bgcolor="#0099CC">

PRACTICA GENERAR LA SIGUIENTE TABLA EN HTL . INSERTE LA TABLA EN UNA PAGINA WEB CUALQUIERA PROVINCIA CAPITAL CIUDAD PICHINCHA QUITO PANECILLO GUAYAS GUAYAQUIL DAULE TUNGURAHUA AMBATO CEVALLOS

Add a comment

Related presentations

Related pages

[Clase en vivo] Tablas en HTML y CSS - YouTube

[Clase en vivo] Tablas en HTML y CSS Patricio Pérez Pinto. ... [Clases en vivo] Cómo hacer un ejecutable (JAR) y poner iconos - Duration: ...
Read more

Clases HTML - publib.boulder.ibm.com

Las clases HTML de AS/400 Toolbox para Java ayudan a preparar formularios y tablas para las páginas HTML. Las clases HTML implementan la interfaz ...
Read more

Estilos CSS con clases para tablas - YouTube

Web ejemplo - Ejemplo de una página web desde cero en HTML y CSS - mastersitios.com - Duration: 1:06:38. Mastersitios 103,649 views
Read more

CSS - Estilos de las tablas - Mosaic

Puede que os resulte útil descargaros los ejemplos de código para las tablas que se muestran ... central de HTML". ... clases mediante ...
Read more

Estilos de tablas HTML - MariaDB Knowledge Base

Las tablas sin estilo son como esta: ... Estilos de tablas HTML. Inicio; Open Questions; ... Las siguientes clases de tablas están disponibles:
Read more

Modulo de las tablas HTML5 - Html 5, simple y claro

Sobre las tablas HTML5. Tanto en HTML como en otros programas las tablas se utilizan para organizar datos, pero también nos puede ayudar en organizar la ...
Read more

Tablas - CLASES FREDYKSON

Las tablas en Word son una herramienta la cual nos sirve para acomodar al información de una manera mas fácil para entenderla, estas se conforman por ...
Read more

Tablas | Bootstrap 3

Tablas. Bootstrap también define una serie de clases para aplicar estilos sobre las tablas de HTML. La más básica es la clase .table: < table class ...
Read more

Clases de tablas HTML - publib.boulder.ibm.com

AS/400 Toolbox para Java Clases HTML Tablas HTML Clases de tablas HTML La clase HTMLTable le permite preparar de manera sencilla las tablas que se ...
Read more

Crear tablas HTML. colspan y rowspan. Unir celdas ...

Entrega nº19 del tutorial básico del programador web: HTML desde cero. Las etiquetas básicas para definir tablas HTML son table, tr, td, th. Puede ser ...
Read more