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.
- Table cells (that form 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.


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

<h4>Example HTML table</h4>

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

Aligning HTML table

To align a table in webpage use CSS style.


- A table cell (<td>) may contain any content: images (<img>) paragraph (<p>), lists (<ul>, <li>), DIVs (<div>), including another table.
Example:
<style>
table {
 border: 1px solid #000;
 margin:5px auto;
 text-align:center;
}
</style>

<h4>Centered table with HTML elements in TD</h4>

<table>
 <tr><td>
 <p>This is a paragraph,<br>
 next, an image.</p>
 <img src='../imgs/smile_gift.png' alt='Smile' width='150' height='132' />
 </td></tr>
</table>

HTML table structure

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

Table elements


Example with <th>, rowspan, and colspan

<style>
table {
 border-collapse: collapse;
 margin:5px auto;
 text-align:center;
}
table, th, td {
 border: 1px solid #000;
}
</style>

<h4>Centered table, with th, rowspan, and colspan</h4>

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

Example with thead, tfoot, tbody

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

<h4>Table with thead, tfoot, tbody </h4>
<p>Here, the thead, tbody and tfoot sections are defined with different background colors.</p>

<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:#ff0;'>
 <tr>
 <td>marplo.net</td>
 <td>Web development, foreign languages, forum.</td>
 </tr>
 <tr>
 <td>coursesweb.net</td>
 <td>Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript.</td>
 </tr>
</tbody>
</table>

Example with colgroup

- Notice that the second colgroup element spans two columns.
<style>
table {
 border-collapse: collapse;
 margin:5px auto;
}
table, th, td {
 border: 1px solid #000;
}
</style>

<h4>Example colgroup</h4>
<p>Table with two colgroup. The first 'colgroup' sets the style of the first column (the ID).</p>

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

Example with caption

The position where the caption is displayed (top /bottom) is defined with the CSS caption-side property, applyed to the table element. Default is 'top'.
- Notice that inside caption element is added a <strong> element, this means that you can add formatting tags inside <caption>.
<style>
table {
 border-collapse: collapse;
 caption-side:bottom;
}
table, th, td {
 border: 1px solid #000;
}
 margin:5px auto;
</style>

<h4>Table caption</h4>

<table>
<caption>Caption - <strong>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>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
HTML Lists - DL and DETAILS

Last accessed pages

  1. Read Excel file data in PHP - PhpExcelReader (61138)
  2. SHA512 Encrypt hash in JavaScript (10966)
  3. Extract a number of characters and words from text (570)
  4. Convert BBCode to HTML and HTML to BBCode with JavaScript (4226)
  5. Convert XML to JSON in PHP (8234)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (561)
  2. Read Excel file data in PHP - PhpExcelReader (470)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (344)
  4. PHP getElementById and getElementsByTagName (267)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (254)