We've all seen them: Websites that are too wide or too narrow. The ones that are too wide we have to scroll from side to side, but those that are too narrow only take up a small percentage of the available space.
You will now learn how to design a Web page so that when the browser screen gets larger, so does the Web page, and when the browser screen is shrunk, so is the Web page.
- Skill level:
Things you need
- HTML editor
Start a table and specify the width like this:
Building a table with percentages tells the table cell to conform to the size of the browser window.
Make a coloured background cell. So that you can see your Web page expanding and shrinking, make a cell with colour like this:
<table width=100%><tr><td bgcolor=000000>
000000 will make the cell black.
End the table. You must now enter the code to finish the table:
<table width=100%><tr><td bgcolor=000000> </td></tr></table>
Save your Web page. You have now made a Wweb page that will auto-fit the browser screen. Save the file in an easy-to-find directory and give the file any name, but be sure to give the file either an .htm or .html extension.
View your Web page with a browser. In any browser, go to "File" in the upper-left corner and click. Then select "Open" or "Open File" (depending on which browser you are using). Navigate to your Web page and click "OK."
Check the Web page to see whether it automatically fits the screen. You should now see a thick black line at the top of your screen. When you expand and shrink the browser window, you should see the black line expand and contract.
Enter your content within the table cell and all content will conform to the width of the browser screen.
Tips and warnings
- Some people refer to these kinds of Web pages as liquid mastheads.
- Any tables you build inside this main table must be set to 100 per cent (or another percentage) to work correctly. The trick is not to use any fixed width tables in your Web design.