HTML <tbody> Tag

The HTML tbody tag is used to group table rows <tr> together, indicating that it is the body of the table <table>.

The <tbody> Tag must be a child of the <table> Tag.

<tbody> Tag is used with and to show <thead> different <tfoot> Tags of the table which are table head, table body, and table footer, however, it does not affect the layout of the table.

These elements can be used to provide semantic information that can be helpful for accessibility purposes or to provide a header at the top and a footer at the bottom when printing a large table.

Example:-

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
HTML tbody Tag
</title>
</head>
<style>
.main table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML tbody tag Example</h1>
<div class="main">
<table>
   <thead>
   <tr>
      <th>Month</th>
      <th>Savings</th>
   </tr>
   </thead>
   <tbody style="background: red;">
      <tr>
      <td>January</td>
      <td>$70</td>
   </tr>
   <tr>
      <td>January</td>
      <td>$50</td>
   </tr>
   <tr>
      <td>February</td>
      <td>$40</td>
   </tr>
    </tbody>

</table>
</div>
</body>
</html>

Output:-

HTML Td Tag

HTML <td> Tag

The HTML <td> Tag is used to specify the cells of an HTML table that contain the table’s data. The <td> Tag must be a child element of the <tr> Tag (table row) tag. Each table row can contain multiple <td> Tag data elements.

Grouped <td> Tag of <tr> Tags are presented as a single row in the table. The contents of <td> Tag are left-aligned by default in a regular table.

Example:-

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
HTML td Tag
</title>
</head>
<style>
.main table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML td tag Example</h1>
<div class="main">
<table>
 <table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
  <tr>
    <td>Cell C</td>
    <td>Cell D</td>
  </tr>
</table>
</table>
</div>
</body>
</html>

Output:-

Attributes:-

  • Colspan
  • Rowspan
  • Headers

HTML Template Tag

HTML <template> Tag

The HTML <template> Tag is used to contain client-side content that will not be rendered at the time of page load, but can be rendered immediately during runtime with the help of JavaScript.

The content of the template will not be displayed unless it is activated using JavaScript. When the page loads the browser processes the content of the <template> Tag to ensure that the content is valid, although the content is not rendered.

Important Note:- This can also be useful if you want to use the same content multiple times in your HTML document without any changes.

The <template> Tag can be placed anywhere inside <head>, <body>, <frameset>, or <table> Tags.

The <template> Tag is a newly added element in HTML5.

Example:-

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
HTML td Tag
</title>
</head>
<style>
   
.main
button{
   background: blue;
}
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML td tag Example</h1>
<div class="main">

<p>Click the button below to display the hidden content from the template element.</p>

<button onclick="showContent()">Show hidden content</button>

<template>
  <h2>Myprograming</h2> 
</template>

<script>
function showContent() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>
</div>
</body>
</html>

Output:-

Click the button below to display the hidden content from the template element.

HTML Tfoot Tag

HTML <tfoot> Tag

The HTML <tfoot> Tag is used to define the set of rows that represent the footer of an HTML table. The tag must contain one or more <tr> Tag. The <tfoot> Tag is used with the and <tbody> Tag as child elements of an HTML table <table> Tag, where <thead> defines the table header and <tbody> defines the table body. defines.

Note:- The <thead>, <tbody> and <tfoot> Tags do not affect the table layout, and use CSS properties if you want to apply changes to the table layout.

Example:-

  <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
HTML tfoot Tag
</title>
</head>
<style>
.main table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.main table thead,.main table tfoot{
   background: green;
}
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML tfoot tag Example</h1>
<div class="main">
<table>
   <thead>
   <tr>
      <th>Month</th>
      <th>Savings</th>
   </tr>
   </thead>
   <tbody>
      <tr>
      <td>January</td>
      <td>$70</td>
   </tr>
   <tr>
      <td>January</td>
      <td>$50</td>
   </tr>
   <tr>
      <td>February</td>
      <td>$40</td>
   </tr>
   <tr>
      <td>March</td>
      <td>$20</td>
   </tr>
   </tbody>
   <tfoot>
   <tr>
      <td>April</td>
      <td>$10</td>
   </tr>
    </tfoot>
</table>
</div>
</body>
</html>

Output:-

HTML Th Tag

HTML <th> Tag

  • There are two types of cells in an HTML table:
    1. Header cell – contains header information (created using the element)
    2. Data cell – contains the main data of the table (created using the <td> Tag).

The HTML <th> Tag is used to define the header cells of an HTML table. The header cell renders as bold and centered by default on the browser, but you can change its default style using CSS properties.

The <th> Tag must be used within a <table> Tag as a child element of a <tr> Tag. The size of the table is automatically adjustable according to the size of the contents.

Example:-

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
HTML th Tag
</title>
</head>
<style>
.main table tr th{
background: blue;
}
 
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML th tag Example</h1>
<div class="main">
<table> 
   <tr>
      <th>Month</th>
      <th>Savings</th>
   </tr> 
   <tr>
      <td>January</td>
      <td>$70</td>
   </tr>
   <tr>
      <td>January</td>
      <td>$50</td>
   </tr>
   <tr>
      <td>February</td>
      <td>$40</td>
   </tr>
   <tr>
      <td>March</td>
      <td>$20</td>
   </tr>
   
</table>
</div>
</body>
</html>

Output:-

Attribute:-

  • abbr
  • colspan
  • rowspan
  • scope
  • headers

HTML Thead Tag

HTML <thead> Tag

The HTML <thead> Tag is used to define the header of an HTML table. The <thead> Tag is used with the <tbody> and <tfoot> Tags that define the table header, table body, and table footer in an HTML table.

The <thead> Tag must be a child of a <table> Tag, and must be used before any <tbody>, <tr>, or <tfoot> Tag.

The <thead> Tag must have at least one line of <tr> Tag inside it.

Example:-

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
HTML thead Tag
</title>
</head>
<style>
 .main table, th, td {
  border: 1px solid black;
}
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML thead tag Example</h1>
<div class="main">
<table> 
   <thead style="background: yellow;">
      <tr>
      <th>Month</th>
      <th>Savings</th>
   </tr> 
   </thead>
   <tbody>
        <tr>
      <td>January</td>
      <td>$70</td>
   </tr>
   <tr>
      <td>January</td>
      <td>$50</td>
   </tr>
   <tr>
      <td>February</td>
      <td>$40</td>
   </tr>
   <tr>
      <td>March</td>
      <td>$20</td>
   </tr>
   </tbody>
   
</table>
</div>
</body>
</html>

Output:-

HTML Time Tag

HTML <time> Tag

HTML <time> Tag is used to define date and time. It displays the time value in a 24-hour clock or an exact date in the Gregorian calendar in HTML.

It is used to encode dates and times in a machine-readable manner to make it easier to mark or schedule your task…

It also helps search engines to generate better search results.

HTML <time> Tag is a new tag and was introduced in HTML5.

Let’s look at the syntax for defining a date and time.

Example:-

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
HTML time Tag
</title>
</head>
 
<body>
<h1 style="margin-bottom: 50px; ">This is HTML time tag Example</h1>
 <p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>

<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

<p><b>Note:</b> The time element does not render as anything special in any of the major browsers.</p>
</body>
</html>

Output:-

Open from to every weekday.

I have a date on .

Note: The time element does not render as anything special in any of the major browsers.

HTML Tr Tag

HTML <tr> Tag

The HTML <tr> Tag is used to define rows in a table. The <tr> Tag can contain one or more <th> head cells and <td> data cells to define a row of an HTML table.

Example:-

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
HTML tr Tag
</title>
</head>
 <style>
table, th, td {
  border: 1px solid black;
}
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML tr tag Example</h1>
  
<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$70</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$40</td>
  </tr>
</table>

</body>
</html>

Output:-

HTML Track Tag

HTML <track> Tag

HTML <track> Tag is used to define time-based text tracks for a media file. The <track> Tag must use as child element of <audio> and <video> Tags.

The <track> Tag is used to add subtitle, caption, or any other form of text which displayed when a media file plays.

HTML <track> Tag is new tag in HTML5.

Example:-

<video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

Output:-

Sorry! Your browser does not support the track

HTML Tt Tag

HTML <tt> Tag

Not Supported in HTML5.

The HTML <tt> Tag was used to define text in monospaced fonts or fixed-width fonts so that it could be rendered on browsers as teletype, text-only screens, or line printers.

Example:-

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
HTML tt Tag
</title>
</head>
 
<body>
<h1 style="margin-bottom: 50px; ">This is HTML tt tag Example</h1>
<p>Normal Paragraph</p>
<p><tt>This is teletype Paragraph</tt></p>  
</body>
</html>

Output:-

Normal Paragraph

This is teletype Paragraph

Note:- Do not use HTML <tt> Tag, as it is not supported in HTML5, instead you can use following tag for better usage:

HTML <samp> Tag

HTML <kbd> Tag

HTML <code> Tag

HTML <pre> Tag

HTML <var> Tag


, , , , , , , , ,

Related Posts

Responsive Design
BLOG CSS HTML

Understanding Responsive Design in Web Development

Khushal
Search Input with Suggestions
CSS HTML JAVASCRIPT

Building a Dynamic Search Input with Suggestions: A Step-by-Step Guide

Khushal

Leave a Reply

Your email address will not be published. Required fields are marked *