Aligning two divs while having a table inside another table

Question

In the code below, I am trying to align in the following table "Funny" near the second row, and "Sad" near the third row.

So far, I have thrown a position: relative; for the Sad container and "Funny" got right where I wanted, but now I can't get "Sad" to be under it.

Bellow is what I have:

<!DOCTYPE html>
<html>

<head>
  <title>Table fitting</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .p2 {
      position: absolute;
    }
.t1{
text-align:center;
font-size: 130%;
border:1px solid red;
}
.t2{ 
border:1px solid red;
padding: 5px;
font-family: Roboto;
text-align: center;
}
table{
border-collapse: collapse;
}
  </style>
</head>

<body>
  <table>
    <tr>
      <td>
        <div class="p1">Funny</div>
        <div class="p2">Sad</div>
      </td>
      <td>
        <table>
          <tr>
            <th class="t1">Cats</th>
            <th class="t1">Dogs</th>
          </tr>
          <tr>
            <td class="t1">Catty</td>
            <td class="t1">Rocky</td>
          </tr>
          <tr>
            <td class="t1">Kate</td>
            <td class="t1">Rex</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>

</html>

I would like some help to align the container that has "Sad" exactly behind the one with "Funny" and near the third row.

Looks like you are using tables in an incorrect way - seems like you use the outer table for layout purposes (which they should never be used for) — Pete, Apr 01 '19 at 10:37
Tables should only be used for tabular data - https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — Pete, Apr 01 '19 at 10:39
@Reformed is there any particular reason you cannot use a 3rd for "Funny" and "Sad"? — Manu Joseph, Apr 01 '19 at 10:41
Btw, I'm not keen on using "div"-s for the left part, another option (that still has the table on the right) would be just fine). — Zacky, Apr 01 '19 at 11:09
Sorry, It seemed that it doesn't work, so I deleted the table and gave up on this idea. — Zacky, Apr 01 '19 at 11:38

INDRAJITH EKANAYAKE · Answer 1 · 2019-04-01T11:18:36.223

The method that you are doing is completely wrong. This gives your expected output.



 <!DOCTYPE html>
    <html>
    <head>
    <title>Table fitting</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
                <table>
                    <tr>
                     <th class="t1"></th>
                        <th class="t1">Cats</th>
                        <th class="t1">Dogs</th>
                    </tr>
                    <tr>
                     <td style="text-align:right",class="t1">Funny</td>
                        <td class="t1">Catty</td>
                        <td class="t1">Rocky</td>
                    </tr>
                    <tr>
                     <td style="text-align:right",class="t1">Sad</td>
                        <td class="t1">Kate</td>
                        <td class="t1">Rex</td>
                    </tr>
                </table>
    </body>
    </html>

Feel free to ask any further questions!

Aligning two divs while having a table inside another table

1 Answers1