Este documento contiene preguntas y respuestas sobre las características y propiedades de las tablas en HTML. Explica qué son las tablas, qué significan los elementos TR, TD y TH, y cómo insertar bordes, colores de fondo, imágenes de fondo, y alinear el contenido dentro de las celdas de una tabla. También cubre las propiedades colspan, rowspan, cellpadding, cellspacing y cómo hacer que una tabla sea invisible.
1. HTML
A N A G A B R I E L A R A M O S L O Z A N O .
A Z U C E N A C E R V A N T E S P O N C E .
C O L E G I O B U C E R I A S
2 9 / 0 5 / 2 0 1 5
1 B
2. ¿QUÉ ES UNA 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 sin usar una
simple tabla, existen algunas ocasiones en que el valor de las tablas se
vuelve esencial.
Htmlquick(2014)Tablas html
Recuperado: 29/05/2015
De:http://www.htmlquick.com/es/tut
orials/tables.html
3. ¿QUÉ SIGNIFICA “TR”?
El contenido de las columnas que están dentro de la fila lo podemos alínear tanto
horizontal como verticalmente.
Html.azunaweb(2014)Tr html
Recuperado: 29/05/2015
De:http://html.hazunaweb.com/109.
php
4. ¿QUÉ SIGNIFICA “TD”?
Al igual que en las filas, en las celdas podemos definir el la alineación del
contenido que está dentro con los atributos "valign" y "align".
Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas celdas
o tantas columnas como indiquemos en él. Para agrupar celdas utilizaríamos
el atributo "colspan" y para agrupar celdas el atributo "rowspan".
Html.azunaweb(2014)Td html
Recuperado: 29/05/2015
De:http://html.hazunaweb.com/109.
php
5. ¿CÓMO INSERTAS UN SIMPLE BORDE EN TU
TABLA?
Las tablas tienen dos modos de presentación de los bordes que se selecciona
con la propiedad border-collapse: separado (separate) y colapsado
(collapse). En el modo separado existe un hueco entre los bordes de cada
celda, mientras que en el modo colapsado los bordes se superponen. Si no
se establece el modo de presentación, los navegadores aplican el modo
separado.
mclibre(2014)borde en tabla html
Recuperado: 29/05/2015
De:http://www.mclibre.org/consultar
/amaya/css/css_tablas_modos_bor
des.html
6. ESCRIBE EL CÓDIGO PARA COLOCAR UNA
TABLA INVISIBLE
<table id="miTabla" ><tbody><tr><td>....
Forosdelweb(2014)tabla invisible
Recuperado: 29/05/2015
De:http://www.forosdelweb.com/f4/
como-hacer-que-tabla-sea-
invisible-247997/
7. ¿QUÉ ES “COLSPAND”?
Crea un archivo ejemplo.html con este código y visualízalo. Recuerda que el
atributo border está deprecated o not supported y que más adelante veremos
como reemplazarlo mediante el uso de CSS:
aprendeaprogramar(2014)Colspand
Recuperado: 29/05/2015
De:http://aprenderaprogramar.com/index.php?option=com_content&view=ar
ticle&id=516:crear-tablas-html-colspan-y-rowspan-unir-celdas-horizontal-y-
vertical-tr-td-th-caption-o-titulo-cu00719b&catid=69:tutorial-basico-
programador-web-html-desde-cero&Itemid=192
8. ¿QUÉ ES “ROWSPAND?
Crea un archivo ejemplo.html con este código y visualízalo (recuerda que el
atributo border está deprecated o not supported y que más adelante veremos
como reemplazarlo mediante el uso de CSS):
aprendeaprogramar(2014)Rowspand
Recuperado: 29/05/2015
De:http://aprenderaprogramar.com/index.php?option=com_content&view=ar
ticle&id=516:crear-tablas-html-colspan-y-rowspan-unir-celdas-horizontal-y-
vertical-tr-td-th-caption-o-titulo-cu00719b&catid=69:tutorial-basico-
programador-web-html-desde-cero&Itemid=192
9.
10. QUÉ ES “CELL PADDING?
CELLPADDING es la cantidad de espacio entre el borde interior de la celda y el
contenido de la celda.
Ccd.uab.es(2014)Cell padding
Recuperado: 29/05/2015
De:http://ccd.uab.es/~sergi/manual
s/html/tables/lesson07.html
11. ¿QUÉ ES “CELL SPACING”?
Este atributo permite determinar o especificar la distancia entre las celdas y
entre las celdas y el margen exterior de la tabla. El valor de este atributo se
mide en pixeles y es válido para todas las celdas.
Ccd.uab.es(2014)Cell spacing
Recuperado: 29/05/2015
De:http://ccd.uab.es/~sergi/manual
s/html/tables/lesson07.html
12. ¿CÓMO INSERTAS COLOR DE FONDO EN UNA
CELDA DE UNA TABLA?
Para definir que una celda b1 tenga el color de fondo por ejemplo verde oscuro
cuyo código es #OEBEBA tenemos que poner en la hoja de
estilos estilo2.css lo siguiente:
Comocreartuweb(2014)color en
tabla Recuperado: 29/05/2015
De:http://www.comocreartuweb.co
m/ejemplo-con-tablas/definiendo-
tablas/color-de-celdas.html
13. ¿CÓMO INSERTAS UNA IMAGEN DE FONDO EN
UNA TABLA?
<table width="" height="" border="" bordder color="" background=“URL de
imagen">
<Tr>
<Td>
TEXTO
</td>
</tr>
</table>
yahoo(2014)imagen en tabla
Recuperado: 29/05/2015
De:https://mx.answers.yahoo.com/q
uestion/index?qid=2007072613264
3AAQjAhu
14. ¿CÓMO ALINEAS EL CONTENIDO DE TU TABLA?
Tutores.ord(2014)alinear contenido
Recuperado: 29/05/2015
De:http://www.tutores.org/codigo/15
51/alinear-texto-dentro-de-celdas-y-
tablas--valign/