Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
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)
Share on FacebookShare on Twitter

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
0

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

Por favor logueate para comentar

Recomendados

Reglas CSS por defecto para los navegadores

Resumen de generadores de CSS3

16 mayo, 2012
6 plugins imprescindibles para tu web en WordPress

6 plugins imprescindibles para tu web en WordPress

22 junio, 2021
OpenStreetMap

Cómo obtener las coordenadas de latitud y longitud en Google Maps

8 enero, 2019
Trabajando con Camera Raw, mi  estrategia de conversión

Balace de Blancos en cámara RAW

8 marzo, 2011

Tutotial Monsters

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
  • Store
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 .