Using HTML to Create Tables in Web pages

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 • <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 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. Click to view example • 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

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"> Click to view example of a table centered with background image • (Note that some browsers may display the image into each cell individually instead of filling the entire table with a single 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>.

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

Return 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