How to Create a Scroll Bar in a Table

Save

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.

Things You'll Need

  • Text editor
  • 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.

References

  • Photo Credit www and internet image by mbs from Fotolia.com
Promoted By Zergnet

Comments

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!