Table HTML layout

I am trying to setup tables so the result outcomes like this:

Code:

<table width="60%" cellpadd开发者_如何学JAVAing="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>

Can't get it to work like how I wanted.

The problem I get with my code is that "About me" only covers for the first cell and not the other.

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

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>