MB-Support

パソコン初心者のサポートページ

複雑な表(テーブル)の作り方 colspan rowspan

 表(テーブル)のセルを空白にする方法は、セル内で全角スペースを入れれば良いだけですが、2 つ以上のセルを合体させたると、より見やすくテーブルを構成する事ができます。


特定の行だけ、縦の仕切り線を破る場合は <td> に colspan="またがるセルの数" を挿入します。



HTMLソース(メモ帳)

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

ブラウザ


横の仕切り線を破る rowspan="またがるセルの数"

特定の行だけ、横の仕切り線を破る場合は、<td> に rowspan="またがるセルの数" を挿入します。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <th rowspan="4">ホームズの思い出</th>
   <td width="300">白銀号事件</td>
  </tr>
  <tr>
   <td>黄色い顔</td>
  </tr>
  <tr>
   <td>株式仲買店員</td>
  </tr>
  <tr>
   <td>グロリア・スコット号</td>
  </tr>
 </table> </body> </html>

ブラウザ


colspan と rowspan を使い分け、複雑なテーブルを構成する

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <th colspan="2">シャーロック・ホームズ全集</th>
  </tr>
  <tr>
   <th rowspan="4">ホームズの思い出</th>
   <td width="300">白銀号事件</td>
  </tr>
  <tr>
   <td width="300">黄色い顔</td>
  </tr>
  <tr>
   <td width="300">株式仲買店員</td>
  </tr>
  <tr>
   <td width="300">グロリア・スコット号</td>
  </tr>
  <tr>
   <td colspan="2">MB-Support</td>
  </tr>
 </table> </body> </html>

ブラウザ




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項