DOBON.NET DOBON.NETプログラミング掲示板過去ログ

テーブルの整形

  • 題名: テーブルの整形
  • 著者: はま
  • 日時: 2012/02/15 16:11:16
  • ID: 29864
  • この記事の返信元:
    • (なし)
  • この記事への返信:
  • ツリーを表示
環境/言語:[C#]
分類:[ASP.NET]

2012/02/15(Wed) 18:57:21 編集(投稿者)

お世話になってます。
テーブルの整形で質問させてください。

1行目は左に大きなスペースがあり、
2行目は右に大きなスペースがあるテーブルを作成したいのですが、うまくいきません。

試したのは以下の通りです。

1.colspanして、疑似3列にならないか。

<table>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
</table>

-> 2列のまま。

2.もう1行足して、その行は見えなくする。

<table>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td height="0"/>
<td />
<td />
</tr>
</table>

-> 上2行は期待通りの形になりますが、最終行が消えません。


お知恵を貸していただけませんか?
宜しくお願いいたします。
■No29864に返信(はまさんの記事)
colタグやcolgroupタグを利用されてはいかがでしょうか。
ブラウザの画面に出力されたものを画像で添付してみました。
期待されているのはこんな感じのものですか?

<html>
  <head>
    <style type="text/css">
      table {
        table-layout:fixed;
        border:solid 1px black;
        width:15em;
      }
      td {
        border:solid 1px gray;
      }
      .col1, .col2 {
        width:33%;
      }
      .col1 {
        background-color:pink;
      }
      .col2 {
        background-color:skyblue;
      }
      .col3 {
        background-color:lightgreen;
      }
    </style>
  </head>
  <body>
    <table>
      <col class="col1" />
      <col class="col2" />
      <col class="col3" />
      <tr>
        <td colspan="2">hoge</td>
        <td>fuga</td>
      </tr>
      <tr>
        <td>hoge</td>
        <td colspan="2">fuga</td>
      </tr>
    </table>
  </body>
</html>
添付ファイル: table.png (1 KB)
  • 題名: Re[2]: テーブルの整形
  • 著者: はま
  • 日時: 2012/02/16 10:12:02
  • ID: 29873
  • この記事の返信元:
  • この記事への返信:
    • (なし)
  • ツリーを表示
2012/02/16(Thu) 10:12:37 編集(投稿者)

もりおさん、お返事ありがとうございます。

ばっちり、画像の通りです。重ねたありがとうございます!
colタグは初めて知りました。お恥ずかしい。。。
解決済み!

DOBON.NET | プログラミング道 | プログラミング掲示板