Angelina Angelina - 25 days ago 9
HTML Question

Aligning elements in table

I would like for top 4 elements to stretch across the top, and bottom two to also look like they belong to the same table, stretch and not be so squeezed. Can I accomplish this without adding empty

<td>
s?

This is how it looks like right now:
table
http://www.w3schools.com/code/tryit.asp?filename=F0OOEL3HH55Y

My code:

<table cellspacing="2" cellpadding="2" width="650" border="0">
<tr>
<td height="8" class="header" width="300">Weight Per Book (lb.)</td>
<td height="8" class="header" width="300">Cost per Book</td>
<td height="8" class="header" width="200">Quantity for whole order</td>
<td height="8" class="header" width="400">Capability Complexity Level For TO</td>
</tr>
<tr>
<td height="16">2.0</td>
<td height="16">0.00</td>
<td height="16">0</td>
<td height="16">4</td>
</tr>
<tr valign="bottom">
<td class="header">Distribute ID Order to Home Plant</td>
<td class="header">Distribute All OTR's to Home Plant</td>
</tr>
<tr>
<td>No</td>
<td>No</td>
</tr>
</table>

Answer

You can use the colspan attribute to do that. This attribute define the number of columns a particular cell should span.

Here is an example:

<table cellspacing="2" cellpadding="2" width="650" border="0">
  <tr>
    <th colspan="4">Production</th>
  </tr>
  <tr>
    <td height="8" class="header" width="300">Weight Per Book (lb.)</td>
    <td height="8" class="header" width="300">Cost per Book</td>
    <td height="8" class="header" width="200">Quantity for whole order</td>
    <td height="8" class="header" width="400">Capability Complexity Level For TO</td>
  </tr>
  <tr>
    <td height="16">2.0</td>
    <td height="16">0.00</td>
    <td height="16">0</td>
    <td height="16">4</td>
  </tr>
  <tr valign="bottom">
    <td colspan="2" class="header">Distribute ID Order to Home Plant</td>
    <td colspan="2" class="header">Distribute All OTR's to Home Plant</td>
  </tr>
  <tr>
    <td colspan="2">No</td>
    <td colspan="2">No</td>
  </tr>
</table>

Hope this helps!