ad

Thursday, September 29, 2022

html Table Attributes

         

 Table Attributes Tag html tag          

       Table Attributes




Table tag :- 

1) Border Tag


The HTML <table>tag use the border Attribute is used to specify the border to the table. It set the border tag around the table cells. Attribute Values 1 It sets the border tag around the table cells.

This can be set around the table tag  by specifying values like 0 for no border is the showing around the table cells value 1 is set to display a border  tag around the table cells.

Program 

<! Doctype html>

<html>

<body>

<table border = 1>

<tr>

<th>header 1</th>

<th>header 2</th>

</tr><tr>

<td>cell 1</td>

<td>cell 2<\td>

</tr><tr>

<td>cell 3</td>

<td>cell 4</td>

</tr></table>

</body></html>


Border output


Border tag output







2) Cellpadding Tag 


The HTML <table> tag cellpadding Attribute is use to specify the space between the cell content and cell wall. The cellpadding attribute is a set  terms of pixels Attribute Values. pixels. It holds the space between the cell content and cell wall in terms of pixels.

Cellpadding sets the amount of space between the contents of the call and the cell boundary or edge. The default is 1. Cellpadding is an attribute of an. Individual cell in a table, so each cell ina table can have .the its own Cellpadding value.

Syntax

      <table cellpadding ="pixels">

Cellpadding Tag

Program 

<! Doctype html>

<html><body>

<P>Table without Cellpadding </p>

<table border = 1>

<tr>

<th>month</th>

<th>saving</th>

</tr><tr>

<td>January</td>

<td>$100</td>

</tr></table>

</head>

</body>

</html>

Cellpadding Tag  output

Cellpadding tag output



3) Cellspacing Tag


The cellpadding is attribute, which specifies the space between the cell as wall and the cell content. cell spacing refers to the amount of space that is held between the cells in a table tag . It is specified with the cellspacing attribute tothe table element. Values are specified in number of pixels. Increasing the cell spacing results is wider shaded borders between cells. 

The cell spacing attribute place space around each the cell in the table. The Cellspacing attribute use to control the amount of the space between cells of a table. cell spacing refers to the  how space is left between each cell well in a  table. 

Program 

<!Doctype html>

<html><body>

<p>table without Cellpadding</p>

<table border =1>

<tr>

<th>month</th>

<th>saving</th>

</tr><tr>

<td>January</td>

<td>$100</td>

</tr></table>

</body>

</html>


Cellspacing Tag  output


Cellspacing Tag output



4) width and height  tag 

 The width attribute specifie the width of a table tag or the width of a. table cell. The width can be set either as  the absolute value in pixel or in percentage (%) .if the width attribute is not set it  will taks up the space of longest an single word in each cell.


Syntax :-

Table width in pixel : <table border =1 width= 100>

Table width in percentage (%) 

<table border = 1 width = 100%>

The above html code display two tables one is 100 pixels in width and other one 100% width. First table will remain 100 pixels in width in any changes in browser window state , while other tables will stretch the full  width of windows in which it viewed. 

Program 

<!Doctype html>

<html><body>

<table border= 1 width= 100>

<tr><td>

Table width is 100 pixel

</td></tr>

</table>

<Br>

<table border= 1 width= 100%>

<tr><td>

Table width is 100%

</tr></td>

</table>

</body>

</html>


width and height  tag output


Height and weight tag output

Related post :-

html al navigation bar

html table program

css column-gap property

on No comments:
Labels: , ,

Wednesday, September 28, 2022

html comments tag and html table tag

                   

                              HTML Tag


1) HTML Comments  Tag 

The comment tag is the  used to insert comments in source code. Comments are not displayed by the browser. html comments tag use comment to explain your code at the hide scripts from browsers without support for scripts.

Syntax

 The comments tag is written as<!-- --> with the comments inserted between the start and end tags. 

Note that the exclamation mark is only used in the start tag


Program 

<! Doctype html>

<html>

<body>

<!-- This is a comment  -->

<p>This is a paragraph</p>

<!-- comments are not displayed in the browser -->

</body>

</html>

  

Comments tag output


This is a paragraph



2) Multiple Lines Comments


There is the difference between tag usage wheather you commenting out one line or multiple lines html comments .  You still insert the comments between the start and end tags .you can even have the start and end tags on their own line. This make your comments line  easier to read.

Program 

<! --

This is line 1

This is line 2 

And this line 3

-->

<P>html comment tag apply </p>

 

 Multiple Lines Comments 

output

html comment tag apply


3) Tables Attributes 

( use to the Tables Attributes Border, Cellpadding , Cellspacing , height, width )

 The <table> tag is written as </table>with the various table elements nested between the start and end tags.

The HTML table tag consists of  <table> element and one or more <tr>,<th>,and<td> element. The <tr> element defines a table row , the <th> element defines a table header, and the <td>element defines a table cell. A more complex HTML table may also include <caption>, <col>, <colgroup>,<thead><tfoot> and <tbody> element. The HTML table allow web authors to arrange data link text, images , links text, images, links other tables etc. into rows and columns of cells.


Program 

<! Doctype html>

<html>

<body>

<table>

<tr>

<th>Heading 1</th>

<th>Heading 2</th>

</tr>

<tr>

<td>cell 1</td>

<td>cell 2</td>

</tr>

<tr>

<td>cell 3</td>

<td>cell 4</td>

</tr>

</table>

</body>

</html>


Tables Attributes output

Header 1 Header 2

cell 1    cell 2

cell 3     cell 4


     Related Post :-

css inline block

html form pattern

html table border

on No comments:
Labels: ,

Monday, September 26, 2022

html image tag and html paragraph tag

           HTML Tag






1) Teletype Element


The HTML Teletype element  Text Element (<tt>) produces an inline element displayed in the browser default monotype font. This element is  the intended  style text as  would display on  fixed width  such as a teletype. It probably is more common to display fixed width type using the <code> element. This element is obsolete.  Use a more appropriate element, such as<code> or <span> with CSS, instead.


Example


<!DOCTYPE html>

<html>

<body>

<p>This text is normal.</p>

<p><tt>This text is teletype text. </tt></p>

<P><strong>Note : </strong>webdesigningtheory.blogspot.com.</p>

</Body>

</html>


Teletype Element output


This text is normal.

This text is teletype text.

Note:webdesigningtheory.blogspot.com


2) Anchor links and Named Anchors 


A link is specified using HTML tag <a>. This tag  called anchor tag and anything between  opening <a> tag and  closing </a> tag is the part of the link and a user can click that part to reach to the linked document. 

Example

<!document html>

<html>

<head>

<title>Google</title>

</head>

<body>

<h1>Anchor Tags </h1>

<a href="http://google.com>Google Website</a>

</Body>

</html>


Anchor links and Named Anchors output


Anchors Tags

Google Website


2)  Example 


<!DOCTYPE html>

<html>

<body>

<H1>Hyperlink</h1>

<a href="www.faceboo.com" target="_blank">Visit Facebook</a> | <a href="www.twitter.com" target="_blank">Visit Twitter</a> | <a href="www.yahoo.com" target="_blank">Visit Yahoo</a>

</body>

</html>

Anchor links and Named Anchors output

Hyperlink

Visit Facebook |visit Twitter |visit Yahoo


3) Links - Color 

 You can set colors of your links, active links and visited links using link, alink and Vlink attributes of <body> tag. 

When you move the mouse over a link, two things

1)  The mouse arrow will turn into a little hand .

2)  The color of the link element will change.

By default, a link will appear link

1)  An unvisited link is underlined and blue.

2)  An visited is underlined and. Purple.   

3)  An active link is underlined and red.


Example

<! Doctype html>

<html>

<head>

<title>Hyperlink Example</title>

</head>

<body alink ="blue" link ="red" Vlink= "pink">
<P>click following link </p>
<a href = "www.google.com" target ="_blank">HTML tutorial</a>

</body>

</html>

Links - Color output


click following link

HTML tutorial





4) Image Tag 

An image can be inserted into a web page using the tag <img>. The <img> tag is empty tag. This  tag takes the name of the image file as an attribute.

The <img> tag is used to embed an image in an HTML page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image. The <img> tag has two required attributes: src - Specifies the path to the image. 

Syntax

<Img src = "Url">

Attribute


1) Align   :-.   Top bottom middle left right

Not supported in HTML5  Specifies the alignment of an image according to surrounding element.


2) Alt    :-  Text 

Specifies an alternate text for an image.


3) border    :-  Pixels

Specifies the width of the border around an image.


4) height   :-  Pixels

Specifies the height of an image.


5) width  :-  Pixels 

Specifies the width of an Image.


6) Src  :-   pixels

specifies the URL of an image.


Example

<! Doctype html>

<html>

<Body bgcolor="blue"  text=yellow" link="red" >

<center><h1>photo Art Gallery </h1></center>

<img src="1.jpg" height="100" width="100" align ="left">

<img src="2.jpg" height="100" width="100"align="centre" alt ="middle image">

</body>

</html>


Image Tag output


Image 1(left)



Image 2(middle)


5) paragraph Tag

The <p> tag defines a paragraph. the Browsers automatically add some space (margin) before and the  after each <p> element. The margins can modified with the css. 

The Paragraph element. The <p> HTML element represents a paragraph. Paragraphs  usually represented to the visual media as  blocks of text separated from the adjacent blocks by blank lines andor first-line indentation but HTML paragraphs can be any structural grouping of related to content, such  images or form fields.

Attribute

1) Align    :-  Left, right, centre, justify

Specifies the alignment of the text with in paragraph

paragraph Tag

    Example :-

<! Doctype html>

<html>

<body>

<P align =left> is a first paragraph.this is a first paragraph Paragraphs tags or <p> tags in HTML help us create paragraphs on a web page. web browsers is  paragraphs display a blocks of text separated from adjacent block by blank lines white spaces or first-line indentation</p>

<p  align=right>Paragraphs tags  <p> tags in HTML help us create the paragraphs.on a web page. web browsersndisplay  paragraphs  as blocks of text separated from adjacent blocks by blank lines, white spaces, or first-line indentation </p>

</body>

</html>


paragraph Tag

  Output :-

HTML paragraph Tag



Related Post :-

html list attributes tag

html form pattern attribute

css box property

on No comments:
Labels: ,

Sunday, September 25, 2022

html q tag and html sup tag

                         HTML Tag

 


HTML - Drawing Line 

The HTML. <hr> tag is use for creating a horizontal line. This is also called Horizontal Rule in the HTML <hr> tag also supports following additional attributes use horizontal line.


Attribute 

1)  Align  :-   left, right, centre

Description  :- Align Attribute It specifies to the alignment  horizontal line.

2)  No shade  

 No shade It Removes the usual shading effect most browsers display

 3)  Size

size attribute It Specifies the height  the horizontal line. 

4) Width

width Attribute It Specifies the width of the horizontal. 


Example 

<!DOCTYPE html>

<html>

<body>

<p>Horizontal Ruler <hr></p>

<p>Horizontal Ruler <hr></p> 

<p>Horizontal Ruler chr></p>

</body> 

</html>


Drawing Line  output

Horizontal Ruler

___________________________________ 

Horizontal Ruler

___________________________________

Horizontal Ruler

___________________________________


2) Quote Element 


Quote Element is the <q> tag defines a short quotation. Browsers normally insert quotation marks around the quotations.

Attribute

1)  Cite  :-  URL

Specifies the source URL of the quote

Example 


<! Doctype html>
<html>
<body>
<p>wwF's goal is to:
<q>.http://webdesigningtheory.blogspot.com/</q>
 they succeed.</p>
</Body>
</html>

Quote Element  output


wwF's goal is to: "http://webdesigningtheory.blogspot.com/ " they succeed.

3)Subscript Element 


Subscript Element is the <sub> tag defines subscript text. Subscript text appears half  character below tnormal line, and  sometimes rendered in a smaller font. Subscript text it can be use for chemical formulas, H2O.The <sub> tag is used to add a subscript text is the HTML document. The <sub> tag defines the subscript text. Subscript text is the appears half of character below the normal line and is sometimes rendered to a smaller font.

Example

<!DOCTYPE  htal>

<html>

<body>

<P>This text contains
<Sub>subscript</sub>text.</p>
<p>This text contains<sup>superscript</sub>text.</p></Body>

</html>


Subscript Element output


This text contains subscribe text.

This text contains subscribe text


  4)Big Element

HTML Big Element (<big>) makes to  the test font size one size bigger for example, from small to medium, from large to x- large up to the browser maximum font size.

Example

<! Doctype html>

<html>

<body>

<p>This text is normal.</p>

<P><big>This text is bigger. </Big></p> 

<P><strong>Note: </strong> big element  not supported to HTML5. </P>

</Body>

</html>

Big Element output

This text is normal.

This text is bigger.

Note :  big element  not supported to  html 5.


5) Small Element 

The HTML Small Element <small> makes  the text font size on size smaller  example from large to medium  from small to x-small  down  the browser minimum font size. In HTML5, in this element is repurposed to represent side-comments and small print, including copyright and legal text.


Example

<!DOCTYPE html>

<html>

<body>

<P>pssmovement - the world's largest free Meditation training movement.</p>

 <P><small>No Copyright . . .  Please spread the message . . .  visit: www.google.com   </small></p>

</body> 

</html>

Small Element 

output

 pssmovement - the world's largest free Meditation training movement

No Copyright . . . Please spread the message . . . visit: www.google.com


Related Post

html tag

html form

html table attribute

on No comments:
Labels: , ,
Subscribe to: Posts (Atom)