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 specifies the HTTP method (GET, POST) used to submit the form-data?
action method value
<form action="script.php" method="post"> ... </form>
Which CSS property allows to add shadow to boxes?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Which function removes the first element from an array?
pop() push() shift()
var fruits = ["apple", "apricot", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicate the function that can be used to check if a PHP extension is instaled.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO is available."
HTML Tables

Last accessed pages

  1. jQuery Ajax - load() method (6982)
  2. Add and Remove HTML elements and Content with jQuery (16504)
  3. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (25899)
  4. HTML Course - Free Lessons (7318)
  5. Convert XML to JSON in JavaScript (10556)

Top accessed pages

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