Tables can be used to lay out information in a clear and easily understandable format, but you can also use tables for arranging the layout of the elements that make up pages.

Creating Tables

Tables are created with the <table> ... </table> tag. A table contains rows and columns.
- The rows are created with the <tr> tag.
- The columns are defined with the <td> tag, within the "tr" element.
Here is a table defined with the minimum elements (having two rows and two columns):
<table border="1" style="border-color:blue;">
 <tr>
  <td>Row 1 - Column 1</td>
  <td>Row 1 - Column 2</td>
 </tr>
 <tr>
  <td>Row 2 - Column 1</td>
  <td>Row 2 - Column 2</td>
 </tr>
</table>
- The "border" attribute sets the width (in pixels) of the border. The "style" is used here to define the border color.
The code above will display the following table:
Row 1 - Column 1 Row 1 - Column 2
Row 2 - Column 1 Row 2 - Column 2

The table structure

The table element contains also other tags to form the table structure, used to group the rows and the columns.

Table tags:


• The "align" attribute is Deprecated, but still suported in all major browsers. You can use CSS style instead.
          Examples:
1. In the next example you can see the result of the <th> tag, the "rowspan" and "colspan" attributes.
<table border="1" style="margin:1px auto; border-color:blue; text-align:center;">
 <tr>
  <th>Title 1</th>
  <th>Title 2</th>
 </tr>
 <tr>
  <td>Row 2 - Cell 1</td>
  <td>Row 2 - Cell 2</td>
 </tr>
 <tr>
  <td colspan="2">Row 3 - Cells 1 and 2</td>
 </tr>
 <tr>
  <td rowspan="2">Rows 4 and 5 - Cell 1</td>
  <td>Row 4 - Cell 2</td>
 </tr>
 <tr>
  <td>Row 5 - Cell 2</td>
 </tr>
</table>
This code will display:
Title 1 Title 2
Row 2 - Cell 1 Row 2 - Cell 2
Row 3 - Cells 1 and 2
Rows 4 and 5 - Cell 1 Row 4 - Cell 2
Row 5 - Cell 2

2. Table with thead and tfoot.
<table border="1" style="margin:1px auto; border-color:blue;">
 <thead style="text-align:center">
  <tr>
   <th>Web site</th>
   <th>Description</th>
  </tr>
 </thead>
 <tfoot style="text-align:center;">
  <tr><td colspan="2">Web sites with free resources.</td></tr>
 </tfoot>
 <tr>
  <td>www.marplo.net</td>
  <td>Web development, foreign languages, anime and games</td>
 </tr>
 <tr>
  <td>coursesweb.net</td>
  <td>Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript</td>
 </tr>
</table>
- Not all major browsers suport the <tfoot> tag.
This code will display:
Web site Description
Web sites with free resources.
www.marplo.net Web development, foreign languages, anime and games
coursesweb.net Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript

3. Table with thead and colgroup.
<table border="1" style="margin:1px auto; border-color:blue;">
 <colgroup style="width:45px;"></colgroup>
 <colgroup span="2" style="background-color:#daf8de;"></colgroup>
 <thead style="text-align:center;">
  <tr>
   <th>ID</th>
   <th>Web site</th>
   <th>Description</th>
  </tr>
 </thead>
 <tr>
  <td>01 </td>
  <td>www.marplo.net</td>
  <td>Web development, foreign languages, anime and games</td>
 </tr>
 <tr>
  <td>02 </td>
  <td>coursesweb.net</td>
  <td>Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript</td>
 </tr>
</table>
- Notice that the second colgroup element spans two columns.
The example above will create the following table:
ID Web site Description
01 www.marplo.net Web development, foreign languages, anime and games
02 coursesweb.net Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript

4. Table with caption, thead, and tbody.
<table border="1" style="margin:1px auto; border-color:green;">
 <caption><b>Web sites with free Web Development resources</b></caption>
 <thead style="background-color:#deedfe; text-align:center;">
  <tr>
   <th>Web site</th>
   <th>Description</th>
  </tr>
 </thead>
 <tbody style="background-color:#fdfefe; color:blue;">
  <tr>
   <td>www.marplo.net</td>
   <td>Web development, foreign languages, anime and games</td>
  </tr>
  <tr>
   <td>coursesweb.net</td>
   <td>Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript</td>
  </tr>
 </tbody>
</table>
- Notice that insite caption element is added a <b>, this means that you can add formatting tags inside <caption>.
This code will display:
Web sites with free Web Development resources
Web site Description
www.marplo.net Web development, foreign languages, anime and games
coursesweb.net Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript

Table attributes

The following attributes can be used in the <table> tag (along with the standard attributes: id, class, and style):
In the next example you can see the result of the "width", "cellspacing", "cellpadding", "frame" and "rules":
<table border="2" width="80%" cellspacing="0" cellpadding="5" frame="below" rules="rows" style="margin:1px auto; border-color:blue; text-align:center;">
 <tr style="background-color:#daedf8;">
  <th>Web site</th>
  <th>Description</th>
 </tr>
 <tr>
  <td>www.marplo.net</td>
  <td>Web development, foreign languages, anime and games</td>
 </tr>
 <tr>
  <td>coursesweb.net</td>
  <td>Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript</td>
 </tr>
</table>
This code will display:
Web site Description
www.marplo.net Web development, foreign languages, anime and games
coursesweb.net Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript

• A table cell (<td>) may contain any content: images (<img>) paragraps (<p>), lists (<ul>, <li>), DIVs (<div>), including another table.
Example:
<table border="0">
 <tr><td>
  <p>This is a paragraph,<br />
  next, an image.</p>
  <img src="dir/image.jpg" alt="Text" />
 </td></tr>
</table>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr = array(1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
HTML Tables

Last accessed pages

  1. The Rise Of Atlantis (5142)
  2. Mahjong1 (2548)
  3. Qwop (20722)
  4. Backgammon (5793)
  5. Add data from form in text file in JSON format (7681)

Popular pages this month

  1. Qwop (4728)
  2. Bubbles3 (4343)
  3. Butterfly Kyodai (3092)
  4. Zuma Deluxe (2868)
  5. Backgammon (1464)