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 By Shelley Lowery Designing a professional looking web site involves much more than simply displaying text between your body tags. In order to organize your page, you must use tables. A table is an HTML element, also referred to as a "tag," and is used to display your web page content in an organized fashion. Your page can be set up in columns and rows, you can display your table cells with or without a border, and you can even have a color or image patterned background. Tables can be used in an unlimited number of ways including: • • • •

Organize your text and images Display your text in a newspaper format Add color and image backgrounds to text areas Display charts

If you've never designed a web page, your first step will be to learn some basic HTML. You can find a beginner tutorial at NCSA Beginner's Guide to HTML: www.ncsa.uiuc.edu/General/Internet/WWW/ HTMLPrimer.html When you begin designing your web page, you may want to consider placing all of your page content within a table. This will enable you to adjust your table's cellspacing to keep your text from displaying too close to the left border of your page. The higher the cellspacing value, the further away from the left border your text will be displayed. In addition, tables will enable you to display your page content in rows and columns rather than one big block of text. Tables are created with the tags. The tag begins the table code and the tag ends the table.

Utilizando Tablas para Formatear Su Página Web Por Shelley Lowery El diseñar un sitio Web con una apariencia profesional involucra mucho más que simplemente desplegar texto entre las etiquetas . Para organizar su página, usted tiene que utilizar tablas. Una tabla es un elemento HTML, también se le hace referencia como una “tag” (etiqueta), y es utilizada para desplegar el contenido de su página Web en una forma organizada. Su página puede ser estructurada en columnas y renglones, usted puede desplegar las celdas de su tabla con o sin un borde, y puede incluso tener un color o imagen que sirva de patrón para el fondo. Las tablas pueden ser utilizadas en un número ilimitado de maneras, incluyendo: • • • •

Organizar su texto e imágenes Desplegar su texto en un formato de periódico Agregar color e imágenes para fondo a las áreas de texto Desplegar gráficas

Si usted nunca ha diseñado una página Web, su primer paso será aprender algo de HTML básico. Usted puede encontrar un curso personal para principiantes en la Guía para Principiantes al HTML de NCSA: www.ncsa.uiuc.edu/General/Internet/WWW/ HTMLPrimer.html Cuando comienza usted a diseñar su página Web, podría considerar colocar todo el contenido de su página dentro de una tabla. Esto le permitirá ajustar el espaciado de las celdas para evitar que su texto se despliegue demasiado junto al borde izquierdo de su página. Mientras mayor sea el valor de espaciado de celda, más apartado del borde

www.etos-services.com

www.etos-services.com In addition to the table tags, you must also specify the number of rows and columns your table will contain. To do this, you must use the tag, which specifies the beginning of a table row and the tag, which will display your table data. The tag should be placed in front of any information you would like to be displayed within a cell. The tag will close the cell. All of these tags will be placed between the and tags. Basic Table Structure:

Content

If you're just starting out, you may want to use a simple table format that will display your navigational links on the left or right hand side of the page, and your text and other information on the rest of the page -- in two columns. When working with tables, make sure you create your tables with a border. This will enable you to see exactly where your borders are so that you can make sure everything is displaying properly. Once your page is complete, you can remove the border. The following table code will create the basic layout for a web page with two columns. The first column will span 20% of the viewers' screen. The second will span 80% -- for a total of 100%.

Notice the table width is set to 100%? This width will display the table across 100% of the viewers' screen. The cellspacing and cellpadding are set to 10 so that the text won't display right up against the left edge of the page, and there will be some space between the

izquierdo será desplegado su texto. Además, las tablas le permitirán desplegar el contenido de su página en renglones y columnas en lugar de un gran y único bloque de texto. Las tablas son creadas con las etiquetas . La etiqueta comienza el código de la tabla y la etiqueta termina la tabla. Además de las etiquetas de tabla, usted tiene que especificar el número de renglones y columnas que contendrá su tabla. Para hacer esto, tiene que utilizar la etiqueta , que especifica el comienzo de un renglón de la tabla y la etiqueta , que desplegará los datos de su tabla. La etiqueta debe ser colocada en frente de la información que usted desea que sea desplegada dentro de una celda. La etiqueta cerrará la celda. Todas estas etiquetas serán colocadas entre las etiquetas y . Estructura Básica de la Tabla:

Content

Si usted está apenas empezando, podría querer utilizar un formato sencillo de tabla que desplegará sus enlaces de navegación en el lado izquierdo o derecho de la página, y su texto u otra información en el resto de la página – en dos columnas. Cuando esté trabajando con tablas, asegúrese de crear sus tablas con un borde. Esto le permitirá ver exactamente donde están sus bordes, para que pueda asegurarse de que todo se esté desplegando correctamente. Una vez que su página esté completa, puede usted remover el borde. El siguiente código de la tabla creará el trazado básico para una página Web con dos columnas. La primera columna se expandirá al 20% de la pantalla del observador. La segunda se

www.etos-services.com

www.etos-services.com cells.

expandirá al 80% -- para un total del 100%.

Once you have the basic page layout finished, you can begin adding your content. Your first step will be to delete the placeholder . These placeholders were placed between the and tags to enable the borders to display -- empty table cells do not display within a web browser.



Your logo and navigational links should be displayed within the left column, which is the smaller of the two columns. All of your page content will be placed within the other column. Keep in mind, the top left corner of your web page will not only be used to display your logo, but should also contain your most important keyword phrase. Make sure you include an image alt tag displaying your keyword phrase within your image code. To spice up your page, you can create additional tables with color backgrounds and borders to divide your content into sections. All of your text and additional tables will be placed between . Simply replace the text with your content and table codes. For example, the following table can be used to display an introduction to your product, article, review or whatever you'd like. Keep in mind, you don't want to place all of your information on your main page. The key is to include highlights of your site on your main page with a link to further information. The example link at the bottom of the table can be used to direct your visitors to further information. You can use the colors of your choice and adjust the width to suit your needs.

¿Ha notado que el ancho de la tabla se ha definido al 100%? Este ancho desplegará la tabla a lo largo del 100% de la pantalla del observador. El cellspacing (espacio dentro de la celda y su contenido) y el cellpadding (espacio entre las celdas) se han definido a 10, de modo que el texto no se desplegará justo contra el margen izquierdo de la página, y habrá algo de espacio entre las celdas. Una vez que tenga terminado el diseño básico de la página, puede comenzar a agregar su contenido. Su primer paso será borrar el placeholder (marcador de espacio) . Estos marcadores de espacio fueron colocados entre las etiquetas para permitir que los bordes se desplieguen – las celdas vacías de la tabla no se despliegan dentro de un navegador Web. Su logotipo y enlaces de navegación, deben ser desplegados dentro de la columna izquierda, que es la más pequeña de las dos columnas. Todo el contenido de su página será colocado dentro de la otra columna. Tenga presente, que la esquina superior izquierda de su página Web no sólo desplegará su logotipo, sino también debe contener su frase clave más importante. Asegúrese de incluir una etiqueta alt que despliegue su frase clave dentro del código de la etiqueta . Para darle el toque a su página, puede usted crear tablas adicionales con fondos de color y bordes que dividan su contenido en secciones. Todo su texto y tablas adicionales serán colocadas dentro de . Simplemente reemplace el texto con su contenido y los códigos de la tabla.

www.etos-services.com

www.etos-services.com

Your Table Heading	y
your text here
Link to further info

Keep in mind, when displaying text within each table cell, to specify a specific font, you must use a font tag within each table cell. Once you complete your web page, make sure you remove your table border. That's all there is to it. If you're not confident in your ability to design a professional looking web site, Template Monster offers a large variety of highly professional site templates. http://www.templatemonster.com If you're in need of a professional logo, Gotlogos will design a beautiful logo for your site for only $25. http://www.gotlogos.com Take your time and test different table designs. Try adding new rows and columns and change the background and border colors. The more you practice, the better you will become. Gook luck with your new site! Article available in Spanish: www.etosservices.com Copyright © Shelley Lowery About the Author: Shelley Lowery is the author of the acclaimed web design course, Web Design Mastery. http://www.webdesignmastery.com And, Ebook

Por ejemplo, la siguiente tabla puede ser utilizada para desplegar una introducción a su producto, artículo, revisión o para lo que a usted le guste. Tenga presente, que usted no quiere poner toda su información en la página principal. La clave es incluir los destacados de su sitio en la primera página con un enlace a más información. El enlace de ejemplo en la parte inferior de la tabla puede ser utilizado para dirigir a sus visitantes a más información. Puede utilizar los colores de su elección y ajustar el ancho para que se adapte a sus necesidades.

El encabezado de su tabla

Su texto aquí

Enlace a más información

Tenga en mente, cuando despliegue texto dentro de cada celda de la tabla, el indicar un font (fuente) específico, tiene que utilizar una etiqueta de font dentro de cada celda de la tabla. Una vez que termine su página Web, asegúrese de remover el borde de su tabla. Eso ha sido todo lo relacionado con el tema. Si no se siente confiado en su habilidad para

www.etos-services.com

www.etos-services.com Starter - Give Your Ebooks the look and feel of a REAL book. http://www.ebookstarter.com Visit Web-Source.net to sign up for a complimentary subscription to Etips and receive a copy of the acclaimed ebook, "Killer Internet Marketing Strategies." http://www.web-source.net You have permission to publish this article electronically, in print, in your ebook or on your web site, free of charge, as long as the author bylines are included. Link to the article

diseñar un sitio Web con apariencia profesional, el Template Monster le ofrece una larga variedad de plantillas de sitios altamente profesionales. http://www.templatemonster.com Si tiene usted necesidad de un logotipo profesional, Goglogos le diseñará un hermoso logotipo para su sitio por sólo $25. http://www.gotlogos.com Tómese su tiempo y pruebe diferentes diseños 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

www.etos-services.com

www.etos-services.com

www.etos-services.com