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

HTML WEB PAGE DESIGN - How to Create simple HTML web page

How to Design Simple HTML Web page In this article, we are going to learn how to design HTML web page. This article is used to let you know, how to create a simple web page using HTML. With this article you will come to know how to create the simple web page from scratch. To create the web page one should use the editors like notepad or Dreamweaver or Notepad++ etc. Here we are using Notepad ,in this connection steps are initiated to be as following HTML  Web Page Design A web page is a part of a website, containing information about a particular topic. You can create a custom web page using HTML. You can put anything you want on your web page like images, tables, hyperlinks, etc. Open Notepad: To open the Notepad one has to go to Start -> All Programs -> Accessories ->Notepad.  Notepad Once Notepad is open write the coding their as given below 1. <HTML> is the first tag of the web page and you have to write it at the top of the no
Post a Comment
Read more

How to create HTML Forms - II

How to create HTML Form -  II In this tutorial, we will learn about    How to create HTML Form .  So far we have discussed how to  create a frame ,  tables ,  List , insert  Images ,  Linking in HTML  etc. HTML Form is one of the most important  part of the websites  Every website has Contact forms or feedback forms.. Filling the Digital forms  saves time, cost of printing, and  paperwork. Submit Button Submit button It is used for submitting the form data to the server page. Example: How to create form - Submit button Output is: How to create form- Sumit Button <Select></Select> <select></select>   It is used to create Popup menu and a List.<option></option> is used to define the option in the drop-down menu  or the list. Attributes of <select></select> Name = name - Name of the drop down menu or  list Size= value - To specify the number of visible  values. Selected - To define Pre-selected item. Multi
Post a Comment
Read more

Basic Formatting Tags of HTML - 2

Subscript the Text  <sub></sub> tag is used to display the text or figure or symbols below the baseline, slightly of small size then normal text. It is used to display mathematical formulas, footnote, end-notes. Example <html> <head> <title> subscript the text </title> </head> <body> H<sub>2</sub>O </html> Larger Text <big></big> tag is used to increase the size of the text by 1 point. Example <html> <head> <title> to increase the size of the text 1 point </title> </head> <body> Education <big>point</big> </body> </html> Smaller Text <small></small> tag is used to decrease the size of the text by one point. Example <html> <head> <title> to decrease the size </title> </head> <body> Education <small>time</small> </body> </html> S
Post a Comment
Read more