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
Click on the tag that creates a cell in table
<tr> <span> <td>
<table></tr>
  <td>Cell-1</td><td>Cell-2</td>
</tr></table>
Indicate the CSS property used to specify a background image for an element
background-color background-image color
h3 {
  background-image: url("image.jpg");
}
What instruction can be used to parse all the array items?
for() array() object()
var arr = [1, "ab", "CoursesWeb.net"];
for(var i=0; i< arr.length; i++) { alert(arr[i]); };
Indicate the PHP instruction used to traverse an associative array.
for() foreach() if()
$arr = array("k1"=>"v1", "k2"=>"v2", "k3"=>"v3");
foreach($arr AS $k => $v) { echo "<br/>". $k ." - ". $v; }
HTML Tables

Last accessed pages

  1. jQuery Drag and Drop Rows between two similar Tables (2787)
  2. Working with getElementsByTagName (5323)
  3. Multiple Select Dropdown List with JavaScript (4068)
  4. OOP - Classes and objects - Create Class (741)
  5. Flash Games - Free online Games (2197)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (27388)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (22908)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (22351)
  4. Read Excel file data in PHP - PhpExcelReader (20103)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (19365)