在表中组合细胞

时间:2013-03-21 02:06:48

标签: css video

如何将YouTube视频嵌入到桌面中。我希望左右列高2行,中间列有2个单元格,我希望视频位于底部单元格中,文本位于顶部,但我无法弄清楚如何将其移动到那里

<div class="cbody">
        <table class="ctable">
            <tr>
                <td rowspan="2" style="width:105px"><img class="cimg1" src="meh.png" alt=" " width="100px" height="500px"></td>
                <td><p class="ctxt">
                my text here
                </p></td>
                <td rowspan="2" style="width:105px"><img class="cimg2" src="meh.png" alt=" " width="100px" height="500px"></td>
            </tr>
            <tr>
            <iframe width="420" height="315" src="http://www.youtube.com/embed/xI_6oLPC-S0" frameborder="0" allowfullscreen></iframe>
            </tr>
        </table>
    </div>

和css ......

.cbody {
width:800px;
margin-left: auto;
margin-right: auto;
border-style:solid;
border-width:3px;
}

.cimg1 {
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
float:left;
}

.cimg2 {
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
float:right;
}

.ctxt {
margin-left:5px;
margin-right:5px;
text-align:center;

}

.ctable {
width:800px;
margin-left:auto;
margin-right: auto;
border-style:solid;
border-width:2px;
}

1 个答案:

答案 0 :(得分:2)

您需要在<td>周围添加<iframe>标记,即:

<td>
    <iframe width="420" height="315" src="http://www.youtube.com/embed/xI_6oLPC-S0" frameborder="0" allowfullscreen>
    </iframe>
</td>

您还应该考虑使用<th>而不是<td>来放置文字。