hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。   エンジニア目指して勉強中。

tableタグの応用

◉表をさらに細かく分ける場合

 ●表ヘッダー <thead> 〜 </thead>

 ●表ボディー <tbody> 〜 </tbody>

 ●表フッター <tfoot> 〜 </tfoot>

と分けたタグで囲むことができる。

 

 

◉エクセルでいうセルの結合を行う

 ※<th>, <td>タグの中で行える属性であることに注意!

 ●colspan属性

    横のセルの結合

f:id:hiyoko-programing:20200328163036p:plain

 

セルの結合の数によって数字で表す

  <th colspan="2">ホームズの思い出</th>

 

 <table>
  <tr>
<th colspan="2">ホームズの思い出</th>
</tr>
 
<tr>
<td>白銀号事件</td>
<td>黄色い顔</td>
</tr>
 
<tr>
<td>株式仲買店員</td>
<td>グロリア・スコット号</td>
</tr>

 </table>

 

 

 

 ●rowspan属性 

    縦のセルの結合

f:id:hiyoko-programing:20200328163115p:plain

   セルの結合の数によって数字で表す

  <td rowspan="4">ホームズの思い出</td>

   

 <table>
  <tr>
   <th rowspan="4">ホームズの思い出</th>
    <td>白銀号事件</td>
  </tr>

  <tr>
   <td>黄色い顔</td>
  </tr>
 
<tr>
   <td>株式仲買店員</td>
  </tr>

  <tr>
   <td>グロリア・スコット号</td>
  </tr>
 </table>