如何使用嵌套表格进行布局？答案

【问题标题】：How to make layout with nested tables?如何使用嵌套表格进行布局？
【发布时间】：2017-02-10 07:54:19
【问题描述】：

我不知道如何获得这种布局，通过嵌套表和 css 实现..

这是我当前的代码，但它还不能正常工作...有人可以提示我正确的方向吗？看不懂。。。

<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>

编辑：这是一个额外的 IMG 示例，由我的老师提供：

【问题讨论】：

Tables are for data, not layout。如果你想要一些类似于表格的东西，请使用 flexbox。
我知道，但我的老师让我这样做.. 不明白他为什么要我们这样做，我知道 HTML / CSS 足够体面，可以用 DIVS 做到这一点，但我们必须这样做有桌子..
“我的老师让我这样做” - 然后放弃课程。你不会从一个教授明显不正确概念的讲师那里学到任何有用的东西。
确实，但是我们现在正在引入 HTML / CSS，他希望我们弄清楚如何使用嵌套表格来做到这一点......我也不明白，但无论如何......可以' t放弃课程..
为什么只因为老师给你一个不寻常的作业就离开课堂？给他一个提示，现在它是用 flexbox 模型完成的，或者制定两个变体。也许他正是这样期待的。如果你的老板有不适合你的任务，你也不会辞职。

标签： html css html-table

【解决方案1】：

这是一个基于奇偶表行的不同样式的解决方案。我认为这个解决方案是正确的，如果你的老师想让你的 css 知识更加深入和广泛。

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>

【讨论】：

非常感谢，这很好用。我稍微改了一下。我所做的是：
MyName
和 css p .name { text-align:right; }

【解决方案2】：

试试这个

<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>

【讨论】：

【解决方案3】：

 <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>

【讨论】：

【解决方案4】：

嘿，你不需要嵌套表，这里是代码

<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>

【讨论】：