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

时间：2017-02-08 08:42:28

标签： html css html-table

我一直坚持如何通过嵌套表和css实现这种布局。

enter image description here

这是我目前的代码，但它还没有正常工作......有人可以向我提示正确的方向吗？似乎无法弄清楚...... 

<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示例：

enter image description here

4 个答案:

答案 0 :(得分：1)

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

试试这个

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

答案 2 :(得分：0)

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

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

答案 3 :(得分：0)

＆＃13;
＆＃13; 
 <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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题