Wilson8
Descargar como DOCX, PDF0 recomendaciones216 vistas
El documento explica cómo crear tablas en HTML. Las tablas están formadas por celdas que son el resultado de la intersección entre filas y columnas. Se usan las etiquetas <table>, <tr>, y <td> para especificar la estructura básica de la tabla. El documento también describe cómo modificar atributos como el ancho, altura, color de fondo y bordes de las tablas, filas y celdas.
Wilson8
- 1. COLEGIO NACIONAL NICOLAS ESGUERRA Edificamos futuro Wilson Sánchez velasquez Juan pablo sanchez 905 Página web v TABLA <TABLE> 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. imagen y texto COLUM NA Texto dentro de una celda
- 2. FILA CELDA 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 etiqetas <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 tablano basta con especificarel númerode filas,esnecesariotambiénespecificar el númerode columnas. Una celdaes el resultadode laintersecciónentreunafilayunacolumna,por loque podremos especificarel númerode celdasporfila,que equivale aespecificarel númerode columnasporfila. Es necesarioinsertarlasetiquetas<td>y </td> por cada una de las celdasque compongancada una de las filasde latabla.Por lotanto,habrá que insertaresasetiquetasentre lasetiquetas<tr>y </tr>. Entre lasetiquetas<td>y </td> se podrá especificarel contenidode cadaunade lasceldas.Por ejemplo, parainsertarl Habría que escribir: <table border="1">
- 3. <tr> <td>Sabado</td> <td>Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table> Formato de la tabla Es posible modificar los siguientes atributos de una tabla: Atributo Significado Posibles valores width ancho de la tabla un número, acompañado de % cuando se desee que sea en porcentaje height altura de la tabla un número, acompañado de % cuando se desee que sea en porcentaje cellpadding espacio entre el contenido de las celdas y el borde un número cellspacing espacio entre celdas un número border grosor del borde un número align alineación de la tabla dentro de la página left (izquierda) right (derecha) center (centro) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal Por ejemplo,paramodificarlatablade la páginaanterior para que quedase comolasiguiente: Sabado Domingo Curso HTML Curso Dreamweaver Curso Frontpage Curso Flash
- 4. Habría que escribir: <table width="50%"border="2"align="center"cellspacing="0"bordercolor="#000000" bgcolor="#FFCC99"> ... </table> Con estoindicamosque el ancho(width) de latabladebe ocuparel 50% del anchode laventana (lopuedescomprobarcambiandoel anchode laventanade tu navegadory verásque el ancho de la tablavaría para ocupar siempre lamitadde laventana),que el borde (border) tieneungrosor de dos píxeles(esmásanchoque lasseparacionesinternasde latablaque tienengrosor1),que la tablaestá alineadaal centro(center) de laventana,que nohayespacioentre lasceldas (cellspacing="0"),que el borde la tablaesnegro(#000000) y el fondonaranja(#FFCC99). Formatode las celdas Es posible modificar los siguientes atributos de una celda: Atributo Significado Posibles valores width ancho de la tabla un número, acompañado de % cuando se desee que sea en porcentaje height altura de la tabla un número, acompañado de % cuando se desee que sea en porcentaje align alineación horizontal del contenido de la celda left (izquierda) right (derecha) center (centro) valign alineación vertical del contenido de la celda baseline (línea de base) bottom (inferior) middle (medio) top (superior) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal
- 5. También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta <tr>, en lugar de en la etiqueta <td>. Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla. Por ejemplo, si escribiéramos el siguiente código: <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> <tr align="center" bgcolor="#0099CC"> <td>Sabado</td> <td bgcolor="#66CC99">Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table> Obtendríamos lasiguiente tabla: