JavaScript EditorBest javascript editor debugger     Ajax website 

Main Page

Previous Page
Next Page

Creating a Simple Table

Tables are made up of rows of cells. The number of cells in each row determines the table's shape.

Figure 16.3. This very simple table has two rows, each of which has only one cell.

Figure 16.4. The style sheet contains only pure text formatting; nothing that would affect the table per se.

To create a simple table:

Type <table>.

If desired, press Return and Tab to visually distinguish the row elements. These won't affect display in the browser.

Type <tr> to define the beginning of the first row.

Type <td> to define the beginning of the cell.

Type the contents of the cell.

Type </td> to complete the cell.

Repeat steps 46 for each cell in the row.

Type </tr> to complete the row.

Repeat steps 27 for each row.

To finish the table, type </table>.

Figure 16.5. By default, the table extends almost as far as the edge of the browser window.

Figure 16.6. Here's the exact same table in a narrower browser window. The table simply contracts to fit better in the window.


  • The </table> tag is not optional. Some browsers won't display tables without it.

  • There is also a th tag for creating header cells. Its default formatting is generally centered and boldface, but you can easily apply CSS to it to create special header styles. In addition, if you're organizing tabular data, header cells can help describe your table and make it more accessible.

  • You can create a title for the table with the caption element. Use align="direction", where direction is top, bottom, left, or right to align the caption. It's ugly and not well supported.

Previous Page
Next Page

JavaScript EditorBest javascript editor debugger     Ajax website