Pages

HTML Tables

Tables are used in HTML to group data in the form of rows and columns . Different tags are used to provide heading and enter data in these tables .

<table> - Tables are used to represent data as rows and columns .This has more elements :

<tr>-table row .

<td>-table data .

<thead>
-markup for header data .

<th>-used for table headings .

<tbody>-markup to wrap body data .

Suppose we have to create table as


        First Name      Last Name      Place Of Birth
      
        Alexandrer      Supertramp     Alaska
 
        Nikoalai        Devydenko      Moscow


We do it as


          <table>
            <thead>
               <tr>
                 <th>First Name</th>
                 <th>Last Name</th>
                 <th>Place Of Birth</th>
               </tr>
            </thead>
            <tbody>
              <tr>
                <td>Alexandrer</td>
                <td>Supertramp</td>
                <td>Alaska</td>
              </tr>
              <tr>
                <td>Nikoalai</td>
                <td>Devydenko</td>
                <td>Moscow</td>
              </tr>
             </tbody>
          </table>


rowspan - describes how many rows a cell spans .
colspan - how many columns the cell spans .

Let’s merge First Name Last Name into one title cell called Name and Place Of Birth be merged to a single value Planet Earth .

This will be implemented as :



          <table>
            <thead>
               <tr>
                 <th> colspan="2">Name</th>
                 <th>Place Of Birth</th>
               </tr>
            </thead>
            <tbody>
              <tr>
                <td>Alexandrer</td>
                <td>Supertramp</td>
                <td> rowspan="2">Planet Earth</td>
              </tr>
              <tr>
                <td>Nikoalai</td>
                <td>Devydenko</td>
                </tr>
             </tbody>
          </table>