Using HTML to Create Tables in Web pages Connie Lindsey November 2005.

Using HTML to Create Tables

in Web pagesConnie LindseyNovember 2005

HTML TablesMost people realize that tables are used

in documents to display data, but HTML tables serve several purposes.

• Tables used in Web pages allow designers to create impressive layouts with multiple columns and sidebars.

• An HTML table is made up of rows of cells.

• HTML Tables can be attention-getting or invisible.

Screen Shot of Page without Table

Screen Shot of Same Page with Table

Basic Table Codes

• <table> begins the table and </table> finishes the table.

• <tr> defines the beginning of a table row and </tr> completes the row.

• <td> defines the beginning of a cell and </td> completes the cell.

Setting Table Width• By default, browsers determine

the width of a cell or table by looking at what it contains.

• Specifying table width allows the browser to display the table more quickly.

• Width can be set for exact number of pixels or a percent of browser.

Setting Table Width

• To set the table width, type width=“n” inside the table tag,where n is the desired number of pixels.

• Type width=“n%” to set the percent of the browser window that the table should occupy.

• No browser will make a table narrower than its contents; the browser will stretch the table to fit the contents.

Setting Table Height

• By default, browsers will determine table height based on the contents of the table.

• To specify a height, type height=“n” or height=“n%”.

• If the contents cannot be displayed in the given height, the browser will enlarge the table to fit the contents.

Horizontal Alignment

• Center the table by typing align= “center” inside the table tag.

• The command align= “left” positions the table on the left side of the browser window. (Default alignment is left.)

• The command align= “right” positions the table on the right side of the browser window.

Vertical Alignment• To set the vertical alignment of

the table, type valign=“direction” inside the table tag.

• Possible directions include top, middle, bottom, baseline.*

• The default for vertical alignment is middle.

*Baseline is the same as top when there are several lines of print and no images. Baseline is the same as bottom when when both text and images are present.

Table Borders

•Layout table borders can be set to zero pixels so that they are invisible.

•Borders can be used to call attention to information or images by varying border color and thickness.

HTML Border Attributes• To make layout tables invisible, set

border to zero pixels by typing <border=“0”> inside the table tag.

• The default value for a border is one pixel.

• To create a larger border, increase the pixel number by typing <border=“10”> inside the table tag.

Click to view example

Click to view example

Controlling Cell Appearance

• Cell spacing adds space between cells.

• In the table tag, type cellspace=“n” where n is the number of pixels to appear between one cell border and the next.

• The default for cell spacing is two pixels.

Controlling Cell Appearance

• Cell padding adds space between a cell’s contents and its border.

• In the table tag, type cellpadding=“n” where n is the number of pixels to appear between the contents and the border.

• The default for cell padding is one pixel.

Formatting Table Background

• To change the background color, type bgcolor= “color name” inside the table tag.(Individual cell background color can also be changed by typing the command in the cell tag.)

Example:<table bgcolor="red" border="10"> align="center"

Click to view example of table with background color set to red.

Formatting Table Background

• To add a background image, type background= “image.url” inside the table tag. Example:<table background="images/river.jpg"

align="center" border="10">

• (Note that some browsers may display the image into each cell individually instead of filling the entire table with a single image.)

Click to view example of a table centered with background image

Column Spanning

• In multi-column table, it is possible for a row to span several columns.

• Type <td colspan=“n”> where n is the number of columns for the row to span. Type cell contents and then type </td>.

Row Spanning

• A cell can vertically span multiple rows to create a sidebar.

• Type <td rowspan=“n”> where n is the number of rows the cell should span.

• Type the cell contents and then type</td>.

SourcesCastro, E. (2003). HTML for the World

Wide Web, 5th edition. Berkley, CA: Peachpit Press.

Schluter, R. (1999). HTML tag list. Retrieved Nov. 14, 2005, from www.acronet.net/tags.

So, you want a table, huh? Retrieved Nov. 14, 2005, from www.htmlgoodies.com/ tutorials/tables/article.php/3479851.

Thanks for watching!

Please click on button

to return to first slide

HTML Table with Its Border Set to Zero Pixels

Return

HTML Table with Its Border Set to 10 Pixels

Return

Table with Background ColorReturn

Table with Background ImageReturn