Table in HTML


Table is one of the most interesting and important features of any HTML document. Table are a two dimensional matrix. It consists of rows and columns. Tables are used to display data in columns or in rows on a web page. Using table, information can be arranged in the form of rows and coloums.This helps the users to quickly search and analyze the data and retrieve the desired information .These row and columns on intersection create individuals cell that can contain either text or image. All table related tags are included between the table <Table></Table> tags.

In HTML table is a collection of rows and columns.In table row and columns is divided into cells.Cells hold the table’s data.A table is made up of horizontal collection of cells from left to right and columns are made up of cells from top to bottom.Using tables in HTML we cannot only represent tabular data but can also represent non-tabular data.

Coloumn1      Coloumn2    Coloumn3    Coloumn4

Sturollno

Stuname

Stucourse

Stufees

101

Priti

BCA

9000

102

Vikrant

DCA

10000

102

Anand

MCA

11000

Creating a table

When we create a table in HTML,we used <Table> element.   Every table begins with <Table> tag and ends with  </Table> tag.Inside  the<Table> element rows are defined.

 (1.)<TR> Tag :-Each row in a table begins with  a<TR>tag which stands for Table Row.A row must contain at least one table header.A table row ends with a </TR> tag.this is optional tag.If user cannot closing this tag then the next <TR> tag automatically tells the browser that a new row begins.

 (2.)<TD> Tag :-The <TD> stands for  Table Data and is used to begin a new cell in a table.The <TD> tag start with opening tag <TD> and end with ending tag </TD>.Ending tag is optional if we donot use closing tag </TD> them the next <TD> tag tells the browser that a new cell begin.

(3.)<TH> Tag :-Each header cells start with <TH> tag and closing with ending tag </TH>.This tag should always be placed inside the <TR> tag.The main difference between <TH> and <TD> tag is that the text in the <TH> tag is bold and in case of <TD> tag.It remains as a simple text.

With these tags in mind, we can create both basic and complex table structures according to our needs. Say we want to create a basic table structure, such as the following:

Roll no Student name
1  Tahjib
2 Rehaan

Your code might look like that shown next:

<table>
<tr>
<th>Roll no</th>
<th>Student name</th>
</tr>
<tr>
<td>1</td>
<td>Tahjib</td>
</tr>
<tr>
<td>2</td>
<td>Rehaan</td>
</tr>
</table>

Opening and closing table tags surround the entire section of code. This tells the browser that everything inside these tags belongs in the table. And there are opening and closing <TR> tags for each row in the table. These surround td or the tags, which, in turn, contain the actual content to be displayed by the browser.

(4)Table Caption(<Caption>) :– When we want to give the heading of the table then we can use <Caption>tag in a <Table> tag.This tag contained text that provide information regarding to the table.The caption tag has a attribute align,Which is used to set the alignment heading. Alignment  has five values that are:-

  • TOP
  • BUTTOM
  • LEFT
  • RIGHT
  • CENTER

Example:

<HTML>

<Head><Title>Table Header</Title></Head>

<body>

<table border=”2”>

<caption  align=”center”>Emp Record</caption>
<tr>
<th>Emp id</th>
<th>Emp name</th>

<th>Post</th>
<th>Salary</th>
</tr>

<tr>
<td>101</td>
<td>Rohit</td>

<td>Manager</td>

<td>10,000</td>
</tr>

</table></body></HTML>
OUTPUT:-

 

 

 

 

 

 

 

 

Table Attributes :-Table has many attributes.

(1.)BORDER :-When we want to give the width of the table border then border attribute is used. By default, a table has no border.The default value of  border attribute is 1.e.g

<table border=”3″>

(2.)ALIGN :-Align attribute is used to set the alignment of the table.If we donot used this attribute then by default the table is placed left side of the browser window.The value of alignment attributes are LEFT,RIGHT,CENTER.e.g

<table algin=”center”>

(3.)WIDTH :-This attribute is used to set the width of the table.The width can specified either in pixels or as a percentage of the web browser’s window horizontal width.If  we donot specify the width attribute then the width of the table and its cells will automatically expended.

<table width=”3o”>

(4.)CELLPADDING :-This is used to set the amount of space between the edges and contants of each cell in a table.By default,its value is 1 pixel.e.g

<table cellpadding=”1o”>

(5.)CELLSPACING :-The cellspacing is used to set the amount of space between the border of cells.By default, the value of cellspacing is 2 pixels.e.g

<table cellpadding=”2o”>

(5.)BGCOLOR :-This attribute is used to set the background color of the table.e.g

<table bgcolor=”red”>

(6.)BACKGROUND :-The background attribute is used to set the background image of the table.e.g

<table background=”red”>

Comments are closed.