En esta entrada crearemos un Formulario con HTML, aplicando el uso de Tablas y para concretar daremos un poco de CSS , para darle una apariencia personalizada. Si no tienen muy centrada la idea de trabajar con Tablas HTML, pueden tomarse un tiempo por nuestras entradas sobre TABLAS HTML.

Una cualidad interesante al combinar celdas es la que sin duda nos brindan los atributos colspan y rowspan, en esta publicación nos centraremos en la funcionalidad del atributo rowspan, el cual tiene como finalidad, extender una celda verticalmente según la cantidad que se le asigne.

Veremos un par de ejemplos que nos permitirán entender mencionado atributo.

Como ya vimos en muchos ejemplos sobre Tablas HTML en este blog, podemos aplicar distintos atributos que nos permiten dar cualidades extras a nuestras tablas, en este oportunidad, aprenderemos las cualidades que nos brinda el uso del atributo colspan.

El Atributo colspan, Expande una celda horizontalmente,  para comprendedlo mejor aplicaremos un par de ejemplos que nos permitirán visualizar mejor las propiedades de dicho atributo.

Ejemplo 1 :

Aplicaremos <td colspan="3"> en la segunda fila de nuestra tabla y tendremos el siguiente código:

Código HTML:

<html> <head> <title>Tablas en HTML</title> </head> <body> <table border="1" height="300" width="500"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td colspan="3"> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </body> </html>

Resultado:

1	2	3
4	5	6

Como observamos en nuestro primer ejemplo al aplicar <td colspan="3"> en la segunda fila, vemos como esta se extiende horizontalmente a lo largo de la cantidad de celdas que indicamos, como en este caso indicamos coslpan="3", la fila se extendió hasta cubrir el tamaño de 3 celdas en la tabla.

Ejemplo 2:

En este ejemplo aplicaremos <td colspan="2">, usaremos el mismo código HTML, del ejemplo anterior, con la única diferencia del atributo colspan.

Resultado:

1	2	3
4	5	6

Ahora en el segundo ejemplo podemos observar que al colocar colspan="2", la expansión de la fila solo cubre 2 celdas que es lo asignado en el atributo colspan.

OJO: la aplicación de esto ejemplos , sufre diversos cambios según el navegador que estemos utilizando, funciona correctamente en Google Chrome y tambien es visible en Firefox, pero en IE los resultados no se observan correctamente.

No  probé en otros navegadores, pero si tienen la oportunidad por favor comenten el resultado que se visualiza en los navegadores diferentes a los ya mencionados.

La alineación vertical de los elementos de una Tabla es posible gracias al atributo valign, asi como  la alineacion horizontal con el atributo align, en este caso nos centraremos en aprender el atributo valign y para conseguirlo aplicaremos un ejemplo que nos permitirán entender mejor la forma de uso de dicho atributo.

Una cosa que siempre tenemos que tener en cuenta es los parámetros que podemos dar al atributo valign, que son los siguientes:

valign="top"            --->Arriba

valign="middle"      --->Medio

valign="bottom"     ---->Abajo

Ejemplo:

Código HTML:

<html> <head> <title>Tablas en HTML</title> </head> <body> <table border="1" width="500" height="300"> <tr> <td valign="top">1</td> <td valig="middle">2</td> <td valign="bottom">3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td valign="bottom">7</td> <td valign="middle">8</td> <td valign="top">9</td> </tr> </table> </body> </html>

Resultado:

1	2	3
4	5	6
7	8	9

Como se observa en el resultado, al aplicar el atributo valign vemos que los elementos se alinean de forma vertical alrededor de la celda en la que se encuentran.

Es importante tener siempre en claro que al poner valign="middle", la alineación del elemento no se distingue con la alineación por defecto.(observar el código HTML)

Cualquier duda o aporte hacerlo por comentario, agradezco su tiempo saludos!!

El uso de atributos siempre esta presente en diversas estructuras del HTML, en este caso usaremos un atributo que nos permite especificar la alineación de los elementos de nuestras celdas, esto se logra colocando dentro de la etiqueta <td> el atributo align.

Para entender mejor la alineación de elementos de las celdas, veremos 2 tablas, una con los elementos alineados  y otra con la alineación por defecto (elementos sin alinear).

Ejemplo 1 : 

Código HTML:

                                         "Tabla con la alineación por defecto de los elementos."

<html> <head> <title>Tablas en HTML</title> </head> <body> <table border="1" height="300" width="500"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html>

Resultado:

1	2	3
4	5	6
7	8	9

Como observamos en el primer ejemplo, los elementos de la tabla están alineados a la izquierda, como ya dijimos en publicaciones anteriores, la alineación a la izquierda es la alineación por defecto. Ahora en el siguiente ejemplo aplicaremos el atributo align y especificaremos la alineación que queremos darle a nuestros elementos.    

Código HTML:

                                         "Tabla con elementos alineados específicamente"

<html> <head> <title>Tablas en HTML</title> </head> <body> <table border="1" height="300" width="500"> <tr> <td align="center">1</td> <td align="right">2</td> <td align="left">3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html>

Resultado:

1	2	3
4	5	6
7	8	9

Como observamos en esta tabla, los elementos 1,2,3 están alineados específicamente al centro y a la derecha, a diferencia de los demás elementos que su alineación es a la izquierda(alineación por defecto), para que esta alineación sea posible especificamos el atributo align en las etiquetas <td>, en este caso dentro de la primera fila, entre el primer par de etiquetas <tr> y </tr>. (Analizar código HTML) 


Cualquier duda o aporte que deseen añadir sera bien recibido.

Anidar  Tablas en HTML, o en otras palabras colocar tablas dentro de una tabla. Esta forma de usar las tablas puede ser de mucha utilidad a la hora de especificar diversas opciones en las celdas, pero el uso que le demos ya depende de la necesidad de cada uno de nosotros. Para mejor entendimiento de tablas anidadas veremos un  ejemplo:

Código HTML:

Las tablas internas se creara como si fueran elementos de la tabla general, eso quiere decir que estarán creadas dentro de las etiquetas <td> y </td>.

<html> <head> <title>Tablas en HTML</title> </head> <body> <table border="1" height="300" width="500"> <tr> <td> <table width="100" align="center"border="1"> <tr> <td> 1 </td> <td> 3 </td> </tr> <tr> <td> 2</td> <td> 4 </td> </tr> </table> </td> <td>-------</td> </tr> <tr> <td>--------</td> <td> <table width="100" align="center" border="1"> <tr> <td> 1 </td> <td> 3 </td> </tr> <tr> <td> 2</td> <td> 4 </td> </tr> </table> </td> </tr> </table> </body> </html>

Resultado:

1 3 2 4	-------
--------	1 3 2 4

Como vemos en el ejemplo, al anidar tablas, podemos crear una tabla en las celdas de una tabla, en este caso para este ejemplo creamos 2 tablas, entre las etiquetas <td> y </td> de la tabla general.

OJO: cabe aclarar que cada tabla creada dentro de una tabla , posee sus atributos únicos  quiere decir que una tabla no es afectada por los atributos en este caso, las 2 tablas creadas en las celdas de la tabla general no son afectados por los atributos de esta.

Como vimos en publicaciones anteriores el poner bordes a nuestra tabla, hace que esta tenga un mayor atractivo, pero es aun mas llamativa cuando ponemos colores a estos bordes, sobre todo colores que combinan con nuestra web. Para eso utilizaremos el atributo bordercolor, que nos permitirá citar un color y este aparecerá en ves del color por defecto, el cual es el negro.

Para el siguiente ejemplo utilizaremos bordercolor="blue" 

Código HTML: 

<table border="1" width="500" height="300" bordercolor="blue">.........</table>

Resultado: 

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Ahora en el segundo ejemplo usaremos un bordercolor="#ab2ab2"

Código HTML: 

<table border="1" width="500" height="300" bordercolor="#ab2ab2">.........</table>

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Como notamos en los ejemplos, el poner color a nuestros bordes, nos ayuda a poner un encanta mas atractivo a las tablas y olvidarnos del aburrido y cansado color negro, que es el color de borde por defecto.

OJO: Es necesario aclarar que hay dos formas de aplicar colores , una traduciendo el color en Ingles como vimos en la primera tabla y la otra en forma hexadecimal como se observa en la segunda tabla.

Poner una imagen de fondo a una tabla , podría ser una decoración excelente,que nos permitiría dar un atractivo mas elegante a nuestras tablas y para lograr eso aplicaremos el atributo background en la etiqueta <table>.

En el siguiente ejemplo colocaremos un fondo a nuestra tabla usando :

<table width="500" height="300" border="1" background="imagen.jpg">

Código HTML:

<html> <head> <title>Tablas en HTML</title> </head> <body> <table width="500" height="300" border="1" background="imagen.jpg"> <tr> <td>Objeto1.1</td> <td>Objeto1.2</td> <td>Objeto1.3</td> </tr> <tr> <td>Objeto2.1</td> <td>Objeto2.2</td> <td>Objeto2.3</td> </tr> <tr> <td>Objeto3.1</td> <td>Objeto3.2</td> <td>Objeto3.3</td> </tr> </table> </body> </html>

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Como observamos en nuestra tabla al colocar el atributo background en la etiqueta <table>, la imagen se muestra en forma de mosaico hasta completar el tamaño de la tabla, esta es una propiedad del atributo background.

Espero sea de utilidad esta publicación, cualquier aporte o duda pueden hacerlo por comentarios se les agradece de antemano. 

Dar color a la celdas individuales de nuestras tablas es de cierta forma beneficioso a la hora de querer distinguir distintos elementos que se encuentran en nuestra tabla, así como, vimos en una publicación anterior sobre: como dar color a nuestra tabla utilizando el atributo bgcolor en la etiqueta <table>, procederemos de la misma manera, pero esta ves el atributo bgcolor estará situado en las etiquetas <td> o <th> según como construiste tu tabla.

Utilizaremos el atributo bgcolor en las primeras etiquetas <td> de cada fila:

 <td bgcolor="red">Objeto1.1</td>
 <td bgcolor="green">Objeto2.1</td>
<td bgcolor="orange">Objeto3.1</td>

Si observan el "Código HTML" de abajo podrán ver que pusimos bgcolor a todos los primeros <td> de cada fila.


Código HTML: 

<html> <head> <title>Color en Tablas</title> </head> <body> <table border="1" height="300" width="500"> <tr> <td bgcolor="red">Objeto1.1</td> <td>Objeto1.2</td> <td>Objeto1.3</td> </tr> <tr> <td bgcolor="green">Objeto2.1</td> <td>Objeto2.2</td> <td>Objeto2.3</td> </tr> <tr> <td bgcolor="orange">Objeto3.1</td> <td>Objeto3.2</td> <td>Objeto3.3</td> </tr> </table> </body> </html>

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Ahora en el siguiente ejemplo pondremos el atributo bgcolor a toda una fila y esto lo lograremos usándolo en la etiqueta <tr> de la siguiente forma:

<tr bgcolor="red">
<tr bgcolor="green">
<tr  bgcolor="orange">

Si observan el "Código HTML" de abajo podrán ver que pusimos bgcolor a todos las etiquetas <tr> de cada la tabla. como ya sabemos la etiqueta <tr> representa la fila de nuestra tabla.

Cogido HTML

<html> <head> <title>Color en Tablas</title> </head> <body> <table border="1" height="300" width="500"> <tr bgcolor="red"> <td>Objeto1.1</td> <td>Objeto1.2</td> <td>Objeto1.3</td> </tr> <tr bgcolor="green"> <td>Objeto2.1</td> <td>Objeto2.2</td> <td>Objeto2.3</td> </tr> <tr bgcolor="orange"> <td>Objeto3.1</td> <td>Objeto3.2</td> <td>Objeto3.3</td> </tr> </table> </body> </html>

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Cualquier duda o aporte pueden hacerlo por comentarios, espero les aya sido de ayuda esta publicación.

Una forma muy carismática al crear  una tabla es darle color a esta, ya que esta permite brindar un mejor atractivo a nuestra tabla y por ende a nuestra web.

Como ya vimos  en publicaciones anteriores el atributo bgcolor permite dar color al fondo de nuestra pagina,  pero en este caso lo usaremos en nuestra tabla, teniendo así como resultado el color de fondo de esta.

En el siguiente ejemplo, aplicaremos un bgcolor="#cccc33"

Código HTML:

<table cellpadding="50" cellspacing="10" border="1" width="500" height="300" bgcolor="#cccc33">

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

El dar color a diferentes objetos de nuestro sitio web, es de suma importancia ya que estos hacen que nuestro sitio sea mas atractivo para los visitantes.

Una cosa que es de suma importancia y es muy valido mencionar en este curso de HTML, es el atributo cellspacing en las tablas, dicho atributo define el espacio entre los bordes de la tabla en pixeles.

Así como el atributo cellpadding usar el atributo cellspacing, nos permite dar un mejor aspecto a nuestra tabla.

A continuación veremos 2 tablas una sin el atributo cellspacing y otra con dicho atributo, con la intención de mostrar la diferencia que hay cuando lo usamos. 

Código HTML:

                      si aun no tienes en claro la codificación de tablas, visite : creación de tablas , etiquetas de una tabla
          

<table border="1" cellpadding="50" width="500" height="300">.....................</table>

Resultado: 

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

ahora en el siguiente ejemplo usaremos el atributo cellspacing="10" para notar la diferencia con respecto a la primera tabla.

Código HTML:

<table border="1" cellpadding="50" width="500" height="300" cellpacing="10">.....................</table>

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Como observamos en la segunda tabla, al usar el atributo cellspacing="10", el espacio entre todos los bordes de la tabla se alinean a 10 pixeles de distancia. 

Espero les sea de utilidad este post cualquier aporte o duda que deseen hacer solo dejen un comentario.

El atributo cellpadding, define, en pixeles el espacio entre los bordes de la celda y el contenido de la misma.

A continuación mostraremos 2 tablas, primero mostremos una tabla que no contiene el atributo cellpadding y luego otra que si contiene dicho atributo, mostraremos 2 tablas con la intencion de notar la diferencia al usar el atributo cellpadding.

Código HTML:

                                            Omitiremos todo el código fuente y solo pondremos los fragmentos importantes que se utilizaran.

<table border="1"  width="500" height="300"> ..............</table>

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Ahora en el segundo ejemplo aplicaremos un cellpadding de 50.

Código HTML:

<table   width="500" height="300" cellpadding="50"> ..............</table>

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Como observamos, al aplicar el atributo cellpadding en la segunda tabla, podemos notar una gran diferencia con respecto a la primera, debido a que al poner cellpadding="50" la distancia, que hay entre los 4 bordes de cada celda y los objetos que estas contienen, se mantienen a 50 pixeles de distancia cada uno, es por eso que la distancia de los objetos con respecto a los bordes de cada celda son iguales, en cambio en la primera tabla no se nota esa cualidad, debido a la falta del atributo cellpadding.

Entre los atributos de una tabla, podemos encontrar 2 atributos que nos permiten generar el alto y el ancho de esta.

El atributo "height" define la altura de la tabla en pixeles o porcentajes. En el siguiente ejemplo aplicaremos un alto de 300 a nuestra tabla .

<table height="300" border="1">

Código HTML:

<html> <head> <title>Tablas en HTML</title> </head> <body> <table border="1" height="300"> <tr> <td>Objeto1.1</td> <td>Objeto1.2</td> <td>Objeto1.3</td> </tr> <tr> <td>Objeto2.1</td> <td>Objeto2.2</td> <td>Objeto2.3</td> </tr> <tr> <td>Objeto3.1</td> <td>Objeto3.2</td> <td>Objeto3.3</td> </tr> </table> </body> </html>

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Ahora otra forma de poner los parámetros tanto para los atributos "height y width" es con porcentajes :
<table border="1" height="50%">

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Como se nota al colocar height="50%" la tabla ocupa el 50% de lo alto de la pagina. Si usamos cualquier porcentaje, nuestra tabla lo usara con respecto al tamaño de la pagina.

El atributo "width" define la anchura de la tabla en pixeles o como ya mencionamos en porcentajes. En el siguiente ejemplo aplicaremos un ancho de 500 a la tabla :

<table border="1" width="500">

Código HTML:

<html> <head> <title>Tablas en HTML</title> </head> <body> <table border="1" width="500"> <tr> <td>Objeto1.1</td> <td>Objeto1.2</td> <td>Objeto1.3</td> </tr> <tr> <td>Objeto2.1</td> <td>Objeto2.2</td> <td>Objeto2.3</td> </tr> <tr> <td>Objeto3.1</td> <td>Objeto3.2</td> <td>Objeto3.3</td> </tr> </table> </body> </html>

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Ahora usaremos <table border="1" width="50%">

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Como notamos al poner width="50%" , nuestra tabla ocupa la mitad del tamaño de nuestra pagina, osea el 50% de esta.

Como ultimo ejemplo combinaremos ambos atributos, en este caso usaremos:

<table border="1" height="300" width="500">

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

La alineación de tablas en HTML, nos permite mover la tabla a lo largo de nuestra pagina web alineándola horizontalmente con respecto a su entorno.

Al igual que la alineación de texto y demás objetos HTML,La alineación de tablas también esta dada por el atributo "align" que es colocado dentro de la etiqueta <table>. El código quedaría de la siguiente manera : <table align="">, entre las comillas ponemos la ubicación que le queremos dar a nuestra tabla. Para mejor entendimiento veremos 3 ejemplos :

Presione el cuadro y espere 10 segundos para leer la segunda parte del Tutorial ... 

Código HTML :

                                            En el código siguiente , cambiar la ubicación del atributo align, por la que deseemos

<html> <head> <title>Tablas en HTML</title> </head> <body> <table border="1" align="ubicacion"> <tr> <th>Objeto1.1</th> <td>Objeto1.2</td> <td>Objeto1.3</td> </tr> <tr> <th>Objeto2.1</th> <td>Objeto2.2</td> <td>Objeto2.3</td> </tr> <tr> <th>Objeto3.1</th> <td>Objeto3.2</td> <td>Objeto3.3</td> </tr> </table> </body> </html>

En el primer ejemplo usaremos <table align="left"> .

Resultado: 

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Hay que tener bien en claro que la alineación por defecto ya sea de textos, tablas, etc, siempre esta ubicada a la izquierda. Por eso en este ejemplo al poner align="left" vemos que la alineación es la misma si es que esta no se nombraría.

Ahora usaremos <table align="center">

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Ahora observamos que al colocar align="center" nuestra tabla se ubica en la parte céntrica, ahora usaremos :
<table align="right"> 

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Ahora en este ejemplo observamos nuestra tabla alineada hacia la derecha, es importante tener siempre en cuenta que las alineaciones de cualquier objeto HTML, siempre están denominadas por:
left=izquierda,  center=centro, right=derecha.

En una publicaciòn anterior aplicamos el atributo border en las tablas de tal forma que nos permitían  observar diferencias entre una tabla sin bordes y una con bordes. Es así que, colocar bordes a las tablas, son de cierta manera indispensables para que el entorno y la forma de la tabla sea notoria ya que sin este, solo se mostrarían los elementos de cada celda. En otras palabras El atributo border define el numero de pixeles del borde principal de la tabla.

En el siguiente ejemplo aplicaremos un borde 1 a la tabla:  <table border="1">

Código HTML:

<html> <head> <title>Tablas en HTML</title> </head> <body> <table border="1"> <tr> <th>Objeto1.1</th> <td>Objeto1.2</td> <td>Objeto1.3</td> </tr> <tr> <th>Objeto2.1</th> <td>Objeto2.2</td> <td>Objeto2.3</td> </tr> <tr> <th>Objeto3.1</th> <td>Objeto3.2</td> <td>Objeto3.3</td> </tr> </table> </body> </html>

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Ahora aplicaremos un border mayor ala tabla , en este caso sera : <table border="5">

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Al hacer una comparación entre los 2 ejemplos nos damos cuenta que el aumento del border solo afecta al entorno principal, eso quiere decir que no importa cuanto aumentemos los bordes de la tabla lo único que se modificara sera el borde exterior.

Ahora quitaremos el atributo border de la etiqueta <table> :

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Al no tener la etiqueta <table> el atributo border, en la tabla solo se muestran los elementos de cada celda sin ningún entorno.

OJO: Es importante tener en cuenta una peculiaridad del atributo border en las tablas ,es que cuando no se especifica el atributo mencionado, la tabla no contiene ningún borde ya sea externo ni interno, pero al colocarse un borde cualquiera, solo los bordes externos o principales son los que sufren modificaciones en cambio los internos se mantienen con un border="1" así como notamos en los ejemplos.

Si aun tienes dudas sobre las tablas puedes visitar las siguientes entradas : 

Creación de tablas.

Etiquetas principales de las tablas.

Las tablas tienen tres etiquetas que se consideran fundamentales, en este articulo aprenderemos el uso que se les puede dar a cada una de ellas y como utilizarlas al momento de crear una tabla. Como ya mencionamos en una publicación anterior sobre la creación de tablas, todo se desarrollara entre los limites de estas 2 etiquetas : <table> y </table>.

Las 3 etiquetas que hay que tener en cuenta principalmente al crear tablas en HTML son las siguientes:

<tr> y </tr> ; <td> y </td>  ;  <th> y </th>

Empezaremos explicando la finalidad de cada una de ellas:

El par de etiquetas definidas por "<tr> y </tr>", A manera practica y fácil podríamos decir que son las encargadas de crear las filas en las tablas.En cambio tanto las etiquetas <td> y </td> , son las que originan las columnas al igual que las etiquetas <th> y </th>, con la única diferencia que estas ultimas hacen que el objeto que se encuentren dentro de esa celda se vea en forma de encabezado con un formato de texto en negrita. 

Para mayor entendimiento mostraremos un par de ejmplos:

Ejemplo 1:

Código HTML:

<html> <head> <title>Tablas en HTML</title> </head> <body> <table border="1"> <tr> <th>Objeto1.1</th> <td>Objeto1.2</td> <td>Objeto1.3</td> </tr> <tr> <th>Objeto2.1</th> <td>Objeto2.2</td> <td>Objeto2.3</td> </tr> <tr> <th>Objeto3.1</th> <td>Objeto3.2</td> <td>Objeto3.3</td> </tr> </table> </body> </html>

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Al colocar las etiquetas <tr> y </tr> creamos 1 fila y como en este ejemplo, las usamos 3 veces, es la razón de que tengamos 3 filas en nuestra tabla, ahora si nos centremos en las celdas vemos una diferencias notoria, es el formato en negrita que aparece en 3 elementos. Eso se debe al uso de las etiquetas <th> y </th>, en cambio los elementos contenidos entre las etiquetas <td> y </td> se muestran de manera normal.

En otras palabras si miramos claramente el código veremos que el primer elemento de cada fila esta entre las etiquetas <th> y </th> esto origina su cambio de formato.

Ahora veremos otro ejemplo esta ves colocando las etiquetas <th> y </th>, al incio de cada columna.

Ejemplo 2:

Código HTML:

<html> <head> <title>Tablas en HTML</title> </head> <body> <table border="1"> <tr> <th>Objeto1.1</th> <th>Objeto1.2</th> <th>Objeto1.3</th> </tr> <tr> <td>Objeto2.1</td> <td>Objeto2.2</td> <td>Objeto2.3</td> </tr> <tr> <td>Objeto3.1</td> <td>Objeto3.2</td> <td>Objeto3.3</td> </tr> </table> </body> </html>

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

OJO: es muy útil dominar esta tres etiquetas para crear las tablas, ya que esto nos permitirá, tener un mejor manejo y así podremos ejecutar cosas mas complejas al momento de usar tablas en HTML.

En HTML una tabla es un conjunto de celdas organizadas, en las cuales podemos alojar distintos contenidos. 

Las tablas están definidas entre las etiquetas : <table> y </table> ademas las tablas son descritas por lineas de izquierda a derecha. Cada una de estas lineas definidas por las etiquetas : <tr> y </tr>.

Asimismo, dentro de cada linea, habrá diferentes celdas.Cada una de estas celdas sera definida por otro par de etiquetas :<td> y </td>.

Código HTML:

<html> <head> <title>Creando Tablas</title> </head> <body> <table> <tr> <td>Objeto1.1</td> <td>Objeto1.2</td> <td>Objeto1.3</td> </tr> <tr> <td>Objeto2.1</td> <td>Objeto2.2</td> <td>Objeto2.3</td> </tr> <tr> <td>Objeto3.1</td> <td>Objeto3.2</td> <td>Objeto3.3</td> </tr> </table> </body> </html>

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Como podrán ver  en el resultado del ejemplo, se creo nuestra tabla  de 3x3, es decir de 3 filas y 3 columnas.

Ahora para poder visualizar las separaciones que nuestra tabla genera entre las filas y columnas utilizaremos el atributo "border", en este caso añadiremos a la etiqueta <table> lo siguiente border="1".

el código seria de la siguiente manera:

<table border="1">.....................</table>

Resultado:

Objeto1.1	Objeto1.2	Objeto1.3
Objeto2.1	Objeto2.2	Objeto2.3
Objeto3.1	Objeto3.2	Objeto3.3

Ahora en el segundo ejemplo, podemos ver, los bordes que se generaron al incluir el atributo border en la etiqueta <table>.

OJO: Recordar siempre a manera practica que las Etiquetas <tr> y </tr> definen las filas de nuestras tablas mientras que las etiquetas <td> y </td> indican las columnas de las tablas, asimismo existe también una etiqueta definida por <th> y </th>, que opera de la misma manera que las etiquetas <td> y </td> , con una única diferencia, que los elementos que esta contiene, se muestra en forma de encabezado de la tabla y se tornan en negrita.