Question

I am making a html page in which i am using table for the some items. as below image shows:

The code for the this table is as bellow:

<table border="2">
 <tbody><tr>
  <td width="50">
    <b>
        <span style="color:red">
            Id
        </span>
    </b>
  </td>
  <td width="150">
    <b>
        <span style="color:red">
            Product Name
        </span>
    </b>
  </td>
  <td width="150">
    <b>
        <span style="color:red">
            Product Price
        </span>
    </b>
  </td>
  <td width="50"></td>
 </tr>

      <tr>
   <td>1</td>
   <td>Lamps</td>
   <td><i>$3.5</i></td>
   <td> <a href="/app_name/editpage.htm?id=1&amp;prodname=Lamps&amp;prodprice=3.5">Edit</a></td>
   <td><a href="/app_name/deleteprod.htm?id=1&amp;prodname=Lamps&amp;prodprice=3.5">Delete</a></td>
  </tr>

      <tr>
   <td>2</td>
   <td>Table</td>
   <td><i>$75.29</i></td>
   <td> <a href="/app_name/editpage.htm?id=2&amp;prodname=Table&amp;prodprice=75.29">Edit</a></td>
   <td><a href="/app_name/deleteprod.htm?id=2&amp;prodname=Table&amp;prodprice=75.29">Delete</a></td>
  </tr>

      <tr>
   <td>3</td>
   <td>Chair</td>
   <td><i>$22.81</i></td>
   <td> <a href="/app_name/editpage.htm?id=3&amp;prodname=Chair&amp;prodprice=22.81">Edit</a></td>
   <td><a href="/app_name/deleteprod.htm?id=3&amp;prodname=Chair&amp;prodprice=22.81">Delete</a></td>
  </tr>

     </tbody></table>

Now my problem is that why the line of the header is not completed so how to do it? I am new to html and css and I am learning it. Please need guidance. Thank you.

Answer 1

You have more columns in the bottom rows.
There are many solutions:

One (not so pretty) way to solve your problem would be to add more cells in the top row.

<td width="50">&nbsp;</td>
<td width="50">&nbsp;</td>

( http://jsfiddle.net/tCrRG/ )

Or, try to take a look at colspan and rowspan:

<td width="150" colspan="3">
    <b>
        <span style="color:red">
            Product Price
        </span>
    </b>
  </td>

( http://jsfiddle.net/tCrRG/1/ )

Or, add just one cell in the top row with colspan:

<td colspan="2">
    &nbsp;
</td> 

( http://jsfiddle.net/tCrRG/2/ )