Showing posts with label Creating table in HTML. Show all posts
Showing posts with label Creating table in HTML. Show all posts

CREATING TABLE IN HTML

The data organised in rows and columns is called a table. The horizontal stripe of a table is called its row and vertical stripe is called its column or field.  A row is the information about one item or one person where as a column or field is the information about one kind of data of different items/person. With the help of a table we can easily organise the large amount of data in structured and understandable way. We can easily create a table in HTML web page.

Q. How we can create a table in HTML.

Ans. <TABLE> TAG is used to create a table in HTML. This is the starting tag to start a table, then we use <TR> (Table Row) tag to create a row in the table. <TH> tag is used to create column or field heading in a table. <TD> tag is used to create table data.

The syntax to create a simple table with 1 row and 2 columns is as follows :

<TABLE>

<TR>

<TH> data </TH>

<TH> data </TH>

</TR>

</TABLE>

 Lets understand it in detail. First we start with <TABLE> tag, after typing the starting tags like <HTML>, <HEAD> and <TITLE> etc.  (For detail about starting tags go to the link INTRODUCTION TO HTML) 

  Open notepad and type the following opening tags

<HTML> (This assigns that it is an HTML file)

<HEAD> (This assigns that document's heading area starts)

<TITLE> My First Web Page</TITLE> (The text between both opening and closing <TITLE> tag  is the title of the web page)

</HEAD> (This assigns that heading area is now finished)

<BODY BGCOLOR = "Aqua"> (This indicates that document's body or main content starts with background color "Aqua"

<TABLE> (This tag says now we start creating a table)

<TR> (This tag creates a table row)

<TH> Roll No </TH> (TH tag creates a field or column with data "Roll No." and </TH> tag means this field is over now.)

<TH> Name </TH> (Now second field appears with data "Name".

</TR> ( This means that this row is terminated now)

</TABLE> (This assigns that the making of table is over.)

</BODY> (Body area of document is over)

</HTML> (HTML Document is completed now).

Now we save the file with any name but extension must be .htm or .html. Now it appears as a browser, click on that browser, the result will be as follow:

Roll No.

Name


Try above program in try it editor:

Try it yourself editor
 
Code
Output

Border="1" and bgcolor="aqua" are the attributes of <table> tag, Further we'll know in details.

Let's  see the other example with 3 rows and 4 columns with the data as follow:

 <TABLE Border = "1">

<TR>  (First row starts with 4 columns heading)

<TH> ROLL NO</TH>

<TH> FIRST NAME</TH>

<TH> LAST NAME</TH>

<TH> ADDRESS </TH>

</TR> (First row is now over)

<TR> (Second row starts now with 4 fields or columns)

<TD> 1 </TD>

<TD> ANSH </TD> 

<TD> MEHTA </TD>

<TD> NEW DELHI </TD>

</TR> (Second row is over)

<TD> 2 </TD> (Third row starts now)

<TD> JIYA </TD>

<TD> KUKRETI</TD>

<TD> NOIDA </TD>

</TR> (Third row is over)

</TABLE> (Table is over)






Try in try it editor Try it yourself editor
 
Code
Output


Attributes of  <Table> Tag : 
Following are the attributes of the <Table> tag :
  • BORDER
  • CELLPADDING
  • CELLSPACING
  • HEIGHT
  • WIDTH
  • BGCOLOR
BORDER Attribute: This attribute is used to insert border in a table for its rows and columns. The thickness of the border is specified by its value (number). By default the thickness of the border is "1". Syntax to use border attribute of  <Table> tag is as follow:
<Table border = "value"> (value may be 1, 2, 3 ...)

CELLPADDING Attribute: This attribute is used to specify the space between grid line and content in the cell. The spacing can be increased or decreased by specifying the value in number with this attribute.
The syntax is as follow :
<Table Border = "value" cellpadding = "value">
<Table border = "2" cellpadding = "15">


A table having values of attributes border "2" and cellpadding "50"



CELLSPACING Attribute: This attribute is used to specify the space between cells. The spacing can be increased or decreased by specifying the value in number with this attribute.
Syntax is as follows :
<Table Border = "value" cellspacing = "value">
<Table border = "2" cellspacing = "15">

WIDTH and HEIGHT Attributes : These attributes are used to specify the size of the table. The value of width and height can be specifying by using an absolute value (in number or pixel) or a relative value (in percentage). Syntax is as follows :
<Table Border = "value" Width = "value" Height = "value">
<Table Border = "2" Width = "90%" Height = "25%" 

BGCOLOR Attribute : This attribute is used to set/change the background colour of the table. The possible value of this attribute is same as the value of BGCOLOR attribute in <BODY> tag. Syntax to use BGCOLOR is as follows :
<Table border = "2" bgcolor= "yellow">


A table having values of attributes cellspacing "15", width = "90%, height = "30%" and bgcolor "yellow"

Inserting an Image : 
An image can also be inserted inside a table or in any cell of the table by using <IMG> tag.
Syntax is :
<TABLE>
<TR>
<TH> <IMG SRC = "Filename"> </TH>
</TR>
</TABLE>
For example :
<HTML>
<HEAD>
<TITLE> My first web page </TITLE>
</HEAD>
<BODY BGCOLOR = "Yellow">
<TABLE BGCOLOR = "Green" border = "2" Height = "50%" Width = "90%" CELLPADDING = "5">
<TR>
<TH> Photo </TH>
<TH> First Name </TH>
<TH> Last Name </TH>
<TH> Address </TH>
</TR>
<TR>
<TH> <IMG SRC = "C:\Users\asd\Desktop\100.jpg"> </TH>
<TD> Yashika </TD>
<TD> Prasad</TD>
<TD> Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>

                
Spanning of Column and Rows :
Spanning means merging or combining. We can merge columns in a table by COLSPAN attribute and rows by ROWSPAN attribute. Both the attributes are used with specific value in number.
Syntax to use COLSPAN and ROWSPAN attributes is
<TABLE>
<TR> 
<TH  Colspan = "3"> Text </TH> (here 3 columns will be merged)
</TR>
<TR>
<TH  Rowspan = "2"> Text </TH> (here 2 rows will be merged)
</TR>
<TABLE>

For example :
<TABLE BGCOLOR = "Green" border = "2" Height = "50%" Width = "90%" CELLPADDING = "5">
<TR>
<TH> Photo </TH>
<TH Colspan = "3"> Personal Detail </TH>
</TR>
<TR>
<TH> <IMG SRC = "C:\Users\asd\Desktop\100.jpg"> </TH>
<TD> Yashika </TD>
<TD> Prasad</TD>
<TD> Delhi</TD>
</TR>
</TABLE>

Columns "First name", "Second name" and "Address" are merged into "personal detail"

Font Size, Color, Font Face and Aligning Text in a Cell :
We can make our text attractive, professional and readable by  changing color, size and style of the font in a cell of a table. We can also change the alignment of the text in a cell.
To do so following attributes are used with <FONT> tag inside <TH> tag.
SIZE,      COLOR,      FACE,      ALIGN
Syntax to use the above attributes are :
<TABLE>
<TR>
<TH Align = "Left"/"Right"/"Center">
<FONT SIZE = "Value"  COLOR = "Value" FACE = "Font Name">
Text
</FONT>
</TH>
</TR>
</TABLE>



Text having Alignment "center", font color "orange", size "6" and font face "Algerian"
Try above codes in Try it Editor.

TOP
 Try it yourself editor
 
Code
Output












By - No comments:
Labels:

Introduction to HTML


We surf many websites everyday to find out the information required that time. We find our solutions too by using these websites. But have you ever thought how these amazing websites are made and how does a link work ?
Yes, this is the subject we will discuss here and the name of the topic is HTML. HTML stands for Hypertext Markup Language.
A markup language is used to mark the content that helps in designing the web pages. These related web pages make a website.
 
Hypertext is the way of creating documents that can be displayed on the web and helps to establish link between themselves and cross link to other pages on the web.
Markup  means identifying or marking the text by applying different formatting features in web documents and producing different types of effect when the document is displayed on web page.
Language This is the common syntax and rules for writing or marking the text.

Features of HTML
i. HTML is not a programming language or any word processing program, rather it is a markup language.
ii. It is a platform independent language, it can run on any type of operating system like Macintosh, IBM computer etc.
iii. It is not a case sensitive, we can write tag in any upper or lower case.
iv. it allows to format text, graphics, audios, videos and save in an ASCII code.

Requirement to work with HTML
We need only two things to work in HTML :
i. Text Editor and             ii. Web browser.

i. Text Editor : It provides the space where we write text in proper HTML syntex to create a web page.  Some examples are Notepad, Wordpad, Word perfect, KWrite, Front page etc
After completing the writing text for a web page we save this file with extension .htm or .html.

ii. Web browser : It is an application software used to display the coded content in text editor in a web page on World wide web or on a local area network. A web page may contain hypertext and the web browser allows to open it in other web page. Examples Google chrome, Internet explorer etc.

Now we will know some basic terminologies used in HTML.
1. Tags : These are the keywords of HTML used to define how text, images, audios and videos will appear in a web page. This is the fundamental unit of coded document in HTML and surrounded by angular brackets (<  >). Like <title>, <body> etc. If the tags are not surrounded by angular brackets, HTML takes it as normal text. 
Tags are of two types. 
Container Tag and 
Empty Tag
A container tag used in pair a opening tag and a closing tag. It defines where or how the structure of the text will appear written under  opening tag and closing tag.
For example : <title> my first webpage </title>
Here <title> is an opening tag, </title> is a closing tag  and these two tags defines the text present between both 'my first webpage' will be appeared as title of webpage (Title appears in the title bar of the web  browser). A closing tag is same as opening tag but starts with a back slash.

An Empty Tag is not used in pairs. It is enough to use it single only. Means it defines the property of the text or document. For example <br> .
<br> tag is used to give a line break at a particular place in a web page. When a line break appear at a particular place, the afterward texts will appear in next line so no need to give a closing tag.

2. Element : Elements are the different sections of HTML document, like head, body etc. It is the fundamental component of the structure in an HTML document that includes many different components like title, body, paragraph or list.
For Ex. <title> my first webpage </title>
The above whole line is called an element. An element includes
i. An opening tag
ii. An closing tag
iii. The text between the opening and the closing tag.

3. Attribute : An attribute is the property of a tag, which defines some additional information about that tag. It always specified inside the opening tag. All attributes consist of two parts - a name and a value.
Here name is the particular property of a tag and
value is the category of that property.
For Ex <body bgcolor="red">
Here body is the tag, bgcolor  (background color) is the attribute and property of the body tag and "red" is the category of background color.
Means the background color of the body text in a web page should be in red color.
Now we start coding in HTML so that we can easily understand the structure.

Fundamental Structure of HTML Document.

An HTML document consists of text that comprises the content of the document and the tags that defines the structure and the appearance of the document. The basic structure of a HTML document can be classified into different sections called elements.
HTML Coding Structure


See the above coding again
<html>
<head>
<title>
My first web page 
</title>
</head>
<body>
Welcome to my first web page.
</body>
Footer
</html>
Here tags <html> and </html> are opening and closing html tags and it includes all the tags and text written  in this page. It shows this is an html document.
Now <head> and </head> tags are opening and closing head tags. It includes the tags <title> and </title>. The text written with head tag will be displayed above the page as a heading and the text written in between the tags <title> and </title> will be displayed in title bar of the browser.
Tags <title> and </title> includes the text which will be displayed in title bar.
Now head section is finished and body section will start from here.
The text written between <body> and </body> tags are displayed in web page as a content.
After body tag section you can give the footer information like date of creating this page, time, name of the author(your) etc. But it is an  optional, you can ignore this if you want. 
Now at last the </html> closing HTML tag is given which means now the page is finished.
Coding in text editor Notepad++


Saving an HTML Document.
After coding as above in any text editor like 'notepad' in Windows or 'gedit' in BOSS Linux, now the time is to save the file.

Following are the steps to save the file in HTML.

i. Click file tab -- save as option
ii. Save as dialog box opens up, in File Name box type any name
iii. The most important step is after typing the name give a dot (.) and type 'html' or 'htm' as a extension of file.
iv. Now click 'save' button. The file will look now in form of browser.
saving of notepad file as my first webpage.html

Viewing the web page in web browser.
i. Navigate to the location where you have saved the html file.
ii. Double click that file (look like a browser). Now the html file opens in default web browser of your computer.
Here you can see the file, but if you need any change in your html file, then close the file and point that browser with mouse and right click.
Click 'open with' option select the editor name (like notepad) in which you have typed all coding.
Now it appears again in text editor form. Do the desired changes and this time click only file tab -- save option. (File name is already given). 

Running in browser
Try the above code in Try it Editor
Try it yourself editor
 
Code
Output

TOP 
















By - No comments:
Labels: , , , , , ,
Subscribe to: Posts (Atom)

Python: Functions