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 defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Creating HTML Tables

Last accessed pages

  1. PHP Unzipper - Extract Zip, Rar Archives (31611)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (137118)
  3. Merge Multiple Files, Line by Line (1070)
  4. Select the Content of HTML Element (4444)
  5. Zodiac Signs JavaScript code (10965)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (316)
  2. PHP Unzipper - Extract Zip, Rar Archives (108)
  3. Read Excel file data in PHP - PhpExcelReader (100)
  4. SHA1 Encrypt data in JavaScript (81)
  5. Get and Modify content of an Iframe (73)
Chat
Chat or leave a message for the other users
Full screenInchide