Using Tables To Format Your Web Page

www.etos-services.
com
English to Spanish Translation Sample by Etos: www.etos-services.com
Using Tables to Format Your Web Page Utilizando Tablas para Formatear Su Página
By Shelley Lowery Web
Por Shelley Lowery
Designing a professional looking web site
involves much more than simply displaying text El diseñar un sitio Web con una apariencia
between your body tags. In order to organize profesional involucra mucho más que
your page, you must use tables. simplemente desplegar texto entre las etiquetas
<body>. Para organizar su página, usted tiene
A table is an HTML element, also referred to as que utilizar tablas.
a "tag," and is used to display your web page
content in an organized fashion. Una tabla es un elemento HTML, también se le
hace referencia como una “tag” (etiqueta), y es
Your page can be set up in columns and rows, utilizada para desplegar el contenido de su
you can display your table cells with or without a página Web en una forma organizada.
border, and you can even have a color or image
patterned background. Su página puede ser estructurada en columnas
y renglones, usted puede desplegar las celdas
Tables can be used in an unlimited number of de su tabla con o sin un borde, y puede incluso
ways including: tener un color o imagen que sirva de patrón
para el fondo.
• Organize your text and images
• Display your text in a newspaper format Las tablas pueden ser utilizadas en un número
ilimitado de maneras, incluyendo:
• Add color and image backgrounds to
text areas
• Display charts • Organizar su texto e imágenes
• Desplegar su texto en un formato de
periódico
If you've never designed a web page, your first
step will be to learn some basic HTML. You can • Agregar color e imágenes para fondo a
find a beginner tutorial at NCSA Beginner's las áreas de texto
Guide to HTML: • Desplegar gráficas
www.ncsa.uiuc.edu/General/Internet/WWW/
HTMLPrimer.html Si usted nunca ha diseñado una página Web, su
primer paso será aprender algo de HTML
When you begin designing your web page, you básico. Usted puede encontrar un curso
may want to consider placing all of your page personal para principiantes en la Guía para
content within a table. This will enable you to Principiantes al HTML de NCSA:
adjust your table's cellspacing to keep your text www.ncsa.uiuc.edu/General/Internet/WWW/
from displaying too close to the left border of HTMLPrimer.html
your page. The higher the cellspacing value, the
further away from the left border your text will be Cuando comienza usted a diseñar su página
displayed. In addition, tables will enable you to Web, podría considerar colocar todo el
display your page content in rows and columns contenido de su página dentro de una tabla.
rather than one big block of text. Esto le permitirá ajustar el espaciado de las
celdas para evitar que su texto se despliegue
Tables are created with the <TABLE></TABLE> demasiado junto al borde izquierdo de su
tags. The <TABLE> tag begins the table code página. Mientras mayor sea el valor de
and the </TABLE> tag ends the table. espaciado de celda, más apartado del borde
www.etos-services.com
izquierdo será desplegado su texto. Además, las
In addition to the table tags, you must also tablas le permitirán desplegar el contenido de su
specify the number of rows and columns your página en renglones y columnas en lugar de un
table will contain. To do this, you must use the gran y único bloque de texto.
<TR> tag, which specifies the beginning of a
table row and the <TD> tag, which will display Las tablas son creadas con las etiquetas
your table data. The <TD> tag should be placed <TABLE></TABLE>. La etiqueta <TABLE>
in front of any information you would like to be comienza el código de la tabla y la etiqueta
displayed within a cell. The </TD> tag will close </TABLE> termina la tabla.
the cell. All of these tags will be placed between
the <TABLE> and </TABLE> tags. Además de las etiquetas de tabla, usted tiene
que especificar el número de renglones y
Basic Table Structure: columnas que contendrá su tabla. Para hacer
esto, tiene que utilizar la etiqueta <TR>, que
<TABLE BORDER> especifica el comienzo de un renglón de la tabla
<TR> y la etiqueta <TD>, que desplegará los datos de
<TD>Content</TD>
</TR> su tabla. La etiqueta <TD> debe ser colocada
</TABLE> en frente de la información que usted desea que
sea desplegada dentro de una celda. La
If you're just starting out, you may want to use a etiqueta </TD> cerrará la celda. Todas estas
simple table format that will display your etiquetas serán colocadas entre las etiquetas
navigational links on the left or right hand side of <TABLE> y </TABLE>.
the page, and your text and other information on
the rest of the page -- in two columns. Estructura Básica de la Tabla:
When working with tables, make sure you create <TABLE BORDER>
<TR>
your tables with a border. This will enable you to <TD>Content</TD>
see exactly where your borders are so that you </TR>
can make sure everything is displaying properly. </TABLE>
Once your page is complete, you can remove
the border. Si usted está apenas empezando, podría querer
utilizar un formato sencillo de tabla que
The following table code will create the basic desplegará sus enlaces de navegación en el
layout for a web page with two columns. The lado izquierdo o derecho de la página, y su texto
first column will span 20% of the viewers' u otra información en el resto de la página – en
screen. The second will span 80% -- for a total dos columnas.
of 100%.
Cuando esté trabajando con tablas, asegúrese
<TABLE BORDER CELLSPACING="10" de crear sus tablas con un borde. Esto le
CELLPADDING="10" WIDTH="100%"> permitirá ver exactamente donde están sus
<TR VALIGN="Top">
<TD WIDTH="20%"> </TD> bordes, para que pueda asegurarse de que todo
<TD WIDTH="80%"> </TD> se esté desplegando correctamente. Una vez
</TR> que su página esté completa, puede usted
</TABLE> remover el borde.
Notice the table width is set to 100%? This width El siguiente código de la tabla creará el trazado
will display the table across 100% of the básico para una página Web con dos columnas.
viewers' screen. The cellspacing and La primera columna se expandirá al 20% de la
cellpadding are set to 10 so that the text won't pantalla del observador. La segunda se
display right up against the left edge of the
page, and there will be some space between the
cells. expandirá al 80% -- para un total del 100%.
Once you have the basic page layout finished, <TABLE BORDER CELLSPACING="10"
you can begin adding your content. Your first CELLPADDING="10" WIDTH="100%">
<TR VALIGN="Top">
step will be to delete the placeholder . These <TD WIDTH="20%"> </TD>
placeholders were placed between the <TD> <TD WIDTH="80%"> </TD>
and </TD> tags to enable the borders to display </TR>
-- empty table cells do not display within a web </TABLE>
browser.
¿Ha notado que el ancho de la tabla se ha
Your logo and navigational links should be definido al 100%? Este ancho desplegará la
displayed within the left column, which is the tabla a lo largo del 100% de la pantalla del
smaller of the two columns. All of your page observador. El cellspacing (espacio dentro de la
content will be placed within the other column. celda y su contenido) y el cellpadding (espacio
entre las celdas) se han definido a 10, de modo
Keep in mind, the top left corner of your web que el texto no se desplegará justo contra el
page will not only be used to display your logo, margen izquierdo de la página, y habrá algo de
but should also contain your most important espacio entre las celdas.
keyword phrase. Make sure you include an
image alt tag displaying your keyword phrase Una vez que tenga terminado el diseño básico
within your image code. de la página, puede comenzar a agregar su
contenido. Su primer paso será borrar el
To spice up your page, you can create additional placeholder (marcador de espacio) . Estos
tables with color backgrounds and borders to marcadores de espacio fueron colocados entre
divide your content into sections. las etiquetas <TD> y </TD> para permitir que
los bordes se desplieguen – las celdas vacías
All of your text and additional tables will be de la tabla no se despliegan dentro de un
placed between <TD WIDTH="80%"> </TD>. navegador Web.
Simply replace the text with your content and
table codes. Su logotipo y enlaces de navegación, deben ser
desplegados dentro de la columna izquierda,
For example, the following table can be used to que es la más pequeña de las dos columnas.
display an introduction to your product, article, Todo el contenido de su página será colocado
review or whatever you'd like. dentro de la otra columna.
Keep in mind, you don't want to place all of your Tenga presente, que la esquina superior
information on your main page. The key is to izquierda de su página Web no sólo desplegará
include highlights of your site on your main page su logotipo, sino también debe contener su
with a link to further information. frase clave más importante. Asegúrese de
incluir una etiqueta alt que despliegue su frase
The example link at the bottom of the table can clave dentro del código de la etiqueta <image>.
be used to direct your visitors to further
information. You can use the colors of your Para darle el toque a su página, puede usted
choice and adjust the width to suit your needs. crear tablas adicionales con fondos de color y
bordes que dividan su contenido en secciones.
<TABLE BORDER="0" CELLSPACING="0"
CELLPADDING="2" ALIGN="Center" WIDTH=80%> Todo su texto y tablas adicionales serán
<TR> colocadas dentro de <TD
<TD BGCOLOR="#919C9C"><P ALIGN=Center>
<FONT face="Verdana,Helvetica" SIZE="2"
WIDTH="80%"> </TD>. Simplemente reemplace
COLOR="#FFFFFF"><B>Your Table el texto con su contenido y los códigos de la
Heading</B></FONT></TD> tabla.
</TR>
<TR>
Por ejemplo, la siguiente tabla puede ser
<TD BGCOLOR="#000000" HEIGHT="2"></TD>
</TR> utilizada para desplegar una introducción a su
<TR> producto, artículo, revisión o para lo que a usted
<TD BGCOLOR="#CCCCCC"><P ALIGN=Left>your text le guste.
here</TD>
</TR>
<TR> Tenga presente, que usted no quiere poner toda
<TD BGCOLOR="#000000" HEIGHT="2"></TD> su información en la página principal. La clave
</TR> es incluir los destacados de su sitio en la
<TR>
primera página con un enlace a más
<FONT face="Verdana,Helvetica" SIZE="2" información.
COLOR="#FFFFFF"><B>Link to further
info</B></FONT></TD> El enlace de ejemplo en la parte inferior de la
</TR>
tabla puede ser utilizado para dirigir a sus
</TABLE>
visitantes a más información. Puede utilizar los
colores de su elección y ajustar el ancho para
Keep in mind, when displaying text within each
que se adapte a sus necesidades.
table cell, to specify a specific font, you must
use a font tag within each table cell. <TABLE BORDER="0" CELLSPACING="0"
CELLPADDING="2" ALIGN="Center" WIDTH=80%>
Once you complete your web page, make sure <TR>
you remove your table border. That's all there is <TD BGCOLOR="#919C9C"><P ALIGN=Center>
<FONT face="Verdana,Helvetica" SIZE="2"
to it. COLOR="#FFFFFF"><B>El encabezado de su
tabla</B></FONT></TD>
If you're not confident in your ability to design a </TR>
professional looking web site, Template Monster <TR>
<TD BGCOLOR="#000000" HEIGHT="2"></TD>
offers a large variety of highly professional site </TR>
templates. <TR>
http://www.templatemonster.com <TD BGCOLOR="#CCCCCC"><P ALIGN=Left>Su texto
aquí</TD>
</TR>
If you're in need of a professional logo, Gotlogos <TR>
will design a beautiful logo for your site for only <TD BGCOLOR="#000000" HEIGHT="2"></TD>
$25. http://www.gotlogos.com </TR>
<TR>
Take your time and test different table designs. <FONT face="Verdana,Helvetica" SIZE="2"
Try adding new rows and columns and change COLOR="#FFFFFF"><B>Enlace a más
the background and border colors. The more información</B></FONT></TD>
you practice, the better you will become. </TR>
</TABLE>
Gook luck with your new site!
Tenga en mente, cuando despliegue texto
Article available in Spanish: www.etos- dentro de cada celda de la tabla, el indicar un
services.com font (fuente) específico, tiene que utilizar una
etiqueta de font dentro de cada celda de la
Copyright © Shelley Lowery tabla.
About the Author: Una vez que termine su página Web, asegúrese
de remover el borde de su tabla. Eso ha sido
Shelley Lowery is the author of the acclaimed todo lo relacionado con el tema.
web design course, Web Design Mastery.
http://www.webdesignmastery.com And, Ebook Si no se siente confiado en su habilidad para
Starter - Give Your Ebooks the look and feel of a diseñar un sitio Web con apariencia profesional,
REAL book. http://www.ebookstarter.com Visit el Template Monster le ofrece una larga
Web-Source.net to sign up for a complimentary variedad de plantillas de sitios altamente
subscription to Etips and receive a copy of the profesionales.
acclaimed ebook, "Killer Internet Marketing http://www.templatemonster.com
Strategies." http://www.web-source.net
Si tiene usted necesidad de un logotipo
You have permission to publish this article profesional, Goglogos le diseñará un hermoso
electronically, in print, in your ebook or on your logotipo para su sitio por sólo $25.
web site, free of charge, as long as the author http://www.gotlogos.com
bylines are included.
Tómese su tiempo y pruebe diferentes diseños
Link to the article de tablas. Intente adicionar nuevos renglones y
columnas y cambie los colores del fondo y
borde. Mientras más practique, mejor llegará a
ser.
¡Buena suerte con su nuevo sitio!
Traducido por Etos: www.etos-services.com
Copyright © Shelley Lowery
Acerca del Autor:
Shelley Lowery es la autora del aclamado curso

de diseño Web, Dominio del Diseño Web.
http://www.webdesignmastery.com Y el “Ebook
Starter” (Comenzando el Ebook) – Déle a sus
Ebooks la apariencia y sentir de un libro
verdadero. http://www.ebookstarter.com Visite
Web-Source.net para enrolarse a una
suscripción gratuita a Etips, y recibir una copia
del aclamado Ebook, “Killer Internet Marketing
Strategies” (Estrategias Efectivas de Mercadeo
en Internet). http://www.web-source.net
Tiene usted permiso de publicar este artículo

electrónicamente, en impresión, en su Ebook o
en su sitio Web, libre de cargo, siempre que
sean incluidas las referencias al autor.
Enlace al artículo

Using Tables To Format Your Web Page

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Using Tables To Format Your Web Page

Uploaded by

Copyright:

Available Formats

www.etos-services.

¡Buena suerte con su nuevo sitio!

Traducido por Etos: www.etos-services.com

Copyright © Shelley Lowery

Acerca del Autor:

Shelley Lowery es la autora del aclamado curso

Tiene usted permiso de publicar este artículo

You might also like