HTML Table talk

In the last column, 'Introduction to tables,' I introduced you to tables by investigating structure, the major commands, and various properties of tables. This month's column explains how to insert captions, span rows and columns across other cells, place objects within your cells, and lay out your Web page so your tables adapt according to various screen resolutions.

TABLE CAPTIONS

A caption is simply a label that goes above or below your table for display purposes. Most of the time, you won't require captions. Tables are generally used for the layout of your Web page, and are therefore invisible to the user. However, there may be times when you wish to tabulate statistical data or the like, and may require a label for descriptive purposes.

To insert a caption in your tables, use the CAPTION command between TABLE and TR. By default, the caption will place itself on the top of your table. If you want it below the table, simply include align="bottom" in the caption command.

ROWSPAN AND COLSPAN

So far we have only looked at tables with an equal amount of cells on each row. Sometimes, however, you will have one cell that needs to span a number of others. For these occurrences, we use the ROWSPAN or COLSPAN properties within TD. It can become extremely confusing using rowspans and colspans; consequently, some people use general comments when spanning a cell.

See Figure 1 for colspan and rowspan examples.

TIP: If you are befuddled, take your tables row by row, using a ruler to hide the rest of the table. As you get to each cell you may realise that the cells above it span. At this point, go back to the appropriate TD and insert your colspan or rowspan values. Taking it row by row always makes it easier.

OBJECTS WITHIN TABLES

We have only inserted text within our table cells. It is important to realise that the wording within your TD is simply a contained object, which happens to be text. You can format this text in the same way as discussed in previous articles.

Similarly, you can insert pictures, links and lists irrespective of the fact that they are within a table cell. The code below displays more examples of TDs with valid contained objects.

Example 1:
<TD><img src="picture.gif"> </TD>

Example 2:
<TD>
   <OL>
    <LI>item one
    <LI>item two
   </OL>
</TD>

Example 3:
<TD>
<A href="http://www.idg.com.au">Click</A>
</TD>

Example 4:
<TD>
   <TABLE>
   <TR>
   <TD>one</TD>
   <TD>Two</TD>
   </TR>
   </TABLE>
</TD>

Notice that the fourth example is a table within a TD. Although this looks quite complicated, tables within tables are a common occurrence.

TIP: If you want a cell to have a background colour but no other data, you MUST insert a no break space as the contained object of your TD. Otherwise, Netscape will consider the cell to be empty and therefore not display it at all!

For example: <TD bgcolor="pink"> &nbsp; </TD>

TABLE LAYOUT

The two common screen size resolutions used on computers are 800x600 and 1024x768 (these figures are in pixels and in format width by height). When coding your Web sites, ensure that it looks good in both these resolutions. If you hard code a table to be 1024 pixels wide (to suit the larger screen), then users with the smaller settings will have to scroll to the right to view the entire table.

To make the table change dynamically according to the individuals' settings, use percentages instead. By setting a table to width="100%", the code will stretch to the full extent of the screen width, regardless of whether that is 1024 pixels or 800 pixels.

Join the PC World newsletter!

Error: Please check your email address.

Our Back to Business guide highlights the best products for you to boost your productivity at home, on the road, at the office, or in the classroom.

Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World
Show Comments

Essentials

Lexar® JumpDrive® S57 USB 3.0 flash drive

Learn more >

Microsoft L5V-00027 Sculpt Ergonomic Keyboard Desktop

Learn more >

Mobile

Lexar® JumpDrive® S45 USB 3.0 flash drive 

Learn more >

Exec

Audio-Technica ATH-ANC70 Noise Cancelling Headphones

Learn more >

Lexar® JumpDrive® C20c USB Type-C flash drive 

Learn more >

Lexar® Professional 1800x microSDHC™/microSDXC™ UHS-II cards 

Learn more >

HD Pan/Tilt Wi-Fi Camera with Night Vision NC450

Learn more >

Budget

Back To Business Guide

Click for more ›

Most Popular Reviews

Latest News Articles

Resources

PCW Evaluation Team

Azadeh Williams

HP OfficeJet Pro 8730

A smarter way to print for busy small business owners, combining speedy printing with scanning and copying, making it easier to produce high quality documents and images at a touch of a button.

Andrew Grant

HP OfficeJet Pro 8730

I've had a multifunction printer in the office going on 10 years now. It was a neat bit of kit back in the day -- print, copy, scan, fax -- when printing over WiFi felt a bit like magic. It’s seen better days though and an upgrade’s well overdue. This HP OfficeJet Pro 8730 looks like it ticks all the same boxes: print, copy, scan, and fax. (Really? Does anyone fax anything any more? I guess it's good to know the facility’s there, just in case.) Printing over WiFi is more-or- less standard these days.

Ed Dawson

HP OfficeJet Pro 8730

As a freelance writer who is always on the go, I like my technology to be both efficient and effective so I can do my job well. The HP OfficeJet Pro 8730 Inkjet Printer ticks all the boxes in terms of form factor, performance and user interface.

Michael Hargreaves

Windows 10 for Business / Dell XPS 13

I’d happily recommend this touchscreen laptop and Windows 10 as a great way to get serious work done at a desk or on the road.

Aysha Strobbe

Windows 10 / HP Spectre x360

Ultimately, I think the Windows 10 environment is excellent for me as it caters for so many different uses. The inclusion of the Xbox app is also great for when you need some downtime too!

Mark Escubio

Windows 10 / Lenovo Yoga 910

For me, the Xbox Play Anywhere is a great new feature as it allows you to play your current Xbox games with higher resolutions and better graphics without forking out extra cash for another copy. Although available titles are still scarce, but I’m sure it will grow in time.

Featured Content

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?