Cells align html CSS table

Question

Help me please get this structure. I have:

<tbody>
 <tr>
   <td>left</td>
   <td>rigth</td>
   <td>bottom1</td>
   <td>bottom2</td>
   <td>bottom3</td>
  </tr>
</tbody>

That is not tabular data. Why do you think a table should be involved? — Quentin, Mar 11 '14 at 13:46
possible duplicate of [How do you use colspan and rowspan in HTML tables?](http://stackoverflow.com/questions/9830506/how-do-you-use-colspan-and-rowspan-in-html-tables) — Alex K., Mar 11 '14 at 13:46
It looks like you're trying to use tables for layout - if that is the case, please, please don't! :) — Eirinn, Mar 11 '14 at 13:46
@Quentin What is tabular data and how should EagleSH know? Provide some resource for learning about it. — TylerH, Mar 11 '14 at 13:50

score 1 · Answer 1 · answered Mar 11 '14 at 13:44

1

<tbody>
    <tr>
        <td>left</td>
        <td>rigth</td>
    </tr>
    <tr>
        <td colspan="2">bottom1</td>
    </tr>
    <tr>
        <td colspan="2">bottom2</td>
    </tr>
    <tr>
        <td colspan="2">bottom3</td>
    </tr>
 </tbody>

answered Mar 11 '14 at 13:44

smdrager

7,327
6
39
49

+1 for keeping the typo of "rigth", and for best answer. – SimplyAzuma Mar 11 '14 at 13:48
This does not work in JSFiddle. – TylerH Mar 11 '14 at 13:48
With the context of the question there are implied opening and closing `table` tags. – smdrager Mar 11 '14 at 13:57

score 0 · Answer 2 · answered Mar 11 '14 at 13:45

You are looking for multiple rows, defined by tr. To replicate your image, you would need 'left' and 'right' in one tr, then each other cell in its own tr. To get the lower cells to span over the width of two cells, use colspan.

<tr>
  <td>left</td>
  <td>right</td>
</tr><tr>
  <td colspan="2">bottom1</td>
</tr>...

score 0 · Answer 3 · answered Mar 11 '14 at 13:49

Here you go:

http://jsfiddle.net/V7LNm/

    <table>
  <tr>
    <td>left</td>
    <td>right</td>
  </tr>
  <tr>
    <td colspan="2">bottom 1</td>
  </tr>
    <tr>
    <td colspan="2">bottom 2</td>
  </tr>
    <tr>
    <td colspan="2">bottom 3</td>
  </tr>
</table>

score 0 · Answer 4 · answered Mar 11 '14 at 13:52

You could also add additional options to what smdrager posted

<table border="1" cellspacing="1" cellpadding="3">
    <tr>
        <td align="center">left</td>
        <td align="center">right</td>
    </tr>
     <tr>
        <td align="center" colspan="2">Bottom 1</td>
    </tr>
    <tr>
        <td align="center" colspan="2">Bottom 2</td>
    </tr>
    <tr> 
        <td align="center" colspan="2">Bottom 3</td>
    </tr>
</table>

http://jsfiddle.net/VHWT9/

Cells align html CSS table

4 Answers4