You are on page 1of 16

Copyright 1998-2007 by Computer Hope (tm).

All rights reserved Legal Disclaimer - ESD Warning - Privacy Statement

HTML tables
Quick links Basics Examples Questions and Answers HTML Help Basics Tables allow the user to create sections of web sites neatly divided, such as the page you are viewing now, we have one section (the blue section) to the right which allows you to navigate by using the side of the screen while still viewing the page. This also allows you to divide up into columns almost like a spreadsheet, allowing you to have columns and rows to organize your data better or to display a chart online (such as below examples). HITS MONTH TOTAL INCREASE 324,497 January 1998 436,699 February 1998 112,172

The above chart was done with the below source code. <table border="1"> <tr> <td><strong>HITS </strong></td> <td><strong>MONTH</strong></td> <td><strong>TOTAL INCREASE</strong></td> </tr> <tr> <td>324,497</td> <td>January 1998 </td> <td align="center">-</td> </tr> <tr> <td>436,699</td> <td>February 1998 </td> <td align="center">112,172</td> </tr> </table>

The next six lines are similar to what was explained above. the align="center" is the statement to tell it to center the text in the middle of the cell. </tr> This statement is telling to end the first row. <td><strong>HITS</strong></td> The <td> statement is to start the first column and </td> is to end the first column. <tr> This is the statement to start the first row. Examples Example Example Example Example Example Example 1 1 2 3 4 5 6 7 8 9 <table border="0" cellpadding="6" cellspacing="0"> <tr> <td bgcolor="#FFFF00">1 </td> <td bgcolor="#00FF00">2 </td> <td bgcolor="#00FFFF">3 </td> </tr> <tr> <td bgcolor="#FF00FF">4 </td> <td bgcolor="#FF0000">5 </td> <td bgcolor="#0000FF">6 </td> </tr> <tr> 1 2 3 4 5 . <td align="center">-</td> This is similar to the 2nd line.What does it all mean? <table border ="1"> This statement is telling how wide you wish the border to be. The next three lines are similar to what was explained above. the strong statement is making the text bold. however. The same applies for the next two lines. "0" would be no border. </table> This statement is to end the table without transforming the remainder of the document into the table.

<td bgcolor="#008080">7 </td> <td bgcolor="#FFFF00">8 </td> <td bgcolor="#00FFFF">9 </td> </tr> </table> <table border="0" cellpadding="6" cellspacing="0"> In this statement it is first telling the browser that it does not want a border by declaring border="0".gif"></td> </tr> </table> <table border="0" width="100%"> The most important part of the above is the first line with the statement width="100%". Example 2 The above image is actually three different images put in a table that is at 100% of the section of the screen. the bigger the number the more space there would be.gif"></p> </td> <td align="right"><img src="http://www. This is telling the browser that the table needs to be 100% of the open screen (please take into consideration on . <table border="0" width="100%"> <tr> <td><img src="http://www. For more on colors. Cellspacing="0" is telling the browser to display space between the cells. view our color page. Below is the source code used for the above example.computerhope. <td bgcolor="#FFFF00">1 </td> Td is declaring a new cell. also it is declaring that it wants the cells to have a little space by declaring cellpadding="6" this would make the cells bigger than they normally would be. you also could just write in yellow. as explained in basics. #FFFF00 would be yellow.com/ccguy. in this case.computerhope.com/ccguy. The bgcolor="#FFFF00" is telling the browser what color to display the cell as.computerhope. If this was 1 you would see white in between the cells.gif"></td> <td><p align="center"><img src="http://www.com/title.

We condensed our statement to make it look less intimidating. Windows 3. providing step by step instructions on conquering your favorite game. and much more. Example 3 Welcome to Computer Hope. Over 6.000+ pages of free. providing cheats for tons of games. valign="top". Unix. where we give examples. bottom. and a lot more. left. the below source code shows how we did the above. Example 4 Computer Hope <table border="10"> <tr> .x. complete walkthroughs. <table border="0"> <tr> <td><img src="chguy. one of the most advanced free web sites on the Internet. scanners. tells the browser to align the starting of the text at the top of the image. right. this can also be middle. to have the appearance of a news paper. zip drive. it will automatically adjust to the full amount of the viewer's screen. game news. This question is asked frequently where someone wants to post images and text right next to each other. tips. Helping you with software questions with such applications as DOS.gif"></td> <td valign="top">STATEMENT SHOWN ABOVE </td> </tr> </table> <td valign="top">STATEMENT SHOWN ABOVE </td> The most important line of the source code. Adobe Photoshop. or center. modems. and more.the above example it is 100% of the table currently in) this is good for the fact that even if someone displays your page in a bigger/smaller resolution or screen. Windows 95. frequently updated information at your fingertips and all thanks to Computer Hope. enhancements. Helping you with games. Plus Pack. helping you with all your computer related issues. Helping you with hardware questions with hundreds of technical pages of useful information with such hardware as printers. and much more. sound cards. source code. CD-ROM. Helping you with such topics as HTML.

computerhope.htm">Cool Tricks</a></td> <td bgcolor="#00FFFF">HTML cool tricks</td> <td bgcolor="#00FFFF"><strong>2514</strong></td> <td bgcolor="#00FFFF">Feb 98</td> </tr> </table> .<td><a href="http://www.com">Computer Hope</a></td> </tr> </table> <table border="10"> This button effect is very simple by just making border="10" this makes the border 10 width.com/cooltrik. which you could link to another page just as we did above. Example 5 WEB PAGE DESCRIPTION HITS MONTH Computer Hope Main page linking to all pages 3912 Feb 98 Cool Tricks HTML cool tricks 2514 Feb 98 <table border="0"> <tr> <td bgcolor="#0000FF"><font color="#FFFFFF"><strong>WEB PAGE</strong></font></td> <td bgcolor="#0000FF"><font color="#FFFFFF"><strong>DESCRIPTION</strong></font></td> <td bgcolor="#0000FF"><font color="#FFFFFF"><strong>HITS</strong></font></td> <td bgcolor="#0000FF"><font color="#FFFFFF"><strong>MONTH</strong></font></td> </tr> <tr> <td bgcolor="#00FFFF"><a href="http://www.computerhope. giving it the appearance of a button.computerhope.com">ComputerHope</a></td> <td bgcolor="#00FFFF">Main page linking to all pages</td> <td bgcolor="#00FFFF"><strong>3912</strong></td> <td bgcolor="#00FFFF">Feb 98</td> </tr> <tr> <td bgcolor="#00FFFF"><a href="http://www.

Computer help .Contact . JavaScript's and picture tricks Quick links JavaScript HTML JavaScript Celsius into Fahrenheit Time and date Make people stay JavaScript bookmark Letter by Letter scroll Date count down Make a new small window of another web page Button to refresh your page Send viewer back to page they came from Change background color depending on the time of day Random color every 5 seconds Random color that can be stopped Flashing colors when opening page Allow visitors to see history of visiting your page Random quotes Message displayed by time of day Message on status bar Random images and links Onmouse over Creating a Password on your page Disable mouse right-click HTML Index Catego HTML He Compa None Relate Pages: Resolv Were y able to locate answer your questio • • Y N .ESD Warning . All rights reserved Legal Disclaimer .Links Link to Computer Hope .Dictionary .Privacy Statement HTML.Bookmark Computer Hope Copyright 1998-2007 by Computer Hope (tm).Home .

if the image is small.bgColor='magenta'">n</a> onmouseover="document.gif" BORDER="0" WIDTH="134" HEIGHT="64"></A></TD> <TD ALIGN=RIGHT><A HREF="" ONMOUSEOVER = "alert('Produced by Computer Hope')")> Who is responsible?</A></TD></TR></TABLE></CENTER> What it looks like: Who is responsible? User chooses background color Allow your users to choose their background color using JavaScript by adding the below code to your page. Source: <CENTER><TABLE WIDTH="40%"><TR><TD><A HREF="" ONMOUSEOVER = "alert('Welcome to ComputerHope')")> <IMG SRC="title. great for letting someone know what a picture is. SOURCE: <center> <a href="" <a href="" <a href="" <a href="" <a href="" <a href="" <a href="" <a href="" <a href="" <a href="" <a href="" <a href="" onmouseover="document.bgColor='red'">o</a> onmouseover="document. Click here to view demo.bgColor='yellow'">s</a> onmouseover="document.bgColor='white'">your</a> onmouseover="document.bgColor='turquoise'">C</a> onmouseover="document.Mouse over prompt User chooses background color Your own prompt Mouse over prompt This allows you to prompt the person when their mouse is over a particular link or picture.bgColor='pink'">h</a> onmouseover="document.bgColor='seagreen'">w</a> onmouseover="document.bgColor='greem'">o</a> onmouseover="document.bgColor='purple'">a</a> .bgColor='blue'">o</a> onmouseover="document.bgColor='green'">e</a> onmouseover="document.bgColor='fusia'">b</a> onmouseover="document.

value)> <option value="000000">[Black] <option value="730200">[Dark Red] <option value="231800">[Brown] <option value="044302">[Dark Green] <option value="0D09A3">[Dark Blue] <option value="444444">[Gray] <option value="FF0400">[Red] <option value="EFE800">[Yellow] <option value="05EF00">[Green] <option value="0206FF">[Blue] <option value="AE08EF">[Violet] <option value="FF8C8A">[Mauve] <option value="FFCCCC">[Peach] <option value="FFCC99">[Orange] <option value="D5CCBB">[Tan] <option value="DDDDDD">[Light Gray] <option value="FBFF73">[Light Yellow] <option value="7CFF7D">[Light Green] <option value="A6BEFF">[Light Blue] <option value="FFFFFF" selected>[White] </select></form> Your own prompt This allows the person viewing your page to prompt themselves.bgColor='coral'">u</a> <a href="" onmouseover="document.<a href="" onmouseover="document.bgColor=backGround.selectedIndex].bgColor='black'">color!</a></h2> </center> Another Choose your background Instead of using links this example uses a forum drop down menu that allows the user to select their background color. Click here to view demo page. <form>Change the background color: <select name="backGround" size="1" onChange=(document.bgColor='navy'">c</a> <a href="" onmouseover="document. The source code for this example is shown below.bgColor='olivedrab'">n</a> <a href="" onmouseover="document.options[backGround.bgColor='teal'">d</a> <a href="" onmouseover="document.bgColor='almond'">o</a> <a href="" onmouseover="document.bgColor='royalblue'">k</a> <a href="" onmouseover="document. We really couldn't .bgColor='Skyblue'">g</a> <a href="" onmouseover="document.bgColor='brown'">r</a> <a href="" onmouseover="document.

think of anything that this could be used for except for the person to talk to themselves. A batch file or batch program is an unformatted text file that contains one or more MS-DOS commands and is assigned a . Source: <CENTER><FORM> <TEXTAREA NAME="text" ROWS="3" COLS="30"></TEXTAREA><p> <INPUT TYPE="button" VALUE="Say it!" onClick="alert(this. type fasthelp at the command prompt. the commands are carried out as a group.form.value)"> <INPUT TYPE="reset" NAME="cancel" VALUE="Clear Prompt"> </FORM></CENTER><P> What it looks like: Clear Prompt Batch Commands This chapter is a complete reference for the commands supplied with MS-DOS 6. When you type the name of the batch program at the command prompt. For a list of MS-DOS commands. kind of cool.text. type help followed by the command name at the command prompt. and notes and examples.BAT extension. To see the Help table of contents. It includes an explanation of command syntax. however. To view the command reference online. Any MS-DOS command you use at the . type help with no parameters. a description of each command. This chapter is a printed version of the online Help available in MS-DOS 6.

When MS-DOS starts. Typically.SYS Commands The CONFIG. The following CONFIG.SYS commands can be used only in the CONFIG.SYS file is located in the root directory of drive C. it carries out the commands in the CONFIG. In addition.SYS file and can also be typed at the command prompt: break rem set The following special CONFIG.command prompt can also be put in a batch program.SYS file: .SYS commands are used only to define multiple configurations within the CONFIG. the CONFIG.SYS file is a text file that contains special commands. These commands configure your computer's hardware components so that MS-DOS and applications can use them. the following MS-DOS commands are specially designed for batch programs: call choice echo for goto if pause rem shift CONFIG.SYS file.SYS file: buffers country device devicehigh dos drivparm fcbs files install lastdrive numlock shell stacks switches The following commands are commonly used in the CONFIG.

BAT files.) ? Specifies that MS-DOS is to ask for confirmation before carrying out the current command. To bypass individual CONFIG. To . you would change the command to read dos?=high.SYS command.SYS file. press the F5 key immediately after starting your computer.include menucolor menudefault menuitem submenu For more information about defining multiple configurations. To carry out all remaining startup commands. see Commands for Defining Multiple Configurations.SYS and AUTOEXEC.".BAT Commands If you are having system problems that you suspect are caused by one or more commands in your CONFIG.SYS commands. Specifies that the current line is a descriptive comment and should not be carried out. to have MSDOS ask for confirmation before carrying out the dos=high command.. Bypassing CONFIG. (You can also insert a comment by using the rem command. press F5.SYS file can also contain the following special characters: .SYS file. The CONFIG..SYS and AUTOEXEC. Insert this character at the beginning of the line. you might want to bypass some or all of the commands in your CONFIG. press the F8 key instead. Insert this character just before the equal sign (=). To bypass all the commands in your CONFIG. For example. MS-DOS will then prompt you to carry out or bypass each CONFIG. when you see the text "Now starting MS-DOS.

SYS CHKSTATE.EXE The files COUNTRY.bypass all remaining startup commands.SYS DISPLAY. see the country command. and you cannot restart MS-DOS. If you do. Do not try to load either of these files with the device command. Top of page Device Drivers The following installable device drivers are provided with MS-DOS: ANSI.EXE HIMEM. They are data files for the country and keyb commands. your system halts. For information about loading COUNTRY. respectively.SYS.SYS EGA.SYS DBLSPACE.SYS file.EXE POWER. For information about loading KEYBOARD.EXE SMARTDRV.SYS SETVER.SYS are not device drivers. For more information about your CONFIG.SYS file.SYS.SYS INTERLNK. see the keyb command.SYS EMM386.SYS DRIVER. To disable this feature.SYS and KEYBOARD.EXE RAMDRIVE. Top of page International Commands The following commands are useful when changing country-specific settings and character . press ESC. add the switches /n command to your CONFIG. see the chapter "Configuring Your System" in the MS-DOS 6 User's Guide.

SYS file can define several different system configurations. The menudefault. add the CONFIG. menucolor and submenu commands can be used to define special characteristics of the startup menu. A configuration block begins with a block header — a name surrounded by square brackets. . you use the following special CONFIG. 3. use batch commands such as goto and if to have MS-DOS carry out different AUTOEXEC.SYS commands that you want MS-DOS to carry out when that configuration is selected from the startup menu. To define multiple configurations.SYS file by using a [menu] header followed by one or more menuitem commands. Define a startup menu in the CONFIG. To each block.BAT commands depending on the startup configuration. 2.sets (code pages): chcp country keyb Top of page mode nlsfunc Commands for Defining Multiple Configurations A single CONFIG.BAT file. follow these general steps: 1. Create a configuration block in the CONFIG.SYS file for each configuration you want. (Optional) In the AUTOEXEC.SYS commands: include menucolor menudefault menuitem submenu To define multiple configurations.

add a goto %config % command to your AUTOEXEC. and device=c:\dos\himem.SYS file defines two configurations: [Menu] menuitem=Steve menuitem=Lisa [Common] dos=high buffers=15 device=c:\dos\himem.sys [Steve] files=20 device=c:dos\emm386 2048 [Lisa] files=40 device=c:\net\network.When a configuration is selected from the startup menu. Steve uses a . For both configurations. Defining Multiple Configurations in Your CONFIG.sys.SYS File The following CONFIG.SYS file configures the computer for either Steve or Lisa. MS-DOS defines an environment variable named CONFIG and sets it to the name of the selected configuration block. For more information about defining multiple configurations. buffers=15.BAT file.sys [Common] This CONFIG. MS-DOS carries out the three commands in the first [common] section: dos=high. To have MSDOS carry out different sets of commands for different CONFIG values. see the chapter "Configuring Your System" in the MS-DOS 6 User's Guide.

Lisa uses the network but not desktop publishing.desktop publishing program that requires expanded memory. Go to the section that matches the current . you can use the goto command to have MS-DOS carry out different sets of commands for different CONFIG values.SYS file in the preceding section. The following AUTOEXEC.BAT file. MS-DOS defines an environment variable named CONFIG and sets it to the name of the selected configuration block.BAT File When a configuration is selected from the startup menu.BAT file is designed to work with the sample CONFIG. now skip Lisa's section & go to end goto end :Lisa . Defining Multiple Configurations in Your AUTOEXEC.BAT file uses the goto command with the CONFIG variable to carry out different sets of commands.c:\typeset c:\mouse\mouse. so his configuration includes a command for EMM386. This AUTOEXEC. In the AUTOEXEC. c:\dos\smartdrv.c:\deskpub.exe set temp=c:\temp c:\dos\msav . He does not use the network. value of the CONFIG variable goto %config% :Steve path=c:\dos.com deskpub` . Her configuration starts the network driver.

MS-DOS then goes to the section that matches the value of the CONFIG variable.c:\network. If the current configuration is "Lisa. it starts SmartDrive. and a Logon command instructs the network driver (loaded from the CONFIG.COM program from the C:\MOUSE directory. Top of page . If the name of the selected configuration is "Steve. loads the MOUSE. MS-DOS runs the Doskey program. sets the TEMP environment variable.SYS file) to connect the computer to the network.BAT file. this prevents the commands in the Lisa section from being carried out for Steve's configuration. The goto end command instructs MSDOS to skip to the End section." MS-DOS goes to the Steve section. It then sets the search path for Steve. and runs the desktop publishing program.path=c:\dos. and starts the MS-DOS Anti-Virus program." the search path is set differently.c:\utility doskey net logon lisa goto end :end When MS-DOS runs this AUTOEXEC.