Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home Webmaster Html

Manual HTML: Cómo crear y hacer tablas en HTML (con ejemplos prácticos)

13 febrero, 2011
en Html
1
Manual HTML: Cómo crear y hacer tablas en HTML (con ejemplos prácticos)

Ejemplos prácticos para realizar ejercicios de tablas con Html. Veremos tablas con bordes, tablas sin bordes, como poner un título a una tabla con la itiqueta caption, como combinar celdas en una tabla, tanto por filas como por columnas, como rellenar es espacio entre celdas, colorear celdas o tablas, … , son muchas las posibilidades que tenemos y no hay nada como prácticar.

  • Tablas sin bordes
    Cómo crear tablas sin bordes.
  • Tabla con encabezados
    Cómo crear encabezados de tabla.
  • Tabla con un título, caption
    Cómo agregar un título a una tabla.
  • Tabla celdas que abarcan más de una fila o columna
    Cómo combinar celdas de una tabla.
  • Etiquetas dentro de una tabla
    Cómo mostrar los elementos dentro de otros elementos.
  • Relleno de celda, cellpadding
    Cómo utilizar cellpadding para crear más espacio en blanco entre el contenido de la celda y sus bordes.
  • Espaciado entre celdas, cellspacing
    Cómo utilizar cellspacing para aumentar la distancia entre las células.
  • El atributo frame en una tabla
    Cómo utilizar el atributo «frame» para el control de los bordes de una tabla

Resumen del Contenido

  • Tablas sin bordes
    • Esta tabla no tiene bordes:
    • Esta otra tabla tampoco tiene bordes:
  • Tabla con encabezados
    • Encabezados en las tablas:
    • Encabezados verticales:
  • Tabla con un título, caption
  • Tabla celdas que abarcan más de una fila o columna
    • Celdas que ocupan dos columnas:
    • Celdas que ocupan dos filas:
  • Etiquetas dentro de una tabla
  • Relleno de celda, cellpadding
    • Sin cellpadding:
    • Con cellpadding:
  • Espaciado entre celdas, cellspacing
    • Sin cellspacing:
    • Con cellspacing:
  • El atributo frame en una tabla
    • Con frame=»border»:
    • Con frame=»box»:
    • Con frame=»void»:
    • Con frame=»above»:
    • Con frame=»below»:
    • Con frame=»hsides»:
    • Con frame=»vsides»:
    • con frame=»lhs»:
    • Con frame=»rhs»:

Tablas sin bordes

Esta tabla no tiene bordes:

100 200 300
400 500 600

<h4>Esta tabla no tiene bordes:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

Esta otra tabla tampoco tiene bordes:

100 200 300
400 500 600

<h4>Esta otra tabla tampoco tiene bordes:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

Tabla con encabezados

Encabezados en las tablas:

Nombre Telefono Telefono
Bill Gates 555 77 854 555 77 855

<h4>Encabezados en las tablas:</h4>
<table border="1">
<tr>
 <th>Nombre</th>
 <th>Telefono</th>
 <th>Telefono</th>
</tr>
<tr>
 <td>Bill Gates</td>
 <td>555 77 854</td>
 <td>555 77 855</td>
</tr>
</table>

Encabezados verticales:

Nombre: Bill Gates
Telefono: 555 77 854
Telefono: 555 77 855

<h4>Encabezados verticales:</h4>
<table border="1">
<tr>
 <th>Nombre:</th>
 <td>Bill Gates</td>
</tr>
<tr>
 <th>Telefono:</th>
 <td>555 77 854</td>
</tr>
<tr>
 <th>Telefono:</th>
 <td>555 77 855</td>
</tr>
</table>

Tabla con un título, caption

Gastos mensuales
Mes gastos
January 100 €
February 50 €

<table border="1">
 <caption>Gastos mensuales</caption>
 <tr>
 <th>Mes</th>
 <th>gastos</th>
 </tr>
 <tr>
 <td>January</td>
 <td>100 €</td>
 </tr>
 <tr>
 <td>February</td>
 <td>50 €</td>
 </tr>
</table>

Tabla celdas que abarcan más de una fila o columna

Celdas que ocupan dos columnas:

Nombre Telefono
Bill Gates 555 77 854 555 77 855

<h4>Celdas que ocupan dos columnas:</h4>
<table border="1">
<tr>
 <th>Nombre</th>
 <th colspan="2">Telefono</th>
</tr>
<tr>
 <td>Bill Gates</td>
 <td>555 77 854</td>
 <td>555 77 855</td>
</tr>
</table>

Celdas que ocupan dos filas:

Nombre: Bill Gates
Telefono: 555 77 854
555 77 855

<h4>Celdas que ocupan dos filas:</h4>
<table border="1">
<tr>
 <th>Nombre:</th>
 <td>Bill Gates</td>
</tr>
<tr>
 <th rowspan="2">Telefono:</th>
 <td>555 77 854</td>
</tr>
<tr>
 <td>555 77 855</td>
</tr>
</table>

Etiquetas dentro de una tabla

Esto es un párrafoEsto es otro párrafo Esta celda contiene una tabla:

A B
C D
Esta celda contiene una lista

  • manzanas
  • platanos
  • naranjas
HOLA

<table border="1">
<tr>
 <td>
 <p>Esto es un párrafo</p>
 <p>Esto es otro párrafo</p>
 </td>
 <td>Esta celda contiene una tabla:
 <table border="1">
 <tr>
 <td>A</td>
 <td>B</td>
 </tr>
 <tr>
 <td>C</td>
 <td>D</td>
 </tr>
 </table>
 </td>
</tr>
<tr>
 <td>Esta celda contiene una lista
 <ul>
 <li>manzanas</li>
 <li>platanos</li>
 <li>naranjas</li>
 </ul>
 </td>
 <td>HOLA</td>
</tr>
</table>

Relleno de celda, cellpadding

Sin cellpadding:

Primera Fila
Segunda Fila

<h4>Sin cellpadding:</h4>
<table border="1">
<tr>
 <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</tr>
</table>

Con cellpadding:

Primera Fila
Segunda Fila

<h4>Con cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
 <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</tr>
</table>

Espaciado entre celdas, cellspacing

Sin cellspacing:

Primera Fila
Segunda Fila

<h4>Sin cellspacing:</h4>
<table border="1">
<tr>
 <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</tr>
</table>

Con cellspacing:

Primera Fila
Segunda Fila

<h4>Con cellspacing:</h4>
<table border="1"
cellspacing="10">
<tr>
 <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</tr>
</table>

El atributo frame en una tabla

Nota: Si no ves los bordes¡marcos alrededor de la tabla es que tu navegador no los soporta, no soporta el atributo «frame»

Con frame=»border»:

Primera Fila
Segunda Fila

<h4>Con frame="border":</h4>
<table frame="border">
<tr>
 <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</tr>
</table>

Con frame=»box»:

Primera Fila
Segunda Fila

<h4>Con frame="box":</h4>
<table frame="box">
<pre><tr>
 <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</tr>
</table></pre>

Con frame=»void»:

Primera Fila
Segunda Fila

<h4>Con frame="void":</h4>
<table frame="void">
<tr>
<td>Primera</td>
 <td>Fila</td>
 </tr>
 <tr>
 <td>Segunda</td>
 <td>Fila</td>
</pre>
</tr>
</table>

Con frame=»above»:

Primera Fila
Segunda Fila

<h4>Con frame="above":</h4>
<table frame="above">
<tr>
 <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</tr>
</table>

Con frame=»below»:

Primera Fila
Segunda Fila

<h4>Con frame="below":</h4>
<table frame="below">
<tr>
<pre> <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</pre>
</tr>
</table>

Con frame=»hsides»:

Primera Fila
Segunda Fila

<h4>Con frame="hsides":</h4>
<table frame="hsides">
<tr>
<pre> <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</pre>
</tr>
</table>

Con frame=»vsides»:

Primera Fila
Segunda Fila

<h4>Con frame="vsides":</h4>
<table frame="vsides">
<tr>
<pre> <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</pre>
</tr>
</table>

con frame=»lhs»:

Primera Fila
Segunda Fila

<h4>con frame="lhs":</h4>
<table frame="lhs">
<tr>
<pre> <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</pre>
</tr>
</table>

Con frame=»rhs»:

Primera Fila
Segunda Fila

<h4>Con frame="rhs":</h4>
<table frame="rhs">
<tr>
<pre> <td>Primera</td>
 <td>Fila</td>
</tr>
<tr>
 <td>Segunda</td>
 <td>Fila</td>
</pre>
</tr>
</table>
Etiquetas: bordeceldascellpaddingcellspacingejemplos htmlencabezadosframemanual htmltablas
ANUNCIO
Post anterior

Tablas en HTML

Próximo Post

¿Qué es Unicode UTF-8?

Otros Posts

Web semantica con HTML5

Enlace para llamar por teléfono HTML5

13 marzo, 2016
1

¿Sabes marcar un número de teléfono desde un enlace? Te decimos como hacerlo con una etiqueta HTML5

Manual HTML: Cómo crear y hacer tablas en HTML (con ejemplos prácticos)

Manual HTML: Cómo insertar espacios en blanco y saltos de línea

20 febrero, 2016
1

Continuamos con nuestro manual de HTML, en esta ocasión veremos los espacios en blanco y los saltos de linea. en su día ya vimos como dar formato básico a un texto con HTML, hoy terminaremos...

Por favor logueate para comentar

Recomendados

Como acceder a la administración de WordPress

Gestión de Eventos con WordPress

14 noviembre, 2016
Auditoría WPO

Auditoría WPO

11 enero, 2021
Tipografía Happy Fox

Tipografía Happy Fox

28 febrero, 2014
Postcron: Automatiza las publicaciones en tus redes sociales

Postcron: Automatiza las publicaciones en tus redes sociales

23 febrero, 2016

Tutotial Monstersse

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .