Dise O De Tablas Html
Páginas: 10 (2464 palabras)
Publicado: 14 de marzo de 2015
Diseño de tablas Html
Una tabla en Html no es más que un modo de presentar una serie de datos que guardan cierto orden y relación entre ellos. Un ejemplo de tabla es la siguiente:
Como ves, usando tablas puedes organizar los datos de modo que aparezcan ordenados en filas y columnas. También puedes hacer que aparezca un borde alrededor de cada datos y, como puedes ver en la imagen de abajo,combinar algunas celdas:
Una vez entendido esto, puedes imaginar las aplicaciones que se le pueden dar. Desde por ejemplo colocar datos ordenadamente, como en el ejemplo anterior, hasta usarla para darle forma a una web, si en lugar de meros datos, lo que colocas en cada celda son imágenes y conjuntos de datos. Por ejemplo, puedes colocar una imagen de fondo en la primera fila con aspecto de bordesuperior, otra con aspecto de borde inferior en la fila de abajo, un menú en una celda lateral, y dejar los textos principales de la web para las celdas de la parte central, tal que así:
Las etiquetas de Tabla en código Html
Esto va a ser similar a lo que vimos para la construcción de las listas, solo que en este caso se define el comienzo de una tabla con la etiqueta y su final con laetiqueta de cierre correspondiente, es decir, con la barrita,
Una vez definida la tabla, hay que colocar las filas y columnas en su interior. Has de recordar que las tablas de dividen en filas horizontales y que luego esas filas se dividen a su vez en trocitos, dando lugar a las columnas. Por lo tanto, en el código Html tendremos que colocar primero tantas etiquetas de apertura y cierre defilas como filas queramos, y luego, en el interior de cada fila, colocaremos las celdas en las que queramos dividir cada una de esas filas. Sí, es algo complicado así escrito, pero os pondré ejemplos prácticos para que quede bien clarito, oki?
Las etiquetas que indican apertura y cierre de una fila (las filas son las horizontales y las columnas las verticales) son y , mientras que lasque definen el inicio y final de una celda dentro de una fila son y . Veamos esos ejemplos en la página siguiente. Por el momento tan solo recuerda esas nuevas etiquetas.
La estructura de las tablas
Ya conocemos las tres etiquetas principales que se usan para formar una tabla en código Html. Veamos ahora de forma práctica cómo colocarlas para obtener las tablas que queramos. Para empezarveamos cuál es la estructura de una tabla formada tan solo por una celda. Todas las celdas pertenecen obligatoriamente a una fila, de modo que la estructura sería esta:
Una tabla en Html no es más que un modo de presentar una serie de datos que guardan cierto orden y relación entre ellos. Un ejemplo de tabla es la siguiente:
Como ves, usando tablas puedes organizar los datos de modo que aparezcan ordenados en filas y columnas. También puedes hacer que aparezca un borde alrededor de cada datos y, como puedes ver en la imagen de abajo,combinar algunas celdas:
Una vez entendido esto, puedes imaginar las aplicaciones que se le pueden dar. Desde por ejemplo colocar datos ordenadamente, como en el ejemplo anterior, hasta usarla para darle forma a una web, si en lugar de meros datos, lo que colocas en cada celda son imágenes y conjuntos de datos. Por ejemplo, puedes colocar una imagen de fondo en la primera fila con aspecto de bordesuperior, otra con aspecto de borde inferior en la fila de abajo, un menú en una celda lateral, y dejar los textos principales de la web para las celdas de la parte central, tal que así:
Las etiquetas de Tabla en código Html
Esto va a ser similar a lo que vimos para la construcción de las listas, solo que en este caso se define el comienzo de una tabla con la etiqueta
Una vez definida la tabla, hay que colocar las filas y columnas en su interior. Has de recordar que las tablas de dividen en filas horizontales y que luego esas filas se dividen a su vez en trocitos, dando lugar a las columnas. Por lo tanto, en el código Html tendremos que colocar primero tantas etiquetas de apertura y cierre defilas como filas queramos, y luego, en el interior de cada fila, colocaremos las celdas en las que queramos dividir cada una de esas filas. Sí, es algo complicado así escrito, pero os pondré ejemplos prácticos para que quede bien clarito, oki?
Las etiquetas que indican apertura y cierre de una fila (las filas son las horizontales y las columnas las verticales) son
La estructura de las tablas
Ya conocemos las tres etiquetas principales que se usan para formar una tabla en código Html. Veamos ahora de forma práctica cómo colocarlas para obtener las tablas que queramos. Para empezarveamos cuál es la estructura de una tabla formada tan solo por una celda. Todas las celdas pertenecen obligatoriamente a una fila, de modo que la estructura sería esta:
| contenido1 | y | , he colocado la palabra contenido1, que es lo que se mostrará dentro de la celda. Todos loscontenidos de una tabla siempre van dentro de celdas, nunca directamente dentro de una fila o una tabla, oki? El resultado del código anterior sería este:
| contenido1 | contenido2 |