No has iniciado sesión
Conectar al sistema | Registrar usuario
Cursos Cuestionarios Curso de HTML Capítulo
 
22 votos
Tablas
 
Las tablas són una buena herramienta para organizar los datos en una página web, ademas nos permiten estructurar las paginas de nuestro sitio separando la cabecera, el menú, el contenido...

La creación de tablas a partir de código es compleja por lo que si queremos crear una tabla rápidamente podemos usar programas como Frontpage o Dreamwaver, pero es necesario saber codificarlas a sí que vamos allá.

ArribaTabla de contenido

ArribaCreación de la tabla

Para que el navegador interprete que vamos a realizar una tabla, deberemos usar las etiquetas table, entre cuyas etiquetas pondremos la estructura y el contenido de la tabla como se indica en el ejemplo:
 
000 
001 
002 
<table>
<!--  Contenido de la tabla -->
</table>
 
Para definir la estructura de la tabla primero definiremos las filas con tr y en el interior de cada fila pondremos las columnas con td:
 
000 
001 
002 
003 
004 
005 
006 
007 
008 
009 
<table>
<tr><!--  Fila 1 -->
<td>Fila 1 columna 1</td>
<td>Fila 1 columna 2</td>
</tr>
<tr><!--  Fila 2 -->
<td>Fila 2 columna 1</td>
<td>Fila 2 columna 2</td>
</tr>
</table>
 

ArribaAncho de filas y columnas

Ahora vamos a ver como definir el ancho de una tabla o columna, para ello usaremos el atributo width tanto en la etiqueta table para modificar el ancho de toda la tabla, como sobre la etiqueta td para cambiar el ancho de una columna:
 
000 
001 
002 
003 
004 
005 
006 
007 
008 
009 
<table width="100%">
<tr><!--  Fila 1 -->
<td width="300">Fila 1 columna 1</td>
<td>Fila 1 columna 2</td>
</tr>
<tr><!--  Fila 2 -->
<td>Fila 2 columna 1</td>
<td>Fila 2 columna 2</td>
</tr>
</table>
 

ArribaBordes y margenes

Esta es otra posibilidad interesante de las tablas, nos permiten definir los bordes para personalizar su aspecto, asi podemos usar el atributo border para indicar el grosor del borde, cellpadding para indicar el reborde de las celdas y cellspacing para la separación entre las mismas:
 
000 
001 
002 
003 
004 
005 
006 
007 
008 
009 
<table border="0" cellpadding="10" cellspacing="5">
<tr><!--  Fila 1 -->
<td>Fila 1 columna 1</td>
<td>Fila 1 columna 2</td>
</tr>
<tr><!--  Fila 2 -->
<td>Fila 2 columna 1</td>
<td>Fila 2 columna 2</td>
</tr>
</table>
 
Ademas tambien podemos cambiar el color del borde usando bordercolor
 

Páginas: 1 2

 
Anterior y siguiente
Imágenes en HTML
 
¿? Resolver dudas
Si tienes problemas o dudas con el contenido del artículo no dudes a preguntar en los foros de HTML de Programación Web indicando el artículo al que te refieres.
 
Comentarios
Este artículo no ha sido comentado hasta el momento
 
Redes Sociales
Programación Webon

Compartir en Google Plus