753Note

備忘メモ

HTML テーブルの基本(2) td

td要素に画像・動画・文章を割り当てる場合の記述
　　画像 --- <td><img width='100%' src='ファイル名'></td>
　　動画 --- <td><video width='100%' src='ファイル名'></video></td>
　　文章 --- <td><p class='textarea'>文章</p></td>
スタイルとして重要な箇所
　table.t0 { background: #b0e0e6; }
　td { padding: 10px; vertical-align: top; } --- パディング調整、文章の位置
　p.textarea {
　　font-size: 16px;
　　white-space: pre-wrap; --- 改行
　}
　　調整・確認が完了したら、<table>のborder="1"を"0"に変更して境界線を消去。

調整・確認時 (<table border="1">)
完了時 (<table border="0">)

【HTML】
<meta charset="UTF-8">
<style>
  table { border-collapse: collapse; margin: auto; width: 40%; }
  table.t0 { background: #b0e0e6; }
  td { padding: 10px; vertical-align: top; }
  p.textarea {
    font-size: 16px;
    white-space: pre-wrap;
  }
</style>

<table class="t0" border="0">
  <colgroup>
    <col style="width:33%;">
    <col style="width:17%;">
    <col style="width:17%;">
    <col style="width:33%;">
  </colgroup>
  <tr>
    <td colspan="3"><img width='100%' src='../data/Pyyyymmdd-1.jpg'></td>
    <td><p class='textarea'>文章1
あああああああああああああああああああああああああああああああああああああああああああ</p></td>
  <tr>
    <td colspan="4"><p class='textarea'>文章2
あああああああああああああああああああああああああああああああああああああああああああ</p></td>
  </tr>
  <tr>
    <td colspan="2"><video width='100%' src='../data/Pyyyymmdd-1.mp4'></video></td>
    <td colspan="2"><p class='textarea'>文章3
あああああああああああああああああああああああああああああああああああああああああああ</p></td>
  </tr>
</table>

　⇒ サンプルの表示★