Creating tables in html

how do i make a table like this?

abc |la
sa  |___
开发者_JAVA百科cdef|hi

basically the borders like that

If I understood correctly, you want one high cell next to two smaller ones. That can be achieved with the rowspan attribute like this:

<table>
  <tr>
    <td rowspan="2">abc sa cdef</td>
    <td>la</td>
  </tr>
  <tr>
    <td>hi</td>
  </tr>
</table>

a quick fix would be the following:

html:

<table>
    <tr>
        <td class="left">abc</td>
        <td class="right1">la</td>
    </tr>
    <tr>
        <td class="left">sa</td>
        <td class="right2">&nbps;</td>
    </tr>
    <tr>
        <td class="left">cdef</td>
        <td class="right1">hi</td>
    </tr>
</table>

css:

td.left { border-right:1px solid black; }
td.right2 { border-bottom:1px solid black; }

<table>
<tr>
 <td class="border-r"> abc </td>
 <td> la </td>
</tr>
<tr>
 <td class="border-r"> sa </td>
 <td class="border-b">&nbsp;</td>
</tr>
<tr>
 <td class="border-r">cdef</td>
 <td> hi </td>
</tr>
</table>

css

td.border-r
{
 border-right:1px solid #000000;
}
td.border-b
{
 border-bottom:1px solid #000000;
}

<table>
<tr>
<td class="border-r"> abc </td>
 <td> la </td>
 </tr>
 <tr>
 <td class="border-r"> sa </td>
 <td class="border-b">&nbsp;</td>
</tr>
<tr>
<td class="border-r">cdef</td>
<td> hi </td>