ビデオギャラリのセル間にパディングを追加する

Question

次のコードでビデオ間にパディングを追加しようとしています。任意のポインタやヒント？：

<table width="100%;"> 
 
    <tbody> 
 
    <tr> 
 
    <td align="left" valign="top" width="50%"> 
 
    <div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.2493%;"><iframe style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" src="https://www.youtube.com/embed/SxK8XBnYZRk?rel=0&amp;showinfo=0" width="300" height="150" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div> 
 
    <p style="text-align: center;">Battle of Whitehall by <a href="http://www.rockinpaddy.com/">Rockinpaddy</a>, London</p> 
 
    </td> 
 
    <td align="left" valign="top" width="50%"> 
 
    <div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.2493%;"><iframe style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" src="https://www.youtube.com/embed/uS0-xSoxH1o?rel=0&amp;showinfo=0" width="300" height="150" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div> 
 
    <p style="text-align: center;">Which Side Are You On by <a href="http://www.rockinpaddy.com/">Rockinpaddy</a>, London</p> 
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
    </table>

Answer 1

は、このようなtd要素にいくつかのパディングを入れてみてください：

td { 
 
    padding: 0 10px; 
 
}

<table width="100%;"> 
 
<tbody> 
 
<tr> 
 
<td align="left" valign="top" width="50%"> 
 
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.2493%;"><iframe style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" src="https://www.youtube.com/embed/SxK8XBnYZRk?rel=0&amp;showinfo=0" width="300" height="150" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div> 
 
<p style="text-align: center;">Battle of Whitehall by <a href="http://www.rockinpaddy.com/">Rockinpaddy</a>, London</p> 
 
</td> 
 
<td align="left" valign="top" width="50%"> 
 
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.2493%;"><iframe style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" src="https://www.youtube.com/embed/uS0-xSoxH1o?rel=0&amp;showinfo=0" width="300" height="150" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div> 
 
<p style="text-align: center;">Which Side Are You On by <a href="http://www.rockinpaddy.com/">Rockinpaddy</a>, London</p> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table>