Tables can be used to lay out information in a clear and easily understandable format, displayed on rows and columns.

The <style> tag from the examples presented in this tutorial must be added in the <head> are of the webpage.


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.

- In HTML5 the style, alignamennt and tables design is made with CSS; see the tutorial: Styling HTML table with CSS.

Here is a table defined with the minimum elements (having two rows and two columns):
<style>
table, th, td {
 border: 1px solid #000;
}
</style>

<table>
 <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 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:


- To align a table in webpage use CSS style.
          Examples:
1. In the next example you can see the result of the <th> tag, the "rowspan" and "colspan" attributes.
<style>
table {
 border-collapse: collapse;
 margin:5px auto;
 text-align:center;
}
table, th, td {
 border: 1px solid #000;
}
</style>

<table>
<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>
Result:
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, tfoot and tbody.
<style>
table {
 border-collapse: collapse;
 margin:5px auto;
}
table, th, td {
 border: 1px solid #000;
}
</style>

<table>
<thead style="background:#b8b8f8;">
 <tr>
 <th>Web site</th>
 <th>Description</th>
 </tr>
</thead>
<tfoot style="background:#b0d8b0; text-align:center;">
 <tr>
 <td colspan="2">Web sites with free resources.</td>
 </tr>
</tfoot>
<tbody style="background:#fff;">
 <tr>
 <td>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>
This code will display:
Web site Description
Web sites with free resources.
marplo.net Web development, foreign languages, anime and games
coursesweb.net Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript

3. Table with two colgroup. The first "colgroup" sets the style of the first column (ID).
<style>
table {
 border-collapse: collapse;
 margin:5px auto;
}
table, th, td {
 border: 1px solid #000;
}
</style>

<table>
<colgroup style="background:#b9d9b9; width:50px;"></colgroup>
<colgroup span="2" style="background-color:#d8d8fb;">
</colgroup>
<tr style="background:#e0e0e0;">
 <th>ID</th>
 <th>Web site</th>
 <th>Description</th>
</tr>
<tr>
 <td>01</td>
 <td>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 marplo.net Web development, foreign languages, anime and games
02 coursesweb.net Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript

4. Table with caption.
<style>
table {
 border-collapse: collapse;
 margin:5px auto;
}
table, th, td {
 border: 1px solid #000;
}
</style>

<table>
<caption><strong>Web sites with free Web Development resources</strong></caption>
<tr style="background-color:#deedfe;">
 <th>Web site</th>
 <th>Description</th>
</tr>
<tr>
 <td>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>
- Notice that insite caption element is added a <strong> element, this means that you can add formatting tags inside <caption>.
This code will display:
Web sites with free Web Development resources
Web site Description
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>) paragraph (<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 tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
HTML Tables

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (71506)
  2. Node.js Move and Copy file (3515)
  3. PHP-MySQL Scripts (3745)
  4. PHP getElementById and getElementsByTagName (19140)
  5. Redirects (503)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (443)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (351)
  3. Register and show online users and visitors (319)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (301)
  5. Insert, Select and Update NULL value in MySQL (214)