MARCAS DE TABLA

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

+ Marcas Básicas 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 Celdas

Expansión de Columna <th colspan=#>

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

Expansión de Fila <th rowspan=#>

Menú Mañanero Comida A
Bebida B
Dulce C
 
<table border>
<tr><th rowspan=3> Menú Mañanero</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=#>
borde de tabla

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=#>

anchura y altura










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=#>

espaciado entre celdas










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=#>

grosor interno de celda










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
	DulceOther

A
	B
	C
	D





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


















+ 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=#> #=space value 



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














+ Encabezamiento de Tabla






<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 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>


















+ Colores en la Tabla







Color de fondo para celdas e imagen. 

<th bgcolor=#> 

<th background="URL">


#= #rrggbb Número Hexadecimal o Nombre:

     
Negro,
Verde Oliva,
Verde Pálido,
Rojo,
Azul,
Café,
Azul Oscuro,
Gris,
Lima,
	
     
Fucsia,
Blanco,
Verde,
Púrpura,
Plateado,
Amarillo,
Azul Claro













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 Claro y Oscuro del Borde

<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>

















+ Tabla Estructurada






Groups of Rows

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

<tbody> ... </tbody> - Cuerpo de Tabla 

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











ComidaBebidaDulce




ABC

DEF







<table border>
<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

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












     
          
ComidaBebidaDulce
     

     
          
ABC
          
DEF
     






<table border width=160>
<colgroup align=left>
<colgroup align=center>
<colgroup align=right>
<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>













Propiedades de las Columnas

<col span=#> #=cantidad de columnas afectadas

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










     

     
          
ComidaBebidaDulce
     

     
          
ABC
          
DEF
     






<table border width=160>
<colgroup>
  <col align=center span=2>
<colgroup align=right>
<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>














+ Visualización de Marcos 






Para 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>













Parte Superior del Marco <table frame=above>





     
ComidaBebidaDulce



     
ABC
     
DEF












Parte Inferior del Marco <table frame=below>





     
ComidaBebidaDulce



     
ABC
     
DEF












Parte 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














+ Visualización de Reglas 






Todas las Reglas <table rules=all>










     

     
          
ComidaBebidaDulce
     

     
          
ABC
          
DEF
     

     
          
Total $-00.0
     






<table border rules=all>
<colgroup><col align=center span=2>
<colgroup align=right>
<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 las Filas <table rules=rows>






     

     
          
ComidaBebidaDulce
     

     
          
ABC
          
DEF
     

     
          
Total $-00.0
     











Reglas entre 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
|
Style Sheet Guide





Página |
Letra |
Texto |
Imagen |
Formato |
Tabla |
Marco |
Inserciones








BACK TO NCD HOME


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





Derechos y Publicación 1994-1997 Yuriko Ienaga 
yuri@ncdesign.org

Traducción y Adaptación al Español por Carlos Javier Naranjo
cnaranjo@univalle.edu.co