Skip to main content

Table in HTML

Table is used to store data in the form of rows and columns.<Table> </Table > tag is used for creating the table.  Tags used for creating  the table  is as follows


Tags
Description
<table></table>

<tr></tr>
It defines the table row.
<th></th>
It defines the table heading.
<td></td>
It defines the table data.
<caption></caption>
It defines the caption of the table.


Attributes of the <table></table> tag.


Attributes
Value
Description
Bgcolor
Color name
Changes the background color of the table.
Background
Path of the image
Applies the image as the background.
Border
Value (eg. 1,2,10)
It is used to apply the border thickness of the table.
BorderColor
Color name
It changes the color of the table border.
Width
Value in percentage or pixels
 It is used to change the width of the table according to the value specified.
Height
Value in percentage or in pixels.
It is used to change the height of the table according to the value specified.
Align
Left or right or center
It applies the alignment on the table.  By default the alignment of the table is left.
CellSpacing
Value in pixels
It is used for applying the space between the cells
Cellpadding
Value in pixels
It is used for applying the spacing between the cell Text and the cell border.

<tr></tr> tag is used to define the table row. the attributes of the table tag is as follows

Attributes of the <tr></tr> tag.
Attributes
Value
Description
Bgcolor
Color name
To change the color of the row.


Attributes of the <th></th> tag.
Attributes
Value
Description
Bgcolor
Color name
To change the color of the row.
Background
Path
To display the picture on the background.
Rowspan
Value
To apply row spanning.
Colspan
Value
To apply column spanning.

Attributes of the <td> </td> tag.

Attributes
Value
Description
Bgcolor
Color name
To change the color of the row.
Background
Path
To display the picture on the background.
Rowspan
Value
To apply row spanning.
Colspan
Value
To apply column spanning.

Now, let us create a table without the border tag as given below.

<html>
<head>
<title>
table without borders
</title>
<body>
<table>
<tr>
<th>Name</th>
<th>Roll no.</th>
<th>Marks</th>
</tr>
<tr>
<td>Renu</td>
<td>1</td>
<td>67</td>
</tr>
</table>
</body>
</html>

Output of the above example is given below



In the above example we have seen the table without borders. Now I want to create the table with the border,  then the question arises how to create it?  the answer to the question  is,  it can be created with the border attribute of the table tag. The following example  will show as how to use the same.

<html> 
<head>
<title>
table without borders
</title>
<body>
<table border>
<tr>
<th>Name</th>
<th>Roll no.</th>
<th>Marks</th>
</tr>
<tr>
<td>Renu</td>
<td>1</td>
<td>67</td>
</tr>
</table>
</body>
</html>

Output of the above example is


If we want to increase the thickness of the border. The following example will show you how to increase the thickness of the table border.

<html>
<head>
<title>
table with boder thickness
</title>
<body>
<table border = 10 px>
<tr>
<th> Name</th>
<th> Roll No.</th>
<th> Marks</th>
</tr>
<tr>
<td>Renu</td>
<td> 1</td>
<td>67</td>
</tr>
</table>
</body>
</html>

Output of the above example is 

Now, if we want to apply border color and the alignment of the table then the border color and the alignment attributes is used.

<html>
<head>
<title>
table with tags
</title>
</head>
<body>
<table border=10 bordercolor="red" align="center">
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone No.</th>
</tr>
<tr>
<td>Anu </td>
<td>sector-14</td>
<td>234567</td>
</tr>
</table>
</body>
</html>

Output of the above example is 


Table Tag with the Rowspan and Colspan


Rowspan and Colspan attribute of the <table> tag,  is used for spanning the row and the column across the table.

<html>
<head>
<title>
table tag
</title>
</head>
<body>
<table border>          
<tr>
<th rowspan=2>Name</th>
<th colspan=2>Timings</th>
<th rowspan=2>Sign</th>
</tr>
<tr>
<th>To</th>
<th>From</th>
</tr>
<tr>
<td>Neeru</td>
<td>3/4/2014</td>
<td>4/5/2014</td>
<td>nr</td>
</tr>
<tr>
<td>Neetu</td>
<td>3/4/2014</td>
<td>4/5/2014</td>
<td>nt</td>
</tr>
</table>
</body>
</html>

Output is 


Table tag with CellSpacing and CellPadding


The CellSpacing attribute of the <table> tag is used for applying spacing between the cell border and the table border in pixels. The example given below explains about it.

Example

<html>
<head>
<title>
cellspacing and cellpadding
</title>
</head>
<body>
<table border cellspacing="20 px">
<tr>
<th>Name</th>
<th>Address</th>
<th>phone No.</th>
</tr>
<tr>
<td>Deepak</td>
<td>Lane 2, Panipat</td>
<td>9897897342</td>
</tr>
</table>
</body>
</html>

The Output of the above example is as follows


Table with CellPadding

The CellPadding attribute of the table tag, is used to apply spacing between the content of the cell and the cell borders in pixels.

Example of the table tag with the cellpadding attribute is given below

<html>
<head>
<title>
table with cellpadding
</title>
</head>
<body>
<table border cellpadding=20>
<tr>
<th>Name</th>
<th>Address</th>`
<th>Phone No.</th>
</tr>
<tr>
<td>Deepak</td>
<td>Lane 2, Panipat</td>
<td>9897897342</td>
</tr>
</table>
</body>
</html>

Output of the above example is given below


NEXT

Comments

Post a Comment

Popular posts from this blog

Linking in html

Linking is used for linking the web page with the another web page. One can create linking with  <a> </a> tag. It is also called anchor tag. One can create linking with the text, linking with the image. The attribute of <a></a> href="path" target="frame name" or _top or _blank or _self or _parent Linking with the Text  One can create linking with the text. Example of it is given below   Example <html> <head> <title> linking with text </title> </head> <body> <a href="file:///C:/Program%20Files/Java/jre1.8.0_31/Welcome.html">click here</a> </body> </html> The output of the above  code is Linking with Image Now, one can also create linking with the image. Example <html> <head> <title> linking with image </title> </head> <body> <a href="file:///C:/Program%20Files/Java/jre1.8.0_31/Wel...
Post a Comment
Read more

HTML FRAMES - HTML Frames Example with Output

Post Updated :16-02-2018 HTML Frames is used to display more than one file. It is used to divides the browser window into different parts or sections  i.e.  row-wise or column-wise or row and column-wise . Each section can display HTML files.To create a frame  two tags are used they are <frameset> and <frame> tag. Attributes of  <frameset>    tag 1. Cols=value is % or pixels 2. Rows= values in % or pixels Attributes of <frame> tag 1. Src= "path" 2. Name="name of the frame" 3. Border= value in pixels 4. Noresize 5. Scrolling="true" or "false" 6. Marginwidth=value in % or pixels 7. Marginheight=value in % or pixels If I want to divide the browser into two columns. The following example will be used to divide the window into 2 section. In the example given below we are using to divide the browser into equal sections i.e. 50% each. HTML Frames Example with Output Simple example of two- framed page ...
Post a Comment
Read more