How to make layout with nested tables?

Question

I'm stuck on how I'd get this layout, achieved by nested tables and css..

This is my current code, but it's not working properly yet... Can someone tip me in the right direction? Can't seem to figure it out...

<body>

<div id="container">
<table>
<tr>
    <td id="text1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
    </td>
    <td class="img">
        <img src="img/bal.png"/>
    </td>           
</tr>

<tr>
    <td class="img">
        <img src="img/bal.png"/>
    <td class="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
    </td>           
</tr>

EDIT: Here an extra IMG example, provided by my teacher:

[Tables are for data, not layout](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html). If you want something table-ish, use flexbox. — Tieson T., Feb 08 '17 at 08:45
Iknow but my teacher made me do this.. Don't understand why he'd want us to do this, I know HTML / CSS decent enough to do this with DIVS but we had to do it with tables.. — Laurens Mäkel, Feb 08 '17 at 08:46
"my teacher made me do this" - then drop the class. You're not going to learn anything useful from an instructor that teaches patently incorrect concepts. — Tieson T., Feb 08 '17 at 08:48
Indeed, but we're introducing HTML / CSS right now and he wants us to figure out how to do this with nested tables... I didn't understand either, but whatever.. Can't drop the class.. — Laurens Mäkel, Feb 08 '17 at 08:51
why first td has id="text1"? Should it have different of td with class="text"? — Banzay, Feb 08 '17 at 09:09
Why leaving the class just because the teacher gives you an unusual homework? Give him the hint that it is done nowadays with the flexbox model or work out two variants. Maybe he is expecting exactly that. You also do not quit your job if your boss has an unsuitable task for you. — Daniel, Feb 08 '17 at 09:29

score 1 · Accepted Answer · answered Feb 08 '17 at 09:18

Here is a solution with different styling based on even-odd table rows. I think this solution is right, if your teacher wants to drive your css knowledge more deep and wide.

table tr:nth-of-type(odd) .text {
  text-align: right;
}
table tr:nth-of-type(odd) .img > img {
  float: left;
}
table tr:nth-of-type(even) .text {
  text-align: left;
}
table tr:nth-of-type(even) .img > img {
  float: right;
}
.text::after {
  content: attr(title);
  text-align: right;
  display: block;
}

<div id="container">
<table>
<tr>
    <td class="text" title="myname">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
    </td>
    <td class="img">
        <img src="img/bal.png"/>
    </td>           
</tr>

<tr>
    <td class="img">
        <img src="img/bal.png"/>
    <td class="text" title="myname">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
    </td>           
</tr>
<tr>
    <td class="text" title="myname">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
    </td>
    <td class="img">
        <img src="img/bal.png"/>
    </td>           
</tr>

<tr>
    <td class="img">
        <img src="img/bal.png"/>
    <td class="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
    </td>           
</tr>
  </table>
  </div>

Thank you very much, this works pretty well. I changed it a bit. What I did is:
MyName
and css p .name { text-align:right; } — Laurens Mäkel, Feb 08 '17 at 09:28

score 0 · Answer 2 · answered Feb 08 '17 at 08:56

Try this

<table border="1" width="400">
    <tr>
        <td width="200" style="text-align:justify";>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            <p style="text-align:right;">myname</p>
        </td>
        <td width="200" style="text-align:left; vertical-align: middle;">
            image <!-- put image tag here -->
        </td>
    </tr>
    <tr>
        <td width="200" style="text-align:right; vertical-align: middle;">
            image <!-- put image tag here -->
        </td>
        <td width="200" style="text-align:justify";>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            <p style="text-align:right;">myname</p>
        </td>
    </tr>
    <tr>
        <td width="200" style="text-align:right;">
            Lorem Ipsum
            <p style="text-align:right;">myname</p>
        </td>
        <td width="200" style="text-align:left; vertical-align: middle;">
            image <!-- put image tag here -->
        </td>
    </tr>
</table>

score 0 · Answer 3 · answered Feb 08 '17 at 09:44

 <table border="1" width="800px" cellpadding="3" cellspacing="0">
        <tr>
            <td style="width: 400px;" align="right" valign="top">
                <table width="100%">
                    <tr>

                        <td align="right">
                            <img src="img/bal.png" />
                        </td>
                    </tr>
                </table>
            </td>
            <td style="width: 400px;" align="left" valign="top">
                <table width="100%">
                    <tr>
                        <td align="left" valign="top">Akailash<br />
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                <p style="text-align: right;">myname</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td style="width: 400px;" align="left" valign="top">
                <table width="100%">
                    <tr>
                        <td align="left" valign="top">Akailash<br />
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                <p style="text-align: right;">myname</p>
                        </td>
                    </tr>
                </table>
            </td>

            <td style="width: 400px;" align="right" valign="top">
                <table width="100%">
                    <tr>

                        <td align="right" valign="top">
                            <img src="img/bal.png" />

                        </td>
                    </tr>
                </table>

            </td>
        </tr>

        <tr>
            <td style="width: 400px;" align="right" valign="top">
                <table width="100%">
                    <tr>

                        <td align="right" valign="top">
                            <img src="img/bal.png" />

                        </td>
                    </tr>
                </table>

            </td>

            <td style="width: 400px;" align="left" valign="top">
                <table width="100%">
                    <tr>

                        <td align="left" valign="top">Akailash<br />
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                <p style="text-align: right;">myname</p>
                        </td>
                    </tr>
                </table>
            </td>


        </tr>
    </table>

score -1 · Answer 4 · answered Feb 08 '17 at 09:15

hey u dont need nested tables here is the code

<table width="800" border="0" align="center">
<tr>
<td align="right" valign="top"><img src="image path" width="200"> your image here </td>
<td align="left"> your text <p align="right">your name</p></td>
</tr>
<tr>
<td align="left"> your text<p align="right">your name</p></td>
<td align="right" valign="top"><img src="image path" width="200"> your image here </td>
</tr>
<tr>
<td align="right" valign="top"><img src="image path" width="200"> your image here </td>
<td align="left"> your text <p align="right">your name</p></td>
</tr>
</table>

How to make layout with nested tables?

4 Answers4