Html Course


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 tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
HTML Lists - DL and DETAILS

Last accessed pages

  1. Mysql SELECT JOIN tables on two different Databases (4498)
  2. jQuery UI draggable - Drag elements (11448)
  3. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (142520)
  4. Using the Bone Tool (4253)
  5. Node.js Move and Copy Directory (20134)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (523)
  2. The Mastery of Love (65)
  3. CSS cursor property - Custom Cursors (62)
  4. Read Excel file data in PHP - PhpExcelReader (59)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (44)