Tablas en htmlProf. Eudes Quispe

Concepto• Las tablas más sencillas de HTML se definen con tres etiquetas:

<table> para crear la tabla, <tr> para crear cada fila y <td> para crear cada columna.

ETIQUETA• La etiqueta <table> encierra todas las filas y columnas de la tabla. Las

etiquetas <tr> (del inglés "table row") definen cada fila de la tabla y encierran todas las columnas. Por último, la etiqueta <td> (del inglés "table data cell") define cada una de las columnas de las filas, aunque realmente HTML no define columnas sino celdas de datos.

TD (<td>)

• abbr = "texto" - Permite describir el contenido de la celda (empleado sobre todo en los navegadores utilizados por personas discapacitadas)

• headers = "lista_de_id" - Indica las celdas que actúan como cabeceras para esta celda (los títulos de las columnas y filas). Se indica como una lista de valores del atributo "id" de celdas

• scope = "col, row, colgroup, rowgroup" - Indica las celdas para las que esta celda será su cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas las demás celdas que están en la misma columna

• colspan = "numero" - Número de columnas que ocupa esta celda

• rowspan = "numero" - Número de filas que ocupa esta celda

TH (<th>)

• abbr = "texto" - Permite describir el contenido de la celda (empleado sobre todo en los navegadores utilizados por personas discapacitadas)

• headers = "lista_de_id" - Indica las celdas que actúan como cabeceras para esta celda (los títulos de las columnas y filas). Se indica como una lista de ID de celdas

• scope = "col, row, colgroup, rowgroup" - Indica las celdas para las que esta celda será su cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas las demás celdas que están en la misma columna

• colspan = "numero" - Número de columnas que ocupa esta celda

• rowspan = "numero" - Número de filas que ocupa esta celda

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

Caption (<caption> )• Se emplea para definir la leyenda o título de una tabla

De forma equivalente, si se quiere diseñar una tabla HTML que fusiona filas como la de la siguiente imagen:

Marque con aspaSI NO

EJERCICIO• Determinar el código HTML necesario para crear la tabla que se muestra en la siguiente imagen: