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 an ordered list
<ul> <tr> <ol>
<ol>
  <li>List-1</li>
  <li>List-2</li>
</ol>
Which selector represents the ID of an element in CSS
.name #name name
#id {
  color: #0110fb;
}
What statement creates an object in JavaScript?
{} [] new Date()
var obj = {"site": "CoursesWeb.net", "pr": 5};
alert(obj.site);
Indicate the instruction used to evaluate if a condiition is True or False
else if() switch()
$var = 8;
if($var == 8) echo $var;
HTML Tables

Last accessed pages

  1. Add and Remove HTML elements and Content with jQuery (1830)
  2. Add, Change, and Remove Attributes with jQuery (2196)
  3. PHP MySQL Online Video Course and Tutorials (434)
  4. Nested Objects - Traverse object (48)
  5. Keep data in form fields after submitting the form (517)

Top accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (3466)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (3324)
  3. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (3283)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (3067)
  5. PHP Chat Script (2741)