Tables provide a great deal of flexibility for displaying information in your WWW documents. The basic table tags allow you to construct tables. The various attributes for these tags allow you to customize your tables. Experiment with the Eazy-Peazy Table Maker to learn how the table tags and their attributes combine to produce good looking and useful tables.

Tables: How They Work
Basic Table Tags <table> * * * </table> Everything between the <table> start tag and the </table> end tag will be displayed within a table by a web browser, depending on how you define and format your table. Tables are constructed from rows and cells (separate blocks of data within the rows). You can have as many rows and cells in a table as you desire. For the best looking tables, however, it is best to keep the number of cells per row at 4-6. <tr> * * * </tr> The <tr> start tag signals the beginning of a table row. The </tr> end tag signals the end. Everything between the start and end tags will be included in that table row. <td> * * * </td> The <td> start tag signals the beginning of information contained within a table cell. The </td> end tag signals the end. Everything between the start and end tags will be included in that table cell. All tables can be constructed using this basic model
<table> <tr> <td>Information Here</td> </tr> </table> Appearance in your WWW document: Information Here
Note: There is no border around this table. This can be added if you like, as part of what you can do to customize your tables. See below for more information. Also, you can add as many rows and cells as needed. One of each is shown here just to keep things simple.
Customizing Your Tables: How It Works
The attributes explained and illustrated below can be used inside the <td> start tag to align information horizontally and vertically inside table cells, to define space around the contents of table cells, to define the amount of space between table cells, to define the width of a border around a table, and to define the width of a table. Align Various align attributes can be used inside the <td> start tag to align content horizontally in the right, left, or center of a table cell. Each is illustrated and explained below. <td align="right"> This use of the align attribute aligns content horizontally to the right in a table cell. Note: The align attribute (right) should be enclosed in quote marks as shown. Also, the text of any content in your table cell can be as long as you like. Short examples are used here only for illustrative purposes.
<td align="right">Test</td> Appearance in your WWW document: Test
<td align="left"> This use of the align attriburte ligns content horizontally to the left of a table cell. Note: The align attribute (left) should be enclosed in quote marks as indicated below. Also, the text of any content in your table cell can be as long as you like. Short examples are used here only for illustrative purposes.
<td align="left">Test</td> Appearance in your WWW document: Test
<td align="center"> This use of the align attribute aligns content horizontally in the center of a table cell. Note: The align attribute (center) should be enclosed in quote marks as indicated below. Also, the text of any content in your table cell can be as long as you like. Short examples are used here only for illustrative purposes.
<td align="center">Test</td> Appearance in your WWW document: Test
Experiment with the align attribute yourself using the Eazy-Peazy Table Maker.
Valign Various valign attributes can be used inside the <td> start tag to align content vertically at the top, middle, or bottom of a table cell. Each is illustrated and explained below. <td valign="top"> This use of the valign attribute aligns content vertically at the top of a table cell. Note: The valign attribute (top) should be enclosed in quote marks as indicated below. Also, the text of any content in your table cell can be as long as you like. Short examples are used here only for illustrative purposes.
<td valign="top">Test</td> Appearance in your WWW document: Test
<td valign="middle"> This use of the valign attribute aligns content vertically in the middle of a table cell. Note: The valign attribute (middle) should be enclosed in quote marks as indicated below. Also, the text of any content in your table cell can be as long as you like. Short examples are used here only for illustrative purposes.
<td valign="middle">Test</td> Appearance in your WWW document: Test
<td valign="bottom"> This use of the valign attribute aligns content vertically at the bottom of a table cell. Note: The valign attribute (bottom) should be enclosed in quote marks as indicated below. Also, the text of any content in your table cell can be as long as you like. Short examples are used here only for illustrative purposes.
<td valign="bottom">Test</td> Appearance in your WWW document:   Test
Experiment with the valign attribute yourself using the Eazy-Peazy Table Maker.
CELLPADDING The cellpadding attribute can be used inside the <table> start tag to define the amount of space (in pixels) surrounding the content each table cell. For example, <table cellpadding="8"> puts a space 8 pixels wide around all sides of the content in each cell in that table. Experiment with the cellpadding attribute yourself using the Eazy-Peazy Table Maker.
CELLSPACING The cellspacing attribute can be used inside the <table> start tag to define the amount of space (in pixels) between each cell in that table. For example, <table cellspacing="8"> puts a space 8 pixels wide between each table cell in that table. Experiment with the cellspacing attribute yourself using the Eazy-Peazy Table Maker.
BORDER The border attribute can be used inside the <table> start tag to define the width (in pixels) of a border around your entire table. For example, <table border="8"> puts a border 8 pixels wide around your table. <td border="1"> defines an border 1 pixel wide around your table. If you want an invisible border, use <td border="0">. You may want to do this for better appearances. Experiment with the border attribute yourself using the Eazy-Peazy Table Maker.
WIDTH The width attribute can be used inside the <table> start tag to define the horizontal span (in pixels or percentage of total available screen width) of the table when it is displayed on a screen by a browser. For example, <table width="800"> defines your table as being 800 pixels wide. <table width="80%"> defines your table as being as wide as 80 percent of the available screen width. Experiment with the border width attribute yourself using the Eazy-Peazy Table Maker.
Troubleshooting
Make sure that . . . You draw on paper what the final table will look like to help you visualize it You put "border="2"" in your <table> start tag to see the errors better while working on the table All your <table>, <tr>, and <td> start tags are closed by the corresponding </td>, </tr>, and </table> end tags If you have 6 rows in your table, you have 6 <tr> start tags and 6 </tr> end tags If you have 3 columns in your table, you have 3 <td> start tags and 3 </td> end tags in each row (unless you have a rowspan or colspan tag) If your images are to be aligned next to each other, you have border="0" cellpadding="0" cellspacing="0" in your <table> start tag

• Tags
• The Basic Four
• Body
• Text
• Links
• Lists
• Tables
• Images
• Color
• Windows
• Home