Important Things To Learn About HTML Table, HTML Styles And HTML Quotation Marks

HTML STYLES:

HTML style is used to give a style to an element. Styles like font size, size, color, etc. HTML Style is not a tag, it is an attribute.

Syntax:

Property and Value is a part of CSS. So, we will discuss it in the CSS blog.

Some important HTML style CSS properties :

1.HTML style: Font-family :

This property is used for specifying HTML which font to be used.

2.HTML style:Text size :

Defines the text size of the HTML element.

3.HTML style:Text alignment :

Used for giving horizontal text alignment to HTML elements.

4.HTML style:Background-color:

Used for giving background-color of HTML elements.

5.HTML style:Text color :

Used for giving text color of HTML elements.

Program:

<!DOCTYPE HTML>

<HTML>

<h1>This is a heading</h1>

This is a paragraph.

</body>

</html>

HTML TEXT FORMATTING:

Text formatting is designed to give special meaning to the text. All tags require closing tags.

Formatting elements are created for defining special types of text:

1. and tag:

Bold tag ()is used to bold the letters. But it does not specify extra importance

Syntax:

bold tag used for bold text.

The strong tag also used to bold the letters. But it specifies extra importance.

Syntax :

This is a strong tag.

2. and tag:

tag is used to give an italic effect to the text. It is basically a part of a text in an alternative mood.

Syntax:

Text is italic.

em tag i.e. is used to give an emphasized effect to the text. Content under this tag is basically italic. It is used for readers to read the text in verbal stress.

Syntax:

This is em tag.

3. tag:

Small tag ( tag) is used to define the element in smaller text.

Syntax:

This is a small tag. small>

Program:

<!DOCTYPE HTML>

<HTML>

This text is bold.

This text is strong.

This text is italic.

This text is of emphasized effect.

This text is small.

</body>

</html>

4 tag:

tag is used to define the text with the highlighted effect.

Syntax:

Always try to use mark tag for important text.

5.<del> tag:

<del> tag is used to define the text with a strike-through effect. It is basically to show that the text has been deleted from that web-page.

6.<ins> tag:

<ins> tag is used to define the text with an underline effect. It is basically to show that the text has been inserted on that web-page.

Syntax:

Use <del>delete tag </del> and <ins> insert tag</ins>.

Program:

<!DOCTYPE HTML>

<HTML>

<h1>The ins and del element</h1>

My favorite color is <del>blue</del> <ins>red</ins>!

<h1>The mark element</h1>

Learn Web Development from Techfreaktalks today.

</body>

</html>

7. and tags:

is used to give a subscript effect to that text. Subscript defines that half character below the usual line.

It is normally used for displaying ‘chemical formulas’ on web pages.

is used to give a superscript effect to that text. Superscript defines that half character above the usual line. It is normally used for displaying ‘footnotes’ on web pages

Program:

<!DOCTYPE HTML>

<HTML>

<h1>The sub and sup elements</h1>

This line contains subscript text.

This line contains superscript text.

</body>

</html>

</body>

</html>

How to make an HTML table?

We see a large number of tabular data is displayed by using tables as it is easy and convenient for users to understand the data.

Using HTML, the HTML Table is created very easily.HTML table is used to organize your data into a number of columns and rows.

HTML Table is added to the web page by using the <table> tag.

The table tag requires a closing tag. As the table contains rows we require to specify it by using <tr>.

In each table, we categorize the data by adding a header to the top of the table. So, for adding a header we use the <th> tag.

Each text in the <th> tag is by default bold and its alignment is centered.

In each table, the data or cell which comes under the specified header is added by using the <td> tag. Each text in the <td> tag is by default regular and it is left aligned.

Html Table Attributes:

1.For Spanning the cell into many rows:

If you want to span the cell into more than one row, then the “rowspan” attribute is used.

2.For adding the caption:

For adding a caption to a table a “caption” tag is used. It must be added immediately after adding the <table> tag.

Syntax:

<Caption>Basic HTML Table</Caption>

3.Id:

For adding any special style for one specific table use the “id” attribute to a table.

Program:

<!DOCTYPE HTML>

<HTML>

<Caption>Basic HTML Table</Caption>

<table>

<tr>

<th>Lucky</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

HTML table with CSS:

1.For adding HTML table border:

For adding borders to a table we use “border” CSS property.

Syntax:

Table, th, td{

Border: 1px solid black;

}

2.For adding collapsed border:

For adding collapsed borders to a table we use “border-collapse” CSS property.

Syntax:

Table, th,td {

Border: 1px solid black;

Border-collapse: collapse;

}

3.For adding cell padding:

If you want to add space between cell content and it’s borders. If you don’t use it your content looks attached to the borders. For adding padding to a table we use “padding” CSS property.

Syntax:

Th, td{

Padding: 15px;

}

4.For adding border-spacing in HTML table:

For adding space between the cells we use this property. For adding border spacing to a table we use “border-spacing” CSS property.

Syntax:

table {

Border-spacing: 5px;

}

5.For left align heading:

As every heading text is by default centrally aligned. If you want to align it on the left side, “text-align” CSS property is used.

Syntax:

th{

Text-align: left;

}

HTML Quotation Marks:

In this section, we are going to see how to add Quotation type text on your web-page. We will look at some tags one by one.

1.HTML Short Quotation:

The HTML <q> element defines short quotation. If you want to add quotations to specific text then this tag is used.

Program:

<!DOCTYPE HTML>

<HTML>

Browsers itself insert quotation marks due to the q element.

WHO's goal is to: <q>To improve reduce health risks,equity in health and promote healthy lifestyles .</q>

</body>

</html>

2.HTML Long Quotation:

The HTML <blockquote> element defines the quoted section. If you add quotations with some extra importance to that text then these Long quotation is used.

Program:

<!DOCTYPE HTML>

<HTML>

Browsers usually indent blockquote elements.

HTML was created for the purpose of giving structure to documents like paragraphs, headings and those were used for sharing scientific and technical documents.

</blockquote>

</body>

</html>

Roadmap To Web Development