HTML Table variability

In past columns, we have investigated the basic structure of HTML tables and their many properties; showing you how to create basic tables and insert data, images and additional code into them.

Many Web sites may require a deeper level of table imple­mentation. This month we investigate an advanced table technique, which enables you to set out your entire HTML page so it is sized equally on various screen size resolutions.

Screen sizes

The two most commonly implemented screen size resolutions are 800x600pixels (WxH) or 1024x768. Often you will encounter a Web site that requires you to scroll to the right to view the entire page content; this usually occurs if the developer has designed the site for the larger of these two resolutions, without considering how people using the smaller setting of 800x600 will see it.

You can find out which screen resolution your computer is set to, or change it for testing purposes. Right-click the desktop: a drop-down menu will appear from which you select Properties. Click the Settings tab and you'll see a sliding bar, which you can move to the desired resolution. Click Apply, then click OK to confirm.

Table variability

Table variability is the act of defining your table width so the Web page resizes itself according to the current screen resolution or browser window size used by the viewer.

Below is the code for a table with a width of 760pixels. This is how many people code their Web sites - setting a definitive width, which will NOT change if the screen settings change. If using this approach, for optimum display you should set the width to suit the smaller screen resolution and centre your table. The problem is that it will fill a comparatively small amount of a screen at 1024x768.

<table width="760" border="1" align="center">
  <tr>
    <td bgcolor="orange">One</td>
    <td bgcolor="pink">Two</td>
    <td bgcolor="yellow">Three</td>
  </tr> </table>

This example sets out a basic one-row, three-column table with a width of 760pixels, centred on the screen. It fits quite snugly when the screen resolution is 800x600, but there is a lot of empty space on either side of the table at 1024x768.

Setting table widths

To allow for table variability, the first step is to set the table width to 100 per cent. If you were to insert "width=100%" in place of "width=760" in the above example, you would see that no matter what the screen resolution is, the table fills the screen.

TIP: You can do a simple test to check if your resizing works by clicking the Restore [Window] button (the middle button on the top right of your browser window, between the Minimize and Close buttons). Grab the corners of the window with your mouse and drag in and out to see the effect. Click it again to return to maximum resolution.

TD widths

Now that you know how to make your table adapt to various resolutions, you should look at specific cells (TDs). Using the above example, let's assume we want both the orange and yellow TDs to be 10 per cent of the page, regardless of size.

This would leave the middle cell to fill what is left over, which is 80 per cent of the browser window in this case. You can define this TD as well if you wish, but there is no need if the other cells are already set.

<table width="100%" border="1" align="center">
  <tr>
    <td bgcolor="orange" width="10%">One</td>
    <td bgcolor="pink">Two</td>
    <td bgcolor="yellow" width="10%">Three</td>
  </tr>
</table>

If you had decided to give your table a fixed width of 760, but still inserted the percentage widths in the TDs, then they would fill 10 per cent of the 760pixel-wide table. Essentially, you need to set the table width, so the cells can display that percentage.

Join the newsletter!

Error: Please check your email address.
Rocket to Success - Your 10 Tips for Smarter ERP System Selection
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World
Show Comments

Cool Tech

SanDisk MicroSDXC™ for Nintendo® Switch™

Learn more >

Breitling Superocean Heritage Chronographe 44

Learn more >

Toys for Boys

Family Friendly

Panasonic 4K UHD Blu-Ray Player and Full HD Recorder with Netflix - UBT1GL-K

Learn more >

Stocking Stuffer

Razer DeathAdder Expert Ergonomic Gaming Mouse

Learn more >

Christmas Gift Guide

Click for more ›

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Walid Mikhael

Brother QL-820NWB Professional Label Printer

It’s easy to set up, it’s compact and quiet when printing and to top if off, the print quality is excellent. This is hands down the best printer I’ve used for printing labels.

Ben Ramsden

Sharp PN-40TC1 Huddle Board

Brainstorming, innovation, problem solving, and negotiation have all become much more productive and valuable if people can easily collaborate in real time with minimal friction.

Sarah Ieroianni

Brother QL-820NWB Professional Label Printer

The print quality also does not disappoint, it’s clear, bold, doesn’t smudge and the text is perfectly sized.

Ratchada Dunn

Sharp PN-40TC1 Huddle Board

The Huddle Board’s built in program; Sharp Touch Viewing software allows us to easily manipulate and edit our documents (jpegs and PDFs) all at the same time on the dashboard.

George Khoury

Sharp PN-40TC1 Huddle Board

The biggest perks for me would be that it comes with easy to use and comprehensive programs that make the collaboration process a whole lot more intuitive and organic

David Coyle

Brother PocketJet PJ-773 A4 Portable Thermal Printer

I rate the printer as a 5 out of 5 stars as it has been able to fit seamlessly into my busy and mobile lifestyle.

Featured Content

Product Launch Showcase

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?