vertically stack table td elements using css

Question

Hi,

Is there a way to vertically stack selected td elments? I would like to have the same table, though display it differently using only css. Would this be possible, or do I have to have separate html markups? I would like to try to have the same html markup, though use different css for different sites/looks.

<table>
  <tr>
     <td class="vertical" id="one" >i'm</td>
     <td class="vertical" id="two" >above</td>
     <td class="vertical" id="three" >this</td>
     <td class="horizontal" id="four" >i'm horizontal</td>
  </tr>
</table>

Answer 1

You need to create the table stacked

<table>
  <tr>
     <td class="vertical">i'm</td>
     <td class="horizontal" rowspan="3">i'm horizontal</td>
  </tr>
  <tr>
     <td class="vertical">above</td>
  </tr>
  <tr>
     <td class="vertical">this</td>
  </tr>
</table>

That is what tables are made for. If you want to use CSS you have to use DIVs.

Answer 2

You can also make them display:block but I''m not quite sure what effects this would hev on table lay-out.

.vertical{
 display:block;
}