Reputation: 6278
Issue in HTML table formatting
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&prodname=Lamps&prodprice=3.5">Edit</a></td>
<td><a href="/app_name/deleteprod.htm?id=1&prodname=Lamps&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&prodname=Table&prodprice=75.29">Edit</a></td>
<td><a href="/app_name/deleteprod.htm?id=2&prodname=Table&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&prodname=Chair&prodprice=22.81">Edit</a></td>
<td><a href="/app_name/deleteprod.htm?id=3&prodname=Chair&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.
Upvotes: 0
Views: 88
Answers (5)
Reputation: 174937
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><a href="/app_name/editpage.htm?id=1&prodname=Lamps&prodprice=3.5">Edit</a></td>
<td><a href="/app_name/deleteprod.htm?id=1&prodname=Lamps&prodprice=3.5">Delete</a></td>
</tr>
<tr>
<td>2</td>
<td>Table</td>
<td>$75.29</td>
<td><a href="/app_name/editpage.htm?id=2&prodname=Table&prodprice=75.29">Edit</a></td>
<td><a href="/app_name/deleteprod.htm?id=2&prodname=Table&prodprice=75.29">Delete</a></td>
</tr>
<tr>
<td>3</td>
<td>Chair</td>
<td>$22.81</td>
<td><a href="/app_name/editpage.htm?id=3&prodname=Chair&prodprice=22.81">Edit</a></td>
<td><a href="/app_name/deleteprod.htm?id=3&prodname=Chair&prodprice=22.81">Delete</a></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
Actionsheader with acolspan="2", which means it will strech for 2 columns (filling up the remaining space).
Upvotes: 1
Reputation: 17651
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;
}
Upvotes: 1
Reputation: 266
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.
Upvotes: 1
Reputation: 6406
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/ )
Upvotes: 2
Reputation: 11623
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> <a href="/app_name/editpage.htm?id=1&prodname=Lamps&prodprice=3.5">Edit</a></td>
<td><a href="/app_name/deleteprod.htm?id=1&prodname=Lamps&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&prodname=Table&prodprice=75.29">Edit</a></td>
<td><a href="/app_name/deleteprod.htm?id=2&prodname=Table&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&prodname=Chair&prodprice=22.81">Edit</a></td>
<td><a href="/app_name/deleteprod.htm?id=3&prodname=Chair&prodprice=22.81">Delete</a></td>
</tr>
</tbody></table>
Upvotes: 1