This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Tables


There are times when we wish to display data that is sorted into columns and rows. This is called tabular data and HTML has a <table> tag and sub elements for organizing such data. For example, a vegetable comparison table might consist of vegetable names and their corresponding color or nutritional value. Lets construct a simple table.

To begin, we open the <table> tag:

<table>

Immediately after <table> tag, we can include a <caption> tag to quickly inform the reader the intent of the table.

<caption>A table of vegetable colors.</caption>

Tables consist of rows and columns. The table row <tr> tag is used to seperate table rows, while table data <td> fits within each row.

Also note, the first row of this table will be reserved for table headers <th>. Headers let a reader know what each column, or row, of a table represents.

<tr>

  <th>Name of Vegetable</th>

  <th>Color</th>

</tr>

Additional table rows <tr> and table data <td> will follow the same format as the table headers <th>, i.e. they will be typed in the same order.

<tr>

  <td>Carrot</td>

  <td>Orange</td>

</tr>

<tr>

  <td>Asparagus</td>

  <td>Green</td>

</tr>

Lastly, we will close the table tag.

</table>

External Resources

Hackbook: Tables

Task Discussion


  • Rezaul   June 28, 2011, 2:17 p.m.

    I think width, border and background color are important attributes for table. Here is a simple table where i used these attributes.

          
    <table width="50%" border="2" bgcolor="#ffff00">

          <caption>HTML5 Introduction</caption>

          <tr>

          <th>Kind of Members</th>

           <th>Number</th>

          </tr>

          <tr>

            <td>Participants</td>

            <td>150</td>

          </tr>

          <tr>

            <td>Followers</td>

           <td>264</td>

          </tr>

       </table>