Table HTML problem..

Question

hello i am trying to setup tables so the result outcomes like this: code:

<table width="60%" cellpadding="0" cellspacing="1" id="theBoxer">
<tr style="background: #686868 ;">
<td align="center" valign="top" width="240" height="25" style="border:1px #FFF solid;">About me</td>
</tr>
<tr>
<td align="left" valign="top" width="250" height="112" style="">
Points:<br>
Lalala: <br>
Lalala: <br>
</td>
<td align="left" valign="top" width="250" height="112" style="">
Lalala: <br>
Lalala:
</tr>
</table>

cant get it to work like how i wanted. the problem i get with my code is that "About me" only covers for the first td and not the other

Answer 1

You need colspan="2" in the <td> of the first row so that it spans two columns.

Semantically, you would like to use <th> (table heading) instead of <td> as well.

See also:

• HTML table tutorial

Answer 2

This should do the trick:

<table width="60%" cellpadding="0" cellspacing="1" id="theBoxer">
    <tr style="background: #686868 ;">
        <td align="center" valign="top" colspan="2" width="240" height="25" style="border:1px #FFF solid;" >
            About me
        </td>
    </tr>
    <tr>
        <td align="left" valign="top" width="250" height="112" style="">
        Points:<br>
            Lalala: <br>
            Lalala: <br>
        </td>
        <td align="left" valign="top" width="250" height="112" style="">
            Lalala: <br>
            Lalala:
        </td>
    </tr>
</table>

Note the colspan attribute on the first <td> tag - this will ensure that it spans the width of two columns.

Additionally, you might also like to expand your table to contain the thead and tbody elements, providing separation between the different sections of content:

<table width="60%" cellpadding="0" cellspacing="1" id="theBoxer">
    <thead>
        <tr style="background: #686868 ;">
            <th align="center" valign="top" colspan="2" width="240" height="25" style="border:1px #FFF solid;" >
                About me
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="left" valign="top" width="250" height="112" style="">
                Points:<br>
                Lalala: <br>
                Lalala: <br>
            </td>
            <td align="left" valign="top" width="250" height="112" style="">
                Lalala: <br>
                Lalala:
            </td>
        </tr>
    </tbody>
</table>