Welcome to compeducational.com: 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>

</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 <HTML> <HEAD> My First Table in HTML </HEAD> <TABLE border="1" bgcolor="aqua"> <TR> <TH> Roll No </TH> <TH> Name </TH> </TR> </TABLE> </BODY> </HTML>	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:

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

<TH> FIRST NAME</TH>

<TH> ADDRESS </TH>

</TR> (First row is now over)

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

<TD> MEHTA </TD>

<TD> NEW DELHI </TD>

</TR> (Second row is over)

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

<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 <HTML> <HEAD> My First Table in HTML </HEAD> <BODY> <TABLE Border = "1"> <TR> <TH> ROLL NO</TH> <TH> FIRST NAME</TH> <TH> LAST NAME</TH> <TH> ADDRESS </TH> </TR> <TR> <TD> 1 </TD> <TD> ANSH </TD> <TD> MEHTA </TD> <TD> NEW DELHI </TD> </TR> <TD> 2 </TD> <TD> JIYA </TD> <TD> KUKRETI</TD> <TD> NOIDA </TD> </TR> </TABLE> </BODY> </HTML>
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 :

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>

</TR>

</TABLE>

For example :

<HTML>

<HEAD>

<TITLE> My first web page </TITLE>

</HEAD>

<TR>

<TH> Photo </TH>

<TH> First Name </TH>

<TH> Address </TH>

</TR>

<TR>

<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 :

<TR>

<TH> Photo </TH>

<TH Colspan = "3"> Personal Detail </TH>

</TR>

<TR>

<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>

Text

</FONT>

</TH>

</TR>

</TABLE>