Issue in HTML table formatting - html

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> Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>2</td>
<td>Table</td>
<td><i>$75.29</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>3</td>
<td>Chair</td>
<td><i>$22.81</i></td>
<td> Edit</td>
<td>Delete</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"> </td>
<td width="50"> </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">
</td>
( http://jsfiddle.net/tCrRG/2/ )

Answer 2

Empty cells are no be displayed and you could use space or html entity to put some empty content.
You could use colspan attribute to make the cell extend for 2 columns.
<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" colspan="2"> </td>
</tr>
<tr>
<td>1</td>
<td>Lamps</td>
<td><i>$3.5</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>2</td>
<td>Table</td>
<td><i>$75.29</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>3</td>
<td>Chair</td>
<td><i>$22.81</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
</tbody></table>

Answer 3

I think you want an empty cell above the Edit/Delete links and not increasing the Product Price cell.
Therefore try a colspan=2 in your empty cell
<td colspan="2" width="50"></td>
instead
<td width="50"></td>
in your first row.

Answer 4

The only put three cells in the header row when there are five cells in the subsequent rows. To make the third header column fill out to the right, use colspan=3:
<td width="150" colspan=3>
<b>
<span style="color:red">
Product Price
</span>
</b>
</td>
On a side note, as noted by others above, it's not good practice to use inline styling or nest style markup. Try looking into using a CSS class for your column headers:
HTML:
<td class="header_cell">
Product Price
</td>
CSS:
.header_cell {
width:150px;
color:red;
font-weight:bold;
}

Answer 5

I've improved your code quite a bit.
<style type="text/css">
table {
width: 400px;
}
table th{
font-weight: bold;
color: red;
}
table tr td:nth-child(3) {
font-style: italic;
}
</style>
<table border="2">
<tbody>
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Product Price</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<td>1</td>
<td>Lamps</td>
<td>$3.5</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>2</td>
<td>Table</td>
<td>$75.29</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>3</td>
<td>Chair</td>
<td>$22.81</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
Explanation
Removed the used of presentational markup. Replaced with a <style> element.
Replace the header cells with appropriate <th> elements.
Added an Actions header with a colspan="2", which means it will strech for 2 columns (filling up the remaining space).