Thursday, September 29, 2022

html Table Attributes

         

 Table Attributes Tag html tag          

       Table Attributes




Table tag :- 

1) Border Tag


The HTML <table> border Attribute is used to specify the border of a table. It sets the border around the table cells. Attribute Values 1: It sets the border around the table cells.


This can be set around the table by specifying values like 0 for no border is showing around the table cells, whereas value 1 is set to display a border 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> cellpadding Attribute is used to specify the space between the cell content and cell wall. The cellpadding attribute is set in 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 attribute, which specifies the space between the cell wall and the cell content. cell spacing refers to the amount of space that is held between the cells in a table. It is specified with the cellspacing attribute in the table element. Values are specified in number of pixels. Increasing the cell spacing results in wider shaded borders between cells. 

The cell spacing attribute places space around each cell in the table. The Cellspacing attribute used to control the amount of space between cells of a table. or we can say that cell spacing refers ,to  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 specifies the width of a table or the width of a. table cell. The width can be set either as an absolute value in pixel or as in percentage (%) .if the width attribute is not set it  will taks up the space of longest 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

list attributes tag html
table tag attributes html
client side scripting language
php program to print number increasing pyramid
Advantage and Disadvantage of JavaScript

Wednesday, September 28, 2022

html comments tag and html table tag

                    

                  HTML Tag




1) HTML Comments  Tag 

The comment tag is used to insert comments in the source code. Comments are not displayed the browser. You can use comment to explain your code at to 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 no difference between tag usage wheather you're commenting out one line or multiple lines.  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 can make your comments easier to read.

Program 

<! --

This is line 1

This is line 2 

And this line 3

-->

<P>This is normal text and is displayed to the users </p>

 

 Multiple Lines Comments 

output


This is normal text and is displayed to the users



3) 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 consists of the <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 border bottom property html
list attributes tag html
html login form
how to create home page design
 html basefont tag
php program print square number pattern program


Monday, September 26, 2022

html image tag and html paragraph tag


           HTML Tag


Html tag


1) Teletype Element


The HTML Teletype Text Element (<tt>) produces an inline element displayed in the browser's default monotype font. This element was intended to style text as it would display on a fixed width display, 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>The tt element is not supported in HTML5.</p>

</Body>

</html>


Teletype Element output


This text is normal.

This text is teletype text.

Note: The tt element is not supported in HTML5.


2) Anchor links and Named Anchors 


A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes 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. Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified  with css 

The Paragraph element. The <p> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as 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. On web browsers, paragraphs display as blocks of text separated from adjacent blocks by blank lines, white spaces, or first-line indentation</p>

<p  align=right>Paragraphs tags or <p> tags in HTML help us create paragraphs on a web page. On web browsers, paragraphs display 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 


css border bottom property

html list attributes tag

html login form

html bdo tag

html bold tag

html audio tag

html file-upload tag