HTML - Table with non relational height.

Question

Is it possible to make each row/column in a table have it's own Unique height, that way if I wanted a table that looks like this, I could:

+-----------------------------+
|  Data  |   Data    |  Data  |
|  Data  +-----------+  Data  |
|  Data  |   Data    |  Data  |
+--------+-----------+--------+

Sorry if this is not descriptive enough, as I don't know any other way to explain it. The goal is for this to be a single <table> that doesn't have the entire row's height effected by a single column. Each columns height is independent of the row.

score 2 · Answer 1 · edited May 02 '15 at 04:24

2

You can achieve this layout by using the rowspan attribute

<table>
    <tr>
        <td rowspan="2">Data<br>Data<br>Data</td>  
        <td>Data</td>
        <td>Data</td>
        <td rowspan="2">Data<br>Data<br>Data</td>  
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
    </tr>
</table>

edited May 02 '15 at 04:24

answered May 02 '15 at 01:31

Sergio Vilchis

332
2
4
16

score 1 · Answer 2 · answered May 02 '15 at 01:28

Use the rowspan attribute of the <td> element:

<table>
    <tr>
        <td rowspan="2">Data<br>
                        Data<br>
                        Data</td>
   </tr>
   <tr>
       <td>Data</td>
       <td>Data</td>
   </tr>
   <tr>
       <td rowspan="2">Data<br>
                       Data<br>
                       Data</td>
   </tr>
</table>

Here is a sample JSFiddle.

HTML - Table with non relational height.

2 Answers2