MARCAS DE TABLA

NCD Guía de Diseño en HTML v6.0

+ Marca Básica de Tabla

<table>...</table> - tabla
<tr> - definición de filas
<th> - encabezado
<td> - celda de datos

ComidaBebidaDulce
ABC 
<table border>
<tr><th>Comida</th>
    <th>Bebida</th><th>Dulce</th>
<tr><td>A</td>
    <td>B</td><td>C</td>	
</table>
ComidaBebidaDulce
ABC 
<table>
<tr><th>Comida</th>
    <th>Bebida</th><th>Dulce</th>
<tr><td>A</td>
    <td>B</td><td>C</td>	
</table>

+ Expansión de Tabla

Expansión de Columna <th colspan=#>

Menú de Mañana
Comida Bebida Dulce
ABC 
<table border>
<tr><th colspan=3> Menú de Mañana</th>
<tr><th>Comida</th>
    <th>Bebida</th><th>Dulce</th>
<tr><td>A</td>
    <td>B</td><td>C</td>
</table>

Row Span <th rowspan=#>

Menú de Mañana Comida A
Bebida B
Dulce C
 
<table border>
<tr><th rowspan=3> Menú de Mañana</th>
    <th>Comida</th> <td>A</td></tr>
<tr><th>Bebida</th> <td>B</td></tr>
<tr><th>Dulce</th> <td>C</td></tr>
</table>

+ Tamaño de Tabla

<table border=#>

ComidaBebidaDulce
ABC 
<table border=10>
<tr><th>Comida</th>
    <th>Bebida</th><th>Dulce</th>
<tr><td>A</td>
    <td>B</td><td>C</td>	
</table>







<table width=# height=#>










ComidaBebidaDulce

ABC





<table border width=170 height=100>
<tr><th>Comida</th>
    <th>Bebida</th><th>Dulce</th>
<tr><td>A</td>
    <td>B</td><td>C</td>	
</table>













<table cellspacing=#>










ComidaBebidaDulce

ABC





<table border cellspacing=10>
<tr><th>Comida</th>
    <th>Bebida</th><th>Dulce</th>
<tr><td>A</td>
    <td>B</td><td>C</td>	
</table>













<table cellpadding=#>










ComidaBebidaDulce

ABC





<table border cellpadding=10>
<tr><th>Comida</th>
    <th>Bebida</th><th>Dulce</th>
<tr><td>A</td>
    <td>B</td><td>C</td>	
</table>

















+ Alineación del Texto en la Tabla






<tr align=#> ,
<th align=#>,
<td align=#> 

     #=left, center, right










ComidaBebidaDulce

A
	B
	C





<table border width=160>
<tr><th>Comida</th>
    <th>Bebida</th><th>Dulce</th>
<tr>
    <td align=left>A</td>
    <td align=center>B</td>
    <td align=right>C</td>	
</table>















<tr valign=#>, <th valign=#>, <td valign=#> 

     #=top, middle, bottom, baseline











	ComidaBebida
	DulceOtros

A
	B
	C
	D





<table border height=100>
<tr>
    <th>Comida</th><th>Bebida</th>
    <th>Dulce</th><th>Otros</th>
<tr>
    <td valign=top>A</td>
    <td valign=middle>B</td>
    <td valign=bottom>C</td>
    <td valign=baseline>D</td>
</table>














Sin Corte

<tr nowrap>, <th nowrap>, <td nowrap>


El corte de texto en la tabla no ocurre.












+ Tabla Flotante






<table align=left> 



<table align="left" border>
<tr><th>Comida</th><th>Bebida</th><th>Dulce</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Mis favoritos...<br>
galletas, chocolates y más.









ComidaBebidaDulce

ABC


Mis favoritos...

galletas, chocolates y más.












<table align=right> 





ComidaBebidaDulce

ABC


Mis favoritos...

galletas, chocolates y más.












<table vspace=# hspace=#> #=cantidad de espacio



<table align="left" border vspace=20 hspace=30>
<tr><th>Comida</th><th>Bebida</th><th>Dulce</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Mis favoritos...<br>
galletas, chocolates y más.









ComidaBebidaDulce

ABC


Mis favoritos...

galletas, chocolates y más.














+ Table Caption





<caption align=#> ... </caption> 
#=left, center, right








Almuerzo

ComidaBebidaDulce

ABC





<table border>
<caption align=right>Almuerzo</caption>
<tr><th>Comida</th><th>Bebida</th><th>Dulce</th>
<tr><td>A</td><td>B</td><td>C</td>	
</table>














<caption align=#> ... </caption> 
#=top, bottom








Almuerzo

ComidaBebidaDulce

ABC





<table border>
<caption align=bottom>Almuerzo</caption>
<tr><th>Comida</th><th>Bebida</th><th>Dulce</th>
<tr><td>A</td><td>B</td><td>C</td>	
</table>















<caption valign=#> ... </caption> #=top, bottom








Almuerzo

ComidaBebidaDulce

ABC





<table border>
<caption valign=bottom>Almuerzo</caption>
<tr><th>Comida</th><th>Bebida</th><th>Dulce</th>
<tr><td>A</td><td>B</td><td>C</td>	
</table>


















+ Color de Tabla







Color de Fondo para Celdas e Imagen 

<th bgcolor=#> 


<th background="URL">


#= rrggbb Número Hexadecimal, o Nombre:

     
Negro,
Verde Aceituna,
Verde Pálido,
Rojo,
Azul,
Marrón,
Azul Marino,
Gris,
Verde Lima,
        
     
Fucsia,
Blanco,
Verde,
Púrpura,
Plata,
Amarillo,
Aguamarina













Comida
Bebida
Dulce

AB





<table border>
<tr><th bgcolor=ffaa00>Comida</th>
  <th bgcolor=Red>Bebida</th>
  <th rowspan=2 background="image.gif">Dulce</th>
<tr bgcolor=white><td>A</td><td>B</td>
</table>













Color de Borde

<table bordercolor=#>









ComidaBebidaDulce

ABC





<table cellspacing=5 border=5 bodercolor=#ffaa00>
<tr><th>Comida</th><th>Bebida</th><th>Dulce</th>
<tr><td>A</td><td>B</td><td>C</td>	
</table>













Color del Borde Claro y Oscuro

<table bordercolorlight=#>

<table bordercolordark=#>











ComidaBebidaDulce

ABC





<table cellspacing=5 border=5 
     bordercolorlight=White bordercolordark=Maroon>
<tr><th>Comida</th><th>Bebida</th><th>Dulce</th>
<tr><td>A</td><td>B</td><td>C</td>	
</table>
















+ Grupo de Filas





Grupo de Filas

<thead> ... </thead> - Encabezado de Tabla

<tbody> ... </tbody> - Contenido de la Tabla

<tfoot> ... </tfoot> - Pie de Tabla





Alineación de las Filas

<thead align=#1 valign=#2> ... </thead>

#1=left, center, right

#2=top, middle, bottom, baseline












ComidaBebidaDulce




ABC

DEF







<table border>
<thead>
  <tr><th>Comida</th><th>Bebida</th><th>Dulce</th>
</thead>
<tbody align="right">
  <tr><td>A</td><td>B</td><td>C</td>
  <tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>














+ Grupo de Columnas





Grupo de Columnas

<colgroup> ... </colgroup>


<colgroup span=#> #número de columnas afectadas

<colgroup align=#> #=left, right, center

<colgroup valign=#> #=top, middle, bottom, baseline

<colgroup width=#> #=ancho de una columna











     
          
ComidaBebidaDulce
     

     
          
ABC
          
DEF
     






<table border>
<colgroup span=2 align=center width=50>
</colgroup>
<colgroup align=right width=100>
</colgroup>
<thead>
  <tr><th>Comida</th><th>Bebida</th><th>Dulce</th>
</thead>
<tbody>
  <tr><td>A</td><td>B</td><td>C</td>
  <tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>












Grupo de Columnas Subdivididas

<col>



<col span=#> #número de columnas afectadas

<col align=#> #=left, right, center

<col valign=#> #=top, middle, bottom, baseline

<col width=#> #=ancho de una columna










     
     

     
          
ComidaBebidaDulce
     

     
          
ABC
          
DEF
     






<table border>
<colgroup align=center width=50>
  <col span=2 style="color:red">
  <col width=100>
</colgroup>
<thead>
  <tr><th>Comida</th><th>Bebida</th><th>Dulce</th>
</thead>
<tbody>
  <tr><td>A</td><td>B</td><td>C</td>
  <tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>














+ Visualizar Marcos






Los Cuatro lados del Marco<table frame=box>









     
ComidaBebidaDulce



     
ABC
     
DEF







<table border frame=box>
<thead>
     <tr><th>Comida</th><th>Bebida</th><th>Dulce</th>
</thead>
<tbody>
     <tr><td>A</td><td>B</td><td>C</td>
     <tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>















Lado Superior del Marco <table frame=above>





     
ComidaBebidaDulce



     
ABC
     
DEF












Lado Inferior del Marco<table frame=below>





     
ComidaBebidaDulce



     
ABC
     
DEF












Lado Superior e Inferior del Marco <table frame=hsides>





     
ComidaBebidaDulce



     
ABC
     
DEF












Lado Izquierdo y Derecho del Marco <table frame=vsides>





     
ComidaBebidaDulce



     
ABC
     
DEF











Lado Izquierdo del Marco <table frame=lhs>





     
ComidaBebidaDulce



     
ABC
     
DEF












Lado Derecho del Marco <table frame=rhs>





     
ComidaBebidaDulce



     
ABC
     
DEF












Sin Marco <table frame=void>





     
ComidaBebidaDulce



     
ABC
     
DEF
















+ Visualizar Reglas






Todas las Reglas <table rules=all>











     
          
ComidaBebidaDulce
     

     
          
ABC
          
DEF
     

     
          
Total $-00.0
     






<table border rules=all>
<colgroup align=center span=2></colgroup>
<colgroup align=right></colgroup>
<thead>
  <tr><th>Comida</th><th>Bebida</th><th>Dulce</th>
</thead>
<tbody>
  <tr><td>A</td><td>B</td><td>C</td>
  <tr><td>D</td><td>E</td><td>F</td>
</tbody>
<tbody>
  <tr><td rowspan=3 align=right>Total $-00.0</td>
</tbody>
</table>













Reglas entre Grupos <table rules=groups>







     
          
ComidaBebidaDulce
     

     
          
ABC
          
DEF
     

     
          
Total $-00.0
     











Reglas entre Todas las Filas <table rules=rows>







     
          
ComidaBebidaDulce
     

     
          
ABC
          
DEF
     

     
          
Total $-00.0
     











Reglas entre Todas las Columnas <table rules=cols>







     
          
ComidaBebidaDulce
     

     
          
ABC
          
DEF
     

     
          
Total $-00.0
     











Ninguna <table rules=none>







     
          
ComidaBebidaDulce
     

     
          
ABC
          
DEF
     

     
          
Total $-00.0
     

















Guía de Diseño en HTML
|
Guía de Hojas de Estilo





Documento |
Página |
Fuente (Letra) |
Texto |
Imagen |
Formatos |
Tabla |
Marco |
Objetos |
XML



LISTA DE MARCAS HTML |
Edición PDF








BACK TO NCD HOME


Network Communication Design -
http://www.ncdesign.org/





Copyright & Publishing 1994-2002
Network Communication Design
msg@ncdesign.org




Derechos Reservados 1995-2006
por: Carlos J. Naranjo
e-mail: <webmaster <ARROBA> orange-tech <PUNTO> net>