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

Tables [June 30, 2011, 6:18 p.m.]

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 cooresponding color or nutritional value. Lets construct a simple table.

To begin, we open the <table> tag:


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.


  <th>Name of Vegetable</th>



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.









Lastly, we will close the table tag.


External Resources

Hackbook: Tables