Creating a Simple Table

Tables are extremely useful in HTML code. Not only can they display information in a table format, but they can be used to structure the page and to center information. Tables are made up of rows, which extend across the table, and columns, which extend down the table. (It is helpful to remember that rows in a theater go across and columns of soldiers march down the street in a parade. Or that columns that hold up a building go up and down, not across.)

Tables contain table rows, table header cells and table data cells. Table header cells automatically make text bold. Otherwise, they are just like table data cells. To begin a table, use the <table> tag. To begin a new row in a table, use the <tr> tag. To begin each new table data cell, use the <td> tag. Below, is the code for a table with three rows, two table header cells and four table data cells. The border="1" attribute creates a border around the cells. Note that the code is structured - the table rows and table data cells are indented. Press tab each time that you begin a new row. Press tab when you type the first table data cell (or table header cell) in a row. To the right of the code, is the displayed table.

<table border="1">
     <tr>
          <th>Column A</th>
          <th>Column B</th>
     </tr>
     <tr>
          <td>Cell A1</td>
          <td>Cell B1</td>
     </tr>
     <tr>
          <td>Cell A2</td>
          <td>Cell B2</td>
     </tr>
</table>

Column A	Column B
Cell A1	Cell B1
Cell A2	Cell B2

Assignment: First Table Assignment

Back to the Week 5 Schedule