HPWG基礎 – パソコン楽しみ隊

HPWG基礎

日時:平成31年2月21日
場所 : 市民活動ステーション大会議室
講師 : 1
参加者:66
サポーター:1

表と動画の入れ方を教えて頂きました


①枠線の入れ方
②上の線だけの入れ方
③ストライプ柄に設定の仕方
④ストライプの色の変更の仕方
⑤ストライプ柄に下線を入れる設定の仕方
Name Age
Yamamoto 56
Suzuki 26
Tanaka 36
Sato 48
Takahashi 61

HP基礎のテキストのHTMLソースを自分のHPにコピーし、名前、年齢の表を作り
①~⑤を練習
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Yamamoto</td><td>56</td></tr>
<tr><td>Suzuki</td><td>26</td></tr>
<tr><td>Tanaka</td><td>36</td></tr>
<tr><td>Sato</td><td>48</td></tr>
<tr><td>Takahashi</td><td>61</td></tr>
</table>
①表の枠線を入れる
<table border=”1″>
②表の横線だけ残す
<table class=”table”>

cssの条件が反映
③stripeを入れる
<table striped” class=””table”>
④stripe の色を変える
table.striped tr:nth-child(odd) {background:#f9f9f9;}
↑  ↑
奇数のstripe 色(好みの色に変更)
⑤stripeの下線の色を変える
border-top: 1px solid #ddd;

動画の埋め込み
You Tubeを選ぶ ― 共有 ― うめこみ コードをコピー ― 自分のHPに貼り付 ける

YouTubeの動画をレスポンシブ対応に設定 iframe
by mh</table></table>

あわせて読みたい