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

HTML Tables Most 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 begins the table and finishes the table. defines the beginning of a table row and completes the row. defines the beginning of a cell and 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 inside the table tag. The default value for a border is one pixel. To create a larger border, increase the pixel number by typing inside the table tag. 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 : 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: (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 where n is the number of columns for the row to span. Type cell contents and then type.

Row Spanning A cell can vertically span multiple rows to create a sidebar. Type where n is the number of rows the cell should span. Type the cell contents and then type.

Sources Castro, E. (2003). HTML for the World Wide Web, 5 th edition. Berkley, CA: Peachpit Press. Schluter, R. (1999). HTML tag list. Retrieved Nov. 14, 2005, from So, you want a table, huh? Retrieved Nov. 14, 2005, from tutorials/tables/article.php/

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 Color Return

Table with Background Image Return