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: