Introduction to HTML tables

Tables are HTML structures that allow greater control over the positioning of elements in your Web pages. As an introduction. this column will explain how to specify the layout, cell dimensions, spacing, colour, and alignment of your tables. In next month's column, we shall investigate increasingly advanced techniques and explore the importance of tables in laying out your entire Web page.

Table commands and structure

In FIGURE 1 I have aligned the code in a certain way. Although not essential, spacing like this is extremely beneficial when troubleshooting your tables as it aids you in ensuring commands have been correctly opened and closed. (Note: this code would be inserted into the BODY of your Web page.)

The first tag required is <TABLE> and the last is </TABLE>. I have given the table a border property of one so you can see an outline of the rows and cells. You can see that the <TR> command (TR = 'Table Row') represents the start of a new row (going across the page). All table tags are coupled, so rows need to be closed off with </TR> when completed. Within a row, <TD> then creates columns (going down the page - TD = 'Table Data' or 'Table Down'). These must always be contained within an open <TR> to work. The intersection of the row and column creates cells, which contain your data.

With reference to FIGURE 1, consider that <TABLE> draws a box in the browser's memory. For each row (<TR>) the browser inserts a horizontal line, and each <TD> in that row creates a corresponding number of columns to contain data. Therefore, since we can count three coupled <TR> tags, this table must have three rows. Each of these rows has three cells because they each contain three coupled <TD> tags.

Table dimensions

Without definition, cells autowrap to accommodate their contents and tables autowrap to fit the cells. You can set the dimensions of both tables and individual cells by using the width and height properties. For example:

<TABLE border="1" width="300" height="250">

Or to set the dimensions of a particular cell :

<TD width="300" height="250"> cell contents here</TD>

Cellspacing and cellpadding

By adding the cellspacing property to the TABLE command, you can specify the space between the table border and the cells. By contrast, the cellpadding property inserts space within the cell, i.e., between the contained object and the cell border. When not specified, a default value of two pixels is automatically implemented. Consequently, to have no space whatsoever, you must include these properties as follows:

<TABLE border="1" cellspacing="0" cellpadding="0">

FIGURE 2 illustrates the difference between cellspacing and cellpadding.

Bgcolor and background

Inserting bgcolor and/or background properties into your TABLE command and/or your <TD> tags allows you to brighten things up. If you set the colour of a particular cell, it will appear on top of the table colour. The following example would create a blue table with one orange cell:

<TABLE border="1" bgcolor="blue">
<TR>
<TD>One</TD>
<TD bgcolor="orange">Two</TD>
<TD>Three</TD>
</TR>
</TABLE>

Similarly, if I were to give the table a background graphic, the colour of the cells (if specified) would overlay the coded image.

Note: be careful when using these properties in conjunction with cellspacing. Netscape will not colour the spaced area, whereas Internet Explorer will.

Align and valign

The align property refers to an item's horizontal position. The most common values are left, right or center (note the spelling). Valign refers to the vertical alignment, the associated values being top, bottom and middle. If not specified, objects automatically inherit the property of align="left" and valign="center".

By using these properties within your TABLE command, you can state the position of the entire table on the Web page. Using it within TD will set the location of data in individual cells.

The following example would place the table in the top-middle of the page:

<TABLE border="1" align="center" valign="top">

This example would force the contents of the cell to the bottom-right corner of the cell:

<TD align="right" valign="bottom">Cell contents here</TD>

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

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?