Está en la página 1de 15

CURSO DE HTML CURSO DE CSS BLOG COMPARATIVA D E HOS T I NG S

Haz una web

CURSO DE HT ML

Tablas HTML

Estás aquí: Inicio / Curso de HTML / Tablas HTML

Una tabla en html viene marcada por las etiquetas <table> </table>. Entre esas dos etiquetas de niremos la tabla, las celdas que queremos, las columnas y las características de cada uno de estos

parámetros. Pero vamos a empezar explicándote la etiqueta <table>.

Utilizamos cookies para mejorar la experiencia de navegación. Acepto Leer más


Ya hemos dicho que esta etiqueta nos indica que empieza una tabla, pero… ¿podemos prede nir  características de esa tabla? Por supuesto que sí. Una tabla admite muchos parámetros. Nosotros vamos a
explicarte los principales.

La tabla HTML: <table>


Como ya ocurre con la etiqueta body, a una tabla también lo podemos de nir el fondo de la misma. Esto lo podemos conseguir con el parámetro “bgcolor”, que nos pondrá un color de fondo,  o

“background” para poner una imagen de fondo. Recuerda que si la imagen es más pequeña que la tabla, ésta se repetirá tanto a lo ancho como a lo largo.

Otro aspecto que podemos de nir de la tabla es el borde. Esto lo haremos con el parámetro “border”. Como en todas los parámetros que ya hemos visto escribiremos: border= “x” siendo la x un número. Ese

número indicará el grosor del borde. Si no ponemos borde o lo escribimos “0”, la tabla no mostrará borde ninguno. Por supuesto, también podemos darle color al borde, escribiendo la etiqueta “bordercolor”

e indicando el color que queramos para nuestro borde.

El parámetro “width” indircará la anchura de la tabla. Esta anchura la podemos poner en píxeles (width= “300”) o con porcentaje (width= “100%”).

Dos parámetros más son cellspacing (que de ne el espacio entre las celdas de la tabla) y cellpadding  (que le marca a la tabla el espacio que debe dejar alrededor del texto dentro de una celda).

Como ejemplo, escribiremos el hipotético supuesto de querer una tabla que sea ancha al 100%, con un borde azul de un píxel de grosor y con un cellpadding de 10 y con un cellspacing de 10. El código
quedaría de la siguiente forma.

<table width="100%" border="1" bordercolor="#0000FF" cellspacing="10" cellpadding="10"></table>

Utilizamos cookies para mejorar la experiencia de navegación. Acepto Leer más


Una vez explicadas las tablas, vamos a pasar a explicarte las partes fundamentales de las mismas.

Las filas: <tr>


Como hemos visto en el encabezado las las se escriben gracias a las etiquetas <tr> con su correspondiente cierre </tr>. El contenido de las columnas que están dentro de la la lo podemos alínear tanto
horizontal como verticalmente.

Para alinearlo verticalmente utilizaremos el atributo “valign” para poder alinearlo arriba de la celda (“top”), en el centro (“middle”) o debajo (“bottom”).

Para alinearlo horizontalmente utilizaremos el atributo “align”. Con este atributo podremos alinear el contenido de las celdas en el centro (“center”), a la izquierda (“left”), a la derecha (“right”) o justi cado

(“justify”).

Por supuesto a las las también les podemos de nir el color de fondo (“bgcolor”) y el color del borde (“bordercolor”).

Las celdas <td>


Las celdas que van dentro de cada la las tenemos que escribirlas con la etiqueta <td> y su correspondiente cierre </td>.

Al igual que en las las, en las celdas podemos de nir 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”.

Por ejemplo, para agrupar en una celda 2 columnas tenemos que escribir: <td colspan=”2″></td>. Y para agrupar dos las, la indicación sería la siguiente: <td rowspan= “2”></td>.

Las celdas <th>


Las celdas escritas con la etiqueta <th> y su correspondiente cierre, admiten los mismos atributos que las etiquetas <td> y funcionan de la misma forma, salvo que el contenido que esté dentro de una

etiqueta <th> está considerado como el encabezado de la tabla, por lo que se creará en negrita y centrado sin que nosotros se lo indiquemos.

Utilizamos cookies para mejorar la experiencia de navegación. Acepto Leer más


A continuación vamos a ponerte un pequeño ejemplo de una tabla que combina todas las cosas que hemos ido viendo en el artículo. Estúdiate primero el código, visualiza cómo quedaría la tabla y luego
mírala:

<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">

<tr>

<th>Encabezado 1</th>

<th>Encabezado 2</th>

<th>Encabezado 3</th>

</tr>

<tr>

<td rowspan="2" valign="middle" align="left">Este texto está alineado al centro

verticalmente y a la izquierda horizontalmente</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td colspan="2">&nbsp;</td>

Utilizamos cookies para mejorar la experiencia de navegación. Acepto Leer más


</tr>
</table>

Encabezado 1 Encabezado 2 Encabezado 3

Este texto está alineado al centro

verticalmente y a la izquierda horizontalmente

nowrap
nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligará al navegador a no romper esa línea, o sea, a no hacer ningún salto de línea. Con este atributo en la celda, el navegador

no respeta el ancho prede nido de la tabla, si es que lo hubiera, y respeta el ancho de la frase, ya que no puede partirla.

Por tanto, si la frase es más larga que el ancho de nido de la tabla, ésta se estirará todo lo necesario para albergar la frase sin saltos de línea. El siguiente código nos mostrará como escribir este atributo en

la etiqueta de la celda:

Utilizamos cookies para mejorar la experiencia de navegación. Acepto Leer más


<table width="400" border="1" cellpadding="10" cellspacing="0" bordercolor="#000000">

<tr>

<td nowrap>Aunque este texto sea m&aacute;s ancho que los 400 p&iacute;xeles

de la tabla, &eacute;sta no puede dividir mediante saltos de l&iacute;nea

el contenido de la misma, por lo que se estira para albergar toda la frase.</td>

</tr>

</table>

Y a continuación podemos ver el efecto del atributo:

Aunque este texto sea más ancho que los 400 píxeles

de la tabla, ésta no puede dividir mediante saltos de línea

el contenido de la misma, por lo que se estira para albergar toda la frase.

Etiqueta “caption”
Esta etiqueta sirve para poder ponerle un título o encabezado a la tabla. Puedes poder el encabezado arriba o abajo, dónde tu pre eras, mediante la etiqueta “align”: “align=top” para ponerlo arriba y
“align=bottom” para ponerlo abajo. En el siguiente ejemplo nosotros lo hemos puesto abajo.

Utilizamos cookies para mejorar la experiencia de navegación. Acepto Leer más


<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">

<caption align="bottom">Encabezado de la tabla.</caption>

<tr>

<td align="center">Tablita de ejmplo para la etiqueta "caption"</td>

</tr>

</table>

Tablita de ejmplo para la etiqueta "caption"

Encabezado de la tabla.

Utilizamos cookies para mejorar la experiencia de navegación. Acepto Leer más


« Caracteres especiales Listas HTML »

Comments

Darckanonymous dice
01/06/2017 AT 11:10 PM

= Table row = la de tabla


= Table Header = encabezado de tabla
= table Division = division de tabla

Responder

Jorge dice
24/01/2020 AT 6:29 PM

Gracias por tu comentario. Estaba en duda que palabras formaban el acrónimo.

Responder

Daniel Perez dice


14/11/2017 AT 6:45 PM Utilizamos cookies para mejorar la experiencia de navegación. Acepto Leer más
Muy bien explicado, y fácil de seguir para practicar. Gracias!
Un saludo desde Mendoza, Argentina.

Responder

Aby dice
10/02/2018 AT 7:39 AM

Se entiende muy bien, gracias…

Responder

fabricio morales dice


15/03/2018 AT 3:21 PM

gracias por tu vasto conocimiento amigo, me ayudaste a superar como persona, espero tengas un buen dia, gracias.

Responder

Luis Miras dice


11/06/2018 AT 1:54 AM

Excelente pagina para aprender HTML. Bien explicado, sencillo y con un diseño hermoso.

Saludos de Mendoza, Argentina.


Utilizamos cookies para mejorar la experiencia de navegación. Acepto Leer más
Luis

Responder

chuvissss dice
13/06/2018 AT 3:39 PM

Muy bien muchachito, muy bien.

Responder

MARIO MENESES dice


09/11/2018 AT 1:48 AM

Muy buena explicación, gracias.

Responder

Francisco Campos dice


13/04/2019 AT 11:49 PM

La verdad es que se entiende perfectamente con lo que explicas justo debajo.

Muchas gracias por la explicación. Sencilla y directa.

Responder Utilizamos cookies para mejorar la experiencia de navegación. Acepto Leer más
Guillermo dice
22/04/2019 AT 3:19 PM

Explicación muy sencilla. Muy bueno. Saludos desde Córdoba, Argentina.

Responder

marc dice
13/05/2019 AT 9:53 AM

muy facil de entender

Responder

Ramon Maestro dice


09/04/2020 AT 8:06 PM

Muy bien explicado para personas jubiladas que se sienten útiles como yo 78 años

Responder

Deja un comentario
Utilizamos cookies para mejorar la experiencia de navegación. Acepto Leer más
Comentario

Nombre *

Correo electrónico *

Web

Guardar mi nombre, correo electrónico y sitio web en este navegador para la próxima vez que haga un comentario.

Publicar el comentario

CONTENI DOS DE L C UR SO

1. Introducción al HTML

2. Estructura básica de una página web

3. Meta tags básicos

4. Etiqueta body

5. Formateo de texto
Utilizamos cookies para mejorar la experiencia de navegación. Acepto Leer más
6. Párrafos y saltos de línea
7. Comentarios en HTML

8. Separadores: Etiqueta hr

9. Encabezados

10. Caracteres especiales

11. Tablas HTML

12. Listas HTML

13. Imágenes HTML

14. Mapas de imágenes

15. Enlaces HTML

16. Formularios I: Formularios HTML

17. Formularios II: campos de texto

18. Formularios III: listas de opciones

19. Formularios IV: botones submit y reset

20. Formularios V: hidden, image y file

21. Formularios VI: ejemplo de formulario

22. Frames

23. Iframe

24. Marquee

25. HTML 5

26. Fieldset y legend

27. Blockquote, span, nobr y center

28. Idioma

29. Javascript y HTML

Utilizamos cookies para mejorar la experiencia de navegación. Acepto Leer más


Comparativa hostings
Sered

Webempresa

Raiola Networks

SiteGround

 
Hostgator

JustHost

iPage

Factoría Digital

 
1&1

Arsys

Dinahosting

Servage

 
Hostinger

Bluehost

Profesional Hosting

Utilizamos cookies para mejorar la experiencia de navegación. Acepto Leer más


Copyright © 2020 · Hazunaweb.com · Contactar · Política de privacidad · Aviso legal

Utilizamos cookies para mejorar la experiencia de navegación. Acepto Leer más

También podría gustarte