HTML TABLE

Hello friends… I am back with my fresh post…previously what we discussed about was HTML IMG tag. Now, in this post we will be discussing about the HTML table tag in detail. So, in this post you will be learning to create table in the web pages so as to arrange the specific data in the web page.

HTML TABLE TAG
The HTML table allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells.
·         Tables are defined with the <table> tag.
·         Tables are divided into table rows with the <tr> tag.
·         Table rows are divided into table data with the <td> tag.
·         A table row can also be divided into table headings with the <th tag.


EXAMPLE:

<!DOCTYPE html>
<html>
           <head>
                       <title>HTML Tables</title>
           </head>
           <body>
                      <table border=”1”>
                      <tr>
                                 <td>Row 1,   Column  1</td>
                                 <td>Row 1,   Column  2</td>
                     </tr>
                     <tr>
                                  <td>Row 2,   Column  1</td>
                                  <td>Row 2,   Column  2</td>
                    </tr>
                    </table>
          </body>
</html>

Table headings
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below otherwise you can use <th> element in any row.

Example:

<!DOCTYPE html>
<html>
           <head>
                       <title>HTML Table header</title>
           </head>
           <body>
                      <table border=”1”>
                      <tr>
                                 <th>Name</th>
                                 <th>Salary</th>
                        </tr>
                        <tr>
                                  <td>sid</td>
                                  <td>80000</td>
                        </tr>
                         <tr>
                                   <td>jishnu</td>
                                   <td>5000</td>
                         </tr>
              </table>
         </body>
</html>

Cellpadding and cellspacing attributes
There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute  defines the width of the border, while cellpadding represents the distance between cell borders and the contents within a cell.

EXAMPLE:

<!DOCTYPE html>
<html>
           <head>
                       <title>HTML Table cellpadding</title>
           </head>
           <body>
                      <table border=”1”  cellpadding=”5”  cellspacing=”5”>
                      <tr>
                                 <th>Name</th>
                                 <th>Salary</th>
                     </tr>
                     <tr>
                                  <td>sid</td>
                                  <td>80000</td>
                    </tr>
                    <tr>
                                   <td>jishnu</td>
                                  <td>5000</td>
                 </tr>
       </table>
</body>
</html>

Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.

EXAMPLE:

<!DOCTYPE html>
<html>
           <head>
                       <title>HTML Table colspanrowspan</title>
           </head>
           <body>
                      <table border=”1”>
                      <tr>
                                 <th>Column  1</th>
                                 <th>Column  2</th>
                                 <th>column  3</th>
                     </tr>
                     <tr>
                                  <td rowspan=”2”>Row  1  cell</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>

Tables backgrounds
You can set table background using one of the following two ways:
·         Bgcolor attribute
·         Background attribute

Example:
<table border=”1” bordercolor=”green” bgcolor=”yellow”>
</table>

<table border=”1”  bordercolor=”green” background=”/images /test . png”>
</table>

Table Header, Body, and Footer
Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather 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:
a)      <thead>
b)      <tbody>
c)      <tfoot>

EXAMPLE:


<!DOCTYPE html>
<html>
           <head>
                       <title>HTML Table </title>
           </head>
           <body>
                      <table border=”1”  width=”100%”>
                             <thead>
                                           <tr>
                                 <td colspan=”4”>this is the head of the table </td>
                                 </td>
                     </tr>
        </thead>
       <t foot>
                     <tr>
                                  
                    </tr>
          </t foot>
          <tbody
                     <tr>
                              <td>Cell  1</td>
                             <td>Cell  2</td>
                            <td>Cell   3</td>
                   </tr>  
                 </t body>
       </table>
</body>
</html>

So, friends this was all for today…keep on reading my posts as well as the posts of my mates who are in this team….if you have any queries you can ask them in the comment box. I will give you the reply as soon as possible..thank you…

To Like Our Facebook Page > NewAgeInformers 
 To follow us on  Twitter > Twitter
To Subscribe Our Youtube Channel > Wolfpack

Comments