How to insert Table in HTML-table heading, cellspacing, cellpadding, colspan, rowspan, table border?

Table in HTML-table heading, cellspacing, cellpadding, colspan, rowspan, table border

Tables in HTML

The tables in HTML allow web user to arrange data which is in the form of text, images and links into rows and columns of cells. HTML tables allow user to display data in tabular form (rows and columns). Html Tables are used to insert the data into the cells which are made after inserting rows and columns. Tables are defined by the <table> tags. User need to use the <tr> and <td> tags.

The heading of the table can be defined by table heading tag <th>. The data is inserted by using <td> tag.

The HTML tables are created by using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default. Lat us take an example to create a table in HTML.

<!DOCTYPE html>
<html>
<head>
      <title>Employee table</title>
</head>
<body>
      <table border = "2">
         <tr>
            <td>S No</td>
            <td>Name</td>
	   <td>Address</td>
         </tr>
         <tr>
            <td>1</td>
            <td>Ajay</td>
	   <td>Jammu</td>
         </tr>
         <tr>
            <td>2</td>
            <td>Rohan</td>
	   <td>Samba</td>
         </tr>
         </table>
         </body>
</html>

The above program will result as shown below

www.programmingtutorial.in

The border is an attribute of <table> tag and its width is set as 2 to make it bigger. It is used to put a border across all the cells. The border width can be set as “0” if you do not require border across the table cells.

Table Heading

Table heading can be defined using <th> tag. This tag will be put to replace <td> tag in first <tr>–</tr> set, which can be used as a heading. In above example, S No, Name and Address may be considered as table heading. The headings which are defined in <th> tag are centered and bold by default. Let us write above code again to define heading by using <th> tag.

<!DOCTYPE html>
<html>
<head>
      <title>Employee table</title>
</head>
<body>
      <table border = "2">
         <tr>
            <th>S No</th>
            <th>Name</th>
	   <th>Address</th>
         </tr>
         <tr>
            <td>1</td>
            <td>Ajay</td>
	   <td>Jammu</td>
         </tr>
         <tr>
            <td>2</td>
            <td>Rohan</td>
	   <td>Samba</td>
         </tr>
         </table>
         </body>
</html>

The result produced by above code with table heading is shown below:

www.programmingtutorial.in

It can be easily observed in above code’s result that text of heading is centered and bold by default.

How to set Cellpadding and Cellspacing Attributes in HTML?

Cellpadding and cellspacing are the two attributes of table which are used to set whitespaces in your table cells. When there is need to adjust spacing between two cells, we use cellspacing. On the other hand, cellpadding is used to represent the distance between the content of cell and its border.  

<!DOCTYPE html>
<html>
<head>
      <title>Employee table</title>
</head>
<body>
      <table border = "2" cellpadding = "10" cellspacing = "20">
         <tr>
            <th>S No</th>
            <th>Name</th>
	   <th>Address</th>
         </tr>
         <tr>
            <td>1</td>
            <td>Ajay</td>
	   <td>Jammu</td>
         </tr>
         <tr>
            <td>2</td>
            <td>Rohan</td>
	   <td>Samba</td>
         </tr>
         </table>
         </body>
</html>

The program written for cellpadding and cellspacing will result as shown below:

www.programmingtutorial.in

How to set Colspan and Rowspan Attributes in HTML?

We may face the condition while writing HTML code to merge two or more columns or two or more rows. This can be achieved by using two more table attributes namely colspan and rowspan. You can use colspan to merge columns and rowspan to merge rows. Let us take an example in the form of code to explain it further.

<!DOCTYPE html>
<html>
<head>
      <title>Colspan and Rowspan in HTML tables</title>
   </head>
   <body>
      <table border = "1">
         <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
</html>

It results as

www.programmingtutorial.in

How to set Tables Backgrounds?

You can set table background using one of the following two ways bgcolor attribute − You can set background color for whole table or just for one cell.

background attribute − You can set background image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

<!DOCTYPE html>
<html>
<head>
      <title>Border and back colour in HTML tables</title>
   </head>
   <body>
      <table border = "1" bordercolor = "red" bgcolor = "blue">
         <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
</html>

It results as :

www.programmingtutorial.in

How to set height and width of table in HTML?

To make your table adjustable to the web page, you can easily do that by adjusting height and width of the table. This can be done with the help of height and width attributes of table. The height and width of the table can be given in terms of pixels or percentage of available screen area. Let us now take an example of setting height and width of table in HTML.

<!DOCTYPE html>
<html>
<head>
      <title>Employee table</title>
</head>
<body>
      <table border = "2" height="500" width="400">
         <tr>
            <th>S No</th>
            <th>Name</th>
	   <th>Address</th>
         </tr>
         <tr>
            <td>1</td>
            <td>Ajay</td>
	   <td>Jammu</td>
         </tr>
         <tr>
            <td>2</td>
            <td>Rohan</td>
	   <td>Samba</td>
         </tr>
         </table>
         </body>
</html>

It results as:

www.programmingtutorial.in

Table Header, Body, and Footer

A table in HTML can be divided into three portions − a header, a body, and a foot. The head and foot are similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table. The three elements for separating the head, body, and foot of a table are −

<thead> − used to create a separate table header.

<tbody> − used to indicate the main body of the table.

<tfoot> − used to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>

<!DOCTYPE html>
<html>
<head>
      <title>HTML Table</title>
</head>
<body>
      <table border = "1" width = "25%">
      <thead>
      <tr>
      <td colspan = "4">This is the head of the table</td>
      </tr>
      </thead>
      <tfoot>
      <tr>
      <td colspan = "4">This is the foot of the table</td>
      </tr>
      </tfoot>
      <tbody>
            <tr>
               <td>Item 1</td>
               <td>Item 2</td>
               <td>Item 3</td>
               </tr>
        </tbody>
        </table>
   </body>
</html>

It results as:

www.programmingtutorial.in

Nesting of tables in HTML

By nesting of tables, means a table can be inserted inside another table. Not only tables you can use almost all the tags inside table data tag <td>.

<!DOCTYPE html>
<html>
<head>
      <title>HTML Table</title>
</head>
<body>
      <table border = "2" width = "25%" bordercolor="red">
      <tr>
      <td>
      <table border = "1" width = "100%" bordercolor="yellow">
                  <tr>
                     <th>Name</th>
                     <th>Address</th>
                  </tr>
                  <tr>
                     <td>Rajesh</td>
                     <td>Jammu</td>
                  </tr>
                  <tr>
                     <td>Ashok</td>
                     <td>Kathua</td>
                  </tr>
               </table>
            </td>
         </tr>
      </table>
   </body>
</html>
www.programmingtutorial.in

The result of nesting table clearly shows main table coloured in red and the minor table which is nested inside the main table is coloured in yellow colour.