| Designing a professional looking web site involves | | | | basic page layout finished, you can begin adding your |
| much more than simply displaying text between your | | | | content. Your first step will be to delete the |
| body tags. In order to organize your page, you must | | | | placeholder . These placeholders were placed |
| use tables.A table is an HTML element, also referred | | | | between the < TD > and < /TD > tags to enable |
| to as a "tag," and is used to display your web page | | | | the borders to display -- empty table cells do not |
| content in an organized fashion.Your page can be set | | | | display within a web browser.Your logo and |
| up in columns and rows, you can display your table | | | | navigational links should be displayed within the left |
| cells with or without a border, and you can even | | | | column, which is the smaller of the two columns. All |
| have a color or image patterned background.Tables | | | | of your page content will be placed within the other |
| can be used in an unlimited number of ways including:- | | | | column.Keep in mind, the top left corner of your web |
| Organize your text and images- Display your text in a | | | | page will not only be used to display your logo, but |
| newspaper format- Add color and image | | | | should also contain your most important keyword |
| backgrounds to text areas- Display chartsIf you've | | | | phrase. Make sure you include an image alt tag |
| never designed a web page, your first step will be to | | | | displaying your keyword phrase within your image |
| learn some basic HTML. You can find a beginner | | | | code.To spice up your page, you can create |
| tutorial at NCSA Beginner's Guide to HTML: | | | | additional tables with color backgrounds and borders |
| you begin designing your web page, you may want | | | | to divide your content into sections.All of your text |
| to consider placing all of your page content within a | | | | and additional tables will be placed between < TD |
| table. This will enable you to adjust your table's | | | | WIDTH="80%" > < /TD >. Simply replace the |
| cellspacing to keep your text from displaying too | | | | text with your content and table codes.For |
| close to the left border of your page. The higher the | | | | example, the following table can be used to display |
| cellspacing value, the further away from the left | | | | an introduction to your product, article, review or |
| border your text will be displayed. In addition, tables | | | | whatever you'd like.Keep in mind, you don't want to |
| will enable you to display your page content in rows | | | | place all of your information on your main page. The |
| and columns rather than one big block of | | | | key is to include highlights of your site on your main |
| text.Tables are created with the < TABLE >< | | | | page with a link to further information.The example |
| TABLE > tags. The < TABLE > tag begins the table | | | | link at the bottom of the table can be used to direct |
| code and the < /TABLE > tag ends the table.In | | | | your visitors to further information. You can use the |
| addition to the table tags, you must also specify the | | | | colors of your choice and adjust the width to suit |
| number of rows and columns your table will contain. | | | | your needs.< TABLE BORDER="0" CELLSPACING="0" |
| To do this, you must use the < TR > tag, which | | | | CELLPADDING="2" ALIGN="Center" WIDTH=80% > |
| specifies the beginning of a table row and the < TD | | | | < TR > |
| > tag, which will display your table data. The < TD > | | | | < TD BGCOLOR="#919C9C" >< P ALIGN=Center > |
| tag should be placed in front of any information you | | | | < FONT face="Verdana,Helvetica" SIZE="2" |
| would like to be displayed within a cell. The < /TD > | | | | COLOR="#FFFFFF" >< B >Your Table Heading< /B |
| tag will close the cell. All of these tags will be placed | | | | >< /FONT >< /TD > |
| between the < TABLE > and < /TABLE > tags.Basic | | | | < /TR > |
| Table Structure:< TABLE BORDER > | | | | < TR > |
| < TR > | | | | < TD BGCOLOR="#000000" HEIGHT="2" >< /TD > |
| < TD >Content< /TD > | | | | < /TR > |
| < /TR > | | | | < TR > |
| < /TABLE >If you're just starting out, you may | | | | < TD BGCOLOR="#CCCCCC" >< P ALIGN=Left |
| want to use a simple table format that will display | | | | >your text here< /TD > |
| your navigational links on the left or right hand side of | | | | < /TR > |
| the page, and your text and other information on the | | | | < TR > |
| rest of the page -- in two columns.When working | | | | < TD BGCOLOR="#000000" HEIGHT="2" >< /TD > |
| with tables, make sure you create your tables with a | | | | < /TR > |
| border. This will enable you to see exactly where | | | | < TR > |
| your borders are so that you can make sure | | | | < TD BGCOLOR="#919C9C" >< P ALIGN=Center > |
| everything is displaying properly. Once your page is | | | | < FONT face="Verdana,Helvetica" SIZE="2" |
| complete, you can remove the border.The following | | | | COLOR="#FFFFFF" >< B >Link to further |
| table code will create the basic layout for a web | | | | info< /B >< /FONT >< /TD > |
| page with two columns. The first column will span | | | | < /TR > |
| 20% of the viewers' screen. The second will span | | | | < /TABLE >Keep in mind, when displaying text |
| 80% -- for a total | | | | within each table cell, to specify a specific font, you |
| of 100%.< TABLE BORDER CELLSPACING="10" | | | | must use a font tag within each table cell.Once you |
| CELLPADDING="10" WIDTH="100%" > | | | | complete your web page, make sure you remove |
| < TR VALIGN="Top" > | | | | your table border. That's all there is to it.If you're not |
| < TD WIDTH="20%" > < /TD > | | | | confident in your ability to design a professional |
| < TD WIDTH="80%" > < /TD > | | | | looking web site, Template Monster offers a large |
| < /TR > | | | | variety of highly professional site templates. |
| < /TABLE >Notice the table width is set to 100%? | | | | you're in need of a professional logo, Gotlogos will |
| This width will display the table across 100% of the | | | | design a beautiful logo for your site for only $25. |
| viewers' screen. The cellspacing and cellpadding are | | | | your time and test different table designs. Try adding |
| set to 10 so that the text won't display right up | | | | new rows and columns and change the background |
| against the left edge of the page, and there will be | | | | and border colors. The more you practice, the better |
| some space between the cells.Once you have the | | | | you will become.Gook luck with your new site! |