HTML Tags - Part:3 - What are HTML Tables/Tables Tags, Formatting Tags?

HTML Tags Part III

What are HTML Tables/Tables Tags, Formatting Tags?

As we already discussed about HTML Tags earlier. Now we are going to discuss each of Tags step by step in details with practical.

Here you can check the format of HTML code which looks likes:

Format of Code:

<!DOCUMENT HTML>
<html>
<head>
<title></title>
</head>
<body>
----rest document code----
</body>
</html>

In this HTML Tags Part III we are going to discuss about very interesting tags which are important to design a Web Page in HTML. These tags will help us to create tables and formatting document.

In this post we will describe 2 types of HTML tags:

HTML Table Tags
HTML Formatting Tags

So let’s start.

HTML Table TAGS

Tag	Tag Name	Desciption
<table>	Table tag	Define a table
<caption>	Table caption	Define a table caption
<th>	Table header	Define table header
<tr>	Table row	Define table row
<td>	Table cell tag	Define table cell
<thead>	Table head	Group the table header content
<tbody>	Table body	Group the table body content
<tfoot>	Table footer	Group the table footer content
<col>	Column	Specifie column property
<colgroup>	Column group	Specifie group of column properties

Important Notes and Tips:

HTML, table tag is used to create table in HTML document.
Tables are used to organize data like, text, images, links, forms, form fields, other tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default.
A more complex table may also include a <caption> <col> and <colgroup> elements; and the structural <thead>, <tbody> and <tfoot> elements, which are used to identify the different regions in the table.

Lets Checkout this example:

Code:

Result:

Here is simple HTML tables which contains rows and columns. The <table> tag specifies document that it’s a table.
<tr> tag specify table that it’s a row.
How many cells are specify by <td> tag.

Code:

Result:

Here we specify <caption> tag which is telling about the table.
<th> tag used to specify header of the table.

Code:

Result:

The <col> tag is specify by pink color which is single column of table.
<colgroup> is specify by blue color which is multiple column group.

Code:

Result:

Code:

Result:

<rowspan> and <colspan> is used to merge column and row see the above example.

HTML Formatting TAGS

Formatting tags are usually used to format HTML document like: bold/italic/underline text, give an abbreviation, quote, address etc.

Let’s Checkout them with example:

Notes and Tips:

<bdi>:

The <bdi> (stands for bi-directional isolation) element represents a span of text that is isolated from other text for the purposes of formatting in a different direction.

<bdo>:

The <bdo> (short for bidirectional override) tag is used to override the current text direction. You must specify the dir attribute on this element.

<address>:

The <address> tag specifies the author's contact information. This element is used to mark up the contact details for the author or owner of the document, so that the reader may use these details to contact the document's owner.

<abbr>:

The <abbr> tag defines an abbreviated form of a longer word or phrase.

<b>:

The <b> (short for bold) tag displays text in a bold style. This element typically renders the text it encloses in a bold typeface without conveying any extra importance.

<blockquote>:

The <blockquote> tag in HTML is used to display the long quotations (a section that is quoted from another source). It changes the alignment to make it unique from others. It contains both opening and closing tags.

<cite>:

The <cite> tag in HTML is used to define the title of a work. The <cite> tag define the title of work. It displays the text in italic format.

<code>:

The code tag is a specific type of text which represent computer output. HTML provides many methods for text-formatting but <code> tag is displayed with fixed letter size, font, and spacing.

<del>/<ins>:

The code tag is a specific type of text which represent computer output. HTML provides many methods for text-formatting but <code> tag is displayed with fixed letter size, font, and spacing.

Code:

Result:

Important Notes and Tips:

<dfn>:

The HTML <dfn> tag is used to mark a term that is being defined in the document. The definition for the term must be found within the parent of the <dfn> tag. Browsers traditionally render the text found within the <dfn> tag as italicized text. This tag is also commonly referred to as the <dfn> element.

<em>:

<em> tag marks text that has stress emphasis which traditionally means that the text is displayed in italics by the browser. This tag is also commonly referred to as the <em> element.

<i>:

The HTML <i> tag merely gives text an italicized appearance but does not provide any semantic meaning to the text. This tag is also commonly referred to as the <i> element.

<kbd>:

It is a Phrase tag and used to define the keyboard input. The text enclosed by <kbd> tag is typically displayed in the browser’s default monospace font.

<mark>:

<mark> tag is used to mark or highlight text that is of special interest or relevance in an HTML document. Browsers traditionally render the text found within the <mark> tag as text with a yellow background color.

<meter>:

It is used to define the measurement of scale in a well-defined range with a frictional value. It is also known as a gauge. It is used in Disk use, relevance query result, etc.

<pre>:

The HTML <pre> tag defines pre-formatted text preserving both white-space and line breaks in the HTML document.

<progress>:

<progress> tag is used to show the completion progress of the task. We can use to manipulate the value of progress bar by JavaScript.

<q>:

The HTML <q> tag defines a short inline quotation in the HTML document from another source. Browsers traditionally render quotation marks around the text found within the <q> tag.

<rp>:

The <rp> tag in HTML is used to provide parentheses around a ruby main text which defines the information.

<rt>:

The <rt> tag in HTML is used to define the explanation of the ruby annotation which is a small text, attached with the main text.

<ruby>:

The <ruby> tag in HTML is used to specify the ruby annotation which is a small text, attached with the main text to specify the meaning of the main text.

Code:

Result:

Important Notes and Tips:

<s>:

The HTML <s> tag draws a horizontal line through the text (ie: strike-through).

<samp>:

<samp> tag is defined as sample output from a computer program. Generally, the <samp> tag is displayed in the browsers with monotype font.

<small>:

The HTML <small> tag makes text one font size smaller in the HTML document.

<strong>:

The HTML <strong> tag gives text a strong emphasis which traditionally means that the text is displayed as bold by the browser.

<sub>:

The HTML <sub> tag defines subscript text in an HTML document. For example, in the chemical formula CO2, the number 2 is rendered as subscript which has a smaller font and appears with a lowered baseline.

<sup>:

The HTML <sup> tag defines superscript text in an HTML document. For example, when dealing with an area value such as 36 ft2, the number 2 is rendered as superscript.

<template>:

The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads. The content inside <template> can be rendered later with a JavaScript.

<time>:

<time> tag is used to define the human readable time and date. <time> tag represents a 24-hour clock time and date. <time> tag is able to encode the date and time in machine readable format.

<u>:

The HTML <u> tag defines text that should be styled differently or have a non-textual annotation.

<var>:

The <var> tag is used to defines a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.

<wbr>:

The <wbr> tag in HTML stands for word break opportunity and is used to define the position within the text which is treated as a line break by the browser.

Code:

Result:

References:

https://www.w3schools.com/tags/ref_byfunc.asp