How to Create a Scroll Bar in a Table

by James Highland
HTML tables are displayed all over the Internet

HTML tables are displayed all over the Internet

An HTML table can provide a seamless method for juxtaposing many different pieces of content, such as images with text. A table can also deliberately appear as a strict grid structure, with rows and columns separated by a border. Although tables can have many different layouts, they are usually displayed in their entirety on a web page. If the table contains a long spreadsheet of information, it may be more feasible to not display the entire table at once. Instead, you can create a scroll bar so only a portion of the table is shown at a time. Your web page's visitor can then scroll through the table if she wishes to see more.

Open the HTML file that contains the table. You should open this in a text editor, not a web browser. Windows Notepad is acceptable for this process.

Find the HTML code in the file that renders the table data. This section of code will begin with the "<table>" tag. The tag may contain other elements, such as "<table border=1 bgcolor=#ffffff>," which denotes the color of the table's background and the size of its grid borders.

Create a new line before this table code. You can easily achieve this by placing the text cursor right before the "<table>" tag and pressing "Enter" on the keyboard.

Add the following line of DHTML code in the line above the HTML table. DHTML is an extension of the HTML language that includes CSS formatting information. This code provides features that conventional HTML code cannot. The line necessary to create the scroll bar is: <div STYLE=" height: 100px; width: 100px; font-size: 12px; overflow: auto;"> In this example, replace the "height" and "width" pixel information to represent the size of the table window you want displayed on the screen. Whatever does not fit in this specified size will be available through scroll bars automatically. "100px" represents 100 pixels, which is not particularly wide. Consider the resolution of your computer monitor to estimate the size of your desired table window. To give you an idea of size you may need in this code, many computer monitors are set at 1024 pixels wide.

Save the file.

Double-click the file to open it in a web browser. The table is presented with scroll bars. If the size of the table window is not as intended, make adjustments to the DHTML "height" and "width" parameters to arrive at an appearance that suits you.

Items you will need

About the Author

James Highland started writing professionally in 1998. He has written for the New York Institute of Finance and He has an extensive background in financial investing and has taught computer programming courses for two New York companies. He has a Bachelor of Arts in film production from Indiana University.

Photo Credits

  • photo_camera www and internet image by mbs from